====拖拽===

admin管理员组

文章数量:1122850

====拖拽===

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";Vue.config.productionTip = false;import axios from "axios";
Vue.prototype.$axios = axios;
//全局引入axiosimport Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);
//全局引入vantimport ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
//全局引入element-ui// 自定义指令Vue.directive('drag', function (el) {// 鼠标 点击的 el.onmousedown = (e) => {console.log(e);const { ox, oy } = {ox: e.clientX - el.offsetLeft,oy: e.clientY - el.offsetTop}// 监听鼠标的移动的事件document.onmousemove = (em) => {const { left, top } = {left: em.clientX - ox,top: em.clientY - oy}// 将鼠标 换成 小手el.style.cursor = 'pointer'el.style.left = left + 'px'el.style.top = top + 'px'}// 监听鼠标 抬起的事件  document.onmouseup = (eu) => {document.onmousemove = nullel.style.cursor = 'default'}}})new Vue({router,store,render: (h) => h(App),
}).$mount("#app");

<template><div @mousedown="show=false" class="home" @click="flag=0" :style="'background: url('+require('@/assets/'+imgmask+'.webp')+') no-repeat; background-size: 100% 100%;'"><div class="left"><span @click.stop="tabBtn(1)" :class="flag==1?'active' :''"><img src="/5.png" alt="">换皮肤</span><span @click.stop="tabBtn(2)" :class="flag==2?'active' :''"><img src="/4.png" alt="">浏览器</span></div><div class="cont" v-if="showbool" v-drag><mymodel @boolshowBtn="showbool=false" :title="'换皮肤'" @imgBtn="imgBtn"></mymodel></div><div class="footer"><img src="/6.png" alt="" @click="maskBtN"></div><div class="mask" v-show="show">菜单栏</div></div>
</template><script>
import mymodel from "@/components/mymodel";export default {name: "Home",data() {return {flag: 0,showbool: true,show: false,imgmask: "1"};},methods: {// tabtabBtn(num) {this.flag = num;if (num == 1) {this.showbool = true;}console.log(num);},// maskmaskBtN() {this.show = true;},// 换肤imgBtn(num) {this.imgmask = num;}},components: {mymodel}
};
</script>
<style lang="scss" scoped>
* {padding: 0;margin: 0;
}
.home {width: 100vw;height: 100vh;// background: url("../assets/1.webp") 50% 50% no-repeat;// background-size: 100% 100%;position: relative;.left {width: 40px;height: 100px;position: fixed;left: 20px;top: 20px;span {display: inline-block;width: 40px;height: 50px;text-align: center;font-size: 12px;color: #fff;margin-top: 10px;img {width: 30px;height: 30px;}}.active {background: red;}}.cont {position: absolute;left: calc(50vw - 200px);top: calc(50vh - 150px);}.footer {position: fixed;left: 0;bottom: 0;width: 100%;height: 30px;background-color: #0e171b;padding: 2px 10px;img {width: 20px;height: 20px;}}.mask {width: 120px;height: 200px;background-color: #fff;position: fixed;left: 0;bottom: 30px;}
}
</style>

本文标签： 拖拽