vant的picker组件设置文字超长滚动方式
picker组件设置文字超长滚动
我们的手机端使用vant来做前端UI框架。
今天在使用vant的picker组件时候，遇到了一个问题。当文字过长的时候，vant的处理方式是ellipsis，超长部分显示【…】
如果恰好省略号前边内容相同，用户就无法区分选项了。如图：
vant没有提供滚动的实现方式，所以我们自己兼容实现一下。
首先，打开开发者工具看下dom结构
我的思路是，如果在选中状态下，内层文字div长度大于外层的时候。给内层增加一个滚动动画效果。
实现如下：
- 重写.van-ellipsis两个样式，去掉ellipsis效果和overflow:hidden
- 监听picker的change事件
- 在dom渲染结束之后，获取.van-picker-column__item–selected并判断它与内部文字的宽度
- 如果内部组件宽度大于外部，在添加一个animation
<template>
<div id="app">
<van-picker show-toolbar title="标题" :columns="columns" @change="checkScroll" />
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
columns: [{
text: "浙江",
children: [{
text: "温州温州温州温州温州温州温州-杭州",
children: [{ text: "西湖区" }, { text: "余杭区" }],
}, {
text: "温州温州温州温州温州温州温州-温州",
children: [{ text: "鹿城区" }, { text: "瓯海区" }],
}]
}]
}
},
methods: {
checkScroll () {
this.$nextTick(() => {
// 获取选中元素
let selectedItems = [...document.querySelectorAll(".van-picker-column__item--selected")]
selectedItems.forEach(item => {
let child = item.querySelector(".van-ellipsis")
if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度
item.classList.add("scroll")
} else {
item.classList.remove("scroll")
}
})
})
}
}
}
</script><style lang="less" scoped>
/deep/ .van-picker-column__item--selected {
/* 重写选中后的效果 */
.van-ellipsis {
text-overflow: unset;
overflow: visible;
}
/* 增加scroll类 */
&.scroll > .van-ellipsis {
animation: move 4s linear infinite;
}
}
@keyframes move {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>这样，当滚动picker选中文字超长的时候，选中项就会出现滚动效果。
vant_picker_选择器(搭配弹出层使用)
<van-field
readonly
clickable
label="城市"
:value="value"
placeholder="选择城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
<van-picker
show-toolbar
:columns="columns"
value-key="name"
@cancel="showPicker = false"
@confirm="onConfirm"
/>
</van-popup>
<!--
重点：自定义value-key属性：默认值是text
value-key这个属性是自定义后台返回字段作为选择器显示的内容，这样后台返回的字段位未name时，也可以显示了。
否则默认的原始对象默认是[{text:"选项一",value:"1"},{text:"选项二",value:"2"}]
-->以上为个人经验，希望能给大家一个参考，也希望大家多多支持云海天教程。
原文地址：https://blog.csdn.net/shb7433185/article/details/108636872