欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue组件大全(持续更新)

程序员文章站 2022-07-02 18:47:27
...

前言:

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>