BIN-UI-DESIGN

Appearance

On this page

颜色选择器 ColorPicker ​

用于选择颜色色值

基础用法 ​

有默认值
#1089ff
无默认值
不显示label
<template>
  <div flex>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">有默认值</div>
      <b-color-picker v-model="color1" show-alpha color-format="hex"></b-color-picker>
      <div class="demonstration mb-5">{{ color1 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">无默认值</div>
      <b-color-picker v-model="color2" show-alpha></b-color-picker>
      <div class="demonstration mb-5">{{ color2 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">不显示label</div>
      <b-color-picker v-model="color3" show-alpha :show-label="false"></b-color-picker>
      <div class="demonstration mb-5">{{ color3 }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color1 = ref('#1089ff')
const color2 = ref(null)
const color3 = ref(null)
</script>
<template>
  <div flex>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">有默认值</div>
      <b-color-picker v-model="color1" show-alpha color-format="hex"></b-color-picker>
      <div class="demonstration mb-5">{{ color1 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">无默认值</div>
      <b-color-picker v-model="color2" show-alpha></b-color-picker>
      <div class="demonstration mb-5">{{ color2 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">不显示label</div>
      <b-color-picker v-model="color3" show-alpha :show-label="false"></b-color-picker>
      <div class="demonstration mb-5">{{ color3 }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color1 = ref('#1089ff')
const color2 = ref(null)
const color3 = ref(null)
</script>

带透明度 ​

可以选择透明度

带透明度
<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <div class="demonstration mb-5">带透明度</div>
      <b-color-picker v-model="color" show-alpha></b-color-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('rgba(45,140,240,0.45)')
</script>
<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <div class="demonstration mb-5">带透明度</div>
      <b-color-picker v-model="color" show-alpha></b-color-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('rgba(45,140,240,0.45)')
</script>

带有预设色卡 ​

可以提供预设的色卡

<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color1" show-alpha :colors="colors1"></b-color-picker>
    </div>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color2" show-alpha :colors="colors2"></b-color-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color1 = ref('#2d8cf0')
const color2 = ref('#2d8cf0')
const colors1 = [
  '#1089ff',
  '#52c41a',
  '#fa8c16',
  '#f5222d',
  '#2f54eb',
  '#faad14',
  '#722ed1',
  '#eb2f96',
  '#13c2c2',
  '#fadb14',
  '#a0d911',
  '#fa541c',
  '#eaff8f',
  '#bae7ff',
  '#efdbff',
  '#ffd6e7',
  '#ff1885',
  '#fff506',
  '#00bcd4',
  '#f06292',
  '#cb6c00',
  '#607d8b',
  '#000000',
  '#ffffff'
]
const colors2 = [
  '#311B92',
  '#512DA8',
  '#673AB7',
  '#9575CD',
  '#D1C4E9',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)'
]
</script>
<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color1" show-alpha :colors="colors1"></b-color-picker>
    </div>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color2" show-alpha :colors="colors2"></b-color-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color1 = ref('#2d8cf0')
const color2 = ref('#2d8cf0')
const colors1 = [
  '#1089ff',
  '#52c41a',
  '#fa8c16',
  '#f5222d',
  '#2f54eb',
  '#faad14',
  '#722ed1',
  '#eb2f96',
  '#13c2c2',
  '#fadb14',
  '#a0d911',
  '#fa541c',
  '#eaff8f',
  '#bae7ff',
  '#efdbff',
  '#ffd6e7',
  '#ff1885',
  '#fff506',
  '#00bcd4',
  '#f06292',
  '#cb6c00',
  '#607d8b',
  '#000000',
  '#ffffff'
]
const colors2 = [
  '#311B92',
  '#512DA8',
  '#673AB7',
  '#9575CD',
  '#D1C4E9',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)'
]
</script>

禁用状态 ​

可设置禁用状态

   
<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color" disabled></b-color-picker>
      &nbsp;&nbsp;
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#1089ff')
</script>
<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color" disabled></b-color-picker>
      &nbsp;&nbsp;
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#1089ff')
</script>

不同的大小 ​

四个不同大小

<template>
  <div>
    <div flex="cross:center" class="mb-16">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini"></b-color-picker>
      </div>
    </div>
    <div flex="cross:center">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small" :show-label="false"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini" :show-label="false"></b-color-picker>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#1089ff')
</script>
<template>
  <div>
    <div flex="cross:center" class="mb-16">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini"></b-color-picker>
      </div>
    </div>
    <div flex="cross:center">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small" :show-label="false"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini" :show-label="false"></b-color-picker>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#1089ff')
</script>

Props ​

参数说明类型可选值默认值
value / v-model绑定值string——
disabled是否禁用boolean—false
size尺寸string—medium / small / mini
show-alpha是否支持透明度选择boolean—false
color-format写入 v-model 的颜色的格式stringhsl / hsv / hex / rgbhex（show-alpha 为 false）/ rgb（show-alpha 为 true）
popper-classColorPicker 下拉框的类名string——
colors预定义颜色array——

Events ​

事件名称说明回调参数
change当绑定值变化时触发当前值
active-change面板中当前显示的颜色发生改变时触发当前显示的颜色值

MIT Licensed | Copyright © 2023-present bin-ui-design