App.vue

<template>
  <a-config-provider :locale="locale">
    <div>
      <a-radio-group :value="locale" @change="changeLocale">
        <a-radio-button key="en" :value="enUS">
          English
        </a-radio-button>
        <a-radio-button key="cn" :value="zhCN">
          中文
        </a-radio-button>
      </a-radio-group>
      <div>
        <h4>v-model: <input v-model="color" type="text" /></h4>
        <a-color-picker v-model="color" style="width:130px" @show="changeHandler" />
      </div>
      <div>
        <h4>v-model:{{ color }}</h4>
        <a-color-picker v-model="color" style="width:130px" @show="changeHandler" />
      </div>
      <div>
        <h4>备选颜色</h4>
        <a-color-picker :config="config1" />
      </div>
      <div>
        <h4>多种输入格式</h4>
        <a-color-picker :config="config2" :get-popup-container="node => node.parentNode" />
      </div>
      <div>
        <button @click="config2.components.preview = !config2.components.preview">
          修改config
        </button>
      </div>
      <div>
        <h4>多种尺寸</h4>
        <a-color-picker size="large" />
      </div>
      <div><a-color-picker size="small" /></div>
      <div>
        <h4>切换禁用</h4>
        <a-color-picker :disabled="disabled" />
      </div>
      <div>
        <button @click="disabled = !disabled">
          切换
        </button>
      </div>
      <div>
        <h4>切换格式 [color:{{ color2 }}]</h4>
        <a-color-picker v-model="color2" :locale="zhCN" :format="format" />
      </div>
      <div>
        <button @click="format = 'HEX'">
          HEX
        </button>
        <button @click="format = 'RGBA'">
          RGBA
        </button>
        <button @click="format = 'HSVA'">
          HSVA
        </button>
        <button @click="format = 'HSLA'">
          HSLA
        </button>
        <button @click="format = 'CMYK'">
          CMYK
        </button>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import enUS from 'ant-design-vue/../components/locale/en_US';
import zhCN from 'ant-design-vue/../components/locale/zh_CN';
export default {
  name: 'Demo',
  data() {
    return {
      color: '#ccc',
      color2: '#ccc',
      disabled: false,
      format: '',
      locale: enUS,
      enUS,
      zhCN,
      config1: {
        swatches: [
          'rgba(244, 67, 54, 1)',
          'rgba(233, 30, 99, 0.95)',
          'rgba(156, 39, 176, 0.9)',
          'rgba(103, 58, 183, 0.85)',
          'rgba(63, 81, 181, 0.8)',
          'rgba(33, 150, 243, 0.75)',
          'rgba(3, 169, 244, 0.7)',
          'rgba(0, 188, 212, 0.7)',
          'rgba(0, 150, 136, 0.75)',
          'rgba(76, 175, 80, 0.8)',
          'rgba(139, 195, 74, 0.85)',
          'rgba(205, 220, 57, 0.9)',
          'rgba(255, 235, 59, 0.95)',
          'rgba(255, 193, 7, 1)',
        ],
      },
      config2: {
        components: {
          // Main components
          preview: true,
          opacity: true,
          hue: true,
          interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true,
          },
          strings: {
            save: 'Save',
            clear: 'Clear',
            cancel: 'Cancel',
          },
        },
      },
    };
  },
  methods: {
    changeHandler(...arg) {
      arg;
      // console.log(arg);
    },
    changeLocale(e) {
      const localeValue = e.target.value;
      this.locale = localeValue;
    },
  },
};
</script>