新增MyColorPickerLink组件

src/components/MyColorPicker/MyColorPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="color-picker">
+  <div class="color-picker" :style="{ width: `${width}px` }">
     <color-picker v-model="sValue" :position="positionCom" @change="onChange" />
     <!-- <div class="color-btn"></div>
     <div class="picker-box">
@@ -25,6 +25,8 @@ export default {
   props: {
     // v-model 当前颜色值 hex srgb
     value: PropTypes.string.def(''),
+    // 选择器宽度
+    width: PropTypes.integer.def(60),
     // 显示位置 right left
     horizontal: PropTypes.string.def('right'),
   },
@@ -71,14 +73,16 @@ export default {
   background-color: #ffffff;
   border: 1px solid #efefef;
   padding: 5px;
-  width: 60px;
+  width: 32px;
   height: 32px;
   position: relative;
 }
 /deep/.one-colorpicker {
+  width: 100%;
+  height: 100%;
   .color-block {
-    width: 48px;
-    height: 20px;
+    width: 100%;
+    height: 100%;
     border: 1px solid #000;
   }
 }

src/components/MyColorPickerLink/MyColorPickerLink.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="color-picker-link">
+    <MyColorPicker v-model="sValue[0]" :width="width" :horizontal="horizontal" />
+    <div class="link">
+      <a-icon class="icon" :component="Icons.link" />
+    </div>
+    <MyColorPicker v-model="sValue[1]" :width="width" :horizontal="horizontal" />
+  </div>
+</template>
+
+<script>
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import * as Icons from '@/core/icons'
+import MyColorPicker from '@/components/MyColorPicker'
+
+// 颜色选择器
+export default {
+  name: 'MyColorPickerLink',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    // v-model 当前颜色值 (数组)
+    value: PropTypes.array.def([]),
+    // 选择器宽度
+    width: PropTypes.integer.def(50),
+    // 显示位置 right left
+    horizontal: PropTypes.string.def('right'),
+  },
+  components: {
+    MyColorPicker
+  },
+  computed: {
+    positionCom () {
+      // const val = horizontal === 'left' ? { left: 0 } : { right: 0 }
+      const val = { [this.horizontal]: 0 }
+      return { top: '40px', ...val }
+    }
+  },
+  data () {
+    return {
+      Icons,
+      // 当前值
+      sValue: ['#fff', '#000']
+    }
+  },
+  watch: {
+    value: {
+      // 首次加载的时候执行函数
+      immediate: true,
+      handler (val) {
+        this.sValue = val
+      }
+    }
+  },
+  methods: {
+
+    // 触发change事件
+    onChange (value) {
+      this.$emit('change', value)
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.color-picker-link {
+  display: flex;
+  position: relative;
+  .link {
+    line-height: 32px;
+    font-size: 20px;
+    color: #707070;
+    margin: 0 -3px;
+    z-index: 2;
+  }
+}
+</style>

src/components/MyColorPickerLink/index.js

@@ -0,0 +1,7 @@
+import Component from './MyColorPickerLink'
+
+Component.install = Vue => {
+  Vue.component(Component.name, Component)
+}
+
+export default Component