操作感が気持ち良いColor Picker「vue-swatches」

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-swatches.css">
<div id="app">
  <h2 :style="{'color':color}">カバの樹</h2>
  
  <h3>Simple</h3>
  <div class="form__input">
      <swatches v-model="color" popover-x="left"></swatches>
  </div>
  <br>
  <h3>Using a Preset</h3>
  <div class="form__input">
      <swatches v-model="color" popover-x="left" swatches="text-advanced"></swatches>
  </div>
  <br>
  <h3>Using a Custom Trigger
</h3>
  <div class="form__input">
      <swatches v-model="color">
        <input slot="trigger" :value="color" class="form__input__element" readonly>
      </swatches>
  </div>
  <br>
  <h3>Custom Colors</h3>
  <div class="form__input">
      <swatches
        v-model="color"
        :swatches="swatches"
        row-length="6"
        shapes="circles"
        show-border
        popover-x="left"
      ></swatches>
  </div>
  <br>
  <h3>Inline Mode</h3>
  <div class="form__input">
      <swatches v-model="color" inline></swatches>
  </div>
  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-swatches.umd.min.js"></script>

CSS

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

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

const Swatches = window['vue-swatches'];

new Vue({
  el: '#app',
  components: {
    'swatches':Swatches
  },
  data: {
    color: '#A463BF',
    swatches: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
  }
});