基于Element-ui的颜色选取器,增加最近使用的颜色。

news2024/11/23 1:38:18

8个预设颜色值,使用一个颜色后,将颜色放到第一个预设颜色,去重,保存到本地。
在这里插入图片描述

完整代码自取

<template>
  <div>
    <el-color-picker :value="value" show-alpha :predefine="predefineColors" @change="changeColor">
    </el-color-picker>
  </div>
</template>
<script>
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  '#c7158577',
]
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      color1: '',
      predefineColors,
    }
  },
  mounted() {
    const storePredefineColors = localStorage.getItem('predefineColors')
      ? JSON.parse(localStorage.getItem('predefineColors'))
      : predefineColors

    this.predefineColors = storePredefineColors
    this.saveColorLocl()
  },
  methods: {
    changeColor(val) {
      const inx = this.predefineColors.findIndex(x => x === val)
      if (inx > -1) {
        this.predefineColors.splice(inx, 1)
      } else {
        const num = this.predefineColors.length - 7
        if (num > 0) {
          this.predefineColors.splice(7, num)
        }
      }

      this.predefineColors.unshift(val)
      this.saveColorLocl()
      this.$emit('input', val)
    },
    saveColorLocl() {
      localStorage.setItem('predefineColors', JSON.stringify(this.predefineColors))
    },
  },
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/910786.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实例041 获取桌面大小

实例说明 获取桌面分辨率可以使用API函数GetDeviceCaps&#xff0c;但API函数参数较多&#xff0c;使用不方便&#xff0c;如何更方便的获取桌面分辨率呢&#xff1f;在本例中&#xff0c;通过读取Screen对象的属性&#xff0c;来获取桌面分辨率信息&#xff0c;以像素为单位。…

IBM LSF 系统简介

IBM LSF 系统简介 LSF&#xff08;Load Sharing Facility&#xff09;是IBM旗下的一款分布式集群管理系统软件&#xff0c;负责计算资源的管理和批处理作业的调度。它给用户提供统一的集群资源访问接口&#xff0c;让用户透明地访问整个集群资源。同时提供了丰富的功能和可定制…

实时拍照翻译怎么做?几个步骤轻松翻译

现在&#xff0c;随着人们跨越国界的频率不断增加&#xff0c;语言障碍成为了一个越来越普遍的问题。为了解决这个问题&#xff0c;一些应用程序开始提供实时拍照翻译功能&#xff0c;这种功能可以通过手机摄像头拍摄文本&#xff0c;并将其翻译成用户所需的语言。那么&#xf…

YOLO目标检测——动漫头像数据集下载分享

动漫头像数据集是用于研究和分析动漫头像相关问题的数据集&#xff0c;它包含了大量的动漫风格的头像图像。动漫头像是指以动漫风格绘制的虚构人物的头像图像&#xff0c;常见于动画、漫画、游戏等媒体。 数据集点击下载&#xff1a;YOLO动漫头像数据集50800图片.rar

结构型(四) - 装饰器模式

一、概念 装饰器模式&#xff08;Decorator Pattern&#xff09;&#xff1a;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种模式创建了一个装饰类&#xff0c;用来包装原有的类&#xff0c;并在保持类方法签名完整性的前提下&#xff0c;提供了额外的…

【Java转Go】快速上手学习笔记(五)之Gorm篇

目录 go get命令1、go get命令无响应问题2、Unresolved dependency错误 连接数据库连接.gomain.go 操作数据库创建表新增数据更新数据删除数据查询数据单表查询多表查询 用到的数据库表原生SQL 完整代码 go往期文章笔记&#xff1a; 【Java转Go】快速上手学习笔记&#xff08;…

python-docx把dataframe表格添加到word文件中

python-docx把dataframe表格添加到word文件中思路较为简单&#xff1a; 先把dataframe格式转变为table新建一个段落&#xff1a;document.add_paragraph()把table添加到这个段落下方 效果图 示例代码 from docx import Document, oxml import pandas as pd import numpy as …

什么是安全测试报告,怎么获得软件安全检测报告?

安全测试报告 软件安全测试报告&#xff1a;是指测试人员对软件产品的安全缺陷和非法入侵防范能力进行检查和验证的过程&#xff0c;并对软件安全质量进行整体评估&#xff0c;发现软件的缺陷与 bug&#xff0c;为开发人员修复漏洞、提高软件质量奠定坚实的基础。 怎么获得靠谱…

