VUE-多个页面引用同一组件，但组件宽度不同时，使用directive指令指定宽度值

• 功能说明：

1、上部分tab 标签是一个组件component:{ tabCom }；

2、下部分查询条件是一个组件component:{ searchCom }，而输入框作为一个单独的组件component:{ inputCom }嵌套在search组件中；

3、在不同的tab 标签下，输入框的宽度不同，如【通讯录】下100%，【物资库】下50%

• 界面dom：

1、通讯录、物资库dom

 <!-- 通讯录搜索 -->
 <search-com  v-show="isAddress"></search-com>
 <!-- 物资库搜索 -->
 <search-com v-show="isMaterial"></search-com>

 2嵌套在searchCom中的inputCom  dom

<!-- 输入框-->
<input-com :placeholder="placeholder" ref="searchBox"></input-com>

• 难点及解决方法：

通讯录、专家库均引用同一组件searchCom，但组件宽度不同时，父组件可以通过>>>.class 设置子组件的宽度，但不能区别开是通讯录还是专家库，无法分别设置，此时，我们可以新建一个v-width指令，父组件只要传递百分比就可以。

1、searchCom中新建一个指令

<!-- 输入框-->
<input-com :placeholder="placeholder" ref="searchBox" v-width="widthData"></input-com>


props:{
    // 搜索框的宽度，默认50%，可任意传值
    widthData:{
      type:String,
      default:'50%'
    },
}


directives: { 
     'width':{
        bind(el,binding) {
          el.style.width=binding.value
        },
    }
},

2、通讯录、物资库传值

 <!-- 通讯录搜索 -->
 <search-com  v-show="isAddress" :widthData="'100%'"></search-com>
 <!-- 物资库搜索 -->
 <search-com v-show="isMaterial"></search-com>

使用指令解决了上述宽度不一致问题。