拖拽代码还原

按需引入

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;
//全局引入axios
 
import Vant from "vant";
import "vant/lib/index.css";
Vue.use(Vant);
//全局引入vant
 
 
import 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 = null
 
      el.style.cursor = 'default'
 
    }
 
  }
 
})
 
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

template（视图层）

<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（逻辑层）

<script>
import mymodel from "@/components/mymodel";
 
export default {
  name: "Home",
  data() {
    return {
      flag: 0,
      showbool: true,
      show: false,
      imgmask: "1"
    };
  },
  methods: {
    // tab
    tabBtn(num) {
      this.flag = num;
      if (num == 1) {
        this.showbool = true;
      }
      console.log(num);
    },
    // mask
    maskBtN() {
      this.show = true;
    },
    // 换肤
    imgBtn(num) {
      this.imgmask = num;
    }
  },
  components: {
    mymodel
  }
};
</script>

css（样式层）

<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>