vue-draggable-resizable 拖拽缩放插件_vue-draggable-resizable 插件使用demo-程序员宅基地

技术标签: vue  vue.js  javascript  

安装:
npm install --save vue-draggable-resizable
第一种:基本使用:

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {
   { x }} / Y: {
   { y }} - Width: {
   { width }} / Height: {
   { height }}</p>
    </vue-draggable-resizable>
  </div>
</template>
 
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
 
export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components:{VueDraggableResizable },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

第二种: 滚轮缩放

<template>
    <div class="is">
        <div
            style="height: 800px; width: 100%; border: 1px solid #000; position: relative; overflow: hidden;background-color: #03071C"
        >
            <!-- 引入组件. 
            :lock-aspect-ratio="true":锁定纵横比例 
            :resizable="false": 不可缩放
            -->
            <vue-draggable-resizable
                w="auto"
                h="auto"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :resizable="false"
            >
                <div class="table" ref="table" @wheel.prevent="handleTableWheel($event)">
                    <div style="width:400px;height:400px;border:1px solid #333">11111</div>
                    <!-- <img src="@/assets/test.png" alt=""> -->
                </div>
            </vue-draggable-resizable>
        </div>
    </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
export default {
    name: "test1",
    data() {
        return {
        };
    },
    mounted() {},
    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;
        },
    }
};
</script>


参数:
1.active–是否激活

Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :active="true">

2.draggable–是否可拖拽

Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :draggable="false">

3.resizable–是否可缩放
Type: Boolean
Required: false
Default: true

<vue-draggable-resizable :resizable="false">

4.w–初始宽度
Type: Number
Required: false
Default: 200

<vue-draggable-resizable :w="200">

5.h–初始高度
Type: Number
Required: false
Default: 200

<vue-draggable-resizable :h="200">

6.minw–最小宽度
Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minw="50">

7.minh–最小高度
Type: Number
Required: false
Default: 50

<vue-draggable-resizable :minh="50">

8.x–初始位移x
Type: Number
Required: false
Default: 0

<vue-draggable-resizable :x="0">

9.y-初始位移y
Type: Number
Required: false
Default: 0

<vue-draggable-resizable :y="0">

10.z–显示层级
Type: Number|String
Required: false
Default: auto

<vue-draggable-resizable :z="999">

11.handles–控制区域
Type: Array
Required: false
Default: [‘tl’, ‘tm’, ‘tr’, ‘mr’, ‘br’, ‘bm’, ‘bl’, ‘ml’]

tl - Top left
tm - Top middle
tr - Top right
mr - Middle right
br - Bottom right
bm - Bottom middle
bl - Bottom left
ml - Middle left

<vue-draggable-resizable :handles="['tm','bm','ml','mr']">

12:axis–设置拖拽方向(x,y,both)
Type: String
Required: false
Default: both

<vue-draggable-resizable axis="x">

13: grid–网格移动
Type: Array
Required: false
Default: [1,1]

<vue-draggable-resizable :grid="[1,1]">

14: parent–限制在父元素内移动
Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :parent="true">

15:dragHandle–定义拖拽元素
Type: String
Required: false

<vue-draggable-resizable drag-handle=".drag">

16: dragCancel–定义应用于防止拖动初始化的选择器。
Type: String
Required: false

<vue-draggable-resizable drag-cancel=".drag">

17: maximize–如果设置为true,则双击时允许组件填充其父组件
Type: Boolean
Required: false
Default: false

<vue-draggable-resizable :maximize="true">

事件:
1.activated
Required: false
Parameters: -

每当单击组件时调用,以显示句柄

<vue-draggable-resizable @activated="onActivated">

2.deactivated
Required: false
Parameters: -

每当用户单击组件外部的任何位置以停用组件时调用。

<vue-draggable-resizable @deactivated="onDeactivated">

3.resizing
Required: false
Parameters:

X位置
Y位置
元素的宽度
元素高度
每当调整组件的大小时调用。

<vue-draggable-resizable @resizing="onResizing">

4.resizestop
Required: false
Parameters:

X位置
Y位置
元素的宽度
元素高度
组件停止调整大小时调用

<vue-draggable-resizable @resizestop="onResizstop">

5.dragging
Required: false
Parameters:

X位置
Y位置
拖动组件时调用

<vue-draggable-resizable @dragging="onDragging">

6.dragstop
Required: false
Parameters:

X位置
Y位置
停止拖动时调用

<vue-draggable-resizable @dragstop="onDragstop">

引用:https://www.npmjs.com/package/vue-draggable-resizable#demo

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c_qianxia5040/article/details/120702760

智能推荐

Navicat premium12 的下载与破解_navicat premium 12.rar-程序员宅基地

文章浏览阅读1.2k次。若使用Navicat Premium 12.0.29请转至Navicat Premium 12.0.29安装与激活,其实每个小版本更迭变化不大。另外最重要的是,请仔细阅读本文激活部分,总有一些人遇到低级错误。本文介绍Navicat Premium 12.0.18与Navicat Premium 12.0.24的安装、激活与基本使用。博主将两篇博文合并,故Navicat Premium..._navicat premium 12.rar

223. Rectangle Area_数据库创建一个函数rectangle_area,计算长方形的面积。-程序员宅基地

