a-textarea(textarea)出現模糊問題的可能解決方案 項目介紹:本項目是一個vue3+ant-design-vue4.x開發,是一個客服機器人的組件。其它項目通過iframe+js文件來引入(iframe的內容就是表單,入口按鈕是通過js文件進行dom操作創建)。 通過js監聽頁面寬度 ...
<u-collapse ref="myCollapse" @change="change" accordion>
<u-collapse-item v-for="(level,index) in levelList" :key="index" :title="level.name" ref="collapseHeight">
<view class="">
<view v-for="(film,i) in filmList" :key="i" class="u-p-20">
{{film.name}}
</view>
</view>
</u-collapse-item>
</u-collapse>
async change(list) {
const index = list.findIndex((item) => {
return item.status === 'open'
})
if (index === -1) {
return
}
this.filmList = await this.getFilmData(index + 1)
this.$nextTick(() => {
this.$refs.myCollapse.init();
})
},
collapse是手風琴模式。
數據levelList、filmList,都是非同步載入。levelList渲染正常。
filmList數據在載入完成後,按照官方文檔提供的方法:init(); 重新計算高度。但是無法正常撐開。
試了網上的多個方法,但是都沒有效果。
於是分析了下源碼,發現註釋掉一行代碼就行。文件路徑:uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
this.expanded = this.name == value
// 非同步獲取內容,或者動態修改了內容時,需要重新初始化
init() {
// 初始化數據
this.updateParentData()
if (!this.parent) {
return uni.$u.error('u-collapse-item必須要搭配u-collapse組件使用')
}
const {
value,
accordion,
children = []
} = this.parent
if (accordion) {
if (uni.$u.test.array(value)) {
return uni.$u.error('手風琴模式下,u-collapse組件的value參數不能為數組')
}
// this.expanded = this.name == value
} else {
if (!uni.$u.test.array(value) && value !== null) {
return uni.$u.error('非手風琴模式下,u-collapse組件的value參數必須為數組')
}
this.expanded = (value || []).some(item => item == this.name)
}
// 設置組件的展開或收起狀態
this.$nextTick(function() {
this.setContentAnimate()
})
},