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

在Vue的老项目中,为实现自定义指令v-copy与国际化(i18n)功能的结合,需要在指令的bind方法中传入第三个参数vNode,通过vNode.context获取Vue实例,并调用自定义的i18n实例对象,以实现国际化字段的提示。
摘要由CSDN通过智能技术生成

老项目业务代码写的自定义指令,想在指令里面获取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';
   te
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值