vue加载模块后，mui好像不能及时初始化那些加载的模块，导致，mui的样式和某些事件用不了，如：inpu的清除按钮。还有搜索的那个放大镜的图标。

动态添加组件后 需要重新初始化.

需要在mounted里面从新加载一下。

 var vm=this;

 vm.$nextTick(()=>{mui('.mui-input-row input').input();})

这样一下就可以啦。

 

为了避免每次都得在mounted里面写上这么一句话。我们可以把他写成一个指令

 Vue.directive('mui', {         //v-mui="input" 自动获取，然后input后面的图标会加上。就相当于在这个div所在的元素上添加一个input事件。
        bind: function (el, props) {
            setTimeout(() => { mui(el)[props.value](); })
        }

    });

1/使用 滑动拖拽   <div class="mui-slider" v-mui="'slider'">    就相当于mui(".mui-silder").slider()

                                  <div class="mui-slider-group">
                  <a class="mui-slider-item" v-bind:class="{on:n.id==selectcates.id}" v-for="n in cates" @tap="selectcates=n" v-html="n.name"></a>

                                </div>

                         </div>

 

2/    计数器       

  <div class="mui-clearfix mui-pull-right mui-numbox" data-numbox-min='1' style="width:90px;height:30px;padding: 0 30px;border-radius:0px;" v-mui="'numbox'"> 就相当于$('.mui-numbox').numbox();

    <button class="mui-btn mui-btn-numbox-minus" type="button" style="width:30px;">-</button>
      <input id="box" class="mui-input-numbox" type="number" v-model="db.num" @change="editnum(db,$event)" />
      <button class="mui-btn mui-btn-numbox-plus" type="button" style="width:30px;">+</button>
</div>

3、滑块   <div class="mui-switch mui-pull-right mui-switch-mini" v-mui="'switch'" @toggle="changejf"> 就相当于mui(".mui-switch").switch()
                    <div class="mui-switch-handle"></div>

                </div>

4、搜索框

<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-input-search" placeholder="搜索快递" id="search" @keyup="search()"    v-mui="input">  就相当于mui(".mui-input-row  input").input()
</div>