好用的前端组件-颜色选择器

野性酷女 2023-10-07 22:02 12阅读 0赞

一、官网

[一款支持vue3 的颜色选择器 | ColorPickerV3][vue3 _ _ ColorPickerV3]

二、效果

![ä¸æ¬¾æ¯ævue3 çé¢è²éæ©å¨][vue3]

三、感受

1.  **可以用于移动端，****但是得调整弹框的位置，否则可能部分区域在界面外（截至2022-12-12是这样）**。
2.  支持VUE3
3.  官网示例：
    
        <template>
          <color-picker
            :hex="color"
            @change="change"
            :standard-color="bColor"
            @close="close"
            @finish="finish"
          ></color-picker>
        </template>
        <script lang="ts">
        import { defineComponent, reactive, ref } from 'vue'
        export default defineComponent({
          name: ''
        })
        </script>
        <script lang="ts" setup>
        const color = ref("")
        const colorValue = ref({})
        
        //  颜色值改变
        const change = (e) => {
          // console.log("e", e)
          colorValue.value = e
        }
        
        // 颜色面板关闭
        const close = (e) => {
          console.log("关闭了", e)
        }
        
        const finish = (e) => {
          console.log("点击完成", e)
        }
        
        
        
        const bColor = [
          '#c21401',
          '#ff1e02',
          '#ffc12a',
          '#ffff3a',
          '#90cf5b',
          '#00af57',
          '#00afee',
          '#0071be',
          '#00215f',
          '#72349d',
        ]
        </script>
        <style lang="less" scoped>
        </style>

[vue3 _ _ ColorPickerV3]: https://colorpickerv3.wcrane.cn/guide/#%E7%89%B9%E7%82%B9
[vue3]: https://img-blog.csdnimg.cn/img_convert/13354e8ac4d450bcf4cc13fa21a988b4.png