Vue组件大全（持续更新）

前言：

1、安装插件

npm install --save qrcode

2、卸载插件

npm uninstall qrcode

1.vue-draggable-resizable
功能：可实现鼠标拖拽DIV，滚轮放缩小DIV
安装方法：

npm install --save vue-draggable-resizable

main.js配置方法

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

vue使用

 <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
            <vue-draggable-resizable
                w="auto"
                h="auto"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :resizable="false"
            >
           		 <div>此处为目标div</div>
            </vue-draggable-resizable>
  
<script>
import VueDraggableResizable from "vue-draggable-resizable";//引入

methods: {
        handleTableWheel(event) {
            let obj = this.$refs.table;
            return this.tableZoom(obj, event);
        },
        tableZoom(obj, event) {
            // 一开始默认是100%
            let zoom = parseInt(obj.style.zoom, 10) || 100;
            // 滚轮滚一下wheelDelta的值增加或减少120
            zoom += event.wheelDelta / 12;
            if (zoom > 0) {
                obj.style.zoom = zoom + "%";
            }
            return false;
        },
        // 单击单元格事件（用于测试拖拽是否阻止了表格默认事件，无关紧要）
        handleCellClick(row) {
            this.$Message.info("你点击了" + row.name);
        }
    }
</script>
<style>
//去除边框
.vdr { 
    border: none;
}
</style>