iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vue-color-颜色选择器插件
  • 132
分享到

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

2024-04-02 19:04:59 132人浏览 独家记忆
摘要

目录Vue-color颜色选择器插件vue颜色选择器插件vColorPicker安装使用vue-color颜色选择器插件 安装-npm npm install 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
      },

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于vue-color-颜色选择器插件

本文链接: https://www.lsjlt.com/news/167692.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作