vue自定义指令--动态参数绑定

在企业微信侧边栏应用中,给`dialog`添加了拖拽功能,但是因为`dialog`高度超过了页面高度,所以高度100%时拖拽有个bug--自动贴到窗口顶部而且企业侧边栏宽高都有限制,拖拽效果并不理想,所以就想缩小`dialog`再进行拖拽。

拖拽的指令是自定义的,原本想像绑定`class`一样根据一个参数来动态绑定指令,发现没有这种功能。后来看了文档,可以给指令动态传递参数,根据传递的参数来判断之后的行为。

自定义指令 — Vue.js

封装的指令在组件中引用

dialogDrag是自定义的指令名称

zoom是传递的参数

在`doalog`标题行添加放大缩小图标,并添加事件,缩小时才添加拖拽功能,zoom初始值为false,

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

我们可以在bind方法中判断是否添加拖拽功能

  • binding:一个对象,包含以下 property:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

 在`update`钩子函数中更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA和Android studio怎么去掉usage和作者提示

截止到目前我已经写了 600多道算法题,其中部分已经整理成了pdf文档,目前总共有1000多页(并且还会不断的增加),大家可以免费下载 下载链接:https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取码&#xf…

java处理CSV文件

文章目录 1. 方法2. maven依赖3. 示例代码 1. 方法 opencsv–>CSVParser&#xff1b;commons-csv–>CSVReader&#xff1b;有时候文本里有逗号可能会导致错误分割 2. maven依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>…

457. 环形数组是否存在循环

457. 环形数组是否存在循环 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;经验吸取 原题链接&#xff1a; 457. 环形数组是否存在循环 https://leetcode.cn/problems/circular-array-loop/description/ 完成情况&#xff1a; 解题思路…

使用Pandas进行数据清理的入门示例

数据清理是数据分析过程中的关键步骤&#xff0c;它涉及识别缺失值、重复行、异常值和不正确的数据类型。获得干净可靠的数据对于准确的分析和建模非常重要。 本文将介绍以下6个经常使用的数据清理操作&#xff1a; 检查缺失值、检查重复行、处理离群值、检查所有列的数据类型…

explicit关键字 和 static成员

explicit关键字 和 static成员 1、explicit 关键字2、static成员&#xff08;静态成员变量属于类的&#xff08;只有所属这个类的对象才能修改&#xff09;&#xff0c;不同于全局变量&#xff08;任何对象都能修改&#xff09;&#xff09;2.1 定义和性质2.2 静态成员的使用场…

opencv进阶02-在图像上绘制多种几何图形

OpenCV 提供了方便的绘图功能&#xff0c;使用其中的绘图函数可以绘制直线、矩形、圆、椭圆等多种几何图形&#xff0c;还能在图像中的指定位置添加文字说明。 OpenCV 提供了绘制直线的函数 cv2.line()、绘制矩形的函数 cv2.rectangle()、绘制圆的函数cv2.circle()、绘制椭圆的…

【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?

云原生时代下的Java"拯救者" 在云原生时代&#xff0c;其实Java程序是有很大的劣势的&#xff0c;以最流行的spring boot/spring cloud微服务框架为例&#xff0c;启动一个已经优化好&#xff0c;很多bean需要lazy load的application至少需要3-4秒时间&#xff0c;内…

广西一公司泄露22万个人信息,被罚23万

近日&#xff0c;广西北海公安网安部门发现&#xff0c;北海某公司网站存在严重数据泄露问题&#xff0c;约22万个人信息数据已挂在暗网售卖。 经查&#xff0c;涉案公司主要提供网上咨询服务&#xff0c;在日常工作中收集了个人和企业等大量公民信息&#xff0c;但公司存放数…

【算法题】2547. 拆分数组的最小代价

题目&#xff1a; 给你一个整数数组 nums 和一个整数 k 。 将数组拆分成一些非空子数组。拆分的 代价 是每个子数组中的 重要性 之和。 令 trimmed(subarray) 作为子数组的一个特征&#xff0c;其中所有仅出现一次的数字将会被移除。 例如&#xff0c;trimmed([3,1,2,4,3,4…

