Vue使用vue-drag-resize生成懸浮拖拽小球
更新時(shí)間：2022年04月18日 08:13:49 作者：ckw@ldy
這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了使用vue-drag-resize生成懸浮拖拽小球的具體代碼，供大家參考，具體內(nèi)容如下
一、下載依賴
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>四、展示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法
這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
setup函數(shù)是一個(gè)新的組件選項(xiàng),作為在組件內(nèi)使用Composition Api的入口點(diǎn),下面這篇文章主要給大家介紹了關(guān)于vue3.0中setup的兩種用法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法
本文主要介紹了el-form resetFields無(wú)效和validate無(wú)效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
這篇文章主要介紹了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件開發(fā)之tab切換組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格過濾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法
最近使用vue做用戶的登錄/退出,在開發(fā)過程中遇到的一些問題,記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法,需要的朋友可以參考下2022-09-09