【原创纯手打】如何用VUE在拖拽小框中同步更换壁纸（附代码）

终极萌萌暴龙战士

已于 2022-08-23 20:07:16 修改

阅读量325

点赞数 1

文章标签： vue.js javascript 前端框架前端

于 2022-08-15 19:31:29 首次发布

本文链接：https://blog.csdn.net/weixin_60341434/article/details/126352971

版权

Vue.js vue-drag-resize 拖拽布局图片处理前端开发

关键词由CSDN通过智能技术生成

先看效果图

先安装vue-drag-resize插件，如果不安装插件，我们写鼠标拖拽就会相对麻烦一些

cnpm install --save vue-drag-resize

然后在main.js中加入

import VueDragResize from 'vue-drag-resize';
Vue.component('vue-drag-resize', VueDragResize);

这样当引入的时候只需要import VueDragResize from "vue-drag-resize";就好了

当排版布局后，我们可以把鼠标点击的拖拽小框的图片排列成一个数组，然后当点击时获取其中的图片链接，并添加到新属性中，然后在背景中url=新属性

<template>
  <div>
    <div class="box" :style="{'background':'url('+arr+')','background-size':'cover'}" >
      <VueDragResize
      :isActive="true" 
      :isResizable="false" 
      class="rice" 
      :style="{'background':'url('+arr+')','background-size':'cover'}" 
      >
        <img :src="item" v-for="(item,index) in bg" :key="index" @click="top(item)">
      </VueDragResize>
    </div>
  </div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
export default {
  name: "Vue",
  data() {
    return {
      bg:[
        '/img/wall-0.jpg',
        '/img/wall-1.jpg',
        '/img/wall-2.jpg',
      ],
      arr:""
    };
  },
  mounted() {},
  methods: {
    top(item){
      this.arr=item
    }
  },
  components: {
    VueDragResize,
  },
};
</script>
<style lang='scss' scoped>
body,html{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.rice{
  width: 630px;
  height: 430px;
  border: 20px solid black;
  display: flex;
}
img{
  width: 130px;
  height: 130px;
  border: 1px solid black;
}
.box{
  width: 100%;
  height: 1200px;
  background-size : contain;
}
</style>

成功！！！！！