vue3使用el-slider滑塊遇到的問(wèn)題及解決
項(xiàng)目是vue3+vite+ts+pinia，用的element-plus。
使用滑塊el-slider時(shí)出現(xiàn)了兩個(gè)問(wèn)題
1、因?yàn)橛袔讉€(gè)地方都需要用到
所以建了一個(gè)單獨(dú)的組件使用。
<el-slider v-model="value" :marks="list.marks" :min="list.min" :max="list.max" step="0.1" show-input />
const props = defineProps({
list: Object,
value: Number
});這樣使用的結(jié)果就是：本地沒(méi)問(wèn)題，打包到服務(wù)器上后只要滑動(dòng)就報(bào)錯(cuò) value is not defined。
解決辦法：
let sliderVal = ref(props.value); v-model="sliderVal"
注：value一定要是Number類型
2、我這里要使用tab切換
可能幾個(gè)tab都有這個(gè)滑塊，這時(shí)候就出現(xiàn)了一個(gè)問(wèn)題：
- 滑塊上綁定的值沒(méi)更新，前一個(gè)tab上的滑塊值是多少，切換過(guò)來(lái)后這個(gè)滑塊就是多少。
- 后來(lái)發(fā)現(xiàn)切換后滑塊的組件未重新加載，但切換前的tab中沒(méi)有滑塊再切換過(guò)來(lái)后就會(huì)重新加載。
所以想到一個(gè)辦法：控制滑塊顯示隱藏。
我這里需要?jiǎng)討B(tài)獲取tab中的數(shù)據(jù)，所以我在切換tab事件中先讓滑塊都隱藏，然后通過(guò)接口獲取數(shù)據(jù)是再讓滑塊顯示。
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="item in tabsData" :key="item.value" :label="item.label"
:name="item.value">
<slicer v-if="item.show" @Change="e => ChangeSlicer(e, item.prop)" :list="list"
:value="Number(formModel[item.prop])"></slicer>
</el-tab-pane>
</el-tabs>function handleClick() {
tabsData.value.map(items => items.show = false);
getDataList()
}getDataList是獲取滑塊數(shù)據(jù)的方法，在這個(gè)方法里就可以根據(jù)需求給show賦值true或false了。
總結(jié)
就這個(gè)問(wèn)題，整了將近一天，頭都大了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用qrcodesjs2生成二維碼簡(jiǎn)單示例
最近項(xiàng)目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包
這篇文章主要介紹了vue 國(guó)際化 vue-i18n 雙語(yǔ)言 語(yǔ)言包的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化，對(duì)vue感興趣的同學(xué)，必須得參考下2021-04-04
本文主要介紹了ElementUI表格中添加表頭圖標(biāo)懸浮提示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過(guò)程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Ant design vue table 單擊行選中 勾選checkbox教程
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
element根據(jù)輸入動(dòng)態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開(kāi)發(fā)中,后臺(tái)管理界面經(jīng)常需要根據(jù)商品規(guī)格和規(guī)格值動(dòng)態(tài)生成SKU表格,本文通過(guò)element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動(dòng)態(tài)綁定的方式,實(shí)現(xiàn)SKU表格的增刪改查功能2024-11-11
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07