- 博客(154)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 跳转ios app store
itms-apps://itunes.apple.com/cn/app/appid查看应用appid：app store connect工具app信息如下图
2022-05-27 10:54:23
186
原创 03-动态修改class
方式一：<div :class="detailClass"></div>let detailClass = { 'order-edit': true, 'order-detail': false,};方式二：<div :class="detailClass"></div>let detailClass = ['order-edit', 'order-detail'];
2022-05-19 15:16:06
279
原创 02-两级tab
子组件<template> <div> <div class="diyTab flex overflow-x-scroll"> <div v-for="(item, inx) in tabArr" :key="item.key" :class="['tab-nav flex-none', activeKey == item.key ? 'active-tab active-color' : '
2022-05-19 14:14:51
225
原创 01-table
<template> <div class="order-list"> <Table bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : undefined)" :columns="columns" :row-key="(record) => record.freightId" :d
2022-05-19 12:15:25
88
原创 01-生命周期钩子
vue3x相较于vue2x的生命周期而言，引入了组合式API：setup，他的调用发生在data、computed、method解析之前，组件挂载之前，可以理解为setup包含了beforeCreate、created阶段，因此可以在setup中使用除此之外的其他钩子。其他阶段生命周期通过添加on进行使用。mounted ---> onMountedactivated ---> onActivatedonActivated被包含在 中的组件，会多出两个生命周期钩子函数，被激活时
2022-05-19 11:02:56
266
原创 005-接口-函数
常见有返回结果const mySum = function(x: number, y: number): number { return x + y;};用接口定义函数形状interface Searh () { // 定义入参：source、substring类型和返回值的类型 (source: string, subtring: string): boolean;}let mySearch: Search = function (source: string, subtrin.
2022-05-10 14:22:39
126
原创 003-简单接口
TS接口可以理解为：一种契约。可选属性，赋值时不完全匹配interface Car { type: string; color?: string;}const car: Car = { type: 'SUV',};// 使用 “?:”来表示该属性为可选属性，即使在声明变量时无该属性，也不会出现报错提示任意属性interface Car { type: string; [proName: string]: any;}const car: Car = { t
2022-05-09 15:12:54
155
原创 001-查看ts版本、安装、卸载
1、查看本机TS版本npm view typescript version2、查看本地是否安装npm ls typescript3、安装npm i -g typescript4、卸载npm uninstall typescript
2022-05-02 14:22:55
5194
原创 02-声明-props
const props = withDefaults( defineProps<{ show: boolean; info: Form; }>(), { show: false, info: () => { return { stationType: undefined, stationNmae: undefined, position: {}, isIntra: [],
2022-04-29 11:41:33
986
原创 004-接口-数组
单一元素声明let cars:string[]; cars = ["BYD", "WuLing", "HongQi"];多维数组声明let cars:string[][]; cars = [["BYD", "WuLing", "HongQi"], ['LiXiang', 'WeiLai', 'XiaoPeng'] ];元素为对象的复杂数据interface ObjType { key: string; title: string;}interface TabArr .
2022-04-20 10:46:47
1073
原创 安装多个node版本
在现实开发中，好多项目依赖的node版本是有差异的。 根据不用的项目使用不同的node版本成为迫切需要。接下来就来聊聊mac系统下是如何操作的安装node版本管理工具 nsudo npm install -g n使用命令安装最新稳定版sudo n stable安装指定版本sudo n v10.16.0或sudo n 10.16.0切换当前node版本sudo n 10.15.0删除制定版本sudo n rm 10.15.0查看已安装的node版本sudo n 或 n...
2022-03-11 15:34:55
267
原创 01-微信公众号授权获取用户信息
getCode () { // 非静默授权，第一次有弹框 this.code = '' var local = window.location.href // 获取页面url var appid = 'wxdd077c3a3105da12' this.code = this.getUrlCode().code // 截取code if (this.code == null || this.code === '') { // 如果没有code，则去请求 //
2021-04-09 14:10:55
276
原创 富文本rich-text
<template> <div class="rich-text"> <quill-editor ref="text" v-model="htmlString" class="myQuillEditor" :options="editorOption" /> </div></template><script> import 'quill/dist/quill.core.css' // import styles imp
2021-01-26 10:18:41
219
原创 element图片上传组件封装
<template> <div class="fileUpload"> <!-- 组件使用： 1、结构 <file-upload ref="uploadCom" @successHandle="fileUploadComplete" /> <el-button @click="uploadFile">上传文件</el-button> 2、逻辑 /
2021-01-22 10:38:36
939
转载 各大快递公司面单号准确性验证的正则表达式
{ "code": "ZJS", "id": "103", "name": "宅急送", "reg_mail_no": "^[a-zA-Z0-9]{10}$|^(42|16)[0-9]{8}$|^A[0-9]{12}"},{ "code": "SF", "id": "505", "name": "顺丰速运", "reg_mail_no": "^[A-Za-z0-9-]{4,35}$"},{ "code": "STO", "id": "100", "name
2021-01-22 08:56:12
6739
原创 移动端rem适配
前端在开发移动端页面时，通常会使用rem对不同分辨率的屏幕进行适配，以达到更好的视觉效果。直接粘贴代码，复制可用。(function(doc, win) { var uiDpr = 750 var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1
2020-08-27 10:34:36
202
原创 H5唤醒本地APP
H5网页唤起APP，不管是IOS系统还是安卓系统，浏览器是通过URL scheme来打开APP的。一个APP可以设置一个或者多个scheme用来打开自己的APP。以下是常见的scheme：APP微信支付宝淘宝新浪微博QQ知乎短信URL Schemeweixin://alipay://taobao://sinaweibo://mqq://zhihu://sms://scheme语法： 行为(应用的某个功能) |
2020-07-30 17:54:16
721
原创 微信支付
微信JSSDK文档：http://caibaojian.com/wxwiki/1、JSAPI支付微信公众号，微信扫码文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1参考：https://www.cnblogs.com/cinlap/p/11077632.html2、H5支付微信外的手机浏览器内调起支付页面文档：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=
2020-07-23 14:27:18
186
原创 001-uni-app多端开发---项目创建
今天来和大家分享一款跨平台多端开发的框架，uniapp。在框架和vue有很好的融合性，在整体框架配置上又偏向小程序。有接触过这两块的朋友相信会很快的了解uniapp的强大。uniapp快速开始接下来来聊聊项目框架相关内容：项目的创建文件=>新建=>项目生成目录如下：文件解读：1、pages：页面文件2、static：静态资源3、unpackage：uniapp包4、App.vue：项目主组件，包含uniapp的生命周期等5、main.js：项目文件主入口6、mai
2020-07-20 14:11:21
411
原创 002-搭建第一个node服务器项目
node + express一、项目搭建1、安装expresshttps://www.expressjs.com.cn/npm i -g express --save2、安装应用程序生成器npm i -g express-generator使用express-generator 快速创建一个应用的骨架。有几个重要的模块也要同时安装：body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。multer - node.js 中间件
2020-07-01 17:07:55
200
原创 001-搭建简单服务器，访问本地静态资源
node下载地址：http://nodejs.cn/Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。使用nodejs搭建本地服务器，类似于Apache。操作步骤：1、在文件夹下创建一个服务文件server.js。2、进入server.js文件，打开命令面板，运行命令node serve.js。若服务启动成功，命令面本中会打印日志“服务器开启成功”。在浏览器中，输入localhost:8888
2020-07-01 12:00:20
566
原创 axios封装一个具有请求/响应拦截的http请求
import axios from 'axios'import qs from 'qs'// 请求拦截axios.interceptors.request.use(config => { // 此处可以封装一些加载状态 return config}, error => { return Promise.reject(error)})// 响应拦截axios.interceptors.response.use(response => { return re.
2020-06-16 15:07:44
169
原创 JS常用方法总结
1、滚动到页面顶部const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { // requestAnimationFrame:执行向上滚动动画 window.requestAnimationFrame(s...
2020-03-26 16:18:24
458
原创 vue代码开发技巧或者规范
1、v-for中使用:key在操作列表渲染时，把：key属性与v-for一起使用，可以使vue对组件状态进行跟踪。使用唯一的识别符，diff算法能更高效的更新DOM。2、v-for和v-if尽量避免在同一元素上使用在列表渲染时常遇到元素的筛选，这时就会自然而然的把v-for和v-if结合在一起进行使用。但是，在使用时会发现有时只需要一个或者几个元素的值，而要去遍历整个列表。这样就做了好...
2020-03-16 13:58:27
214
原创 数据更新问题
vue项目数据更新总结：路由固定时1、$nextTick：（异步更新队列）在数据修改之后立即执行，等待DOM更新。回调会延迟到DOM更新循环之后执行。// 表单值的修改this.$nextTick(() => { this.form.setFieldsValue({ company: '九万里', property: '6666668888888' })})// 和...
2020-03-10 16:44:42
224
原创 导航守卫
导航守卫？通过路由进行一些操作，向常见的登录权限校验。当用户满足条件是进入导航，否则取消登录，跳转到登录页面。温馨提示：当参数和查询的改变并不会触发进入、离开导航守卫。要想查看当前路由，通过this.$route对象来查看，或者使用组件内的守卫beforeRouteUpdate来查看路由。一、全局守卫1、route.beforeEach 全局前置守卫当导航触发时，全局前置守卫顺序调...
2020-03-10 14:32:38
181
原创 watch属性的使用
watch，是一个键值对，键是要要监测的表达式，可以是props元素也可以是data元素等，值可以是string， Function， Object， Array。他的作用就是监听表达式变化，并且根据变化进行相应的操作。简单使用：<template> <div>{{ text }}</div></template><script...
2020-03-10 11:44:57
1934
原创 vue-quill-editor富文本自定义上传图片到服务器
vue-quill-editor选择图片之后是以base64的形式在编辑器内进行展示的，在实际项目中如果图片资源过多或者资源过大，那么传递到服务端的html内容资源存储会过大。因此，可以将图片先传到服务器，编辑器内只是存储资源的路径。接下来将两者进行返回的html进行对比：接下来对编辑器内图片资源上传到服务器进行分析：1、安装依赖npm install vue-quill-edi...
2020-03-09 14:36:10
1739
3
原创 上传文件到阿里云OSS
最近项目中有文件上传的功能，才发现阿里云oss真是个好东西。在其中做了好多的权限设置，角色、子账户、bucket等等。web端进行文件上传有多种方式1、从服务端拿取accid和key、令牌2、创建STS示例一、拿到权限直接上传let arr = []arr.push(fileListPermit[0].originFileObj) let result = client.pu...
2020-01-10 17:40:46
761
原创 input[type=file]获取文件信息，展示、上传
实现效果：<!-- 上传图片 --><div class="listBox flex imgBox"> <div class="label">专题图片：</div> <input type="file" class="userName right file" accept="image/*" /></div>&l...
2019-08-07 16:40:56
3667
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人