iView(1) - App - 副本.vue

最新推荐文章于 2021-02-09 22:43:22 发布

dolinyuan

最新推荐文章于 2021-02-09 22:43:22 发布

阅读量244

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dolin88/article/details/84360525

本文介绍了一个使用Vue框架创建的滑块组件，该组件包含多个滑块，每个滑块都有自己的数值，并通过按钮触发不同的预设参数组。文章还展示了如何在组件中集成不同类型的按钮，并对样式进行了定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    
    <div id="sliderBox">
      <div class="slider-params">
        <div @click="sliderBtnClick(0)">参数1</div>
        <div>参数2</div>
        <div>参数3</div>
        <div>自定义</div>
      </div>
      <ul class="slider-show">
        <li><Slider ref="slider1" v-model="value1" show-input :disabled="false"></Slider></li>
        <li><Slider ref="slider2" v-model="value2" show-input :disabled="false"></Slider></li>
        <li><Slider ref="slider3" v-model="value3" show-input :disabled="false"></Slider></li>
      </ul>
      <!-- <Slider v-model="value3" range disabled></Slider> -->
    </div>
    

    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <br><br>
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
  const groups={
    group1: {
      value1 : 30,
      value2 : 10,
      value3 : 15
    },
    group2: {
      value1 : 60,
      value2 : 80,
      value3 : 75
    },
    group3: {
      value1 : 90,
      value2 : 40,
      value3 : 95
    }
  };
export default {
  name: 'App',
  data () {
            return groups.group1;
        },
        methods:{
          sliderBtnClick:function(index) {
            //disabled
            //value1,value2,value3
            //console.log(this.$refs.slider1);
            //this.$refs.slider1.value1 = groups.group1.value1;
            
            /*this.$refs.slider1.disabled = true;
            this.$refs.slider2.disabled = true;
            this.$refs.slider3.disabled = true;*/
            this.value1 = groups.group1.value1;
            console.log(groups.group1.value1, this.value1);
          }
        }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#sliderBox{margin:0 auto 50px;width:500px;}
#sliderBox li{list-style:none;height:25px;}
#sliderBox .slider-params{}
#sliderBox .slider-params li div{display: inline-block;padding:0 10px;border:1px solid #333;}
</style>