- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue3+elementUI：强大好用的el-tabel+el-pagination封装，后台管理系统必备
/</</其中activityList为列表数据，total，page，limit和正常使用分页器一样传值，show-index为展示序号，loading为加载状态，getList为翻页方法，columns数据结构如下// 主要列信息// 默认展示prop中的值{prop: 'name', label: '活动名称'},// 自定义列 展示slotType插槽中的值。
2023-09-14 10:49:09
608
原创 Vue2+elementUI：使用JSX和template两种方式对el-tabel+el-pagination进行封装
应用场景：在编写后台管理系统时，常常会用到表格和翻页器，每次都需要重复的写很麻烦，并且普通表格只需要渲染对应的prop就可以了，完全可以用一个v-for判断去解决，因此一个自带翻页器的table组件就应运而生了。
2023-09-14 10:43:46
1140
原创 【vue3+vite+vue-router】动态引入某个目录下的文件自动生成路由
使用vite提供的import.meta.glob，对指定目录下的文件都可以自动引入作为子路由进行注册，文件名直接作为path和name（注意name不能重复，如果重复的话可以在前面或者后面添加一个字符串作为标识），免去了复杂繁琐的引入步骤。
2023-02-07 15:40:09
3189
1
原创 js实现倒数日/纪念日功能：输入一个日期和重复类型，计算当天到该日期的天数
js实现倒数日/纪念日功能：输入一个日期和重复类型，计算当天到该日期的天数
2023-01-18 18:52:31
1534
原创 uniapp：根据树状结构渲染的多级地区选择器
组件实现功能：从底部弹出地区选择器，最多支持三级选择且可以自由选择级联数，加入了动画效果最终效果如图： 组件已上传到插件市场，插件ID：cc-address-selectorCSS部分使用方法在页面中使用组件，自定义一个ref名称进行方法的调用，目前最多只支持一二三级，需要做更多的可以自己修改传参说明
2022-11-22 15:58:03
2030
原创 【uniapp】将微信小程序的代码兼容支付宝小程序（暂停更新）
目前本身就有一套完善的微信小程序（兼容h5）的代码，现在的需求是将它编译成支付宝小程序，做好兼容的处理，以便后续接入支付宝服务商，在这里简单记录一下目前发现的把微信小程序编译成支付宝小程序的问题和解决方案。
2022-11-12 11:34:02
2091
原创 uniapp： 实现一个优美的带底部标识的横向滚动导航栏
图为一个列表由后台自定义的导航栏，当数量超过8个时进行分页，横向滚动预览其它导航栏，滑动后底部条也会随之变化。
2022-07-25 17:15:30
2105
1
原创 Vue2+Vant2：一个可定制图标的简易扫雷小游戏
一开始在力扣看到扫雷的题，发现内容并不复杂，就想通过这个逻辑写一个单个html页面就能解决的小游戏，使用了Vue2+Vant2，因为内容不多所以没有使用脚手架，所有库直接使用cdn引入，所有功能在一个页面里解决，通过v-if进行Dom节点的渲染。...
2022-06-08 15:43:32
2494
原创 Vue：修改二维数组中某一个坐标的数据
众所周知，在Vue中是不能直接操作视图中的数组的，需要使用$set方法，但是这个方法值适用一维数组。此时，我有一组数组数组里面还是数组这组二维数组渲染到了dom树上，需要动态修改里面某个坐标的值，发现此时$set怎么都不好使，要么就是改不了要么就是那一行全改了最后只能按照一维数组的思路去单独揪出来修改才实现想要的效果const row = [...board[dx]];// 获取那一行的数据 dx为x坐标row.splice(dy, 1, obj) // 修改 obj
2022-05-05 11:04:40
934
原创 JavaScript：原生js写的一个多按钮Popover 弹出框
效果如图需求：点击按钮弹出，如果不进行其他操作则弹出层延时消失，点击另一个按钮时清楚其他弹窗思路：先完成一个具有弹出层的按钮的样式，使用伪元素定位到按钮上方，加入定时器使其自动消失，当点击另一个按钮时重置定时器并移除弹窗节点HTML参考<div> <a class="download-btn ios" id="ios" href="javascript:;" target="_blank"> <img class="download-i..
2022-03-21 18:01:16
4795
原创 Vue2/Vue3+elementUI：一个可自定义内容可随机的大转盘（今天吃什么）
一个可自定义内容可随机的大转盘，Vue2和Vue3两种写法
2022-03-21 17:45:19
7698
原创 Vue：写一个可配置内容的的随机转盘（今天吃什么）
在线预览地址：今天吃什么https://jujubefoxx.github.io/WhatDoWeHaveToEat-/代码：https://github.com/jujubefoxx/WhatDoWeHaveToEat-https://github.com/jujubefoxx/WhatDoWeHaveToEat-效果图：下面是代码HTML<div id="toEat"> <div class="wrapper"> ...
2022-02-28 15:31:03
3024
2
原创 h5+jquery:使用PickerExtend移动端级联选择器写一个从当前时间到指定时间范围的年月日选择器
picker-extend 移动端级联选择插件文档地址:picker-extend 移动端级联选择插件 - 掘金设置选择器id为day-selector需求:打开默认显示当前日期，不超过能选择超过当前日期// reverse:false=>向下取范围内所有整数 true=>向上取//例:selectNum(2,5)=[2,3,4,5];selectNum(2,5,false)=[5,4,3,2]function selectNum(lowNum, upNum, rever.
2022-01-12 10:57:52
1830
原创 h5：jquery+xgplayer实现点击封面全屏播放视频
点击播放后的效果封面{{-- 视频 start --}}<div class="video-container" data-src="视频地址" data-poster="封面地址"> <div class="social-list__video-poster"> <img loading="lazy" src="封面地址" alt="视频封面"/> </div>...
2022-01-05 15:15:03
2576
原创 Taro+Vue：判断图片的横竖屏转换图片适应方式（限制最大宽度和最大高度）
效果图：限制最大宽度和最大高度实现图片自适应HTML <image class="img" :mode="imagesMode" :lazy-load="true" src="图片url" @load="onImageLoad"/>script data() { return { imagesMode: 'widthFix' // 图片适应方式 } .
2022-01-05 14:53:35
921
原创 uni-app： APP平台的uni.getLocation前进行授权判断
引用插件：App平台的授权判断方式，另见：App权限判断和提示 - DCloud 插件市场import permision from '../../js_sdk/wa-permission/permission';onload onLoad(option) { // #ifdef APP-PLUS this.isIos = plus.os.name == 'iOS'; // #endif },method//安卓的判断函数需要写在外面async req.
2021-12-18 11:52:54
1121
原创 uni-app：通用拦截器
import { baseURL, timeout } from './config'function request(option){ return new Promise((resolve,reject)=>{ uni.request({ url: baseURL + option.url, //这里设置了15000 timeout:timeout, data: option.data, method: option.meth.
2021-12-13 11:05:47
1427
原创 uni-app+uview： uni.chooseImage选择相册/拍照后使用u-upload进行上传
uniapp使用u-upload拍照上传或选择相册上传，做一个类似朋友圈一样选择图片并能实时预览和删除的场景，图片在点击发布时和其他内容一起保存到数据库
2021-12-13 10:47:16
8277
2
原创 uni-app：页面直接传递复杂参数
我想实现的效果：点击编辑以后将获取的参数传到另一个页面进行编辑使用JSON的decodeURIComponent和stringify函数(这里如果使用qs.stringify()和qs.parse()会更加规范化，不过这里不需要给别人看所以就不在意这么多细节了)传参页面//methods内写入edit(item) { // item为我需要传递的数据,类型为对象 const list = encodeURIComponent(JSON.stringify(item));
2021-12-03 11:48:52
711
原创 uni-app：点击变色的答题模板（多选+单选）
代码段： <view class="result-tips"> <view class="msg"> <view class="blue"></view> <view class="msg-tip">蓝色为正确答案</view> </view> <view class="msg">
2021-11-06 16:54:55
2212
原创 使用表单时el-upload+OSS遇到的坑
情况表单中为了直接传JSON数据，使用了上传图片时传到OSS再获取后台返回的地址保存在表单的一个操作，返回一个数据保存位置相对路径，再将这个路径保存好传给后端，后端再拼接成绝对路径传给前端渲染：http://xxxx-img.oss-cn-shenzhen.aliyuncs.com/+相对路径问题由于后台返回给前端保存渲染的数据是绝对路径，但后台接收的是相对路径，在编辑表格数据时如果按editForm.xxx=row.xxx的形式去赋值，如果重新上传图片则不会出现此问题，如果没有重新上传会将绝对
2021-09-08 10:22:41
201
原创 穿梭框的动态禁用
实现效果：当用户只有一个用户组时，不可进行移除操作，且超级管理员必须属于超级管理员用户组（超级管理员的roleId==1）要求后台返回一个参数，表示这个用户只有一个用户组，再判断是否属于该用户组，属于则禁用代码： <div style="text-align: center" v-loading="addloading"> <el-transfer style="text-align: left; display: inline-blo
2021-09-08 09:56:59
3103
原创 树形结构中children的统一处理
不同编辑器中生成的树形结构的最后一级的children有三种情况：为空数组[] 有children但被定义为undefined 没有children属性// 递归判断列表，把最后的children设为undefined（递归判断参考自网络） getTreeData(data) { if (data.length > 0) { for (var i = 0; i < data.length; i++) { if (!data[i]
2021-09-08 09:45:33
1076
原创 可搜索+拖动的高德地图组件
组件的使用请参考https://www.cnblogs.com/yeqrblog/p/10083895.html这里对收起后添加了一个展开功能的优化处理1.在收起按钮后新增一个展开按钮，显示条件如下：并把收起的点击事件修改为以下方法 <div> <el-button v-show="snameMapShow" type="text"
2021-09-08 09:38:49
159
原创 el-date-picker动态限制时间范围
分为两种情况1.开始时间和结束时间同一个框2.开始时间和结束时间分开两个框情况1//情况1 原创版权声明：本文为weixin_40998880原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。//本文链接：https://blog.csdn.net/weixin_40998880/article/details/106272897//html<el-date-picker v-model="time" typ...
2021-09-08 09:19:32
6246
4
原创 搭配el-upload的动态新增删除表单+对重复项进行校验
目标效果1.动态新增删除表单2.校验规则（重点是upload的上传后清除校验提示）3.对重复项进行校验，只能想到这种比较复杂的方法，有更好的建议请指教T T代码参考html部分//html <el-form ref="editForm" :model="editForm" :rules="editRules" inline label-wid..
2021-09-08 09:11:39
722
原创 搭配elmentui使用的axios拦截器
import axios from 'axios'import { Message, MessageBox } from 'element-ui'import store from '../store'import { getToken } from '@/utils/auth'// 创建axios实例const service = axios.create({ baseURL: `/v-api`, timeout: 15000,})// request拦截器servi.
2021-09-08 09:05:32
299
原创 el-checkbox获取选中的id
当时脑抽没注意看group可以直接获得id数组所以写了个函数……还是传上来吧可能哪天就能用上了//html<div> <el-checkbox-group v-model="checkList" class="authgroup"> <el-checkbox v-for="list in authPage[index].childrens"...
2021-09-07 13:50:36
3245
原创 姓名、电话、身份证的表单校验
//获取url的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return nu..
2021-09-07 13:45:49
624
原创 点击编辑打开的wangeditor富文本编辑器对话框
用于通告、用户协议等可编辑的文本内容，要求页面和编辑框内容同步，一开始是思路是编辑时直接在段落盒子上创造一个editor实例，但是发现在保存并销毁实例时会把内容也摧毁掉，所以想了两种解决方法。1.点击编辑弹出对话框，对话框里是文本内容，保存以后传输到后台并重新查询文本，同时文本内容和编辑器内容一起更新（不需要销毁实例）2.点击编辑时直接在段落盒子上创造一个editor实例，点击保存发送到后端并销毁实例，利用Vue里面的provide+inject组合进行一个局部刷新（csdn就能搜到方法）这里介
2021-09-07 10:56:40
608
2
空空如也
uniapp如何取消严格模式
2022-07-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人