使用取色器更改主题及颜色时取色器消失问题

问题分析：使用取色器时更改主题颜色时，出现了还没有选择颜色，取色器就消失的现象

1、更改主题颜色实现：

<el-form>
      <el-form-item label="主题颜色">
        <el-color-picker
          @change="setColor"
          v-model="color"
          size="small"
          show-alpha
          :predefine="predefineColors"
        />
      </el-form-item>
</el-form>

<script>
//颜色组件组件的数据
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

2、一般来说，更改主题样式需要使用js来更改

 代码：

//主题颜色的设置
const setColor = () => {
  //通知js修改根节点的样式对象的属性与属性值
  const html = document.documentElement
  //给样式对象进行设置属性-----'--el-color-primary':主题颜色
  html.style.setProperty('--el-color-primary', color.value)
}
</script>

3、到这里已经实现了更改主题样式，但是使用取色器时更改主题颜色时，出现了还没有选择颜色，取色器就消失了，解决方法如下：

给<el-color-picker>标签添加属性  :teleported="false"，

:teleported="false" 属性通常用于控制某个组件或元素的定位方式， 可能用于决定是否将元素（如弹出框或下拉菜单）挂载到其他位置，如挂载到文档的 body 上。将 teleported 属性绑定到一个布尔值，以控制元素是否被挂载到其他位置。如果 teleported 属性设置为 true，则元素可能会被挂载到其他位置，如挂载到文档的 body 上；如果设置为 false，则元素可能不会离开其原始位置。