vue3使用el-slider滑块遇到的问题及解决
作者：zh814l
这篇文章主要介绍了vue3使用el-slider滑块遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
项目是vue3+vite+ts+pinia，用的element-plus。
使用滑块el-slider时出现了两个问题
1、因为有几个地方都需要用到
所以建了一个单独的组件使用。
<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
});这样使用的结果就是：本地没问题，打包到服务器上后只要滑动就报错 value is not defined。
解决办法：
let sliderVal = ref(props.value); v-model="sliderVal"
注：value一定要是Number类型
2、我这里要使用tab切换
可能几个tab都有这个滑块，这时候就出现了一个问题：
- 滑块上绑定的值没更新，前一个tab上的滑块值是多少，切换过来后这个滑块就是多少。
- 后来发现切换后滑块的组件未重新加载，但切换前的tab中没有滑块再切换过来后就会重新加载。
所以想到一个办法：控制滑块显示隐藏。
我这里需要动态获取tab中的数据，所以我在切换tab事件中先让滑块都隐藏，然后通过接口获取数据是再让滑块显示。
<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是获取滑块数据的方法，在这个方法里就可以根据需求给show赋值true或false了。
总结
就这个问题，整了将近一天，头都大了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。