sobota 24. června 2017

VueJS 2: píšeme komponentu - grafický přepínač (toggle) v SVG

Napsal jsem si a odladil komponentu sloužící jako přepínač (toggle). Mám pro ni použití ve své aplikaci, kterou píšu s využitím Framework7 a VueJS.

Pro přepínač má Framework7 implementovaný switch:

<div class="item-title label">Switch</div>
<div class="item-input">
  <label class="label-switch">
    <input type="checkbox">
    <div class="checkbox"></div>
  </label>
</div>

Nepodařilo se mi ho upravit podle mých potřeb, proto jsem se rozhodl ho nahradit vlastní komponentou. Pro zamýšlené použití se hodí SVG.

Vue.component("toggle-name", {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ""
    },
    coloroff: {
      type: String,
      default: "white"
    },
    coloron: {
      type: String,
      default: "#886aea"
    },
  },
  methods: {
    toggleValue: function(){
      this.value = !this.value;
      this.$emit("update:value", this.value);
    },
  },
  computed: {
    cx: function(){
      return this.value ? 36 : 16
    },
    fill: function(){
      return this.value ? this.coloron : this.coloroff
    }
  },
  template: '<svg @click="toggleValue()" width="52" height="32"><g ><rect x="0" y="0" width="52" height="32" rx="16" ry="16" stroke="lightgray" :fill="fill" /><circle :cx="cx" cy="16" r="16" stroke="lightgray" fill="white"/><text :x="cx" y="22" text-anchor="middle" font-size="16">{{name}}</text></g></svg>'
})


V části props jsou definovány vlastnosti (properties), jako value (hodnota přepínače false/true = off/on), name (jednoznakové jméno, A, B, C, ...), coloron (barva v poloze true), coloroff (barva v poloze false).

V části methods se při přepnutí volá metoda toggleValue, která kromě změny hodnoty emituje událost se změnou (two-way-databinding), aby se změnila i hodnota proměnné, se kterou je přepínač svázán.

V části computed se vypočítá x-ová poloha jezdce - cx, a barva výplně přepínače podle hodnoty (false/true) - fill.

V části template je definován vzhled přepínače, jedná se o grafiku SVG. Přepínač se skládá z obdélníku se zaoblenými rohy a kružnice, která mění svoji polohu v závislosti na stavu přepínače (false/true). Dovnitř kružnice je vepsán název přepínače (jedno písmeno) - name.

V HTML kódu se komponenta použije např. takhle:
<toggle-name :value.sync="A" name="A" class="toggle"></toggle-name>



Žádné komentáře:

Okomentovat