Element UI el-color-picker 组件：如何判断确认按钮是否被点击

在使用 Element UI 的 el-color-picker 组件时，有时需要知道用户是否点击了弹窗中的确认按钮。本文将介绍如何实现这一功能，并提供具体的代码示例。

步骤:

添加确认按钮:

在 el-color-picker 组件中添加一个确认按钮，例如：
```
<el-button type='primary' @click='handleConfirm'>确认</el-button>
```
定义数据属性:

在 el-color-picker 组件中定义一个 data 属性，用来保存当前选择的颜色值和是否点击了确认按钮：
```
data() {
  return {
    color: '',
    confirmed: false
  }
}
```

处理确认按钮点击:

在 el-color-picker 组件中添加一个方法，用来处理点击确认按钮的逻辑：

methods: {
  handleConfirm() {
    this.confirmed = true
    // 其他逻辑，例如关闭弹窗或者更新父组件的数据
  }
}

父组件绑定:

在父组件中使用 el-color-picker 组件，并通过 v-model 绑定颜色值：
```
<el-color-picker v-model='color'></el-color-picker>
```

监听确认状态:

在父组件中监听 el-color-picker 组件的 confirmed 变化，判断是否点击了确认按钮：

watch: {
  'colorPicker.confirmed'(val) {
    if (val) {
      console.log('点击了确认按钮')
      // 其他逻辑，例如更新父组件的数据
    }
  }
}

其中，'colorPicker.confirmed' 是 el-color-picker 组件中 confirmed 属性的绑定方式，具体可以根据实际情况进行修改。

注意: