- 博客(105)
- 收藏
- 关注
RSS订阅
原创 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
5101
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
1017
原创 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
2777
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
1270
1
原创 怎么在（VsCode）中，通过设置【eslint】避免 “ 严格模式 ” 报错问题，使得在保存时格式化代码并重新加载
在vscode中安装ESLint插件在文件 -> 首选项 -> 设置中找到 settings.json 文件加入以下代码{ "eslint.codeAction.showDocumentation":{"enable":true }, //autoFixedOnSave设置已废弃，采用如下新的设置 "editor.codeActionsOnSave":{"source.fixAll.eslint":true }, ...
2021-09-02 18:53:25
1746
原创 【总结】前端常用编码写法合集
一、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
1340
原创 微信（小程序），怎么制作一个能够获取 “ 空气质量、温度、湿度、气压、风向 ” 等的【天气模块】
首先，制作天气模块，需要准备的资料可不少，开始进入正题吧！步骤如下：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
3429
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
9685
原创 【Echarts+Select下拉框】实现（同图表切换不同数据）的方法
html：<div class="turangBox"> <div class="backbg"> <select name="status" id="tabs" class="selectGroup changeItem"> <option>水温</option> <option>浊度</option> <option>酸碱度</option>..
2021-07-28 09:04:51
11741
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
7455
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
4347
原创 【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素，查找原因发现此组件的样式是全局样式，如果你style中加了scoped，如<stylelang="scss"scoped>，是在局部，限制了/deep/ 的查找，解决方法如下：...
2021-07-23 09:56:30
1721
1
原创 vue3 实现 el-pagination页面分页组件的封装以及调用
还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~希望我的愚见能够帮助你哦~，若有。
2024-02-24 11:22:46
1118
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
770
原创 vue 实现前端处理 “数组数据“ 转excel格式文件，并导出excel表格
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2024-01-17 09:33:37
940
原创 vue3 实现关于 el-table 表格组件的封装以及调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（4）添加排序（升序、降序）
2024-01-05 18:05:12
1833
原创 vue实现画笔回放，canvas转视频播放功能
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（1）安装 canvasvideo-vue。（2）main.js引入。
2024-01-03 11:48:56
746
原创 vue3 实现el-date-picker日期筛选过程
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~选中时间2，禁止选中时间1，当前值传递给 startTime 和 endTime。选中时间1，禁止选中时间2，当前值传递给 startTime。有2个查询条件，startTime 和 endTime。
2024-01-02 10:29:56
1254
原创 【vue】 实现 自定义 Calendar 日历
{{ date.split('年')[0]+'-'+date.split('年')[1].replace('月','')}}
2023-11-14 10:32:22
1252
原创 【uniapp】 实现公共弹窗的封装以及调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-08-28 14:15:46
1505
原创 使用 uniapp 适用于wx小程序 - 实现移动端头部的封装和调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-08-24 14:05:06
1462
原创 VX小程序 实现区域转图片预览
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-08-22 17:22:52
692
原创 【uniapp】中 微信小程序实现echarts图表组件的封装
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下。当前不操作此步骤的话，运行 -> 运行到小程序模拟器 -> 微信开发者工具 时，echarts图表显示不出来。原因：运行到小程序打包过程中，此插件不在小程序文件包内。根据当前插件放的地址进行引入。
2023-08-15 18:11:48
2409
原创 封装一个公用的【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
5113
原创 vue3 实现 Map 地图区域组件封装
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致 单击的 data数据为空或显示不出来。坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 [email protected] 即可。将下载的 json 放至assets下的 img文件夹 中。
2023-07-17 13:03:56
1792
原创 vue 实现 word/excel/pdf 等文件格式预览操作
/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限制，超过要收费！
2023-07-12 14:52:30
10912
17
原创 项目操作过程中的基本配置
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~打包后删除console操作，减少程序运行，在 main.ts 文件里添加。打包后删除console操作，减少程序运行，在 main.ts 文件里添加。
2023-06-19 16:13:35
129
原创 【vue3】 实现 公共搜索组件，在当前页搜索的路由跳转不能改变当前值的操作，使用bus / event-emitter 派发器
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-05-25 17:34:35
221
原创 【vue3】实现简易的 “百度网盘” 文件夹的组件封装实现
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-05-23 18:00:40
2153
10
原创 【uniapp+ts】 实现直播中 “聊天功能” 交互的组件封装和调用
【代码】【uniapp+ts】 实现直播中 “聊天功能” 交互的组件封装和调用。
2023-05-11 18:07:35
628
原创 【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标的组件封装及调用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
2023-05-10 10:57:29
3896
2
原创 vue实现纯css直播点赞图标的动画效果组件
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~轻映录屏 2023-02-23 17-23-41。
2023-02-23 17:33:17
1288
2
原创 【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印
学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】
2023-02-15 17:04:57
4121
23
原创 【uniapp】实现列表分页加载数据列表的方法，通过scroll-view下拉刷新，上拉加载的方法即可
1、通过上拉触底事件，累加下一页分页的数据到列表最后，并显示加载的效果2、再判断总页数是否已经累加完成，如果已完成，则提示 “没有数据了”
2022-12-14 11:57:41
8368
原创 【vue3】实现筛选页组件（深层嵌套循环数据切换）的封装和调用
根据设计图需求以及数据结构的结合，返回的数据结构形成的深层嵌套循环与布局不符，其中Children下的数组，数组下的Children是不确定到底有多少层级的，因此。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~（1）将右侧筛选弹窗的内容封装成小的组件 menuTree1.vue （也是最里层），如下图。/2、2、筛选页（当点击初中项下的科目项，展示右侧筛选弹窗）（2）如果通过定位的方式布局，就直接写死了（行不通）
2022-11-03 11:22:15
1439
1
原创 【uniapp】 实现移动端自定义下拉层级筛选功能组件的封装和调用
点击一级标题时，展示选中效果，关闭筛选弹窗，加载课程列表点击一级标题时，展示选中效果并展示二级标题列表点击二级标题时，展示选中效果，关闭筛选弹窗，加载课程列表点击一级标题时，展示选中效果并展示二级标题列表点击二级标题时，展示选中效果并展示三级标题列表点击三级标题时，展示选中效果，关闭筛选弹窗，加载课程列表1、当点击一级标题时，获取点击的id，传给需要id参数的接口2、当点击二级标题时，找到一级下的二级标题id，传给需要id参数的接口。
2022-10-24 15:56:24
5183
原创 iconfont 中图标以及字体库在页面中的引用
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~B、将设计里的图标或者iconfont里的图标，以 svg 的格式，并且不同的命名，添加或上传到该项目里。font-family: 自定义名字。A、根据项目不同创建不同的项目。4、在需要的页面中调用。
2022-10-20 14:54:11
1143
原创 【vue3】 实现PC端自定义左侧组件的封装以及调用
点击左侧菜单一级标题，加载右侧列表点击左侧菜单二级标题，加载右侧列表，同时加载班级或者科目切换列表切换左侧任意标题后，刷新当前列表页，左侧点击值和右侧列表数据需保持不变通过右侧列表点击到详情页后，也调用左侧菜单1、当刷新当前详情页时，左侧选中的是哪个值还是定位到哪个值2、当在详情页点击切换左侧菜单时，定位到当前值对应的列表页数据3、当点击详情页的返回按钮时，需返回进入当前详情页的列表页，以及定位到对应的左侧菜单值1、当点击左侧标题时，获取点击的id，传给需要id参数的接口。
2022-10-10 15:45:49
1132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人