vue 如何动态的给子组件设置不同的指令？

  • Z时代
  • 2024-03-15
  • 分类：IT

比如我创建了几个指令
v-number,v-text
来限制输入不同的文本

此时我遍历生成子组件的时候，要根据不同的type来配置不一样的指令，这个需求要如何实现？

如果我的指令还包含参数，比如可以通过下面不同的字段
v-input:number、v-input:text
在指令内部进行处理

但是主要问题还是在于动态渲染组件的时候如何动态配置不同的指令，以及指令不同的传参？

回答：

Vue.directive('input', {
  bind(el, binding) {
    if (binding.arg === 'number') {
      // 数字输入处理
      el.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
      });
    } else if (binding.arg === 'text') {
      // 文本输入处理
    }
  }
});

组件里：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input :v-input="item.directive" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, type: 'number', directive: { arg: 'number', value: '' } },
        { id: 2, type: 'text', directive: { arg: 'text', value: '' } }
      ]
    };
  }
};
</script>

以上是 vue 如何动态的给子组件设置不同的指令？ 的全部内容， 来源链接： utcz.com/p/934944.html

回到顶部