Vue.jsでtoggleスイッチコンポーネントを実装する「vuejs-toggle-switch」

by kabanoki

HTML

<div id="app">
  <toggle-switch
  :options="myOptions"
  :disabled="false"
  v-model="selectedMapOption" 
  :value="selectedMapOption"
  ></toggle-switch>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ToggleSwitch.umd.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const ToggleSwitch = window['ToggleSwitch'].default;
Vue.use(ToggleSwitch);
new Vue({
  el: '#app', 
  data: {
    selectedMapOption: '月曜日',
    myOptions: {
      layout: {
        color: 'black',
        backgroundColor: 'lightgray',
        selectedColor: 'white',
        selectedBackgroundColor: 'green',
        borderColor: 'black',
        fontFamily: 'Arial',
        fontWeight: 'normal',
        fontWeightSelected: 'bold',
        squareCorners: false,
        noBorder: false
      },
      size: {
        fontSize: 1,
        height: 4,
        padding: 1,
        width: 50
      },
      items: {
        delay: .4,
        preSelected: 'unknown',
        disabled: false,
        labels: [
          {name: '日曜日', color: 'black', backgroundColor: 'rgb(0, 255, 255)'}, 
          {name: '月曜日', color: 'black', backgroundColor: 'yellow'}, 
          {name: '火曜日', color: 'white', backgroundColor: 'red'}, 
          {name: '水曜日', color: 'white', backgroundColor: 'rgb(0, 64, 255)'}, 
          {name: '木曜日', color: 'white', backgroundColor: 'rgb(4, 180, 4)'}, 
          {name: '金曜日', color: 'black', backgroundColor: 'yellow'}, 
          {name: '土曜日', color: 'white', backgroundColor: 'rgb(255, 0, 255)'}
        ]
      }
    }
  }
});