vue-color 颜色选择器插件用法介绍
2023-09-27 14:26:02 时间
// 首先安装依赖
npm i vue-color
<div>
<div>color-picker</div>
<p>Chrome</p>
<chrome-picker v-model="colors" />
<p>Sketch</p>
<sketch-picker v-model="colors" />
<p>Photoshop</p>
<photoshop-picker v-model="colors" />
<p>Material</p>
<material-picker v-model="colors" />
<p>Slider</p>
<slider-picker v-model="colors" />
<p>Compact</p>
<compact-picker v-model="colors" />
<p>Swatches</p>
<swatches-picker v-model="colors" />
<p>Twitter</p>
<twitter-picker v-model="colors" />
<p>Grayscale</p>
<grayscale-picker v-model="colors" @input="updateValue" />
</div>
<script>
import {
Material,
Compact,
Swatches,
Slider,
Photoshop,
Chrome,
Sketch,
Twitter,
Grayscale,
} from "vue-color";
export default {
name: "color-picker",
components: {
"material-picker": Material,
"compact-picker": Compact,
"swatches-picker": Swatches,
"slider-picker": Slider,
"photoshop-picker": Photoshop,
"chrome-picker": Chrome,
"sketch-picker": Sketch,
"twitter-picker": Twitter,
"grayscale-picker": Grayscale,
},
data() {
return {
colors: {
color: "",
hex: "#194d33",
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1,
},
}
},
methods: {
// 值改变事件
updateValue(value) {
console.log(value)
console.log(this.color)
}
}
}
</script>
相关文章
- 【Vue+element+admin】目录详解
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue
- vue-split-table【表格合并和编辑插件】
- Jenkins构建Vue项目
- vue插件
- Idea使用技巧14--idea安装vue插件
- vue-router路由高亮效果
- vue工程化引入组件模板
- vue组件和插件的区别
- vue aes
- vue中el和data的两种写法
- Vue使用distpicker插件实现省市级下拉框三级联动
- vue Syntax Error: Unexpected token {
- 在vue 中使用Stylus
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用