关于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-cli项目中使用Mockjs详解
这篇文章主要介绍了vue-cli项目中使用Mockjs详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
仿ElementUI实现一个Form表单的实现代码
这篇文章主要介绍了仿ElementUI实现一个Form表单的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue form表单使用resetFields函数出现的问题
这篇文章主要介绍了vue form表单使用resetFields函数出现的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue3+TypeScript+Vite使用require动态引入图片等静态资源
本文主要介绍了Vue3+TypeScript+Vite使用require动态引入图片等静态资源，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue+elementUI实现表单和图片上传及验证功能示例
这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
2019-05-05
vue实现列表拖拽排序的示例代码
本文主要介绍了vue实现列表拖拽排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
vue mixins合并策略以及应用场景分析
这篇文章主要介绍了vue mixins合并策略以及应用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
利用Vue3实现一个可以用js调用的组件
最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下
2021-08-08
Vue 组件参数校验与非props特性的方法
这篇文章主要介绍了Vue 组件参数校验与非props特性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
vue中Bootstrap的详细使用方法
Bootstrap适用于快速搭建简单网站或Web应用程序的情况，而Vue.js适用于构建复杂的单页面应用程序，根据您的项目需求和开发方式，您可以选择使用Bootstrap、Vue.js或两者结合使用，这篇文章主要介绍了vue使用Bootstrap的详细方法,需要的朋友可以参考下
2023-08-08