Vue使用vue-drag-resize生成懸浮拖拽小球
更新時間：2022年04月18日 08:13:49 作者：ckw@ldy
這篇文章主要為大家詳細介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了使用vue-drag-resize生成懸浮拖拽小球的具體代碼，供大家參考，具體內容如下
一、下載依賴
cnpm install ?vue-drag-resize
二、main.js引用
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)三、創(chuàng)建組件
<template>
? <vue-drag-resize id="moreModal"
? ? ? ? ? ? ? ? ? ?:isResizable="false"
? ? ? ? ? ? ? ? ? ?:w="50"
? ? ? ? ? ? ? ? ? ?:h="50"
? ? ? ? ? ? ? ? ? ?:x="100"
? ? ? ? ? ? ? ? ? ?:y="100"
? ? ? ? ? ? ? ? ? ?:z="10000"
? ></vue-drag-resize>
</template>
<script>
export default {
? name: "FloatBall"
}
</script>
<style scoped>
#moreModal {
? width: 50px;
? height: 50px;
? border-radius: 50%;
? background-color: #337AB7;
? line-height: 40px;
? text-align: center;
? color: #fff;
? opacity: 0.6;
? animation: light 2s ease-in-out infinite alternate;
? cursor: pointer
}
@keyframes light {
? from {
? ? box-shadow: 0 0 4px #1f8cfa;
? }
? to {
? ? box-shadow: 0 0 20px #1f8cfa;
? }
}
#moreModal.active:before {
? content: "";
? width: 100%;
? height: 100%;
? top: 0;
? left: 0;
? outline: none;
}
</style>四、展示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue路由傳參的使用場景一般都是應用在父路由跳轉到子路由時,攜帶參數(shù)跳轉,下面這篇文章主要給大家介紹了關于Vue路由傳參的三種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法
KML 文件作為一種標準的地理數(shù)據(jù)格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了在vue中如何引入外部less文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中formdata傳值給后臺時參數(shù)為空的問題
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
這篇文章主要為大家詳細介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了vue 頁面跳轉的實現(xiàn)方式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
本文通過實例代碼給大家介紹了vue實現(xiàn)底部菜單功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要給大家介紹了關于vue3.0關閉eslint校驗的3種方法,在實際開發(fā)過程中,eslint的作用不可估量,文中將關閉的方法介紹的非常詳細,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇淺談vuex中store的命名空間，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11