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

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.mfbz.cn/a/84119.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

有没有免费格式转换工具推荐?PDF转化为PPT的方法

在当今职场生活中&#xff0c;掌握文件格式转换技能变得异常重要。将PDF文档转换为PPT格式可以在演讲、报告等场合更好地展示和传达信息&#xff0c;为我们的专业形象增添亮点&#xff0c;接下来我们可以一起来看一下“有没有免费格式转换工具推荐?PDF转化为PPT的方法”相关的…

Lua与C++交互(一)————堆栈

Lua与C交互&#xff08;一&#xff09;————堆栈 Lua虚拟机 什么是Lua虚拟机 Lua本身是用C语言实现的&#xff0c;它是跨平台语言&#xff0c;得益于它本身的Lua虚拟机。 虚拟机相对于物理机&#xff0c;借助于操作系统对物理机器&#xff08;CPU等硬件&#xff09;的一…

微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板

做个简单的生成二维码海报分享&#xff0c;我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片&#xff0c;原生小程序不支持&#xff0c;不多介绍下面有全部代码有注释、参数自行替换运行看看&#xff0c;有问题可以咨询我&#xff0c;我写的已经上线 效果如图&a…

Excel带数值的计算公式

问题描述 如图&#xff0c;想实现在第三列单元格中实现带数值的计算表达式 解决方法 单元格 & "/" & 单元格 & "" & TEXT(单元格/单元格, "0.00%")& 为简单的 与 符号 最后设定单元格数值与格式&#xff08;保留两位小数…

【Rust】Rust学习 第十七章Rust 的面向对象特性

面向对象编程&#xff08;Object-Oriented Programming&#xff0c;OOP&#xff09;是一种模式化编程方式。对象&#xff08;Object&#xff09;来源于 20 世纪 60 年代的 Simula 编程语言。这些对象影响了 Alan Kay 的编程架构中对象之间的消息传递。他在 1967 年创造了 面向对…

[MySQL]主从服务器布置

配置主服务器 配置文件 /etc/my.cnf 在[mysqld]下进行配置 log_binON //启动二进制日志 log-bin mysql-bin //启用二进制日志&#xff0c;用于记录主服务器的更新操作 server-id 1 // 用来表示mysql服务id,保证集成环境中的唯一性 , 范围 [1,2^32) read-only0 // 1表示只…

Android Studio 接入OpenCV最简单的例子 : 实现灰度图效果

1. 前言 上文 我们在Windows电脑上实现了人脸功能&#xff0c;接下来我们要把人脸识别的功能移植到Android上。 那么首先第一步&#xff0c;就是要创建一个Native的Android项目&#xff0c;并且配置好OpenGL&#xff0c;并能够调用成功。 这里我们使用的是openCV-4.8.0&#x…

SOLIDWORKS有限元分析

SOLIDWORKS是一款广泛使用的三维计算机辅助设计软件&#xff0c;同时它还具有强大的有限元分析功能。有限元分析是一种工程分析方法&#xff0c;它将复杂的实体分解成许多小的有限元素&#xff0c;以便对其进行数学建模和分析。SOLIDWORKS的有限元分析功能可以帮助工程师预测和…

在Flutter应用内部实现分屏功能

前言 这一次被要求实现屏幕上同时展示两个页面&#xff0c;并且两个页面的逻辑&#xff0c;功能互不影响&#xff0c;通俗一点讲就是在Flutter内部实现一个类似于分屏的功能&#xff0c;这可难不倒我。 方法 要在 Flutter 中实现一个屏幕的上半部分和下半部分展示不同的页面…

金融市场中的机器学习;快手推出自研语言模型“快意”

&#x1f989; AI新闻 &#x1f680; OpenAI可能面临《纽约时报》的起诉&#xff0c;侵犯知识产权引发争议 摘要&#xff1a;OpenAI使用《纽约时报》的文章和图片来训练AI模型&#xff0c;违反了《纽约时报》的服务条款&#xff0c;可能面临巨大损失。此前&#xff0c;也有其…

