vue ant design 中使用颜色选择器＜el-color-picker＞控件及按钮国际化修改

1、引入方式

npm install el-color-picker --save

2、使用方式

单独使用：

import elColorPicker from 'el-color-picker'

在main.js全局使用：

import elColorPicker from 'el-color-picker'

Vue.use(elColorPicker)

在vue文件中使用

<el-color-picker :value="selColor" @change="handleColorPickerChange"></el-color-picker>

handleColorPickerChange (color) {
        this.selColor = color
      },

3、按钮国际化实现

颜色选择器中的按钮默认就只是中文，如图：

国际化修改：

方式一：（不推荐）
从node_modules文件夹下找到下图中的文件：

我们需要修改这个文件中部分内容，如下图所示：


(注意：okBtnName和clearBtnName是为实现国际化加入的)

然后在在我们引入控件的界面中，修改如下：

<el-color-picker :value="selColor" @change="handleColorPickerChange" :okBtnName="$t('OK')" :clearBtnName="$t('Clear')"></el-color-picker>

这样改完就可以了

切换英文效果：

方式二：（推荐，此方式简单）
找到此标签，直接用js修改html内容
（要在渲染mounted之后）

setTimeout(() => {
          document.querySelector(".c__btn-clear").textContent = this.$t('Clear')
          document.querySelector(".c__btn-confirm").textContent = this.$t('code_0613')
        },500)