iView(1) - App.vue

最新推荐文章于 2021-10-02 12:32:05 发布

dolinyuan

最新推荐文章于 2021-10-02 12:32:05 发布

阅读量239

点赞数 1

本文链接：https://blog.csdn.net/dolin88/article/details/84360492

版权

<template>
  <div id="app">
    
    <div id="sliderBox">
      <div class="slider-params">
        <div @click="sliderBtnClick(0)">参数1</div>
        <div @click="sliderBtnClick(1)">参数2</div>
        <div @click="sliderBtnClick(2)">参数3</div>
        <div @click="sliderClean">自定义</div>
      </div>
      <ul class="slider-show">
        <li><Slider ref="slider1" v-model="value1" show-input disabled></Slider></li>
        <li><Slider ref="slider2" v-model="value2" show-input disabled></Slider></li>
        <li><Slider ref="slider3" v-model="value3" show-input disabled></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={
    group0: {
      val_1 : 30,
      val_2 : 10,
      val_3 : 15
    },
    group1: {
      val_1 : 60,
      val_2 : 80,
      val_3 : 75
    },
    group2: {
      val_1 : 90,
      val_2 : 40,
      val_3 : 95
    }
  };
export default {
  name: 'App',
  data () {
            return {
                value1: 25,
                value2: 25,
                value3: 25
            }
        },
        methods:{
          sliderBtnClick: function(index) {
            //disabled
            //value1,value2,value3
            //console.log(this.$refs.slider1);
            //this.$refs.slider1.value1 = groups.group1.value1;

            console.log('group'+index);
            this.value1 = groups['group'+index].val_1;
            this.value2 = groups['group'+index].val_2;
            this.value3 = groups['group'+index].val_3;
            this.$refs.slider1.disabled = true;
            this.$refs.slider2.disabled = true;
            this.$refs.slider3.disabled = true;
          },
          sliderClean: function(){
            this.$refs.slider1.disabled = false;
            this.$refs.slider2.disabled = false;
            this.$refs.slider3.disabled = false;
          }
        }
}
</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>