Vue.js的最小颜色选择器– vue-swatches

Vue.js的最小颜色选择器– vue-swatches
插件名称 vue-swatches
发布时间 2020年9月11日
插件作者 saintplay

Vue Swatches是Vue的颜色选择器UI组件,允许用户选择颜色。与所有颜色都可用(167 77 216种颜色)的经典拾色器不同,Vue色板仅显示一堆预定义的颜色。

安装和下载:

# Yarn
$ yarn add vue-swatches

# NPM
$ npm install vue-swatches --save

变更日志:

v2.1.0(09/09/2020)

  • 现在,内联模式是无填充的,包装器具有内容框
  • 如果只有三个或更少的色板,则包装宽度自动调整

基本用法

<!-- Vue component -->
<template>
  <div>
    <v-swatches v-model="color"></v-swatches>
  </div>
</template>

<script>
  import VSwatches from 'vue-swatches'

  // 在全局范围内也导入样式
  import "vue-swatches/dist/vue-swatches.css"

  export default {
    components: { VSwatches }, // window['vue-swatches'] - from CDN
    data () {
      return {
        color: '#1CA085'
      }
    }
  }
</script>