element-ui Select 选择器 滚动加载 (vue 指令)
element-ui 组件并不能满足我们的所有要求,比如Select 选择器滚动,解决方案如下:vue 指令、插件开发以单前文档为例,在main.js同级目录下创建 directives.js 文件import Vue from 'vue'let MyPlugin = {}// 定义全局指令export default MyPlugin.install = function(vue, option
·
element-ui 组件并不能满足我们的所有要求,比如Select 选择器滚动,解决方案如下:
vue 指令、插件开发
以单前文档为例,在main.js同级目录下创建 directives.js 文件
import Vue from 'vue'
let MyPlugin = {}
// 定义全局指令
export default MyPlugin.install = function(vue, options) {
// loadmore 是定义的指令 名称 , 使用时 用 v-loadmore = "dosomethingFun or data"
Vue.directive('loadmore', {
// bind只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
bind (el, binding) {
// 获取element-ui定义好的scroll盒子 Select 选择器的下拉盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
// 判断滚动到底部
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
// binding.value 是指令的绑定值,该值可能是字符串,数字、函数
// binding.value() 表示执行 v-loadmore 绑定的函数
binding.value()
}
})
}
})
}
在main.js中应用全局指令
// Vue.use 需要在 new Vue() 之前使用
// 引用创建好的指令
import directives from './directives'
// 全局注册指令
Vue.use(directives)
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
在项目文件demo.vue 使用 Select 选择器,调用指令来监听滚动加载数据
<template>
// v-loadmore 是前文注册过的指令, loadMore 是指令绑定的值 相当于前文的 binding.value,由于指令值是函数,前文使用了 binding.value()执行调用
<el-select v-model="id" v-loadmore="loadMore">
<el-option v-for="item in bmList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
<script>
import {
getBMList,
} from '@/api/store'
export default {
data(){
return {
bmList: [],
id:''
}
},
methods: {
loadMore(){
getBMList().then(res => {
const newList = res.data.data
if (newList.length > 0) {
this.bmList.push(...newList)
}
})
}
}
}
</script>
指令绑定在节点后,就会自动调用滚动监听,满足条件后,指令中执行 binding.value() 来执行 loadMore 函数
更多推荐
已为社区贡献2条内容
所有评论(0)