老项目业务代码写的自定义指令，想在指令里面获取vue实例，来提示国际化字段。直接打印this是不行的。需要在bing(el, { value }, vNode)里写上第三个参数

获取this 就是Vue实例。想获取定义的$t 就需要找到Vue实例

获取如下

Vue-Html

<a-button v-copy="this.link">{{ $t('record.copy') }}</a-button>

Vue实例并调取自定义i18n实例对象

let vueNodeObj = vNode.componentInstance.$root
// 获取i18n方法
vueNodeObj.$t('key', {count: 5})

const copy = {bind(el, { value }, vNode) {el.$value = value;el.handler = () => {if (!el.$value) {// Message.warning(this.$t('visit.copy.no'));Message.warning(vNode.componentInstance.$root.$t('visit.copy.no'));return;}// 动态创建 textarea 标签const textarea = document.createElement('textarea');textarea.readOnly = 'readonly';textarea.style.position = 'absolute';textarea.style.left = '-9999px';textarea.value = el.$value;document.body.appendChild(textarea);// 选中值并复制textarea.select();textarea.setSelectionRange(0, textarea.value.length);const result = document.execCommand('Copy');if (result) {Message.success(vNode.componentInstance.$root.$t('visit.copy.success'));//  vNode.componentInstance.$root.$toast(vNode.componentInstance.$root.$t('visit.copy.success'))}document.body.removeChild(textarea);};// 绑定点击事件el.addEventListener('click', el.handler);},// 当传进来的值更新的时候触发componentUpdated(el, { value }) {el.$value = value;},// 指令与元素解绑的时候，移除事件绑定unbind(el) {el.removeEventListener('click', el.handler);},
}

directives

directives: {copy
}

Vue 自定义指令里面获取Vue实例实现v-copy与i18n结合。相关推荐

vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
[Vue]自定义指令
前言系列文章目录: [Vue]目录老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao ...
vue自定义指令（详解）
vue自定义指令,核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性, 所以自定义指令,就是自己亲手对原生操作dom进行了一次封 ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸引言页面布局 drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求:实现 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...

Vue 自定义指令里面获取Vue实例实现v-copy与i18n结合。

老项目业务代码写的自定义指令，想在指令里面获取vue实例，来提示国际化字段。直接打印this是不行的。需要在bing(el, { value }, vNode)里写上第三个参数

Vue-Html

Vue实例并调取自定义i18n实例对象

directives

Vue 自定义指令里面获取Vue实例实现v-copy与i18n结合。相关推荐

最新文章

热门文章

Vue 自定义指令里面获取Vue实例 实现v-copy与i18n结合。

老项目业务代码写的自定义指令，想在指令里面获取vue实例，来提示国际化字段。直接打印this是不行的。需要在bing(el, { value }, vNode)里写上第三个参数

Vue-Html

Vue实例并调取自定义i18n实例对象

directives

Vue 自定义指令里面获取Vue实例 实现v-copy与i18n结合。相关推荐

最新文章

热门文章

Vue 自定义指令里面获取Vue实例实现v-copy与i18n结合。

Vue 自定义指令里面获取Vue实例实现v-copy与i18n结合。相关推荐