5e怎么绑定一键跳投_一个 Vue 自定义指令实现一键 Copy的功能
话不多说先看效果,这个效果是用在真实项目中的实际效果哈:
指令是啥?
按照惯例,先请出官方的解释:
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
再按照惯例,大家 ( 假装 ) 看不懂,然后我来举个栗子解释一番。。。好,还是不知所云,本文结束 ( Ctrl + F4 ) ,下一篇。
为了避免上述情况出现,就不解释了。实际上官方提供了很多内置指令,如:v-if、v-for、v-bind and so on。每一个指令都有自己特定的功能。
自定义指令
顾名思义就是自己定义的指令啦,可以实现我们想要的功能。下面就实现一个 一键 Copy 的功能吧。
生命周期
首先简单瞟一下指令的语法,每个指令都有自己的生命周期,看到生命周期,肯定会想到钩子函数,没错,指令也提供了钩子函数:
- bind:指令第一次绑定到元素时调用,此钩子只会调用一次。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
下面再简单瞟一眼上述钩子函数的参数:
- el:指令所绑定的元素,可以用来直接操作 DOM 。
- binding:一个对象,包含以下属性:
- 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 }。
- vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
看起来还挺多的,不过别方,其实常用的就几个。好了下面要开始表演了:
首先建一个 js 文件(v-copy.js)。定义一个对象。( 指令实际就是一个对象 )
import { Message } from 'ant-design-vue';
const vCopy = { // 名字爱取啥取啥/*bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置el: 作用的 dom 对象value: 传给指令的值,也就是我们要 copy 的值*/bind(el, { value }) {el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到el.handler = () => {if (!el.$value) {// 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意Message.warning('无复制内容');return;}// 动态创建 textarea 标签const textarea = document.createElement('textarea');// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域textarea.readOnly = 'readonly';textarea.style.position = 'absolute';textarea.style.left = '-9999px';// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value = el.$value;// 将 textarea 插入到 body 中document.body.appendChild(textarea);// 选中值并复制textarea.select();textarea.setSelectionRange(0, textarea.value.length);const result = document.execCommand('Copy');if (result) {Message.success('复制成功');}document.body.removeChild(textarea);};// 绑定点击事件,就是所谓的一键 copy 啦el.addEventListener('click', el.handler);},// 当传进来的值更新的时候触发componentUpdated(el, { value }) {el.$value = value;},// 指令与元素解绑的时候,移除事件绑定unbind(el) {el.removeEventListener('click', el.handler);},
};
export default vCopy;
到这里,一键 Copy 的功能就实现了,最后再说一嘴怎么将自定义指令注册到全局:再新建一个 js ( directives.js )文件来注册所有的全局指令。
import copy from './v-copy';
// 自定义指令
const directives = {copy,
};
// 这种写法可以批量注册指令
export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key]);});},
};
最后,在 main.js 中这样引入
import Vue from 'vue';
import Directives from './directives';
Vue.use(Directives);
最后的最后,说一下怎么用吧
<template><button v-copy="copyText">copy</button>
</template>
<script>
export default {data() {return {copyText: '要 Copy 的内容',};},
};
</script>
5e怎么绑定一键跳投_一个 Vue 自定义指令实现一键 Copy的功能相关推荐
- vuejs 指令封装 button 加载效果_这些Vue自定义指令,让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
- vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单
前言 浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就想着能不能像vue的内置指 ...
- 如何写一个Vue自定义指令
Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不 ...
- fastnest怎么一键排版_一个简单的宏实现一键排版(整理复盘)
[TOC] 宏和VBA的区别 宏是一个或多个指令的集合,控制word执行一连串的操作 VBA是高级语言,通过面向对象的方法来完成宏不能完成的工作. VBA宏会被VB编辑器记录为一个VBA过程 一键排版 ...
- vue自定义指令复制内容
今天给大家推荐一个vue自定义指令复制的内容,很多小伙伴都喜欢用指令或者组件写, 一. 新建文件夹 1.在scr下新建一个components文件夹,(src/components) 2.在comp ...
- clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
- pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于 神奇的程序员 前言 浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸 引言 页面布局 drag.js文件 弹窗拖拽实现及边界限制 鼠标指针悬停样式 四边拉伸及对角线拉伸 拉伸干涉 引言 近期公司vue前端项目需求:实现 ...
最新文章
- 想成为全栈工程师,要做到哪几点?
- aix如何安装mysql_AIX下安装Mysql
- hdu 1078 FatMouse and Cheese(记忆化搜索)
- appium连接真机时,报错:error: device unauthorized.
- json 转换 java odl_opendaylight:如何查看配置数据库
- 阿克曼函数求解(递归和非递归)
- 【noi.ac #1759】ZYB的测验计划
- IC卡和ID卡的区别
- 惠普触控板使用指南_惠普笔记本关闭触摸板【操作思路】
- 我写了一个套路,助你随心所欲运用二分搜索
- 微电子电路——期中总结
- 成都春熙路刀客事件PS照片集
- 直播app源代码,手机屏幕截取并保存到手机相册
- CF 597A Divisibility
- 解决:网络文件夹目前是以其他用户名和密码进行映射的
- FPGA---Spartan6系列之GTP Transceiver
- Zemax学习笔记(15)- ZEMAX设计光谱仪
- 【AIMP3】推荐一款Windows下的优质音乐播放器
- Debezium同步之postgres到oracle的同步
- Apache POI 实现报表导入和导出
热门文章
- funcode坐标c语言,c语言程序设计_坦克大战(提高篇)(funcode环境)
- Cell子刊:微生物来源的细菌素靶向宿主抗早期断奶仔猪腹泻研究
- Android 大前端进化史
- Arduino程序设计(一) 流水灯+呼吸灯
- docker05(docker仓库创建和管理)
- android debug 签名,Android debug签名和release签名
- TP LINK TL SG3452 CONSOLE 超级终端查管理IP命令
- html,js文件缓存解决,html是如何实现自动清理js、css文件缓存的
- 原生JAVASCRIPT操作cookie方法
- Java Swing GUI 俄罗斯方块游戏(重制版)