无涯教程-PHP - XML

简单的XML解析器解析 Name&#xff0c; attributes 和 textual content&#xff0c;简单的XML函数如下所示- simplexml_load_file() 此函数接受文件路径作为第一个参数&#xff0c;这是必需的。 simplexml_load_file(($fileName,$class,$options,$ns,$is_prefix) simplexml…

韩语字母及输入法介绍

韩语字母及输入法介绍 字母由来 朝鲜语字母的由来为如下&#xff1a;十五世纪的朝鲜王国世宗大王 和他的集贤殿大臣在思考&#xff0c;创制自己本国的文字&#xff0c;仿照了“天地人思想”和“发音器官的形象”而创制了朝鲜语字母。 ​ 元音是由三个要素而组成的&#xff1…

Confluent kafka 异常退出rd_tmpabuf_alloc0: rd kafka topic info_new_with_rack

rd_tmpabuf_alloc0: rd kafka topic info_new_with_rack 根据网上的例子&#xff0c;做了一个测试程序。 C# 操作Kafka_c# kafka_Riven Chen的博客-CSDN博客 但是执行下面一行时&#xff0c;弹出上面的异常&#xff0c;闪退。 consumer.Subscribe(queueName) 解决方案&…

TensorRT推理手写数字分类(三)

系列文章目录 &#xff08;一&#xff09;使用pytorch搭建模型并训练 &#xff08;二&#xff09;将pth格式转为onnx格式 &#xff08;三&#xff09;onxx格式转为engine序列化文件并进行推理 文章目录 系列文章目录前言一、TensorRT是什么&#xff1f;二、如何通过onnx生成en…

Java并发编程之线程池详解

目录 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有雨看雨 &#x1f407;一、简介 &#x1f407;二、相关代码 &#x1f43c;1.线程池代码 &#x1f43c;2.自定义实现线程池 &#x1f407;三、ThreadPoolExecutor类 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有…

C++图形界面编程-MFC

C控制台程序是命令行黑框&#xff0c;如果要写一个图形界面&#xff0c;VS也提供了图形界面编程MFC。建项目的时候选如下选项&#xff1a; 类似于QT。 问&#xff1a;那么MFC项目的运行入口main()或WinMain()在哪里呢&#xff1f; 答&#xff1a;其实&#xff0c;在MFC应用程…

R语言机器学习方法在生态经济学领域

近年来&#xff0c;人工智能领域已经取得突破性进展&#xff0c;对经济社会各个领域都产生了重大影响&#xff0c;结合了统计学、数据科学和计算机科学的机器学习是人工智能的主流方向之一&#xff0c;目前也在飞快的融入计量经济学研究。表面上机器学习通常使用大数据&#xf…

RunnerGo中WebSocket、Dubbo、TCP/IP三种协议接口测试详解

大家好&#xff0c;RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验&#xff0c;最近得知RunnerGo新增对&#xff0c;WebSocket、Dubbo、TCP/IP&#xff0c;三种协议API的测试支持&#xff0c;本篇文章跟大家分享一下使用方法。 WebSocket协议 WebSocket 是一种…

LeetCode863. 二叉树中所有距离为 K 的结点(相关话题:深度遍历,广度遍历)

题目描述 给定一个二叉树(具有根结点 root), 一个目标结点 target ,和一个整数值 k 。 返回到目标结点 target 距离为 k 的所有结点的值的列表。 答案可以以 任何顺序 返回。 示例 1: 输入:root = [3,5,1,6,2,0,8,null,null,7,4], target = 5, k = 2 输出:[7,4,1] 解释…

[技术杂谈]macOS上todesk无法远程操作鼠标键盘

远程到被控Mac后能看到画面&#xff0c;鼠标键盘操作无反应 远程后发现画面显示正常&#xff0c;但是键盘和鼠标的操作没有响应 可能是辅助功能没有勾选ToDesk_Session的权限。 可按以下步骤操作&#xff1a; 1> 在左上角点击苹果图标&#xff0c;选择“系统偏好设置” …