- 博客(37)
- 收藏
- 关注
RSS订阅原创 微信小程序，数据缓存，单个 key 允许存储的最大数据长度为 1MB 存的数据大于1M处理方法
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。注意如果数据要是可能大于10M,可以用全局变量。1.将数据分块存入缓存中。下面时再其他页面应用。
2024-04-25 16:48:44
116
原创 uni app请求封装，超简单，直接复制就行
/ 此vm参数为页面的实例，可以通过它引用vuex中的变量。在main中引入 放在app.$mount()上面。在创建config/api.js 用于集中管理。/* config 为默认全局配置*/// 初始化请求配置。在发请求的页面这样写。
2024-03-21 18:09:27
158
原创 uni-app 上传头像
//main.jsVue.prototype.$imageUrl ="http://www.com/baidu.com" //上传图片地址 uploadImg() { uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], //从相册选择和拍照 success: res =>
2022-03-23 17:47:25
219
原创 保存二维码至手机（海报）
// html <view @click="downloadPic">保存二维码</view> <view style="position: absolute; top: 0; left: 0; z-index: -1;"> // 设置canvasid <canvas style="width: 670rpx; height: 1070rpx;" canvas-id="firstCanvas" id="firstCanvas"></canva
2022-03-23 16:31:40
152
原创 uni app 常用工具函数 验证手机号
// untils/untils.js // 1. 验证手机号function checkPhone(phone) { let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; if (!myreg.test(phone)) { return false; } else { return true; }}// 暴漏出去module.exports = { checkPhone}// 使用// 引入<script> import
2022-03-10 14:24:52
324
原创 pc banner图 自适应 图片不变型
/* banner照片 */.banner_box{ min-width: 1200px; height: 600px; background: url(../image/product/banner.png); background-repeat: no-repeat; background-position: center; background-size: cover;}<div class="banner_box"></div>
2022-03-08 16:44:11
271
原创 pc端清除默认样式
/* 清除内外边距 */body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,a,b,span,p,i,dl,dt,dd,ul,ol,li,pre,button,input,textarea,th,td,div,select,img {margin: 0;padding: 0;}img {max-width: 100%;height: auto;box-sizing: border-box;border: 0
2022-03-08 16:39:25
251
原创 利用URLSearchParams,判断
{path: “/”,redirect:new URLSearchParams(window.location.search).get(“role”) === “com”? “/training-manage/manage-workbench”: “/safety-training/training-execution-tracking”,},
2021-12-29 10:03:43
176
原创 axios 请求方式
// delete携带请求体参数 配置对象export const reqRemoveUsers = idList => { return request.delete(`${api_name}/batchRemove`, {data:idList});};axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(ur
2021-11-10 00:05:56
183
原创 递归调用 封装一个函数
// 数据格式children: { children: [ { id: "1" level: 1 name: "二级数组" select: true children:[] } ] id: "1" level: 1 name: "全部数据" select: true} // 一个递归函数为了遍历children data 是所有数据 arr要存储东西的容器 foreachChildren(data,checkedArr){
2021-11-09 17:10:40
175
原创 简单过滤器
// main.js // 过滤器 format_price为名字 用只需在最后 | +名字Vue.filter('format_price', (val) => { return '￥' + Number(val) + '元';});// 使用 <div class="price">{{im.price | format_price}}</div>
2021-11-05 22:57:43
40
原创 flex布局 css封装
在公共文件中引入 @import './flex'; 前提是必须安装预编译 <style lang="less">div{ box-sizing: border-box;}.jtl{ width: 20px; height: 15px; }.pic{ width: 100%; height: 100%;}/* 弹性布局 */.flex { display: -webkit-box; display: -moz-box; display.
2021-11-05 18:34:07
427
原创 vue+vant 移动端适配
将如下代码放入app.vue样式中 ,以后用单位rem 1rem =100px// app.vue<style>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike.
2021-11-05 18:08:00
161
原创 路由懒加载 及封装
// 文件 index.js import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'import store from '@/store'//应用插件Vue.use(VueRouter)//将VueRouter.prototype的push和replace存储一份const originPush = VueRouter.prototype.pushconst ori...
2021-11-04 00:20:03
140
原创 axios拦截器 封装 及 模块化
axiox 封装 // 文件: api.js/* 该文件是对axios的二次封装，目的：让整个项目发送ajax请求时，通用的配置不用一遍一遍重复编写了*/import axios from 'axios'//引入NProgress做进度条import NProgress from 'nprogress'//引入NProgress的样式import 'nprogress/nprogress.css'import store from '@/store'import {Message.
2021-11-04 00:10:54
119
原创 小技巧 快速修改某个数组中一个或者多个对象的属性名
快速修改某个数组中一个或者多个对象的属性名ring先进行深拷贝,在替换JSON.parse(JSON.stringify(data).replace(/name1/g,"new_name1").replace(/name2/g,"new_name2"))data是数据, replace 可以重复链式编程,name1表示旧的属性名,new_name1表示新的属性名...
2021-11-03 20:58:52
302
原创 常用的数组方法及使用
// 1. includes()方法 // 用法: 用于判断数组里是否包含括号里的值 (可以为数字,字符串) // 返回值: 如果包含就返回true,反之false // const array = [1, 2, 3] // console.log(array.includes(2)) // 2.indexOf()方法 // 用法: 用于判断数组里是否有括号里的值 // 返回值: 如果包含就返回对应的下标,如果没有就返回-1 // const array = ['a','b','c'.
2021-11-02 17:03:51
239
原创 正则表达式
checkPhone() { //手机号正则 var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; //使用 if(!phone.test(mobile)) { console.log('手机号格式不正确'); return true; } //密码正则 var password =/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}
2021-11-01 16:19:13
49
原创 防抖 与节流
安装 npm i lodash 引入 import throttle from ‘lodash/throttle’ 原理就是在外面包一层防抖 : 多次变一次 throttle节流 : 一次变少次 // 数量加 addsum:throttle (async function (skuId) { await reqAddOrUpdateCart(skuId, +1) this.$store.dispatch('cart/getCartList') },10..
2021-10-30 10:26:45
44
原创 vue 图片懒加载
安装包: npm i vue-lazyload在mian.js中引入 1. import VueLazyload from 'vue-lazyload' 2. 引入所需要的照片:import tang from '@/assets/images/tang.jpg' 3. //图片懒加载 Vue.use(VueLazyload,{ loading:tang }) 4.将所需懒加载的照片的:src改为 v-laz..
2021-10-30 10:21:13
54
原创 前端 pc 微信支付 心跳包
使用element-ui弹出支付对话框npm i qrcode引入: import QRCode from ‘qrcode’使用://尝试使用QRCode转换 (返回一个promis对象,可以try cach)const url = await QRCode.toDataURL(result.data.codeUrl)import QRCode from 'qrcode' //引入qrcode// 点击打开弹框的事件 async open() { const res ...
2021-10-30 10:18:22
166
原创 关于vue中 编程式路由只跳转一次,第二次报错问题
用于解决编程式路由导航重复跳转出错的问题//将VueRouter.prototype的push和replace存储一份const originPush = VueRouter.prototype.pushconst originReplace = VueRouter.prototype.replace//增强push，用于解决编程式路由导航重复跳转出错的问题VueRouter.prototype.push = function(location,okCallback,errCallback).
2021-10-30 09:57:54
900
1
原创 滚动条 跳转后置顶问题
const router = new VueRouter({ // 工作模式 mode:'history', // 路由模块化 routes, // 导航条 scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }})/**在列表页切换路由的时候，滚动条会停留在
2021-10-30 09:51:46
187
原创 input type类型为number 去除默认样式(箭头)
input[type=number] { -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
2021-10-14 22:50:03
862
2
原创 快速实现 分页器(超简单) 可以直接用
1.如果想直接,用请直接滑到最后(方便省事,有详细用法)2. 如果想自己了解,下面有详细注释下面是效果图:1.首先创建一个组件定义为全局(结构已写好,可直接cv大法) <div class="pagination"> <button>上一页</button> <button >1</button> <span >···</span> <button>15&l.
2021-09-16 12:17:41
389
原创 使用Mock.js模拟数据
第一步：安装mockjs npm i mockjs第二步：准备json数据，建立文件夹 src/mock/xxx.json第三步：编写mock配置(建立文件夹)：src/mock/mockServer import Mock from 'mockjs' //引入安装好的mock文件 import banner from './banner.json' //引入自己模拟的数据json文件 import floor from './floor.json' //引入自己模拟的
2021-09-10 20:41:01
189
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人