背景
需求要实现一个颜色选择器（来自Ant Design组件库），样式如下：
查看 Ant Design Vue 官方文档未找到该组件
Github Issues中搜索颜色选择器，参考issue，可以得出以下信息：
1、Ant Design V5版本中已提供 ColorPicker 组件，已有开发者将Vue版本的ColorPicker组件提交到feature分支，因某种原因至今未合并到main分支🤔
市面上也有其它ColorPicker组件，若想改造成设计稿的样式，看起来不复杂，实际并不简单😵
突发奇想，既然Ant Design中已有该组件，如果通过某种方式能够让react组件在vue组件中使用，岂不美哉😋；
查询资料有两种可行方式：
1、将 React 组件封装成 Web Components，然后在 Vue 组件中使用；
2、借助第三方插件，如vue-react、vuera、react-to-vue、veaury等，此处不一一列举了。
实践过程中，尝试使用方式1没有成功😢，可能是姿势不对吧，有兴趣的小伙伴可以去尝试一番；
故本篇采用方案2，综合更新频率、下载量等指标，最终选择 veaury 来实现
实现步骤
1. 安装必要的依赖
npm install antd@5.22.3 react@18.3.1 react-dom@18.3.1 veaury@2.5.1
⚠️下图来源于veaury官方文档，若不固定版本，需要根据文档做一些配置
2. 创建Vue组件并引入React组件
<script lang="ts" setup>
import { applyPureReactInVue } from 'veaury'
import { ColorPicker } from 'antd'
import type { Color } from 'antd/es/color-picker'
// 使用Veaury将React组件转换为Vue组件
const VueColorPicker = applyPureReactInVue(ColorPicker)
// 定义Vue的模型
const postColor = defineModel('value', {
type: Array,
required: true,
})
// 定义React组件的属性
const reactProps = reactive({
defaultValue: 'rgb(22, 119, 255)',
defaultFormat: 'rgb',
disabledAlpha: true,
destroyTooltipOnHide: true,
// 颜色变化的回调
onChange: (color: Color) => {
const { r, g, b } = color.toRgb()
postColor.value = [r, g, b]
},
// 颜色格式变化的回调
onFormatChange: (format: string) => {
console.log(format)
},
})
// 在组件挂载前设置默认颜色值
onBeforeMount(() => {
const [r, g, b] = postColor.value
reactProps.defaultValue = `rgb(${r}, ${g}, ${b})`
})
</script>
<template>
<VueColorPicker v-bind="reactProps" />
</template>
⚠️注意事项：
1、属性和方法都通过props传递
2、不支持使用v-model做双向数据绑定
3. 使用组件
在你的Vue组件中使用这个新的ColorPicker组件：
<template>
<div>
<ColorPicker v-model:value="color" />
<p>Selected Color: {{ color }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ColorPicker from './components/ColorPicker.vue'
const color = ref([22, 119, 255])
</script>
基本原理
使用 react-dom 的 render 方法将 React 组件挂载到 Vue 组件的 DOM 节点上
性能问题
打包表现：
| 使用veaury | 不使用 | |
|---|---|---|
| 体积 | 61.6M | 57.7M |
由于需要同时加载Vue和React的Runtime，会导致打包体积变大，内存占用增加；
小尾巴🚩
1、veaury不仅可以在vue组件中使用react组件，反之亦然，目前对veaury的掌握还不足30%，有兴趣的小伙伴可以查阅官方文档了解更多；
2、veaury有使用上的限制，非必要不推荐使用，尤其是复杂的组件，会增加维护难度；
3、veaury会有不可避免的性能问题，追求高性能的项目不建议使用
