colorpicker-v3

2.0.1 • Public • Published

一款支持vue3 的颜色选择器 v1.0.8

github

^V1 版本使用说明

^V2 使用说明

一款支持vue3 的颜色选择器

特点

  1. 简单易用,UI在原插件基础上优化增加了圆角和过渡动画
  2. 提供以 npm 的形式安装提供全局组件
  3. 在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能

安装

npm i colorpicker-v3

使用

在main中注册组件

main.js 文件中引入插件并注册

import { createApp } from 'vue'
import App from './App.vue'
import ColorPicker from 'colorpicker-v3'  // 注册组件
import 'colorpicker-v3/dist/style.css' // 引入样式文件
const app = createApp(App)
app.use(ColorPicker)
app.mount('#app')

组件中使用

vue3 + js

<template>
  <color-picker @change="change" :value="color"></color-picker>
</template>

<script setup>
import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {
  console.log(e)
  colorRgba.value = e.rgba
}
</script>

<style>
</style>

 

vue+ts+setup

<template>
  <color-picker @change="change" :value="color"></color-picker>
</template>

<script setup lang="ts">

import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {
  console.log(e)
  colorRgba.value = e.rgba
}
</script>

<style>
</style>

 

Props

参数名 描述 类型 默认值 备注
v-model:hex 颜色16进制值 string #000000 |#000 使用16进制值
v-model:rgba 初始化颜色值 string #000000 |#000 使用16进制值
defaultValue(非受控) 初始化颜色值 string #000000 |#000 使用16进制值(优先级低于v-model:hex,当同时存在时优先时hex生效)
btnStyle 设置颜色块样式 Object - -
opacity 颜色透明度初始值 Number| String 1 0~1 数值越小透明度越低(当使用的hex自带透明度时,优先就被opacity代替)
show-opacity 是否显示透明度控制块 boolean true
standard-color 标准色初始化配置 Array<string> standard-clolor详情 使用完整的hex16 进制值
theme-color 主题色初始化配置 Array<string> theme-clolor详情 使用完整的hex16 进制值

standard-clolor

const standardClolor = [
  '#c21401',
  '#ff1e02',
  '#ffc12a',
  '#ffff3a',
  '#90cf5b',
  '#00af57',
  '#00afee',
  '#0071be',
  '#00215f',
  '#72349d',
]

standardClolor

主题色theme-clolor

const themeClolor =[
                '#000000',
                '#ffffff',
                '#eeece1',
                '#1e497b',
                '#4e81bb',
                '#e2534d',
                '#9aba60',
                '#8165a0',
                '#47acc5',
                '#f9974c',
            ]

主题色

Events

事件名 描述 参数 返回值
change 颜色值改变时触发 data: {hex:string,rgba: string} -
finish 点击完成按钮 data: {hex:string,rgba: string} -
close 选色面板关闭 data: {hex:string,rgba: string} -

使用示例

<template>
  <color-picker
    :value="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>

V2 使用说明

Package Sidebar

Install

npm i colorpicker-v3@2.0.1

Version

2.0.1

License

ISC

Unpacked Size

48.7 kB

Total Files

6

Last publish

Collaborators

  • wcrane-ssr