- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 react 循环多个Cascader，清空数据将默认值设为 undefined 无效时，可调用 x 图标的点击事件(删除)解决
const clearLen = [ ...document.getElementsByClassName("ant-cascader-picker-clear"), ].length; if (clearLen) { document .getElementsByClassName("ant-cascader-picker") [index].getElementsByClassName("ant-cascader-picker...
2022-02-28 11:33:49
904
原创 vue-cli3 搭建的vue项目，去除生产环境的错误提示及输出信息
1.去除错误提示：使用 Vue.config.silent。2.去除 console.log 控制台输出信息：使用 babel-plugin-transform-remove-console 插件。1）安装babel-plugin-transform-remove-console插件：npm install babel-plugin-transform-remove-console --save-dev2）在babel.config.js中配置插件信息：const productPlugins
2021-07-08 09:49:28
1585
原创 antd vue 刷新页面保留当前页面路由,保留menu选中菜单，浏览器导航栏回退时，menu子菜单会有多个选中状态的处理
antd vue 刷新页面保留当前页面路由,保留menu选中菜单，网上搜到一篇说的比较详细的博客，文章链接。本身项目中菜单有两级，正常操作选中菜单后，刷新页面会保留当前选中菜单，但是在点击浏览器搜索栏的回退箭头后，回退页及回退前的路由页面的菜单选中状态都会保留，这不是理想状态啊啊啊。打印发现，回退时控制选中类名的方法返回的是false，但是页面仍然渲染了选中样式，解决思路：当控制选中类名的方法返回的是false时，定义一个类名（未选中状态样式），代码如下：<template v-for="item
2021-06-30 14:42:10
1425
原创 element-ui中, 给 el-table 表格某特殊属性所在行添加特殊样式
给 el-table 的 cell-style 属性绑定方法：<el-table :data="tableData" :cell-style="cellStyle" border>...</el-table>// 在 methods 中定义方法：cellStyle(row) { // console.log(row); if ( row.row.syncFlag === "失败" && row.co
2021-06-28 15:59:35
1222
原创 webpack5X，vue h5项目前端build压缩时，使用uglifyjs-webpack-plugin插件去除生产环境的console输出
项目打包一开始使用： new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true }),执行打包命令后，控制台报错：Error: webpack.optimize.UglifyJsPlu
2021-06-28 15:39:20
677
原创 前端实现弹窗后，弹窗下的部分盒子的内容css加模糊效果
实现效果如图：// 定义实现模糊效果的类名.filter { filter: blur(3px); -webkit-filter: blur(3px); // 数字越大模糊效果越明显}实现过程： 点击弹窗的时候，将 filter 类名赋给需要模糊的盒子，弹窗关闭的时候，将 filter 类名移除即可。...
2021-06-22 14:58:34
509
原创 vue h5项目在微信内置浏览器实现自定义分享微信好友、朋友圈功能
一个描述：所有的 h5 页面在微信内置浏览器内，前端未做任何配置下，点击右上角三点，默认是有分享功能的，如下图：因项目要将分享相关信息入库，所以需要自定义分享，即拼接分享页面路径+活动id+分享者id。当被分享者通过自定义分享路径进入到页面后，调用分享成功接口，将分享相关信息传到后台。注意：1、h5页面在微信内置浏览器中，页面路径里会自动拼接上code=AAA&state=STATE&appid=BBB这样一串内容，并且页面路径中会有两个 ？号，所以获取当前页面路径后，拼接分享页面
2021-06-07 16:19:57
3601
原创 vue 移动端h5项目使用 vue-luck-draw 插件实现大转盘抽奖
文档地址： https://100px.net/docs/wheel/blocks.html实现效果如下：使用：1.安装插件：npm install vue-luck-draw。2.引入插件：在 main.js 文件中全局加载插件；或者在组件中按需引入插件。// 完整加载import LuckDraw from 'vue-luck-draw'Vue.use(LuckDraw)// 按需引入import { LuckyWheel, LuckyGrid } from 'vue-luck-d
2021-06-07 12:01:17
5848
1
原创 vue中，移动端h5项目用 vue-monoplasty-slide-verify 插件 实现拼图滑块验证
git源码、文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify实现效果如下：使用：1.安装插件：npm install --save vue-monoplasty-slide-verify。2.引入插件：在 main.js 文件中引入插件。import Vue from 'vue'import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVe
2021-06-07 10:33:16
3709
1
原创 vue，用户从进入页面到离开页面，统计用户停留页面的浏览时长
data() { return { browseTime: 0, // 浏览时长初始值为 0 clearTimeSet: null, };}, methods: { setTime() { //设置定时器 this.clearTimeSet = setInterval(() => { this.browseTime++; console.log(this.browseTime, "时长累计");
2021-05-29 10:15:49
5340
原创 企业微信关联微信小程序，小程序端登录授权的改造实现
项目中有企业微信关联微信小程序的需求，记录下实现过程。客观条件：开发者必须是该企业微信下的员工，否则在开发者工具里----企业微信小程序模式下调试授权登录相关接口时，始终是无法成功的。注意：在企业微信后台操作关联小程序时，关联的小程序必须是已经在微信端发布过的小程序，关联成功后，会拿到关联该小程序的 secret，在企业微信后台能看到企业 corpid，这两个参数是后台需要的。过程：在企业微信环境里，没有用户主动触发的获取用户信息、用户手机号的微信api，因此在判断是企业微信环境时，需静默调用授权登录
2021-05-20 11:01:53
4841
5
原创 js 循环数组，为数组对象中某一属性添加前缀
let originArr = [ { name: '天使爱美丽', img: '/movies/classic/1234.png'}, { name: '海上钢琴师', img: '/movies/classic/5678.png'}, { name: '楚门的世界', img: '/movies/classic/9101.png'}];let newArr = [];let base_url = 'https:******************',originArr.forEach
2021-05-19 14:49:20
1138
原创 css 实现任意盒子任意位置弹出时，该盒子底部加一层蒙版遮罩效果，且阻止蒙版下点击事件的执行
代码如下： <div class="menu-box" v-if="showMenuBox" > <!-- 任意盒子，自定义内容 --> </div> <div class="cover" v-if="showMenuBox" > <!-- 遮罩蒙版--> </div> .menu-box { pos
2021-05-19 11:25:56
1268
原创 uniapp小程序，css 实现底层图片加灰色蒙版，顶层按钮保持高亮效果
实现效果如下图：代码实现： <view class="wait-box"> <image :src="imgSrc" class="wait-img"></image> <view class="wait-btn">敬请期待</view> </view> .wait-box { box-sizing: border-box; width: 343rpx * 2; height:
2021-05-19 10:12:38
3060
原创 uniapp小程序，返回上一页并改变上一页的数据
let pages = getCurrentPages(); // 页面栈数组，第一个元素为首页，最后一个元素为当前页面。 let prevPage = pages[pages.length - 2]; // 上一页 if (this.selectedName && this.selectedId) { // 自定义判断条件 prevPage.$vm.deptName = this.selectedName; prevPage.$vm.deptId..
2021-04-27 11:22:19
947
原创 js 循环数组，数组对象中某属性的值一样时，组成新的数组对象
处理前的源数组let applyList= [{ applyNo: “1”, applyDate: “2021-04-22 10:41:31”, yearMonth: “2021年04月” },{ applyNo: “2”, applyDate: “2021-04-13 11:23:18”, yearMonth: “2021年04月”},{ applyNo: “3”, applyDate: “2021-03-04 09:37:49”, yearMonth: “2021年03月” },{ apply
2021-04-22 17:37:21
2839
原创 微信小程序前期申请企业认证、后期提审发布流程
小程序前期申请流程：如果公司之前有申请过微信公众号，建议直接复用公众号资质，可省去认证流程，快速创建同公司主体的小程序，最多可创建50个小程序；无公众号，可直接申请小程序，考虑到小程序跟公众号申请流程同样繁琐，但单个小程序的认证需要花300元，性价比不及公众号，建议申请小程序优先考虑申请公众号。公众号/小程序企业认证需要准备资料：新的邮箱用于注册、公司营业执照、微信认证公函(在认证过程中下载，需要盖公司章)、管理员身份证号、手机号、公司对公账户户名、账号、开户行。公众号/小程序企业认证认证流程：微
2021-04-15 10:51:10
1791
原创 uniapp小程序，用户授权登录全过程，wx.getUserProfile版本【包含：获取用户信息(wx.getUserProfile)、获取用户手机号(uni.getPhoneNumber)】
本项目授权登录业务场景：用户在进到小程序页面后，未登录状态下，点击页面任何地方，都弹出用户授权信息、用户授权手机号弹窗；已登录状态下，不弹出弹窗。代码实现结构：写一个公共father组件，组件内部分为三部分：获取用户信息组件、获取用户手机号组件、插槽：自定义其他页面内容。授权登录整体流程业务逻辑：用户未登录状态下：1点击页面先弹出获取用户信息弹窗，直接调用wx.getUserProfile，用户授权后，返回用户相关信息(nickName、avatarUrl等)；2再点击页面弹出获取用户手机号弹窗，这
2021-04-14 11:47:22
4953
原创 uniapp小程序，实现每次进入页面时自动开启 30 秒的倒计时。
<view class="number">{{count}}</view> <!-- 倒计时数字 -->data() { return { count: 30, timer: null, };},methods: { countDown() { let _this = this; const TIME_COUNT = 30; if (!this.timer) {
2021-03-05 16:20:08
1813
原创 uniapp，h5端获取当前页面url中所携带的参数
问题：获取当前页面 url 所携带的参数。 methods: { getRequestParams() { let url = location.href; let requestParams = {}; if (url.indexOf("?") !== -1) { let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串 console.log(str,'?后面的内
2021-02-19 15:03:24
5397
3
原创 uniapp中，设置图标字体为渐变色
<text class="nz-iconfont nz-iconhouse fund-icon"></text> // 要设置渐变色的图标，fund-icon自定义类名.fund-icon { font-size: 41rpx * 2; // 控制图标大小 margin-top: 105rpx * 2; margin-bottom: 55rpx * 2; display: inline-block; -webkit-ba
2021-01-15 10:33:02
2440
原创 uniapp，实现每次进入小程序页面后，每五秒轮询一次向接口发送请求，离开页面时停止请求
微信小程序收藏取消收藏功能接口实现项目中需要实现对循环数组中单个商品，点击收藏再点击取消收藏功能，收藏取消收藏需调用不同的后端接口，单个商品返回collectTag属性，collectTag属性默认为0未收藏，属性为1时为收藏状态。<view class='list' catchtap='carDetail' data-tradeid='{{item.tradeId}}'>...
2021-01-13 17:17:15
3341
原创 原生js实现：表头固定+表体每秒向上滚动一行+滚动到无数据时重新回滚到顶部+可以自定义滚动行数
描述：原生js开发的一个表格走马灯通用组件，表格表头固定，表体内容可每秒向上滚动一行，（表格内容可通过数组动态循环渲染），表体内容滚动到最后一个时，数据回滚到顶部，重新开始 自下向上 滚动，表体内容展示单元格行数，单元格长度宽度都可以自定义。实现效果如下：代码如下：<body> <table> <thead> <tr> <th>ID</th> <th>姓名<
2021-01-08 15:57:40
730
原创 vue项目，表格数据可编辑，并能实现行、列单元格的增加/删除
实现效果如下图所示：wxml部分代码如下： <view class='nav-3' scroll-y wx:elif='{{navNumber==3}}'> <scroll-view class='' scroll-y style="height: 100%;"> <view class='bottomtext'&g...
2021-01-08 14:36:52
752
原创 vue cli3 配置开发/测试/生产环境 baseUrl 及启动命令
在项目根目录下建立如下文件：如 env.dev 文件内容如下： 只支持 VUE_APP_ 开头，比如设置其它变量 VUE_APP_NAME = ‘XXX’package.json 文件配置启动语句如下："scripts": { "start": "npm run dev", "serve": "vue-cli-service serve", "build": "vue-cli-service build", "dev": "vue-cli-service serve --mode d
2020-12-07 17:29:21
1408
原创 vue后管实现下载日志功能
下载功能，前端实现项目中，get请求,接口返回一个二进制文件流,通过js的Blob对象转成文件下载。toDownload() { const url = this.baseURL + "/**********/download?key=" + `${value}`; const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob"; xhr.
2020-11-30 17:12:27
494
原创 微信小程序接收验证码实例
效果如下图：wxml部分如下：<!--验证码--> <view class="mod t-name" style='position:relative'> <text class="key">验证码:</text> <input type="digit" bindinput="bindKeyInput" data-in...
2019-06-05 17:47:58
3025
1
表头固定+表体每秒向上滚动一行+滚动到底部时重新回滚到顶部+可以自定义滚动行数
2021-01-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人