关于vue-color-颜色选择器插件

 更新时间:2022年09月16日 09:15:32   作者:JackieDYH  
这篇文章主要介绍了关于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的一款颜色选择器的插件

vColorPicker插件官网

安装

在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',//默认选择颜色
        },
  }

事件:

change颜色值改变的时候触发

      handleChangeColor (val) {
        console.log('输出颜色值',val)  // 颜色 #6c8198
      },

差不多就是这样就可以使用了,很简单官网也有例子

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue作用域插槽slot-scope实例代码

    Vue作用域插槽slot-scope实例代码

    这篇文章主要介绍了Vue作用域插槽slot-scope实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue.js使用3DES加密的方法示例

    vue.js使用3DES加密的方法示例

    这篇文章主要介绍了vue.js使用3DES加密的方法,结合实例形式分析了vue.js使用3DES加密的具体操作步骤与使用技巧,并提供了CryptoJS-v3.1.2的本地下载,需要的朋友可以参考下
    2018-05-05
  • vue.js打包项目后页面出现空白的解决办法

    vue.js打包项目后页面出现空白的解决办法

    这篇文章主要介绍了vue.js打包项目后页面出现空白的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

    vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

    本篇文章主要介绍了vue mintui-Loadmore结合实现下拉刷新和上拉加载示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法

    这篇文章主要介绍了使用Vue-cli 3.0搭建Vue项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • VUE+SpringBoot实现分页功能

    VUE+SpringBoot实现分页功能

    这篇文章主要为大家详细介绍了VUE+SpringBoot实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue 2.0 侦听器 watch属性代码详解

    Vue 2.0 侦听器 watch属性代码详解

    这篇文章主要介绍了Vue 2.0 侦听器 watch属性代码详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • 前端实现pdf预览功能的全过程(基于vue)

    前端实现pdf预览功能的全过程(基于vue)

    这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue异步axios获取的数据渲染到页面的方法

    vue异步axios获取的数据渲染到页面的方法

    今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解VUE中v-bind的基本用法

    详解VUE中v-bind的基本用法

    本篇文章主要介绍了详解VUE中v-bind的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论