uni-ui
uni-ui copied to clipboard
fix(uni-data-select): 修复 清除按钮不展示问题 及 点击清除图标时值已清除但界面仍显示的 bug
修复 清除按钮不展示问题 及 点击清除图标时值已清除但界面仍显示的 bug
DCloud社区相关提问:https://ask.dcloud.net.cn/question/195178
这个问题一共是由1个uni-ui的bug和一个uniapp的内部bug共同引起的
- 内部组件的bug: 点清除icon其实值已经清除了,但是界面上显示值 (this.current) 忘了更新 解决方案:clearVal函数中清除 this.current
clearVal() {
this.emit('')
this.current = '' // 添加此行
if (this.collection) {
this.removeCache()
}
}
- uniapp 内部bug: vue2 误认为两个不同的
是一样的,所以其实代码逻辑已经让他显示 x 了,但是界面上响应式认为没变化,就还是之前的icon,目前能做的就是加个 key 明确这两个组件是不同组件 解决方案:给两个的上层 添加不同key属性
<view key="clear-button" v-if="current && clear && !disabled" @click.stop="clearVal">
<uni-icons type="clear" color="#c0c4cc" size="24" />
</view>
<view v-else>
<view key="arrow-button" v-else>
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
</view>