文章浏览阅读286次。(1)模拟相交;(2)不要遗漏重叠的情况。int computeArea(int A, int B, int C, int D, int E, int F, int G, int H) { int areaOfA = (C - A) * (D - B); int areaOfB = (G - E) * (H - F); ..._数据库创建一个函数rectangle_area,计算长方形的面积。

安装软件提示计算机管理员权限,安装需要管理员权限怎么办 设置安装软件需要管理员权限的方法教程...-程序员宅基地

文章浏览阅读1.9w次。在使用笔记本电脑的时候,经常会在安装软件或者对文件进行操作时,系统会提示“需要管理员权限”,这会让我们感觉到很烦。明明已经使用了管理员账户登录了,那要怎么解决这个管理员权限的问题。今天小编给大家带来了设置安装软件需要管理员权限的解决方法,感兴趣的一起往下看看吧。怎么设置安装软件需要管理员权限右键点击开始按钮,在弹出菜单中选择运行菜单项在打开的运行窗口中,输入命令gpedit.msc,然后点击确定按..._您需要具备管理员权限才能为此解释器安装软件包,不妨改为按项目

【python模块】 伪数据生产者:faker模块_python faker.word-程序员宅基地

文章浏览阅读826次,点赞3次,收藏13次。faker模块主要是用来创建伪数据,无需手动生成或者手写随机数来生成数据,可以利用faker快速完成伪造大量测试数据的工作。一、虚拟环境内用百度源安装(py_100) PS E:\python_100> pip install Faker -i https://mirror.baidu.com/pypi/simpleLooking in indexes: https://mirror.baidu.com/pypi/simpleCollecting Faker Downloading htt_python faker.word

pythonswapcase_Python swapcase()-字符串大小写翻转函数-程序员宅基地

文章浏览阅读910次,点赞2次,收藏2次。Python中 swapcase()函数的作用是把一个字符串中的字母大小写形式进行翻转。即该函数会把字符串中原来所有的大写形式的字母字符变成小写形式,而所有的小写形式的字母字符变成大写形式,并返回一个新的字符串。该函数不会影响原字符串的内容和形式。一、swapcase()函数的语法格式str.swapcase()str:str是给定的要进行大小写翻转的字符串或字符串变量。参数:该函数没有参数返回值..._swapcase函数python

[bzoj2502]清理雪道 最小流_bzoj2502清理雪道-程序员宅基地

文章浏览阅读251次。劳动最大的益处还在于道德和精神上的发展。这种精神发展是由和谐的劳动产生的,它应当构成无产阶级社会公民区别于资产阶级社会公民的那种人的特质。_bzoj2502清理雪道

随便推点

Ubuntu Git的安装与使用_bionic安装git-程序员宅基地

文章浏览阅读195次。First,确定你的系统中是否有git,简单通过git命令查看$ git没有git的话,系统会给出提示。如果没有git,通过在命令行输入 sudo apt-get install git 命令安装git。$ sudo apt-get install git安装后,配置git$ git config --global user.name "your name"$ gi..._bionic安装git

安装jenkins采坑合集_"jenkins_user=\"jenkins"-程序员宅基地

文章浏览阅读813次。安装jenkins采坑合集不晓得是运气差还是运气好,别人安装jenkins那是手到擒来,毫不费力,到我这就是凡是有坑的地方,我都准确踩了,不得佩服啊,当浮一大白。为了其他伙伴,特别是才接触jenkins的不再踩坑,我九特地的把这些坑给掀开,避免大家再去踩。当然,有些问题的解决,我也是看了其他博主的解决方案,是站在了巨人的肩膀上,才顺利的解决了这些问题,我只是搬运工和集成工,谢谢其他贡献了解决方案的伙伴,唠叨完了,进入正题。一、安装环境操作系统: CentOS Linux release 7.6.181_"jenkins_user=\"jenkins"

计算机软件与理论调剂,2021汕头大学计算机软件与理论081202考研调剂信息-程序员宅基地

文章浏览阅读108次。招生信息学校名称:汕头大学学校省份:广东学校层次:普通院校;学院名称:专业名称:计算机软件与理论专业代码:081202专业类型:None招生类别:None调剂招收人数:专业及招生详情研究方向:(01)人工智能(02)现代网络与信息安全(03)数据科学备注:一、预调剂专业预计我校公共管理硕士暂时不需要调剂,学科教学(语文)、学科教学(英语)、教育管理暂时未确定是否需要调剂,其他专业都接受调剂,调剂名..._汕头大学计算机软件与理论

针对工控领域的电子元器件国产化的讨论内容记录及国产FPGA厂家介绍_紫光同创对标k系列-程序员宅基地

文章浏览阅读1k次。小编跟一些比较厉害的技术大佬们进行了交流,目前工控领域的电子元器件国产化最主要的痛点还是集中在FPGA,本文就FPGA的国产化进行简单介绍。_紫光同创对标k系列

安装BeEF后起首次启动失败的解决记录_beef无法登录-程序员宅基地

文章浏览阅读2.1k次。安装BeEF后启动失败问题安装BeEF后起首次启动失败。解决方法1、# apt --fix-broken install2、启动Apache服务3、启动BeEF问题安装BeEF后起首次启动失败。解决方法在shell中 进行如下操作1、# apt --fix-broken install原本计划的是卸载了重新安装,存在依赖问题删不了,系统提示了这条命令2、启动Apache服务 # service apache2 start3、启动BeEF # bee_beef无法登录

FireDAC 学习 - 4:属性继承_firedac fetch options-程序员宅基地

文章浏览阅读2k次。我们知道,TFdQuery 是通过 TFdConnection 去连接数据库的。而 TFdConnection 连接数据库的参数,可以通过 TFdManager 获得。打开前面的例子程序,在设计期,选择 FdQuery1,看看其属性面板,有一个属性:FetchOptions,这个属性可以拉开,里面有一堆属性可以设置。选中 FdConnection1,查看其属性面板,也有一个 FetchOptions 属性;选中 FdManager1 查看其属性面板,也有一个 FetchOptions 属性。_firedac fetch options

推荐文章

热门文章

相关标签