vue 使用自定义指令添加滚动加载功能(以iview下拉组件为例(组件自带远程搜索功能),其他组件同上)

 * 页面需要三个参数:
 * option:远程搜索返回的数据
 * count:所有数据总条数
 * pageindex:当前页码
 * query:远程搜索查询条件
 * */
<FormItem label="车务通客户">
     <Select
         ref="select"
         v-model="formValidate.customers"
         v-scroll="getCustomers"
         multiple
         filterable
         :remote-method="getCustomers"
         :loading="loading"
         placeholder="请选择(可模糊搜索客户/账号)"
         @on-change="change"
         @on-open-change="placeholderIsShow"
     >
         <template v-for="(op, index) in optioncopy">
             <Option
                 v-show="optionIsShow(op.id)"
                 :key="index"
                 :disabled="optionIsDisabled(op.id)"
                 :value="op.id"
             >
                 {{ op.name }}
             </Option>
         </template>
     </Select>
 </FormItem>
export default {
    inserted(el, binding, vnode) {
        //找到对应组件中子组件的类名
        const SELECTWRAP_DOM = el.querySelector('.ivu-select-dropdown');
        // 添加滚动事件
        SELECTWRAP_DOM.addEventListener('scroll', () => {
            // 自定义指令通过vnode.context来获取this
            let _this = vnode.context;
            // 下拉触底加载
            if (
                SELECTWRAP_DOM.scrollTop + SELECTWRAP_DOM.clientHeight === SELECTWRAP_DOM.scrollHeight &&
                _this.query !== '' &&
                _this.option.length < _this.count
            ) {
                _this.pageIndex += 1;
                //通过binding.expression获取动态绑定的参数
                _this[binding.expression](_this.query);
            }
        });
    }
};

你可能感兴趣的:(vue,vue.js,其他,javascript)