Vue原生下拉组件封装+虚拟滚动功能
介绍
快放假了没事写个demo，仅供参考，里面性能方面还有待优化。大致就是这样的功能和思路。
这里用的是jsx写的一个简单下拉框组件，有需要可以直接拷到项目去。主要处理上万条数据加载的下拉框浏览器卡死的问题。
思路
这里直接上代码吧。主要还是在页面正常引入。
第一步：
<template>
<div id="app">
<span @click="add"> 下拉框的值是这个:{{value}}</span>
<br /> <br />
<my-select
v-model="value"
:options='options'
:filterProps='filterProps'
:isVdom='isVdom'
/>
</div>
</template>
<script>
import MySelect from '@/components/MySelect/select'
export default {
name: 'App',
data () {
return {
value:'',
isVdom:false, // 是否开启虚拟滚动下拉
filterProps:{
key:'text',
value:'value'
},
options: [
]
}
},
components: {
MySelect
},
created() {
// 模拟数据生成
let p = new Promise((resolve, reject) => {
let t = 100 // 需要加载的海量数据 建议开启虚拟滚动后写入上万数据，不开启会卡顿
let data = []
for (let i = 0; i < t; i++) {
data.push({
text:`我是生成的${i + 1}条数据`,
value:i+1
})
}
resolve(data)
})
p.then((res) => {
this.options=res
console.log(this.options)
})
},
methods: {
add(){
this.value++
}
},
}
</script>
这是使用页面的地方，主要就三个属性功能加一个v-model双向绑定值，下面的点击事件可以测试双向绑定的问题。三个属性暂时就是
isVdom 是否开启虚拟滚动列表
filterProps 过滤参数 因为后端返回数据参数可能于组件内部不一致 所以需要内部过滤
options 就是我们传入的数组数据源了。
第二步：
<script>
import scroll from './scroll.js';
import refs from './index.js';
//大数据虚拟加载下拉框
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
// 参数过滤
filterProps: {
type: Object,
default: function() {
return {
key:'key',
value:'value'
};
}
},
// 下拉框数组
options: {
type: Array,
default: function() {
return [];
}
},
// 是否启用虚拟滚动
isVdom:{
type: Boolean,
default: function() {
return false
}
},
value:{
default: null
}
},
data () {
return {
KeyValue:{
key:'',
value:''
},//下拉框显示的内容
expand:true, //箭头
isTocuh:false, // 是否点击
vscroll:null //抽象虚拟滚动对象
}
},
watch:{
value(newValue){
// 如果此时双向绑定的值有默认值，需要回显下拉框内容
if(newValue){
this.KeyValue.key = refs.filter(newValue)
}
},
'KeyValue.value':{
handler (newValue, oldValue) {
this.$emit('change', newValue)
},
deep: true, // 对象内部的属性监听，也叫深度监听
immediate: true // 立即监听
}
},
computed: {
// 数据更新
dataList() {
return refs.init(this.options,this.filterProps);
}
},
// 同步实例状态
created () {
},
mounted() {
console.log( this.options,' this.options')
},
destroy () {
},
methods:{
// 点击小箭头 开始加载数据
handleClickExpand (){
this.expand = !this.expand;
//启用虚拟滚动
if(this.isVdom){
if(this.expand){
// 每次点击需要重新销毁生成新的抽象class
this.vscroll.destroy(document.getElementById('container'))
}else{
this.vscroll=new scroll.Refaa(
{
el: document.getElementById('container'),
liHeight: 40, //每一行行数据高度，
data: this.dataList,
}
)
this.vscroll.init()
}
}
},
blur (){
this.isTocuh = false
},
focus (){
this.isTocuh = true
},
onClick(event){
this.KeyValue.key=event.target.innerHTML
this.KeyValue.value=event.target.value
},
vDomScroll(){
// 只有启动虚拟滚动时候生效
if (this.isVdom) {
this.KeyValue.key=this.vscroll.key
this.KeyValue.value=this.vscroll.value
}
}
},
render (h) {
return (
<div class="select" onClick={this.handleClickExpand}>
<input style='border-radius: 3px;' value={this.KeyValue.key} type="text" readonly="readonly" autocomplete="off" onBlur={this.blur} onFocus={this.focus} placeholder="请选择" class={[this.isTocuh ?'select_selected ':'select_select']} />
<span class='arrowBox'>
<span class={[this.expand ? 'arrow' : 'down']} ></span>
</span>
<div class='options' style={{display: this.expand ? 'none' : 'block'}}>
<ul class='ul_ul' id="container" onClick={this.vDomScroll}>
{/* 少量数据时直接使用jsx循环即可,启动虚拟滚动时自动隐藏*/}
<div style={{display: this.isVdom ? 'none' : 'block'}}>
{
this.dataList.map((item,index)=>{
return <li class='ul_li' key={index} value={item.value} onClick={this.onClick} >{item.key}</li>
})
}
</div>
</ul>
</div>
</div>
)
}
}
</script>
<style scoped>
::-webkit-scrollbar-track-piece {
background-color: #f8f8f8;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #dddddd;
background-clip: padding-box;
min-height: 28px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(#bbb, #bbb, #bbb, 0.3);
}
.select {
width: 240px;
position: relative;
height: 40px;
}
.select_select {
cursor: pointer;
width: 240px;
height: 40px; /* 40/16 */
border: 1px solid #dcdfe6;
color: #606266;
outline: none;
font-weight: 400;
padding-right: 20px;
padding-left: 10px;
}
.select_selected {
cursor: pointer;
width: 240px;
color: #606266;
height: 40px; /* 40/16 */
border: 1px solid #dcdfe6;
outline: 1px solid #409eff;
font-weight: 400;
padding-right: 20px;
padding-left: 10px;
}
.arrowBox {
cursor: pointer;
display: block;
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 100%;
}
.arrow {
position: absolute;
width: 8px;
height: 8px;
right: 4px;
top: 35%;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform: rotate(-135deg);
transition: all 0.3s;
}
.down {
position: absolute;
width: 8px;
height: 8px;
right: 0px;
top: 45%;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform: rotate(45deg);
transition: all 0.3s;
}
.options {
border-radius: 2px;
margin-top: 10px;
width: 260px;
height: 280px;
padding: 5px;
box-shadow: 1px 1px 1px 1px #dddada;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.ul_ul {
height: 100%;
overflow-y: scroll;
cursor: pointer;
}
.ul_li {
width: 100%;
height: 40px;
color: #606266;
text-align: center;
line-height: 40px;
}
.ul_li:hover {
background-color: #f5f7fa;
}
.totalBox {
width: 100%;
/* background-color: pink; */
}
.listBox {
border: 1px solid blue;
height: 600px;
box-sizing: content-box;
width: 100%;
}
</style>
这部分是核心页面 这里jsx写的dom 主要看着方便。具体会分成是否开启虚拟滚动列表功能2个区别写
的，需要注意的是2个外部引入的js，index.js注意针对数据源操作和非虚拟滚动时的操作，scroll.js是针对虚拟滚动时候的操作，这里功能比较少 仅有渲染回显的双向绑定功能。
index.js
class Ref {
constructor(data) {
this._data = data
}
// 只读属性
get data () {
return this._data;
}
}
let p = [] //存入数据 避免重复循环
const init = (options, select) => {
// 格式化处理入参键值对
// 内部固定键值对 key-value
let result = []
if (options.length > 0 && select) options.forEach(e => {
result.push({
key: e[select['key']],
value: e[select['value']],
})
});
if (result.length > 0) {
p = new Ref(result).data
}
return result || []
}
// 根据value值查找出对应key值
const filter = (value) => {
if (!value) return
if (p && p.length > 0) {
return p.find(e => {
if (e.value === value) return e
}).key
}
}
export default {
init,
filter
}
scroll.js
// 抽象下拉框数据对象
const Refaa = class {
_value = ''
_key = ''
constructor(op) {
this.el = op.el
this.liHeight = op.liHeight
this.data = op.data
this.list = []
this.offsetY = 0
this.tolHeight = this.data.length * this.liHeight //所有数据总高度
this.lastTime = new Date().getTime()
this.value = ''
this.key = ''
}
get value () {
// 只读属性
return this._value
}
set value (value) {
if (value) {
this._value = value
}
}
get key () {
// 只读属性
return this._key
}
set key (val) {
if (val) {
this._key = val
}
}
init () {
this.create()
this.initData()
// 初始化滚动事件
this.el.addEventListener(
'scroll',
// 这里本来应该写滚动函数,又去this指向发生改变,所以直接借用滚动函数的this过来
this.handeScroll.bind(this), //ps 这里需要用bind函数不能用call和apply,详情可参考(this指向问题2文章)
false
)
}
create () {
// 生成dom结构
let totalBox = document.createElement('div') // 生成总盒子 超出隐藏
totalBox.className = 'totalBox'
totalBox.style.height = this.tolHeight + 'px'
let listBox = document.createElement('div') // 生成可视区域盒子
listBox.className = 'listBox'
totalBox.append(listBox)
this.el.append(totalBox)
this.totalBox = totalBox
this.listBox = listBox
}
initData () {
// 计算行数 由于固定高度为600px
this.showNum = 280 / this.liHeight
// this.showNum = Math.floor(600 / this.liHeight) + 4
this.list = this.data.slice(0, this.showNum)
this.createByList(this.list)
}
createByList (list) {
this.listBox.innerText = '' // 不能缺少 每次重新渲染需要清空上次记录
let fragment = document.createDocumentFragment()
let li = ''
let this_ = this
// 生成虚拟标签每次循环都添加在虚拟标签里面 减少dom操作
for (let i = 0; i < this.showNum; i++) {
li = document.createElement('li')
li.style.height = this.liHeight + 'px'
li.style.textAlign = 'center'
li.style.color = '#606266'
li.style.lineHeight = this.liHeight + 'px'
li.onmouseover = function (e) {
this.style.background = '#f5f7fa'
}
li.onmouseout = function (e) {
this.style.background = '#fff'
}
li.setAttribute('value', list[i].value)
li.innerText = list[i].key
li.addEventListener("click", function (e) {
this_.value = e.target.value
this_.key = e.target.innerHTML
}, true)
fragment.append(li)
}
this.listBox.append(fragment)
}
handeScroll (e) {
// 滚动事件给一个延迟处理 防止重复滚动
if (new Date().getTime() - this.lastTime > 20) {
// 滚动事件
let scrollTop = e.target.scrollTop //滚动距离
let prevNum = Math.floor(scrollTop / this.liHeight) //向下取整 (展示滚动的行数)
this.offsetY = scrollTop - (scrollTop % this.liHeight) //需要偏移的距离
// console.log(this.offsetY, ' this.offsetY')
// console.log(this.data, 'this.data')
// 获取新滚动的数据进行加载渲染
// 根据下标的变化 由于这次滚动距离scrollTop,可以得到prevNum为改变的位置 也就是下标,再和上一次滚动的位置得到一个新的结束位置下标,可以得到新展示区域的数据
this.list = this.data.slice(prevNum, prevNum + this.showNum)
// console.log(this.list, ' this.list')
// 新的到的数据再次构建虚拟节点
this.createByList(this.list)
this.listBox.style.transform = `translateY(${this.offsetY}px)` //可视区域随之改变y距离
this.lastTime = new Date().getTime()
}
}
// 销毁
destroy (el) {
// 删除每次生成的dom结构
for (let i = el.children.length - 1; i >= 0; i--) {
el.removeChild(el.children[i]);
}
}
}
export default {
Refaa
}
整体大概就是这样 具体可能性能等方面还有问题，可以自行优化啥的
这里是demo地址可以下载本地看https://gitee.com/mengjie1234/me