關(guān)于vue-color-顏色選擇器插件

更新時(shí)間：2022年09月16日 09:15:32 作者：JackieDYH

這篇文章主要介紹了關(guān)于vue-color-顏色選擇器插件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-color顏色選擇器插件

安裝-npm

npm install 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>

vue顏色選擇器插件vColorPicker

vColorPicker是基于vue的一款顏色選擇器的插件

vColorPicker插件官網(wǎng)

安裝

在npm中安裝插件

$ npm install vcolorpicker -S

使用

在main.js中寫(xiě)入使用

import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

頁(yè)面使用：

<div>
?<colorPicker v-model="form.color" @change="handleChangeColor" size="5"></colorPicker>
</div>

選項(xiàng)：

? return {
? ? ? ? form: {
? ? ? ? ? color:'#ff0000',//默認(rèn)選擇顏色
? ? ? ? },
? }

事件：

change顏色值改變的時(shí)候觸發(fā)

? ? ? handleChangeColor (val) {
? ? ? ? console.log('輸出顏色值',val) ?// 顏色 #6c8198
? ? ? },

差不多就是這樣就可以使用了，很簡(jiǎn)單官網(wǎng)也有例子

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

離線搭建vue環(huán)境運(yùn)行項(xiàng)目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開(kāi)發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下
2023-11-11
Vue組件的渲染流程詳細(xì)講解
在Vue核心中除了響應(yīng)式原理外,視圖渲染也是重中之重,下面這篇文章主要給大家介紹了關(guān)于Vue組件的渲染流程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
Vue中實(shí)現(xiàn)動(dòng)態(tài)更新JSON數(shù)據(jù)的三種方式
在 Vue 項(xiàng)目中動(dòng)態(tài)更新 JSON 數(shù)據(jù),可以通過(guò)以下幾種方式實(shí)現(xiàn),具體方法取決于你的需求,比如數(shù)據(jù)是存儲(chǔ)在前端還是后端、是否需要持久化等,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2025-04-04
vue中添加音頻和視頻的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何vue中添加音頻和視頻的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下
2023-08-08
vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue彈窗組件的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue彈窗組件的實(shí)現(xiàn)示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
在vue項(xiàng)目中使用element-ui的Upload上傳組件的示例
本篇文章主要介紹了在vue項(xiàng)目中使用element-ui的Upload上傳組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02