- 博客(47)
- 收藏
- 关注
RSS订阅原创 打包配置技巧，网址动态增加后缀，不需前端重新打包
1.测试环境网页地址为https://xxx/#/，但是部署的环境，网页地址为https:域名/pc/#/。多了’/pc’后缀。打包一份正常的前端包，测试完成后还要打一份带后缀的前端包，一次还好，次数多了内容重复、效率太低。需要优化打包，一次打包，什么后缀或有没有后缀的项目都适用。原本为config.dev.assetsPublicPath。build的assetsPublicPath。
2023-06-27 11:47:47
716
原创 点击第一次不生效 拖拽第一次不生效 click事件 mousedown事件
html的渲染和js的处理需要时间，尽管js是单线程的，但是在细微情况下并不是。所以当标签多时，事件写在外层标签时，没有生效，写修饰符也不生效。写在最底层标签就生效了。： 事件要写在最底层的标签，如果写在外层标签，第一次事件不生效。（不管click事件或mousedown事件都一样的，这里为了拖拽更流畅用了mousedown）：拖拽时，第一次拖拽不生效，第二次才生效。
2023-06-19 11:01:12
593
原创 vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demo
页面结构van-tabs在最上面van-pull-refresh在van-tabs下面van-list在van-pull-refresh里面css关键给van-pull-refresh设置高度为calc(100% - 44px)， 其中44px是van-tabs的高度，同时给van-pull-refresh设置overflow: hidden;overflow-y: scroll;这样就能滚动起来加载更多以下是正文...
2022-06-09 09:50:27
1375
1
原创 el-select用法，错误写法和正确写法
效果officeList: [ { officeName: "A01", officeId: "1", }, { officeName: "A02", officeId: "2", }, { officeName: "A03", officeId: "3", }, ],//列表 officeName: "",//名称 officeId: null,//id写法1（错误举例，不好的写法，需要两个变量，不要用
2022-05-18 16:10:32
2583
原创 vscode+Hbuilder开发uni-app
uni-app官网：（官网有教程）https://uniapp.dcloud.io/Hbuilder官网：（开发人员一般安装alpha版本）https://hx.dcloud.net.cn/uView官网：(官网有安装方式）https://www.uviewui.com/DCloud插件市场：https://ext.dcloud.net.cn/search?q=uView以下两种方法都可以在vscode编写代码，在Hbuilder看效果，两边是热更新的，不用配置什么就能达成热更新。方法1：
2022-04-12 11:26:43
2474
原创 uni-app的h5/小程序/app 网络请求，解决本地环境和生产环境网络请求问题
本篇的重点主要在于解决这三端在本地和正式环境的网络请求问题全部代码贴在了全文最后思路：首先要理解这三个端的特性，h5会有跨域问题需要反向代理，小程序和app不需要反向代理，同时小程序还得用https域名。一、h5，一般会跨域需要反向代理。所以要在mainifest.json设置反向代理。在请求接口时，还得拼个/api前缀// 配置代理 "devServer" : { "proxy" : { "/api" : { "target" : "ht
2022-04-11 16:06:46
9558
原创 uni-app 移动端app无法显示本地图片
不能将本地图片放在assets文件夹，要放在static下这么写：<image :src="require('@/static/img/change.png')"></image>测试过了，这么写，h5、小程序、app都能显示
2022-03-11 15:11:08
1783
2
原创 uni-app/vue, vuex刷新后数据消失
在默认模式下,vuex中保存的东西会在刷新之后被清空,导致我们想用vuex存储一些内容，刷新后无法获取。可以利用持久性的存储比如localStorage或setStorageSync在app.vue监听刷新事件进行存储，设置延迟清空存储，避免内存泄露。1.vue利用localStorage的持久性存储结合vuex，在app.vue的created//在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload", ()
2022-03-08 11:10:14
4019
5
原创 uni-app 微信小程序打包，无依赖文件 处理方法
方法1.删除掉，点击查看，选中文件右键删除。方法2：根据条件编译，比如我有个配置文件在h5用到了，在static下新建h5文件夹，将无依赖文件移到h5文件夹，在入口文件修改引入地址为./static/h5/config.js，这样微信小程序打包时不会被编译...
2022-03-01 11:50:27
10041
5
原创 uni-app显示图片,加载失败时显示占位图兼容h5/app/微信小程序
使用image标签，@error=""写法在小程序会报错：[渲染层网络层错误] Failed to load local image resource，再加一个v-if判断<view class="meetlist-box-item" v-for="(item,index2) in conferenceList" :key="index2" @click='reserve(item)'> <view class="img_box"> <image v-if="i
2022-02-23 15:31:57
2301
原创 uni-app h5打包后仍可修改配置文件
1.在static文件夹下新建config.js，const config = { projectName:"项目名称"}2.在manifest.json的h5下设置入口文件template.h5.html，这个好像是默认的"template" : "template.h5.html",3.在这个入口文件template.h5.html引入config.js<script src="./static/config.js"></script>4.在各个页面使用.
2022-02-22 11:21:59
2219
8
原创 vscode快速创建vue/html模板、代码补全（自定义）
1.唤出vsCode控制台Windows 快捷键 : Ctrl + Shift + PmacOS 快捷键 : command + Shift + P2.输入snippets,点击选择3.输入vue,点击选择4.替换文本{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "<
2022-02-22 11:18:30
4767
原创 element el-table 前端搜索 filter
效果：<template> <!-- 设置用户 --> <div class="SetUser"> <el-dialog title="设置用户" :visible.sync="visible1" width="35rem" center append-to-body> <el-input v-model="search" placeholder="搜索" style="margin-bottom:1rem;" maxl
2022-02-21 17:37:28
3599
原创 Found bindings for the following environments: - Windows 64-bit with Node.js 10.x报错解决方法
因为升级了node版本，导致node-sass不能匹配了，需要升级node-sassnpm rebuild node-sassps:升级node的方法有很多，我用的方法是在官网下载新版node然后替换本地的node，并安装升级。
2022-02-15 16:26:07
5569
原创 el-table合并列，合并日期列相同的日期
业务场景：实现合并日期列相同的日期思路：使用element的:span-method="objectSpanMethod"实现效果：html:<el-table :data="meetTotalTableList" :span-method="objectSpanMethod" border size="mini" :header-cell-style="{background:'#fffff
2022-01-19 11:46:38
1085
原创 axios判断请求超时进行处理以及axios封装方法
axios判断请求超时进行处理在response拦截器的error里进行判断请求超时进行处理error => { console.log("拦截器error",error); //网络超时异常处理 if(error.code === 'ECONNABORTED' || error.message === "Network Error" || error.message.includes("timeout")){ Message({ me
2022-01-13 14:52:28
8156
原创 el-tooltip悬浮框显示内容 自定义
<el-tooltip class="item" effect="light" placement="top-start"> <div slot="content" style="dispaly:flex;max-width:15rem;">这里是悬浮显示的内容,可以用div/span等各种形式展示</div> 这里是触发悬浮的容器,可以用div/span等各种形式</el-tooltip>...
2022-01-06 16:44:04
4309
原创 vue取消单个或多个axios请求
前言：该文写于2020年11月11日14:59业务场景多文件上传时，锁定文件上传弹窗，为了用户体验，增加取消上传功能，点击取消上传时，将所有正在上传的文件同时取消上传。（单文件上传也是可以取消的）解决方案1.在script开头定义axios的CancelToken取消请求变量。理由：使所有请求都使用同一个cancleToken变量，实现取消时同时取消所有请求 import axios from "axios"; let Cancel = axios.CancelToken.source()
2022-01-06 16:41:02
1044
原创 微信扫码登录
前言：该篇的创作时间为2020年10月18日15:36逻辑思路：点击按钮时，显示二维码，写入缓存，标记正在微信扫码登陆（为什么要标记？因为welink扫码重定向链接也会携带code，两种扫码点击事件触发时，标记不同的登陆方式）。扫码后，重定向，路由拦截跳转到登陆页，链接还是会带code。在登录页加载时，读取链接的code和缓存，用code向后端发送请求，如果返回token，执行登陆方法。如果没有返回token，则把返回的openId写入缓存，跳转至微信注册绑定页面。在注册绑定页注册绑定时，发
2022-01-06 16:35:31
2429
原创 h5调微信支付
1.下载weixin-js-sdknpm install weixin-js-sdk --save2.在页面引入sdkimport wx from 'weixin-js-sdk';3.调用后端接口获取微信支付用到的参数，然后调用微信支付。//支付会议meetingPay(){ var params = { "mid": this.messageId } this.$request({ url: '/api/wechat/meeting/wechat
2022-01-06 16:25:45
554
原创 生成二维码及微信长按识别二维码
参考网友文档：js生成二维码及解决二维码在微信中不能识别来自 https://blog.csdn.net/qq_41429765/article/details/111915775?ops_request_misc=&request_id=&biz_id=102&utm_term=微信生成二维码识别&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-3-111915
2022-01-06 16:23:30
1333
原创 js 移动端h5 调起呼叫
试过好多种，这种是最合适的，点击复制时不会带上//前缀，也可以直接呼叫根据浏览器不同而有所不同，比如微信浏览器，点击时，会弹出复制、呼叫，安卓自带浏览器，会直接跳转到拨号页面ios自带浏览器，会底部弹出手机号码的呼叫按钮//呼叫callPhone(){ window.location.href = 'tel:10086'},...
2022-01-06 16:19:52
870
原创 前端 welink h5 免登录实现
调用welink接口HWH5.getAuthCode() 获取code ，使用code调用后端接口获取token和用户信息
2022-01-06 16:10:17
1977
原创 van-datetime-picker兼容ios vant日期选择
1.无法设置最小最大值因为YYYY-MM-DD这种形式ios不兼容//错误写法this.maxDate = new Date(this.$day('2022-01-06 15:53:10').format("YYYY-MM-DD"))//正确写法this.maxDate = new Date(this.$day('2022-01-06 15:53:10').format("YYYY/MM/DD"))2.v-model绑定值为invalid Date//错误写法this.currentDat
2022-01-06 16:01:39
2625
原创 基于element/vant的自定义时间选择组件demo，支持传入多个可选时间段，和多个禁用时间段
业务场景：在我自己写的基础上，封装了一个时间选择组件，增加了支持传入多个可选时间段，别问为什么，问就是泪。甲方需求太多了。我的上一篇文章：https://blog.csdn.net/weixin_45753961/article/details/119956396?spm=1001.2014.3001.5501效果：思路：pc端则以el-select为基础，移动端则以van-pick为基础，本篇是移动端的，以van-pick为基础来说(其实都能用的，组件template里面的van-p
2021-10-15 14:46:14
783
原创 vant 日期赋值的坑
业务场景：选择时间后，点击开始时间弹窗，显示10-14点击结束时间弹窗，赋值了10-15，但是还是显示10-14问题原因：vant的日期选择，会有动画回弹，把值回弹回去了。解决方法：弹窗打开后，等日期选择器先渲染完毕了，再赋值...
2021-10-13 19:15:57
453
原创 倒计时组件
场景：当前时间，距离某个事件的开始时间还有几天几小时几分几秒，0天不显示天，0小时不显示小时，固定显示分秒，大于10分钟正常显示，10分钟内黄色显示，3分钟内红色显示。效果：组件index.vue<template> <div class="count_content"> <div class="count" v-if="day && day!='00'">{{day}}天</div> <div cl
2021-09-04 10:34:30
205
原创 element el-upload 上传文件组件封装
组件index.vue<template> <div class="applyUpload"> <div class="apply_content"> <div class="upload_content"> <div class="upload_item"> <div class="fileName"><i style="color:red">*</i&
2021-09-04 09:43:46
2021
原创 js 获取地址参数
// 获取地址参数 getParamFromUrl(url, key) { var urlsearch = url.split('?'); var pstr = urlsearch[1].split('&'); for (var i = pstr.length - 1; i >= 0; i--) { var tep = pstr[i].split("="); if (tep[0] == key) {
2021-09-04 09:35:40
236
原创 vue js 下载文件
//导出-下载按钮 export(id) { let item = { params: { id: id, }, name: "文件名", fileType: '.xls', method: 'post', url: "", } this.downloadFile(item) //下载 },
2021-09-04 09:33:52
664
原创 js 根据key对数组去重
//根据key对数组去重 deduplication(arr, key) { let res = [] arr.forEach((item) => { let list = [] res.forEach((resitem) => { list.push(resitem[key]) }) if (list.indexOf(item[key]) === -1) { res.push(item)
2021-09-04 09:30:33
726
原创 基于element的自定义时间选择组件，支持禁用多个时间段
想要实现：禁用0点到9点 12点到14点等等的多个时间段。但是官方的这个组件只支持传开始和结束时间（另一个组件 el-time-picker支持，但是不符合我们的UI需求），对我来说不够用啊因此我决定自己写组件 ，效果如下：实现思路：使用el-select，手动制造源数据，封装为一个组件，传入禁用的时间段，传出选择的时间。组件封装：<template> <el-select class="selectTime" v-model="time" :placeholder="
2021-08-27 16:54:59
1110
原创 vue2.0配置代理 api 开发环境、生产环境
业务场景：只需内网调用接口，不需要ngix，所以生产环境没有跨域问题不用api代理，但是本地环境有跨域问题要做代理。实现需求：本地环境有api，生产环境没有api以下是实现方法：1、 config/index.js'use strict'const path = require('path')module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/
2021-08-18 11:38:57
1864
原创 el-tree控制节点复选框显示隐藏，一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框
一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框//一级节点不显示复选框 其他子节点，收起状态不显示复选框，展开状态显示复选框，叶子节点显示复选框.el-tree-node { .is-leaf + .el-checkbox .el-checkbox__inner { display:flex; } .el-checkbox__input> .el-checkbox__inner { display:none;
2021-07-10 19:11:16
3435
原创 element el-checkbox-group 的用法
el-checkbox的lable的用法很关键。lable对应的是v-model绑定的数组里的对象。例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。data定义:sendTypeList: [{ value: 1, label: "手机短信" }, { value: 2, label: "邮箱" }, ],
2021-07-07 11:06:02
18264
4
原创 vue 地址栏#号前随意输入字符问题
问题：地址栏#号前随意输入字符，也能跳转页面使用，有些接口能用。但是有些接口404。解决方法：在路由拦截增加这段判断：// 判断#号前的地址是否正确let wPath = window.location.href; //页面地址let currentHost = wPath.substring(0,wPath.indexOf("#")); //页面#号前的地址// 获取主机地址，如：http://localhost:8080/let realHost = window.location
2021-06-17 10:56:47
448
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人