Ra-Liz's Blog

elementui el-upload实现图片列表展示、上传和删除halohalohalo好久不见 业务需求增加和修改内容中包含一个图片路径列表，需要对图片列表进行展示和操作（添加、预览、查看大图、下载、删除） 分析 弹出框中使用el-upload组件展示和操作图片列表，参考效果：https://element.eleme.io/#/zh-CN/component/upload#wen-jian-suo-lue-tu 关闭弹出框/点击取消时，需要将此次图片列表新增的图片删去，释放存储空间 相较于新增弹出框，修改弹出框需要事先展示从后端获取到的图片列表，因此需要两个el-upload标签来分类 接口需求 添加图片POST 删除图片DELETE 查询图片GET 其中，el-upload添加图片使用组件参数方式设置，查询亦是无需手动获取。删除需要手动。 1imgUrl: process.env.VUE_APP_BASE_API + "/system/deviceFault/uploadPhoto" 接下来分新增和修改两种来阐述代码构建过程 新增首先，这是一个图片列 ...

前言工作中遇到项目使用的node版本比较早，这个时候一般会选择两种方式解决： 直接安装一个指定版本的node，比较直接，但是不方便切换 使用nvm管理node版本，可以随时切换node版本，但是安装配置有可能出点问题 我就遇到了上图的问题，查了很多地方，没啥用，最后找到了这个方法👇 别跟我说要删干净node再下载nvm，install不成功需要配置镜像什么什么的。 直接下载node包，解压重命名，放nvm文件夹里，谢谢qvq 详细步骤 下载安装nvm，参考fcc给出的流程：https://www.freecodecamp.org/chinese/news/node-version-manager-nvm-install-guide/ 手动下载node包 https://nodejs.org/zh-cn/download/prebuilt-binaries 解压node包，重命名，放入nvm目录下 重命名：v+版本，见下图 注意检查一下解压是怎么解的，别目录套目录了 检查成没成功 成功了。 可以仿照这个思路试一试捏，如果有效，欢迎赞助我一瓶矿泉水qvq（或 ...

前言​ 本人ruoyi vue2模板搭建的管理项目中集成Cesium，踩了诸多坑。 ​ 各种查阅和看Demo，测试出来了可行的配置。特来分享，或许可以减少各位同伴踩到的坑（如果可以，麻烦在文章底部留个言，我想知道有多少朋友也在做这个工作）。 配置步骤 版本道传版本要≤1.95.0，这里参考https://github.com/syzdev/vue-cesium-start使用了1.80.0版本 添加一个loader: @open-wc/webpack-import-meta-loader vue.config.js配置 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081'use strict'const path = require('path')const webpack = ...

MyVisualMap实现思路（不包含完整代码）效果类似这种，实现方式想必非常多，接下来仅讲解我的思路，可做一种参考。 描述实现一个类echarts visualMap的工具bar，可以调整一个高度自定义的echarts图形的values和colors 分析实现一个带两种模式的多角标(网上普遍叫法是multiple handles)Slider。 模式一（渐变模式）是固定values，修改对应的colors，此时滑动条是一个渐变色块； 模式二（非渐变模式）是固定colors，修改对应的values，此时滑动条是一个多个色块组成的均匀条。 思路咱们慢慢来，手挫肯定是要画点时间的，喝口水慢慢来。 绘图 前置共识：values和colors一一对应，拖拽牵扯到的变动属性(top/height等)在绘图的时候需要考虑到，别框死了。 固定一个div作为盛放色块和角标的容器，灵活使用css-position-relative/absolute，对应给div两块子元素。 颜色块-colorRef 渐变模式时，可以直接给colorRef设置一个linear-gradient(to bottom, $ ...

elementui vue2版本如何给el-table/el-pagination等组件进行样式自定义el-table 现有组件描述 直见官网：https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot 场景描述 背景透明 hover有点颜色（半透明） 代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<template> <el-card> <el-table class="right-table"> <el-table-column>....</el-table-column> .... </el-table> </el-card> ...

写在前面最近在换工作，投了特别喜欢的一家公司，正在等意向（更新后续，目前成功入职了，十分感恩），等待时间是不能浪费的，所以我打算先熟悉一下公司的技术。echarts就是其中之一，之前有用过Echarts，但是这家公司的业务是需要高度自定义的。那么就开始吧！ 项目链接在这儿👉https://github.com/Ra-Liz/vue-echarts-test 以下的练手项目使用vue3搭建。（顺便回顾了vue3，没想到上手这么快） 一个简单的自定义饼图 思路： 使用ref绑定图容器 初始化echart画布 配置画布内元素 标题、工具文本、整体样式 数据排序、细节样式 挂载监听器 测试数据实时更新逻辑 btn绑定回调，watch监听数据变化 优化函数声明，分块，拼接 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 ...

Tailwindcss 处理背景渐变前言在开发中，我们经常需要使用背景渐变，但是 Tailwindcss 默认并没有提供背景渐变的工具类，所以我们需要自己来实现。 实现方法 在tailwind.config.js中添加自定义工具类： 12345678910111213module.exports = { theme: { extend: { backgroundImage: { "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", }, }, colors: { "start-color": "#FD7A61", "end-color": "#FF934D", }, },}; 在需要使用背景渐变 ...

nextjs中使用tailwindcss添加自定义字体写在前面指路官方文档 项目框架 next.js tailwindcss app router 步骤 在public目录中添加字体文件（我的是个.TTF文件） 在global.css文件中添加字体 12345/* 自定义字体，注意这里url()中路径已然是public目录下 */@font-face { font-family: "lcd-font"; src: url("/DS-DIGIB.TTF") format("truetype");} 在tailwind.config.js中配置字体 123456789101112131415module.exports = { theme: { extend: { fontFamily: { 'sans-serif': 'Helvetica, Arial, sans-serif', ...

MDN URL.carParse() 文章摘自

写在前面早上我查了很多瀑布流实现的方法，展示逻辑都不是很喜欢。 纸鹤给我看了一个使用了瀑布流布局的网页，网页利用transform对每个条目进行定位……恍然大悟。 中午做饭的时候看了B站一up主的瀑布流实现视频(麦克阿瑟还是有点实力的)，大概知道怎样实现了。 瀑布流布局雏形思路用一个定长数组存放第n列某行条目的top值，每次便利找最小top值所在元素，添加一条新条目，并更新top值。等我去画个图。 不完整的代码(仅提供一种思路)使用react实现，和原生JS有些差别（是哟个原生JS实现可以直接看上面那个视频） 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106export defualt testPage() { ...