禾小毅-优快云博客

原创 vue中框架下elmentui的（el-tabs）标签怎么实现【自定义图片切换】和样式的切换

根据原型体，选一个最接近的UI组件 el-tabshtml：思路：通过el-tabs默认选中页签（v-model的值）与（切换列表循环的下标）进行判断，为true 表示当前选中项，就添加选中的图片，为false 添加默认的图片 <template> <div> <div class="know_content"> <el-tabs :tab-position="tabPosition" v-mod...

2021-11-12 15:10:11 5368 3

原创 vue如何实现从00:00:00:00开始【正计时】，以及再次进入显示之前的历史时间（即返回需要保留数据），并继续计时

html<span id="txt">{{txt}}</span><input @click="start()" type="button" value="开始计时"><input @click="stop()" type="button" value="结束计时"> jsdata () { return { timer: null, count: 0, clickStart: 0, txt: '...

2021-10-08 16:05:43 1206

原创 vue+swiper,【vue-awesome-swiper插件】实现页面“试题”内容左右滑动的切换；获取插件的activeIndex下标值 / realIndex；点击跳转到对应的index页面

1、安装vue-awesome-swipernpm install swiper vue-awesome-swiper --save2、引入（1）全局在main.js中引入import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper)（2）局部引入import { Swiper, SwiperSlide } from 'v...

2021-09-23 18:32:32 3317 5

原创 js+css如何制作（音频）图标【切换播放动画】效果？

步骤如下：1、准备播放前的图标和播放时的图标，播放时的有4种不同状态，将4种图标设置成一张图片 2、布局html+css<div class="word_total"> <span>美 /mpren/</span>  <div class="voice voicePlay"></div>  <im...

2021-09-22 15:41:35 1519 3

原创怎么在（VsCode）中，通过设置【eslint】避免 “ 严格模式 ” 报错问题，使得在保存时格式化代码并重新加载

在vscode中安装ESLint插件在文件 -> 首选项 -> 设置中找到 settings.json 文件加入以下代码{ "eslint.codeAction.showDocumentation":{"enable":true }, //autoFixedOnSave设置已废弃，采用如下新的设置 "editor.codeActionsOnSave":{"source.fixAll.eslint":true }, ...

2021-09-02 18:53:25 1923

原创【总结】前端常用编码写法合集

一、css样式1、文字多行溢出// 单行溢出overflow: hidden;white-space: nowrap;text-overflow: ellipsis;// 多行溢出display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;2、el-table中主数据样式.el-table__row.expanded{}5、横向滑动white...

2021-08-22 15:16:29 1710 1

原创微信（小程序），怎么制作一个能够获取 “ 空气质量、温度、湿度、气压、风向 ” 等的【天气模块】

首先，制作天气模块，需要准备的资料可不少，开始进入正题吧！步骤如下：1、html+css布局2、用微信小程序获取你当前所在的经纬度3、根据地图API接口，将获取的经纬度解析成具体文字地址，如省-市- 县/区 - 镇 - 街道等4、经过筛选，此处选择 “百度地图”，注册账号，创建API接口链接1、html+css布局html：<view class="weat"> <view> <view class="location"...

2021-07-30 13:04:24 4174 6

原创 html+js+css实现同一页面中内容的不同切换

html： <div class="columnNav"> <ul class="tabs"> <li class="active"><a href="#tab1">功能区域</a></li> <li><a href="#tab2">管护区划</a></li> <li><a href="#tab3">防火等级<...

2021-07-28 09:05:01 10383

原创【Echarts+Select下拉框】实现（同图表切换不同数据）的方法

html：<div class="turangBox"> <div class="backbg"> <select name="status" id="tabs" class="selectGroup changeItem"> <option>水温</option> <option>浊度</option> <option>酸碱度</option&gt..

2021-07-28 09:04:51 13204 6

原创 vue中el-input以及el-select组件，“ 获取焦点 ”时，怎么修改【背景样式，placeholder文字颜色】

html：此处placeholder的文字颜色不易修改，先自定义2种不同文字颜色样式css：/deep/.colorchange.el-input__inner::-webkit-input-placeholder{color:#c7fbeb; // 初始化的文字颜色}/deep/.searchchange.el-input__inner::-webkit-input-placeholder{color:#333; // 获取焦点时的文字颜色...

2021-07-26 18:29:35 8425 2

原创 vue中怎么将（el-dialog）对话框改成【自定义弹窗】样式，2种方式

将以上弹窗组件，改成下面自定义样式的效果当加入自定义内容时，发现el-dialog存在背景色以及head部内容和关闭按钮，找到el-dialog的背景元素，并修改如下：/deep/.el-dialog{ // 取消阴影和背景色background:rgba(0,0,0,0);-webkit-box-shadow:01px3pxrgba(0,0,0,0);box-shadow:01px3pxrgba(0,0,...

2021-07-26 17:58:57 4642

原创【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法

通过 /deep/ 深层查找并不能找到相关的元素，查找原因发现此组件的样式是全局样式，如果你style中加了scoped，如<stylelang="scss"scoped>，是在局部，限制了/deep/ 的查找，解决方法如下：...

2021-07-23 09:56:30 1927 1

原创每打开一个chrome页面都会【自动打开F12开发者模式】，原因是使用HBuilderX会影响谷歌浏览器的浏览模式

打开HBuilderX，点击运行->运行到浏览器->设置web服务器->添加chrome浏览器安装路径

2025-01-17 17:47:23 7158 5

原创 vue 实现打包并同时上传至服务器端

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~将 publish_script 及以下文件 upload.server.js 添加到主文件下，与 src 同级别。（1）修改 path后的服务器站点目录名称为 lucky，即 /etc/nginx/wwwroot/4、修改 vue.config.js 中，publicPath的值，都改成 “/” 才对应的上。upload.server.js 文件。

2025-01-10 16:48:09 468

原创 vue3 实现 “ fly-cut 在线视频剪辑 ”

同时刻度线呈现蓝色，选中部分显示选中框以及两端的拖动砝码，拖动任意一端的砝码，可以改变当前所选时间段的时间范围；希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（3）当点击分割（ctrl+x）时，需将时间刻度上的砝码拖动到需要分割的时间点上，再选中进度条，然后再点击分割按钮或者快捷键即可。（2）当点击右上侧的播放按钮时，时间刻度砝码会定位到当前时间段的初始时间，并播放直到该时间段结束自动暂停。2、时间刻度以及进度条部分。

2025-01-10 16:23:38 420

原创 vue2 实现 tagcanvas 抽奖名单 “球体旋转动画” 的组件封装和调用

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~在public下的index.html 中引入 tagcanvas.min.js。

2025-01-08 15:42:21 414

原创 vue2 实现 canvas-confetti 的 “撒花动效” 以及组件的封装和调用

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

2025-01-08 15:03:47 244

原创 vue3 实现 el-pagination页面分页组件的封装以及调用

还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~希望我的愚见能够帮助你哦~，若有。

2024-02-24 11:22:46 1846 2

原创 nvm的相关属性以及用法

（1）一般情况下，安装了一个版本的 Node，就会为你安装相应版本的 NPM，所以不需要单独安装 NPM；（4）安装该特定版本，请运行 nvm install node-version-number，例如：nvm install 16.16.0。（3）nvm use version-number 使用你已安装的任何其他版本，例如：nvm use 16.16.0。A、卸载之前的node后安装nvm, nvm-setup.exe安装版，直接运行nvm-setup.exe。（2）点击最新版本下载。

2024-02-18 13:51:18 858

原创 vue 实现前端处理 “数组数据“ 转excel格式文件，并导出excel表格

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

2024-01-17 09:33:37 1348 1

原创 vue3 实现关于 el-table 表格组件的封装以及调用

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（4）添加排序（升序、降序）

2024-01-05 18:05:12 3623

原创 vue实现画笔回放，canvas转视频播放功能

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（1）安装 canvasvideo-vue。（2）main.js引入。

2024-01-03 11:48:56 1208

原创 vue3 实现el-date-picker日期筛选过程

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~选中时间2，禁止选中时间1，当前值传递给 startTime 和 endTime。选中时间1，禁止选中时间2，当前值传递给 startTime。有2个查询条件，startTime 和 endTime。

2024-01-02 10:29:56 2042

原创【vue】实现自定义 Calendar 日历

2023-11-14 10:32:22 1879

原创【uniapp】实现公共弹窗的封装以及调用

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

2023-08-28 14:15:46 1864

原创使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

2023-08-24 14:05:06 1584

原创 VX小程序实现区域转图片预览

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

2023-08-22 17:22:52 819

原创【总结】uniapp以及wx小程序相关写法集合

1、动态修改头部标题。

2023-08-21 09:42:08 539

原创【uniapp】中微信小程序实现echarts图表组件的封装

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下。当前不操作此步骤的话，运行 -> 运行到小程序模拟器 -> 微信开发者工具时，echarts图表显示不出来。原因：运行到小程序打包过程中，此插件不在小程序文件包内。根据当前插件放的地址进行引入。

2023-08-15 18:11:48 2811

原创封装一个公用的【Echarts图表组件】的3种模板

在components下创建一个echarts.vue文件<template> <div> <div class="know_r_echart"> <div id="atlasChart"></div> </div> </div></template><script>import * as echarts from 'echarts'export ..

2023-07-31 16:59:20 6813

原创 vue3 实现 Map 地图区域组件封装

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致单击的 data数据为空或显示不出来。坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 echarts@4.9.0 即可。将下载的 json 放至assets下的 img文件夹中。

2023-07-17 13:03:56 2264

原创 vue 实现 word/excel/pdf 等文件格式预览操作

/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限制，超过要收费！

2023-07-12 14:52:30 14169 21