代码演示

如何引入

ColorPicker 从 v2.64.0 开始支持

import { ColorPicker } from '@kousum/semi-ui-vue';

基本用法

放在弹层

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

13

 

1

import { ColorPicker, Button } from '@kousum/semi-ui-vue';

2

function Demo() {

3

    return <div>

4

        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}/>

5

        <br/>

6

        <div>自定义 trigger</div>

7

        <ColorPicker alpha={true} onChange={value=>{console.log(value);}} usePopover={true}>

8

            <Button> Trigger </Button>

9

        </ColorPicker>

10

    </div>;

11

}

12

​

13

export default Demo

Show Error

Auto Save

正常展示

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { ColorPicker } from '@kousum/semi-ui-vue';

2

function Demo() {

3

    return <ColorPicker alpha={true} onChange={value=>{console.log(value);}}/>;

4

}

5

​

6

export default Demo

Show Error

Auto Save

滴管取色器

使用 eyeDropper={true} 开启滴管功能，支持从浏览器内或外部软件屏幕取色。

注意事项

开启此功能需要当前网页部署在 HTTPS 或 localhost 域名等安全 context 下，否则无效果。需用户浏览器版本 Chromium > 95

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { ColorPicker } from '@kousum/semi-ui-vue';

2

function Demo() {

3

    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value);}}/>;

4

}

5

​

6

​

7

export default Demo

Show Error

Auto Save

默认值

在进行各种颜色表示格式之间相互转换时，部分格式之间存在理论误差，因此 onChange 返回给你的值是同时包含了 hsva hex rgba 三种格式的色值的对象。

你传入的 defaultValue(非受控) 和 value(受控) 也应当是同样包含三种格式的对象。

我们在组件类上提供了静态工具函数 colorStringToValue，用于将常见颜色字符串转换为该对象，支持 rgb(57,197,187) #39c5bb hsv(176,71,77) 等字符串直接传入。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

16

 

1

import { ColorPicker } from '@kousum/semi-ui-vue';

2

​

3

​

4

function Demo() {

5

    return <div>

6

        <ColorPicker 

7

            defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}

8

            onChange={(value)=>{

9

                console.log(value);

10

            }} className={""} alpha={true}/>

11

    </div>;

12

​

13

}

14

​

15

​

16

export default Demo

Show Error

Auto Save

受控

通过传入 value 来受控使用

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

19

 

1

import { ColorPicker } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

​

5

const Demo = defineComponent(() => {

6

​

7

  const value = ref(ColorPicker.colorStringToValue("#39c5bb"));

8

  return () => <div>

9

    <ColorPicker

10

      value={value.value}

11

      onChange={(v) => {

12

        value.value = v

13

      }}

14

      alpha={true}

15

    />

16

  </div>;

17

​

18

})

19

export default Demo

Show Error

Auto Save

顶部和底部渲染额外元素

使用 topSlot 和 bottomSlot 在顶部和底部渲染额外元素

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

11

 

1

import { ColorPicker } from '@kousum/semi-ui-vue';

2

function Demo() {

3

    return <ColorPicker

4

        topSlot={<div> TopSlot</div>}

5

        bottomSlot={<div>Bottom Slot</div>}

6

        alpha={true}

7

        onChange={value=>{console.log(value);}}

8

    />;

9

}

10

​

11

export default Demo

Show Error

Auto Save

API 参考

参数	说明	类型	默认值
onChange	用户选中颜色的回调	(value)=>void	-
alpha	是否开启透明度选择	boolean	true
bottomSlot	底部渲染额外元素	ReactNode	-
className	类名	string	-
defaultFormat	默认手动输入时的格式	rgba hex hsva	hex
defaultValue	默认值	Object	-
eyeDropper	是否开启滴管拾色器	boolean	true
height	高度	number	280
style	样式	CSSProperties	-
topSlot	顶部渲染额外元素	ReactNode	-
width	宽度	number	280
usePopover	是否放入Popover渲染	boolean	false
popoverProps	放入 Popover 时，Popover 传入的 props	Popover Props	-