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);
            }
        });
    }
};
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值