【优化】在封装的组件中使用自定义指令，根据传入的参数判断是否执行自定义指令

原先写了一个自定义指令，直接用效果很好

然后后期要求放在子组件中，通过变量控制是否需要加这个自定义指令

文字描述有点不直观，直接贴代码：

1、父组件是一个动态配置的列表，整体结构都贴出来了，但是最重要的就是一行代码
:chinese-directive=“item.prop == ‘commodity’?true:false”，通过字段判断哪一列的输入框需要添加自定义指令

<el-table
      ref="standTables"
      class="mblclass"
      border
      :data="tableData"
      :row-key="getRowKeys"
      @select-all="selectAll"
      @select="select"
      :header-cell-class-name="headercellClass"
      :cell-class-name="clearEditPadding"
      :header-cell-style="headerCellStyle"
      style="font-size: 14px"
    >
 <template v-for="(item, index) in columns">
        <el-table-column :key="index" :prop="item.prop" :label="$i18n.locale == 'en' ? item.titleEn : item.title" :min-width="item.width" :align="'center'">
                  <template slot-scope="scope">

        ...其他组件省略，如el-input，不重要
          <EditRemarkInput
                 v-else-if="item.prop == 'commodity'||item.prop == 'marksNo'"
                      v-model="scope.row[item.prop]"
                      :is-readonly="isDisabled"
                       :maxlength="getMaxlength(item.prop)"                  
                     :chinese-directive="item.prop == 'commodity'?true:false"//重点是这一行，其他的都不重要
                    ></EditRemarkInput>
                    </template>
        </el-table-column>
      </el-table>   

2、EditRemarkInput子组件中

 <el-input 
 type="textarea" 
 v-model="textareaStr" 
 :readonly="isReadonly"  
 :maxlength="maxlength"
 v-no-chinese="chineseDirective"
    />

 props: {
  maxlength:{
      type:Number,
      default:null
    },
    chineseDirective: {
      type: Boolean,
      default: false,
    },

 directives: {
    // 1、不可以输入中文，2、不可以输入额外的回车符号
    'no-chinese': {
      bind: function (el,binging) {
        if(binging.value){
          el.addEventListener('input', function (e) {
          let value = e.target.value
          let nonEnglishRegex = /[^a-zA-Z0-9 -_]/g
          value = value.replace(nonEnglishRegex, '')
          e.target.value = value
        })
        }
      },
    },  
  },

3、注意点：

一开始没有通过参数判断的时候，directives的bind我只写了el一个参数，然后发现传进来的变量不管true或false，都执行了自定义命令，这是因为我没有加第二个参数binging

关于自定义指令：

bind 函数可以接受三个参数

el (DOM Element): 这是指令所绑定的元素，是一个真实的 DOM 节点。在这个参数中，可以进行添加事件监听器、修改 DOM 样式或结构等操作。

binding (Object): 这个对象包含了与指令相关的一些信息，具体如下：

name (String): 指令的名称，不包括 v- 前缀。例如，对于 v-my-directive，name 的值将是 “my-directive”。

value (any): 指令的值，即在模板中 v-my-directive 后面括号内的值。如果指令没有值，则 value 为 undefined。

oldValue (any): 如果正在更新的元素之前已经绑定了相同名称的指令，oldValue 将是上一个指令的值。

expression (String): 指令的表达式，它是与 value 相对应的字符串。如果 value 是通过计算属性或方法得到的，那么 expression 就是计算属性或方法的字符串表示。

arg (String | undefined): 指令参数，如果有的话。例如，在 v-my-directive:foo 中，arg 的值将是 “foo”。

modifiers (Object): 一个包含一个或多个修饰符的对象，这些修饰符以驼峰式命名。例如，v-my-directive.foo.bar 将会在 modifiers 对象中有两个属性：foo 和 bar，它们的值都是 true。

vnode (VNode): 绑定指令的虚拟节点（Virtual Node），它代表了真实的 DOM 元素。可以使用它来获取子节点或检查其他相关的属性。

vnode (VNode): 这是与指令绑定的虚拟节点，它代表了要被操作的 DOM 元素。vnode 参数提供了关于当前节点的详细信息，包括它的标签名、属性、子节点等。这个参数通常用于更深入地了解绑定指令的上下文。