elementui Slider重置

最新推荐文章于 2024-06-05 10:41:08 发布

Mitin_

最新推荐文章于 2024-06-05 10:41:08 发布

阅读量441

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mitin_/article/details/130583840

版权

文章讲述了在遇到ElementUISlider组件无法通过点击按钮重置的问题时，作者选择了直接操作DOM来改变组件显示状态的解决方案。通过添加ref属性，然后在方法中修改对应DOM的样式，实现了重置的效果。作者表示欢迎提供更好的方法。

摘要由CSDN通过智能技术生成

前言：今天遇到一个问题，到elementui官网查看Slider的重置后，发现只能通过滑动触发格式化，但是需求却是点击按钮后重置组件，似乎组件的value值并没有实现真的双向绑定。改源码太复杂，我选择了一个比较嗯、不漂亮的方法，就是直接操作DOM修改样式

代码如下：

<template>
<template>
              <div class="cate-box">
                <div class="price-list">
                  <div class="block">
                    <el-slider
                      ref="pmdSlider"
                      :show-tooltip="false"
                      v-model="sliderValue"
                      range
                      :step="500"
                      :marks="marks"
                      :min="1000"
                      :max="3500"
                    >
                    </el-slider>
                  </div>
                  <div class="show-pri">
                    <div><span>{{$t('goods.price')}}：</span>${{ sliderValue[0] }} - ${{ sliderValue[1] }}</div>
                  </div>
                </div>
              </div>
            <div class="btn-box">
              <button @click="reChooseOrder()">{{$t('goods.rechoose')}}</button>
              <button>{{$t('goods.confirm')}}</button>
            </div>

</template>
<script>

export default {
  data() {
    return {
      sliderValue: [1000, 3500],
      marks: {},
    }
  },
  methods:{
   reChooseOrder() {
      this.$set(this.sliderValue, 0, 1000);
      this.$set(this.sliderValue, 1, 3500);
      this.$refs.pmdSlider.$children[1].$el.style.left = "100%";
      this.$refs.pmdSlider.$refs.slider.children[0].style.width = "100%";
    }
   },

 }
</script>

其中主要是使用了ref属性，给组件加上ref属性，然后再找到对应的DOM，对其的样式进行直接的操作。

如果有其他的更好的方法可以告诉我，目前暂时就使用这个方法，没有设计其他操作，只是改变页面的显示

参考资料：https://www.cnblogs.com/ht955/p/14593288.html

资料我并没有全部看完，好像参考资料的情况和我不太一样。