颜色选择器 ColorPicker 试验性功能，API不稳定

更新日志

安装

npm

$ npm i @vrx-arco/color-picker

yarn

$ yarn add @vrx-arco/color-picker

pnpm

$ pnpm add @vrx-arco/color-picker

bun

$ bun add @vrx-arco/color-picker

普通使用

<template>
  <Card>
    <ColorPicker />
  </Card>
</template>

受控模式

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

  const color = ref('#165DFF')
</script>
<template>
  <Card>
    <ColorPicker v-model="color" />
  </Card>
</template>

显示颜色文字

#165DFF

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

  const color = ref('#165DFF')
</script>
<template>
  <Card>
    <ColorPicker v-model="color" showText />
  </Card>
</template>

隐藏透明度调节

#165DFF

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

  const color = ref('#165DFF')
</script>
<template>
  <Card>
    <ColorPicker v-model="color" showText disabledAlpha />
  </Card>
</template>

禁用

#165DFF

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

  const color = ref('#165DFF')
</script>
<template>
  <Card>
    <ColorPicker v-model="color" showText disabled />
    <ColorPicker v-model="color" disabled />
  </Card>
</template>

修改颜色格式

rgb(22, 93, 255)

<template>
  <Card>
    <ColorPicker format="rgb" defaultValue="rgb(22, 93, 255)" showText />
  </Card>
</template>

颜色预设

#165DFF

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

  const color = ref('#165DFF')

  const historyColors = ref<string[]>([])

  const handleChange = (visible, v) => {
    if (visible) {
      return
    }
    historyColors.value.push(v)
  }
</script>
<template>
  <Card>
    <ColorPicker
      v-model="color"
      showText
      :presets="[
        { title: '最近使用颜色', colors: historyColors },
        {
          title: '系统预设颜色',
          colors: [
            '#00B42A',
            '#3C7EFF',
            '#FF7D00',
            '#F76965',
            '#F7BA1E',
            '#F5319D',
            '#D91AD9',
            '#9FDB1D',
            '#FADC19',
            '#722ED1',
            '#3491FA',
            '#7BE188',
            '#93BEFF',
            '#FFCF8B',
            '#FBB0A7',
            '#FCE996',
            '#FB9DC7',
            '#F08EE6',
            '#DCF190',
            '#FDFA94',
            '#C396ED',
            '#9FD4FD',
          ],
        },
      ]"
      @popup-visible-change="handleChange"
    />
  </Card>
</template>

直接使用颜色面板

HEX

%

HEX

%

<template>
  <Card>
    <ColorPickerPanel />
    <ColorPickerPanel disabled />
  </Card>
</template>

颜色选择器面板额外功能

#165DFF

HEX

%

#165DFF

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

  const color = ref('#165DFF')
</script>
<template>
  <Card>
    <ColorPicker v-model="color" showText>
      <template #extra="{ color }">
        <ATag :color size="small" style="margin-left:10px;margin-bottom:10px">{{ color }}</ATag>
      </template>
    </ColorPicker>
    <ColorPickerPanel v-model="color" showText style="margin-left:10px;">
      <template #default="{ color }">
        <ATag :color size="small" style="margin-left:10px;margin-bottom:10px">{{ color }}</ATag>
      </template>
    </ColorPickerPanel>
  </Card>
</template>

样式完整导入

// 导入依赖的所有 less样式
import '@vrx-arco/color-picker/arco-style'

// 导入依赖的所有css样式
import '@vrx-arco/color-picker/arco-style-css'

// 导入自身样式
import '@vrx-arco/color-picker/style/index.css'

自动导入

使用 unplugin-vue-components 对组件与样式进行自动按需导入

安装

npm

$ npm i @vrx-arco/helper -D
# or
$ npm i @vrx-arco/color-picker-import-resolver -D

yarn

$ yarn add @vrx-arco/helper -D
# or
$ yarn add @vrx-arco/color-picker-import-resolver -D

pnpm

$ pnpm add @vrx-arco/helper -D
# or
$ pnpm add @vrx-arco/color-picker-import-resolver -D

bun

$ bun add @vrx-arco/helper  -D
# or
$ bun add @vrx-arco/color-picker-import-resolver  -D

使用

import { VrxArcoProComponentsResolver } from '@vrx-arco/helper'

// or
import { VrxArcoColorPickerResolver } from '@vrx-arco/color-picker-import-resolver'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        VrxArcoColorPickerResolver({}),
        // or
        VrxArcoProComponentsResolver({ colorPicker: true }),
      ],
    }),
  ],
})

API

<color-picker> <color-picker-panel> 共用Props

暂无数据

<color-Picker> Props

暂无数据

<color-picker> <color-picker-panel> Events

暂无数据

<color-picker> Slots

暂无数据

nuxt

其他服务端渲染配置，请参考 nuxt 插件的具体实现

安装

npm

$ npm i  @vrx-arco/nuxt -D

yarn

$ yarn add @vrx-arco/nuxt -D

pnpm

$ pnpm add @vrx-arco/nuxt -D

bun

$ bun add @vrx-arco/nuxt -D

Options

请跳转 Options 查看

启用功能

export default defineNuxtConfig({
  modules: ['@vrx-arco/nuxt'],
  vrxArco: {
    colorPicker: true,
  },
})