關(guān)于vue-color-顏色選擇器插件
更新時間：2022年09月16日 09:15:32 作者：JackieDYH
這篇文章主要介紹了關(guān)于vue-color-顏色選擇器插件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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的一款顏色選擇器的插件
安裝
在npm中安裝插件
$ npm install vcolorpicker -S
使用
在main.js中寫入使用
import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker)
頁面使用：
<div> ?<colorPicker v-model="form.color" @change="handleChangeColor" size="5"></colorPicker> </div>
選項：
? return {
? ? ? ? form: {
? ? ? ? ? color:'#ff0000',//默認(rèn)選擇顏色
? ? ? ? },
? }事件：
change顏色值改變的時候觸發(fā)
? ? ? handleChangeColor (val) {
? ? ? ? console.log('輸出顏色值',val) ?// 顏色 #6c8198
? ? ? },差不多就是這樣就可以使用了，很簡單官網(wǎng)也有例子
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli項目中使用Mockjs詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
仿ElementUI實現(xiàn)一個Form表單的實現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實現(xiàn)一個Form表單的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue form表單使用resetFields函數(shù)出現(xiàn)的問題
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結(jié)合實例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹了vue實現(xiàn)列表拖拽排序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue mixins合并策略以及應(yīng)用場景,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
利用Vue3實現(xiàn)一個可以用js調(diào)用的組件
最近遇到個功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue 組件參數(shù)校驗與非props特性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Bootstrap適用于快速搭建簡單網(wǎng)站或Web應(yīng)用程序的情況，而Vue.js適用于構(gòu)建復(fù)雜的單頁面應(yīng)用程序，根據(jù)您的項目需求和開發(fā)方式，您可以選擇使用Bootstrap、Vue.js或兩者結(jié)合使用，這篇文章主要介紹了vue使用Bootstrap的詳細(xì)方法,需要的朋友可以參考下2023-08-08