首页 > 其他分享 >前端怎么在页面中使用颜色选择器

前端怎么在页面中使用颜色选择器

时间:2024-09-10 08:55:34浏览次数:15  
标签:picker Compact vue photoshop color 前端 选择器 页面

这里借助Vue.js 提供的颜色选择器组件库vue-color

首先安装这个库

npm install vue-color

具体使用方法如下

<template>
  <div class="color">
    <div>
      1.material
      <material-picker v-model="colors" />
    </div>
    <div>
      2.compact
      <compact-picker v-model="colors" />
    </div>
    <div>
      3.swatches
      <swatches-picker v-model="colors" />
    </div>
    <div>
      4.slider
      <slider-picker v-model="colors" />
    </div>
    <div>
      5.sketch
      <sketch-picker v-model="colors" />
    </div>
    <div>
      6.chrome
      <chrome-picker v-model="colors" />
    </div>
    <div>
      7.photoshop
      <photoshop-picker v-model="colors" />
    </div>
  </div>
</template>

<script>
import {
  Material,
  Compact,
  Swatches,
  Slider,
  Photoshop,
  Chrome,
  Sketch,
} from "vue-color";
export default {
  name: "TestComponent",
  components: {
    "material-picker": Material,
    "compact-picker": Compact,
    "swatches-picker": Swatches,
    "slider-picker": Slider,
    "photoshop-picker": Photoshop,
    "chrome-picker": Chrome,
    "sketch-picker": Sketch,
  },
  data() {
    return {
      colors: {
        color: "",
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1,
      },
    };
  },
  methods: {
    updateValue(value) {
      console.log(value);
    },
  },
};
</script>

标签:picker,Compact,vue,photoshop,color,前端,选择器,页面
From: https://blog.csdn.net/qq_45937484/article/details/141848679

相关文章

  • css选择器
    1.通配符选择器(UniversalSelector)通配符选择器使用星号(*)表示,可以匹配页面上的所有元素。场景:当需要为页面上所有元素设置统一的样式时CSS代码:*{margin:0;padding:0;box-sizing:border-box;}3.类选择器(ClassSelector)类选择器使用点(.)开头,后面跟上类名,可以......
  • 前端登录注册页面springboot+vue2全开发!
    需求目标:有“登录界面”和“注册界面”以及“功能操作界面”:我们打开程序会自动进入“登录界面”,如果密码输入正确则直接进入“功能操作界面”,在“登录界面”我们可以点击注册进入“注册页面”,注册好了可以再跳回到“登录界面”进行登录。代码实现:(1)登录操作后端开发见我博......
  • Swiper轮播图框架【前端 24】
    Swiper轮播图框架在如今的网页设计中,轮播图已成为一种不可或缺的元素,它能够以动态的方式展示图片、视频或文本信息,有效吸引用户的注意力并提升页面的互动性。在众多轮播图实现框架中,Swiper以其高度的可定制性、流畅的滑动效果以及丰富的API接口脱颖而出,成为前端开发者的首......
  • 微信小程序开发系列5----页面配置--WXML列表渲染-wxkey详解
        下图本来选中Switch1更新后选中的是Switch5了  使用下图红色部分就能解决,id是data里定义的换name也可以,红色部分不能写item.Id 注:不给wx:key会给一个警告,给了性能会更高 源码获取方式(免费):(1)登录-注册:http://resources.kittytiger.cn/(2)签到获取积分(3)搜索......
  • gti前端代码提交
    第一次gti前端提交根据提示一步步看首先gitcheckdev此时可能会报错:error:Yourlocalchangestothefollowingfileswouldbeoverwrittenbycheckout:.env.developmentpackage.jsonPleasecommityourchangesorstashthembeforeyouswitchbranches._______......
  • 掌握 13 个页面 SEO 优化要素,轻松提升网站排名
    页面SEO通过优化网站各个部分来帮助搜索引擎抓取和理解页面,提高搜索排名。除了内容,网站速度、移动设备友好性等因素也很重要。页面SEO不仅能提高点击率和访问量,还能提升品牌可信度,是其他SEO工作的基础,如建立链接等。以下我将介绍13个关键的页面SEO元素,从E-E-A-T......
  • [Base64] 前端上传文件,通过 base64 传递给服务器
    前端FileReader将文件转换为Base64编码字符串,然后将其作为请求体发送到后端。<inputtype="file"id="fileInput"/><buttononclick="uploadFileAsBase64()">上传文件</button><script>functionuploadFileAsBase64(){constfileInp......
  • Web大学生网页作业成品——动漫海贼王介绍网页设计与实现(HTML+CSS)(1个页面)
    ......
  • Web大学生网页作业成品——联想商品商城网页设计与实现(HTML+CSS)(1个页面)
    ......
  • IIS 屏蔽Help页面和Swagger
    1、MVC屏蔽HelP页面暴露API接口方法:找到目录下的 Areas\HelpPage\Views\Help的Index.cshtml注释如代码中@[email protected]@usingSystem.Web.Http.Description@[email protected]......