ColorPicker

简单取色器。如需更加复杂的取色器功能，建议使用 vue-color。

示例

Mode:

rgbhslhex

Color is: #2f85da

Mode: <c-radio-group :options="modes" v-model="mode"/>

<p>Color is: <b>{{color}}</b></p>

<c-color-picker :mode="mode" v-model="color" :inline="false"/>

<script>
  export default {
    data () {
      return {
        color: '#2f85da',
        mode: 'rgb',
        modes: [
          { value: 'rgb', label: 'rgb'},
          { value: 'hsl', label: 'hsl'},
          { value: 'hex', label: 'hex'}
        ]
      }
    },
    computed: {
      barStyle () {
        return {
          width: '30px',
          height: '30px',
          backgroundColor: this.color
        }
      }
    }
  }
</script>

示例 2

也可以使用行内形式。

Mode:

rgbhslhex

Color is: #2f85da

hex

Mode: <c-radio-group :options="modes" v-model="mode"/>

<p>Color is: <b>{{color}}</b></p>

<c-color-picker :mode="mode" v-model="color" :inline="true" />

<script>
  export default {
    data () {
      return {
        color: '#2f85da',
        mode: 'rgb',
        modes: [
          { value: 'rgb', label: 'rgb'},
          { value: 'hsl', label: 'hsl'},
          { value: 'hex', label: 'hex'}
        ]
      }
    },
    computed: {
      barStyle () {
        return {
          width: '30px',
          height: '30px',
          backgroundColor: this.color
        }
      }
    }
  }
</script>

API

Attributes

属性	类型	默认值	说明
mode	String	hex	颜色模式：rgb, hsl, hex
inline	Boolean	false	是否行内展示
size	String	md	'xs', 'sm', 'md', 'lg', 'xl'

Events

事件名	说明	参数
change	-	与 mode 对应的颜色字符串