一站式自动化测试平台-Autotestplat

3.1 自动化平台开发方案 3.1.1 功能需求 3.1.3 开发时间计划 如果是刚入门、但有一点代码基础的测试人员&#xff0c;大概 3 个月能做出演示版(Demo)进行自动化测试&#xff0c;6 个月内胜任开展工作中项目的自动化测试。 如果是有自动化测试基础的测试人员&#xff0c;大概 …

python序列化反序列化和异常处理笔记

迭代器 迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置的对象。迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。迭代器只能往前不会后退。 1. 可迭代对象 我们已经知道可以对list、tuple、str等类型的数据使用for...in...的…

面试热题(数组中的第K个最大元素)

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 输入: [3,2,1,5,6,4] 和 k 2 输出: 5提到数组中最大元素&#xff0c;我们往往想到就是先给数组…

判断自己网络所在的NAT类型

文章目录 各NAT类型介绍软件准备流程 各NAT类型介绍 NAT0: OpenInternet&#xff0c;没有经过NAT地址转换&#xff0c;公网IP NAT1: Full Cone NAT&#xff0c;动态家宽可以达到最优的状态&#xff0c;外网设备可以主动发信息给NAT1网络内的设备。 NAT2: Address-Restricted C…

什么是JavaScript中的柯里化(Currying)和偏函数应用(Partial Application)?它们在JavaScript中有哪些应用场景?

1、什么是JavaScript中的柯里化(Currying)和偏函数应用(Partial Application)&#xff1f;它们在JavaScript中有哪些应用场景&#xff1f; 柯里化&#xff08;Currying&#xff09;和偏函数应用&#xff08;Partial Application&#xff09;是函数式编程中的两个重要概念&…

Mybatis 源码 ④ :TypeHandler

文章目录 一、前言二、DefaultParameterHandler1. DefaultParameterHandler#setParameters1.1 UnknownTypeHandler1.2 自定义 TypeHandler 三、DefaultResultSetHandler1. hasNestedResultMaps2. handleRowValuesForNestedResultMap2.1 resolveDiscriminatedResultMap2.2 creat…

K8S系列二:实战入门

写在前面 本文是K8S系列第二篇&#xff0c;主要面向对K8S新手同学&#xff0c;阅读本文需要读者对K8S的基本概念&#xff0c;比如Pod、Deployment、Service、Namespace等基础概念有所了解。尚且不熟悉的同学推荐先阅读本系列的第一篇文章&#xff1a;《K8S系列一&#xff1a;概…

远程控制医疗行业应用解析:如何满足医院合规需求?

远程控制医疗行业应用解析&#xff1a;如何满足医院合规需求&#xff1f; 作为一个起源于IT行业的技术&#xff0c;以远程桌面为基础的远程控制技术目前在医疗领域也已经有了比较广阔的应用前景&#xff0c;尤其是在医疗数字化系统/设备的远程运维场景&#xff0c;已经有了一些…

如何正确下载tomcat???

亲爱的小伙伴&#xff0c;千万别再去找下网站下载啦&#xff0c;这样詪容易携带病毒。 我们去官方网址下载。 Apache Tomcat - Welcome! 最后下载解压即可。。。

正则表达式学习详解

正则表达式 正则表达式&#xff08;Regular Expression&#xff09;&#xff0c;通常简称为正则或正则表达式&#xff0c;是一种用于描述字符串模式的工具。它是由一系列字符和特殊字符组成的字符串&#xff0c;用于定义搜索模式或进行字符串匹配、替换、提取等操作。 正则表…

2024软考系统架构设计师论文写作要点

一、写作注意事项 系统架构设计师的论文题目对于考生来说&#xff0c;是相对较难的题目。一方面&#xff0c;考生需要掌握论文题目中的系统架构设计的专业知识;另一方面&#xff0c;论文的撰写需要结合考生自身的项目经历。因此&#xff0c;如何将自己的项目经历和专业知识有机…