VUE實現Studio管理後臺（九）：開關（Switch）控件，輸入框input系列

接下來幾篇做文，會介紹用到的輸入框系列，今天會介紹組普通的調用方式，由於RXEditor要求複雜的輸入功能，後面的例子會用VUE的component動態調用，就沒有今天的這麼直觀了，控件的實現原理都同樣，只是調用方式的區別，今天的例子的調用代碼爲了寫做文特殊製做的，寫完做文還要恢復回去。
開關控件（Switch）的實現效果：

給組件取個好聽的名字，叫RxSwitch吧。調用代碼：

<RxSwitch 
  :onValue = "'on-value'"
  :offValue = "'off-value'"
  v-model = "inputValue"
>

</RxSwitch>

 

組件代碼：

<template>
  <div class="rx-switch" 
    :class="onValue === inputValue? 'on' : ''"
    @click="click">
  </div>
</template>

<script>
export default {
  name: 'RxSwitch',
  props:{
    value:{ default:'' }, 
    onValue:{ default:'on' },
    offValue:{ default:'off' },
  },
  computed:{
    inputValue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    click(){
      this.inputValue = this.inputValue === this.onValue 
                        ? this.offValue 
                        : this.onValue
    },
  },
}
</script>

<style>
.rx-switch{
  position: relative;
  width: 26px;
  height: 14px;
  background: #424242;
  margin-top:4px;
  border-radius:6px;
  cursor: pointer;
}

.rx-switch::after{
  content: '';
  position: absolute;
  top:-1px;
  left:-1px;
  height: 16px;
  width: 16px;
  background: #e0e0e0;
  border-radius: 50%;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); 
}

.rx-switch.on{
  background: #75b325;
}

.rx-switch.on::after{
  content: '';
  position: absolute;
  top:-1px;
  left:auto;
  right: -1px;
  height: 16px;
  width: 16px;
  background: #e0e0e0;
  border-radius: 50%;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); 
}
</style>

 

原理：鼠標點擊時，切換v-model（inputValue）的值，模板根據inputValue的值肯定是否顯示on狀態。

經過css僞類::after繪製開關上的觸控點。具體能夠參看CSS代碼。

感謝耐心閱讀，詳細代碼，請參考Github：https://github.com/vularsoft/studio-ui
如有有問題，請留言交流。