- 博客(50)
- 收藏
- 关注
RSS订阅原创 vite+react+Typescript+andt Design实现管理系统（一）
二.安装react项目需要的依赖三.使用eslint 规范代码风格参考：AlloyTeam ESLint 规则
2022-07-11 14:10:27
397
1
原创 pnpm多包管理项目
pnpm官网在今年的项目中，领导使用了monorepo多包管理模式来管理项目，具体使用技术为:pnpmvue3viteant-design Vuetypescriptformilyjs 表单解决方案pnpm其中：pnpm 可以说是一个多包管理器，有以下优点节约磁盘空间提升安装速度workspace 支持对于 monorepo 类型的项目，pnpm 提供了 workspace 来支持，而且比yarn workspace配置更简单，只需在项目根目录下创建一个 pnpm-work
2022-03-29 16:52:32
5397
原创 uniapp打包成app v-for中key值类型
环境：vue3 ，uniapp问题：在uniapp 非H5端，使用v-for循环，key值用的是item中的某个参数值（string类型），在app端，搜索数据的时候，接口返回四条数据，但是app只显示两条数据，后经排查，修改key值后可以正常显示...
2022-03-11 17:22:27
1831
原创 uniapp navigateBack返回上一页刷新数据
当详情页数据更新后，返回上一页 需要刷新列表 这个时候可以用// 详情页返回上一页uni.navigateBack({ success: () => { uni.$emit('updateEquipmentList') } }) // 上一页数据更新 uni.$on('updateEquipmentList', getDetail);...
2022-03-11 17:01:07
3096
原创 创建vue3+uniapp项目
使用vue cli创建uniapp项目官网创建方法根据uniapp官方文档所写，使用如下方法创建：# 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-project # 创建以 typescript 开发的工程 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 但是在创建的过程中，git报以下错误：$ npx degit dcl
2021-12-15 10:52:46
3975
原创 vue配置vue.config.js
const path = require('path')module.exports = { publicPath: './', outputDir: 'dist', assetsDir: '', // 放置生成的静态资源目录（js、css、img、fonts） lintOnSave: false, // eslint-loader 是否在保存的时候检查 // webpack配置 chainWebpack: (config) => { },
2021-09-06 13:49:43
141
原创 H5移动端 实现图片缩放拖动（hammerjs)
在做Cordova+vue项目的时候，有需求是可以放多缩小以及拖动图片的功能，就类似于手机图库里面自带的缩放等功能。经查询可以使用hammerjs来做。
2021-08-30 10:46:22
5256
8
原创 node-sass坑
项目使用的是Cordova+vue,然后用了sass变量，由于是内网开发，很久没有新安装插件，今天安装了hammerjs插件后，npm run dev 项目，发现了错误: * * !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-ef68022e","scoped":true,"hasInline
2021-07-22 17:22:41
80
原创 mac创建react项目报错 ：Aborting installation. npm install --save --save-exact --loglevel error react reac
Mac创建react项目失败之前一直以为是淘宝镜像不对，尝试很久才找到方法解决方法下载下面的包brew install pixmanbrew install cairobrew install pangobrew install jpegbrew install giflibbrew install libpng
2021-06-23 23:08:44
1272
4
原创 vscode官网下载网速慢
VSCode官网下载Exe安装包经常网络下载速度缓慢。解决办法：1.复制官网下载链接。例如: https://az764295.vo.msecnd.ne/stable/054a9295330880ed74ceaedda236253b4f39a335/VSCodeUserSetup-x64-1.56.2.exe 2.将az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn ，然后将完整地址在浏览器地址栏中打开。 https://vscode.cdn.azu
2021-05-26 10:44:52
182
原创 Vue之router-view
官方解释： 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ，根据嵌套路径，渲染嵌套组件。其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件， 很多时候，每个路由的数据都是包含在路由参数中。自己理解：就是点击一个链接跳转到其他组件，一般会跳转到一个新页面，但是，如果不想跳转到新的页面，又希望路径会变化，只是在当前页面切换展示，就会涉及到路由嵌套页面：father.vue<template><div>.
2021-05-24 14:02:09
153
原创 vue修饰符
今天在看代码的时候 发现一些之前自己没有使用的Vue修饰符，特此记录!.stop - 调用 event.stopPropagation()。停止向上冒泡.prevent - 调用 event.preventDefault()。阻止默认事件.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。
2021-05-24 13:24:18
53
原创 手机号脱敏处理
let len = num.length if (len && len > 4) { return num.substring(0, 3) + '****' + num.substring(len - 4, len) } }
2021-03-24 17:46:24
571
原创 ios对时间getTime()不兼容 导致undefined问题
在项目中需要获取一个时间戳，使用了new Date(time),安卓手机上可行，但在苹果手机上显示undefined，在谷歌浏览器的控制台打印出来，后来发现是ios对new Date()函数不兼容，主要是时间格式为：2019-3-21 12:00:00 在苹果上获取时间戳有兼容性问题 ，需要转换成 2019/3/21 12:00:00 才可以正确获取到时间戳。而安卓对两种数据格式都兼容2019-11-09 10:13:21 2019/11/09 10:13:21解决办法：let t = new Da
2021-03-23 23:25:43
945
1
原创 倒计时时分秒
可以利用递归思想做function countDown(time){// time: '2021/03/04 // * 注意：日期格式 最好不要传 2021-03-04 格式 有的浏览器不兼容 let expireDate = new Date(time)// 倒计时24小时 expireDate.setMinutes(expireDate.getMinutes() + 1440) expireDate = +expireDate l
2021-03-23 23:16:42
141
原创 iconfont 图标与文字不居中的问题的解决方法
问题：在做移动端h5项目的时候 发现 在ios 中文字和iconfont文字图标没有对齐 icon会往上飘，奇怪的是在安卓中是正常显示的如图所示原因是：iconfont 的基线跟 文字 的基线不同导致的。解决办法：给 iconfont 设置 vertical-align:middle;.md-icon.icon-font:before { vertical-align: middle; }如果是用的用的阿里iconfont 的下载包，修改 iconfont.css 文件即可：...
2021-01-13 11:12:49
2893
原创 文字保留4行 展开收起放在文字最右边
<template> <div> <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :data-title="introduce" ref="desc"> <span class="merchant-desc" v-if="introduce">{{introduce.
2020-10-26 20:49:11
180
原创 高德地图获取经纬度
高德API使用方法：getTitude() { AMapLoader.load({ key: process.env.VUE_APP_AMAP_KEY, version: '2.0', plugins: ['AMap.Geolocation'] }).then(AMap => { this.map = new AMap.Map(this.$refs.map, { resizeEnable: true
2020-09-15 10:24:32
1666
原创 uniapp-跳转之uni.navigateBack和uni.navigateTo
问题：当我一直用uni.navigateTo做跳转页面时，使用（uni.setStorageSync）缓存数据之后，再跳转后的a页面中的数组list的值 一直被覆盖let str = uni.getStorageSync('newMember') if(str) { this.list.push(str) // list 始终为str一个值 }经 uni.navigateTo 跳转的页面再次返回的该页面时 相当于每次都是一个新页面（类似A-B
2020-08-31 18:03:09
1616
原创 uniapp- onshow和onload
官网onload: 只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），onShow: 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面例子：页面b:通过缓存跳转到页面aB:缓存uni.setStorageSync('newMember', this.newMember)A： 接收：onShow() { let str = uni.getStorageSync('newMember') this.list.
2020-08-31 17:55:05
7096
原创 uniapp弹窗 （可输入）
uniapp 插件市场 引入插件子组件<template> <view> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog type="input" :mode="mode" :title="title" v-model="value" :placeholder="placeholder"
2020-08-07 11:44:40
5913
1
原创 小程序canvans生成海报
根据需求，需要小程序生成如图所示海报，有微信头像，图片，文字**前景提要：**在公众号里面 可通过html2canavs去截取海报 但是在小程序中有兼容问题 会获取不到节点html2canvans点击海报生成 并长按保存官网：html2canvas官网let el = this.$refs.canvasPosterCard.$el html2canvas(el, { useCORS: true, width: el.offsetWidth,
2020-07-20 16:42:02
433
原创 小程序海报 ba se64在真机中不显示
const fsm = wx.getFileSystemManager();const FILE_BASE_NAME = ‘tmp_base64src’; //自定义文件名function base64src(base64data, cb) {const [, format, bodyData] = /data:image/(\w+);base64,(.*)/.exec(base64data) || [];if (!format) {return (new Error(‘ERROR_BASE64S
2020-07-15 12:00:21
380
原创 pc布局总结
pc使用rem布局外层1.在html body里面 设置宽高100%2.在里面第一层 设置一个div 设置最小宽高 防止屏幕分辨率影响 布局3.使用flex布局 上下左右自动居中里层1.当想要里层滚动的时候 可以设置overflow：auto总结1.当div有角但是没有展现的时候，可以查看是不是里面的元素把外面的遮挡了 可以设置overflow：hidden 尝试解决2.设置最小宽高 或者最大宽高 可以防止 当屏幕分辨率过大或者过小的时候 样式变形3. 设置颜色渐变：b
2020-06-28 11:57:18
160
原创 vue之双向绑定与计算属性
在使用input输入框进行双向绑定时，在使用计算属性时，报错“Computed property “unitArea” was assigned to but it has no setter.”解决办法1解决办法2解决办法：
2020-06-03 21:18:08
502
原创 【vue踩坑之报错记录】2
1.vue 中引用echarts 出现 "TypeError: Cannot read property ‘getAttribute’ of undefined"问题
2020-05-22 13:49:07
233
原创 数组循环失效问题
问题： 当在服务端获取到数据时，将其里面的属性值赋值到list里面，代码如下：if (res.code === 0) { console.log(res.data, 'ioio') res.data.forEach((item, index) => { this.list[index].text = item.enterprise_name this.list[index].value = i
2020-05-13 11:24:19
575
原创 【vue踩坑记录】1、“Error in render: "TypeError: Cannot read property '0' of undefined"”渲染错误问题
【前提】：搭建项目时，从后台调取数据，显示图片时没有问题，但开发者工具仍然报出“Error in render: "TypeError: Cannot read property ‘0’ of undefined”错误，具体如下【解决过程】：翻译了一下：这里的意思就是模板在渲染时候，读取对象中的某个对象的属性值时，这个对象不存在，说通俗点就是三层表达式a.b.c，在对象a中没有对象b，那么读取对象a.b.c中的值，自然会报错。如果是两层表达式a.b则不会报错，返回的是undefined。明白了原因
2020-05-12 18:44:46
2289
原创 格式为最多显示两行，右对齐，超过两行以打点显示怎么做
1.如果只显示一行，超出用点表示。 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;2.显示两行，超出用点表示。overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-...
2020-04-29 17:34:12
731
原创 vue踩坑之报错Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ''
Error in nextTick: "InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘’ is not a valid attribute name."这个错误是在template中出现了‘’符号 可能使用的不对 在上下文去找到这个地方 修改就 OK了...
2020-04-29 16:25:45
6216
1
原创 使用v-for循环如何给不同元素设置不同样式
<div v-for="(item, index) in space" :key="index" :class="'space-' + (index + 1)"></div>css:.space { &-1 { margin-left:0px; } &-2 { margin-left:52px; } &-3 ...
2020-04-02 17:33:19
1698
3
原创 正则
正则验证验证汉字 字母 正数/([\u4e00-\u9fa5]+)|([a-zA-Z]+)|(^[+]{0,1}((\d+)|(\d+\.\d+))$)/验证汉字 字母 大于0的数/([\u4e00-\u9fa5])|([a-zA-Z])|(^[+]{0,1}(([1-9]+)|(\\d+\\.\\d+))$)/匹配汉字：[\u4e00-\u9fa5]匹配字母：[a-zA-Z]...
2020-03-31 09:41:53
122
原创 es6语法
在开发项目过程中，会遇到很多es6的语法，但是对某些语法使用不熟练，比如结构赋值，async await等。 仔细阅读了阮大佬的es6入门指导后，会逐步对自己不熟悉的部分进行总结。结构赋值数组的结构赋值数组的结构赋值是按顺序赋值的[a,b,c] = [1,2,3]console.log(a,b,c)[b,a,c] = [1,2,3]console.log(a,b,c)// 12...
2020-03-23 00:04:17
97
原创 vue点击拖动进度条
需要实现拖拽和点击进度条的功能，但是很多插件都只实现拖拽事件，基于以上两个原因，自己封装了一个可以响应input和change事件（即一个是拖动进度条到某处，一个是在进度条某位置点击使其值变为该位置）的div实现的Vue组件。目前该组件只实现了拖拽功能，点击事件后续慢慢更新出来css.scroll{ margin:20px; width: 200px; height:...
2020-03-16 20:15:03
2939
原创 关于项目的一些规范
在项目开发中，有时候会遇到一些代码书写规范问题，比如css规范，eslint报错等1、前端工程的目录规范目录规范dist 把包后的最终代码包src 开发目录components 组件pages/views 页面utils 工具函数封装store 状态管理package.jsonREADME.md2、BEM样式命名规范BEM的命名规范BEM(Bloc...
2020-03-15 19:04:44
97
原创 子元素设置margin-top为何会影响父元素？
问题 ：在给子元素这是margin-top的时候，发现父元素与浏览器顶部也产生了相同的间距，在查看元素的时候，父元素的margin显示为正常，这是为什么呢？css2.1盒模型规定内容：In this specification, the expression collapsing margins means that adjoining margins (no non-empty conte...
2020-03-11 20:31:37
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人