湘潭响应式网站建设 磐石网络,wordpress显示注册人数,下载app平台,网上怎么做外贸文章目录 前言样例特点 一、使用步骤#xff1f;1. 安装2.引入3.在项目中使用 vcolorpicker 二、选项三、事件四、问题反馈问题所在安装引入例子效果图 前言
vColorPicker——官网 vColorPicker——GitHub
样例 vColorPicker是基于 Vue 的一款颜色选择器插件#xff0c;仿照… 文章目录 前言样例特点 一、使用步骤1. 安装2.引入3.在项目中使用 vcolorpicker 二、选项三、事件四、问题反馈问题所在安装引入例子效果图 前言
vColorPicker——官网 vColorPicker——GitHub
样例 vColorPicker是基于 Vue 的一款颜色选择器插件仿照Angular的color-picker插件制作
特点
简单易用UI在原插件基础上优化增加了圆角和过渡动画提供以 npm 的形式安装提供全局组件在支持 html5 input[type‘color’] 的浏览器实现了「更多颜色」的功能 一、使用步骤
1. 安装
npm install vcolorpicker -S2.引入
在 main.js 文件中引入插件并注册
# main.js
import vcolorpicker from vcolorpicker
Vue.use(vcolorpicker)3.在项目中使用 vcolorpicker
templatecolorPicker v-modelcolor /
/template
scriptexport default {data () {return {color: #ff0000}}}
/script二、选项
你可以通过在所在的元素上设置以下属性来配置color-picker
defaultColor默认颜色如defaultColor“#ff0000”disabled禁用状态如disabledtrue 三、事件
change颜色值改变的时候触发
colorPicker v-modelcolor v-on:changeheadleChangeColor/colorPicker四、问题反馈
今天下载装了一下发现布局有问题倒腾一个多小时也不知道因为啥有知道的可以私信我一下。
问题所在 所以又换了颜色插件
vue3-colorPicker
安装
npm install vue3-colorpicker引入
import Vue3ColorPicker from vue3-colorpicker;
import vue3-colorpicker/style.css;
app.use(Vue3ColorPicker)例子
需要再装一下tinycolor2插件局部引入就行
templatedivcolor-picker v-model:pureColorpureColor v-model:gradientColorgradientColor//div
/template
script langtsimport { ref } from vue;import { ColorInputWithoutInstance } from tinycolor2;export default defineComponent({setup() {const pureColor refColorInputWithoutInstance(red);const gradientColor ref(linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%));return { pureColor, gradientColor }}});
/script效果图