单链表制作通讯录

1 问题 通讯录具有输入信息&#xff0c;显示信息&#xff0c;查找以姓名作为关键字&#xff0c;删除信息。 2 方法 实现一个基于面向对象思想的&#xff0c;具有添加、查看、删除、修改、查找、保存数据功能的通讯录程序。 class Node: def __init__(self, name, phone_numb…

HCIP的交换机(STP,VRRP)实验

题目 拓扑图 链路聚合 LSW1 [lsw3]interface Eth-Trunk 1 [lsw3-Eth-Trunk1]trunkport GigabitEthernet 0/0/3 0/0/4 [lsw3-Eth-Trunk1]q [lsw3]vlan batch 1 2 [lsw3]interface Eth-Trunk 1 [lsw3-Eth-Trunk1]port link-type trunk [lsw3-Eth-Trunk1]port trunk allow-pass…

多线程与并行计算(python与c++)基础入门篇

目录 1.简介 1.1什么事多线程 1.2概念 2.python多线程基础知识讲解 创建线程&#xff1a; 启动线程&#xff1a; 线程函数/方法&#xff1a; 线程同步&#xff1a; 线程间通信&#xff1a; 线程结束与等待&#xff1a; 线程常用方法&#xff1a; 3.c多线程基础知识…

无涯教程-PHP - ereg()函数

ereg() - 语法 int ereg(string pattern, string originalstring, [array regs]); ereg()函数在string指定的字符串中搜索pattern指定的字符串&#xff0c;如果找到pattern&#xff0c;则返回true&#xff0c;否则返回false。搜索对于字母字符区分大小写。 可选的输入参数re…

拒绝摆烂!C语言练习打卡第五天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4d…

论文复现--关于yolov8在姿态估计方面的研究

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/ultralytics/ultralytics 所需环境&#xff1a; Windows10&#xff0c;CUDA11.6&#xff0c;conda 4.13.0&#xff0c;Visual Studio 2017&#xff1b; 目录 环境搭建Conda list使用测试 环境搭建 # 创建环…

企业出海营销:如何借助HubSpot将潜在用户引导为忠实客户

在全球化的商业环境中&#xff0c;企业出海营销已成为实现可持续增长的重要策略之一。然而&#xff0c;成功吸引潜在客户并将其转化为忠实客户并非易事。 这正是HubSpot这款强大的综合性平台发挥作用的时候&#xff0c;它不仅帮助企业引导潜在客户进入销售漏斗&#xff0c;还在…

PyQty5—第一课:安装及简单的界面设计(附代码)

在日常办公中我们将经常使用的代码与PyQty5进行配合&#xff0c;从而设计出GUI的小程序&#xff0c;这样不经界面好看而且可以进行打包&#xff0c;发给自己的亲朋好友们进行使用&#xff0c;那么今天我们就来进行PyQty5的第一节课 1、首先我们需要安装PyQty5的库 库名安装si…

Jmeter压测 —— 动态数据关联

在进行压测时&#xff0c;经常需要对一些动态的数据进行数据关联。要不然容易造成脚本回放失败&#xff0c;或者多个虚拟用户执行时&#xff0c;只有一个用户运行成功。如下图&#xff1a;未关联数据时&#xff0c;脚本参数及回放结果 因此&#xff0c;在进行压测时&#xff0c…

opencv 进阶15-检测DoG特征并提取SIFT描述符cv2.SIFT_create()

前面我们已经了解了Harris函数来进行角点检测&#xff0c;因为角点的特性&#xff0c;这些角点在图像旋转的时候也可以被检测到。但是&#xff0c;如果我们放大或缩小图像时&#xff0c;就可能会丢失图像的某些部分&#xff0c;甚至有可能增加角点的质量。这种损失的现象需要一…

纯js封装一个弹出窗口

先上效果图&#xff1a; 左图是默认的样式(默认标题是黑色的。不是橙色的。截图时我改了点东西所以变了色。。。)。右图是通过传递参数自定义了外观的样式。 封装实现&#xff1a; function showWindow() {this.rnd Math.random();this.obj null;this.title ;this.content …

NER(命名实体识别)的介绍与使用--附源码

概述 本文将向您简要介绍命名实体识别,这是一种用于识别文本文档中存在的实体的流行方法。本文针对 NLP 领域的初学者。在本文末尾,已经实现了预训练的 NER 模型来展示实际用例。 为什么是NER? 图1 通过观察上