- 博客(54)
- 收藏
- 关注
RSS订阅原创 vue单页记录滚动条位置
需要放在生命周期位置，和mounted同级，非方法里面。//记录离开时的位置 beforeRouteLeave (to, from, next) { //保存滚动条元素div的scrollTop值 let scrollTop = document.querySelector('.page-content').scrollTop; from.meta.scrollTop = scrollTop; next(); }, .
2021-05-10 11:07:46
242
原创 生成带logo的二维码
import QRCode from "qrcode"; QRCode.toDataURL('XXX', (err, url) => { this.url = url; this.drawImage(); });//使用canves 画图带logo drawImage(){ let canvas = document.createEle.
2021-05-10 11:06:03
156
原创 ifame 内嵌，及共享cookie设置
1、判断是否内嵌： window.self === window.top true: 非内嵌，false: iframe 内嵌2、内嵌扫码不跳转问题（sandbox配置） <iframe id="iframe" sandbox="allow-same-origin allow-scripts" src="" frameborder="0"></iframe>3、设置Google 共享cookie* Browse to: chrome...
2021-05-08 11:48:59
2000
原创 扫码登录（websocket 和 异步轮训）
扫码登录一般分两步，第一步扫码获取扫码者信息，第二步需要手动确认登录。1、使用websocketimport QRCode from 'qrcodejs2';import SockJS from 'sockjs-client'; import Stomp from 'stompjs';let stompClient = null; mounted() { this.connect(); }, beforeDestroy: functio.
2020-06-09 18:16:45
1038
原创 小程序iPhoneX兼容及分享到群或者人
1、iphoneX 兼容在tabbar组件的生命周期内判断，设置吸底的间距 attached(){ let that = this; wx.getSystemInfo({ success: res=>{ console.log('手机信息res'+res.model) let modelmes = res.model; if (modelmes.sea
2020-06-09 18:05:41
328
原创 如何在小程序中等待多个异步调用结果，写同步JS代码。（地理，wifi获取）
最近在做小程序打卡的需求总结如下：1、等到多个异步结果，再写业务逻辑。2、小程序再安卓机器上，无法获取（单人单账户登录的企业网络）wifi信息。问题1处理：使用promise.all,正常情况下，promise.all是返回全部resolve结果，遇到失败的就优先返回第一个失败的结果，这里我们使用的时候，需要特殊处理，不使用reject。 // 获取用户打卡信息 Promise.all([this.getConnectedWifi(),this.getLocatio
2020-06-09 14:16:48
756
原创 微信内嵌H5实现单页面多次返回效果
场景：一个表单设计流程，为了传值开发方便，很大程度上都是使用单页面开发，过程中产品需要回退（返回功能）。解决思路：使用锚点。打开全屏弹窗的时候，改变url添加锚点，关闭的时候去除锚点。返回的时候使用this.$router.back();如果涉及多弹窗之间的记录，需要使用watch监听路由变化。watch: { '$route.hash' (val){ let configWhiteList = ['#config','#option']; //con.
2020-06-09 11:20:51
661
原创 在vue中使用 provide 和 inject
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。使用场景：在主页面中 引入较深层级的业务组件，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。export default { name: 'XXX', provide() { return { ctx: this };
2020-06-09 11:11:49
463
原创 PC端 拖拽上传。
<div class="drag-con" @dragover="fileDragover" @dragenter="dragenter" @dragleave="dragleave" @drop="fileDrop"> <div class="icon"> <svg-icon class="svg-upload" ico..
2020-06-09 11:00:09
286
原创 wifi网络正常，手机链接无法上网。
最近刚搬家，电脑设置wifi后，电脑访问wifi网络正常，手机链接wifi，提示受限，只能看新闻，不能刷视频，在网上查询了好久，没有解决方案，询问朋友后，完美处理，在此分享。 解决方法就是修改手机wifi设置的DNS，修改为8.8.8.8； 不同的手机设置步骤不一样，具体操作就是打开连接的wifi设置详情，IOS可以直接看到DNS设置，安卓的可能在IP设置，修改DNS即可。...
2020-06-09 10:10:55
1153
原创 基于vue的拖拽（vuedraggable）
1、官网地址 https://www.npmjs.com/package/vue-draggable2、表格使用 <draggable slot="body" class="syllable_ul" element="tbody" ...
2020-01-06 10:12:12
4278
2
原创 基于vue的富文本编辑器（vue-quill-editor）
1、安装npm install vue-quill-editor –save2、引入全局引入//main.jsimport VueQuillEditor from 'vue-quill-editor'; //富文本Vue.use(VueQuillEditor);// require stylesimport 'quill/dist/quill.core.css'impo...
2019-12-31 14:07:17
246
原创 vue中实现图片的查看与放大（v-viewer）
1、安装npm install v-viewer2、全局引入import 'viewerjs/dist/viewer.css';import Viewer from 'v-viewer';Vue.use(Viewer);3、使用 （1）指令式使用，只需要将 v-viewer 指令添加到任意元素即可，该元素下的所有 img 元素都会被 viewer 自动处理。...
2019-12-27 14:51:37
2945
原创 vue项目开发中的随笔
1、大型项目 枚举接口的使用，把枚举字段存放在vuex中，并在使用到的地方，使用mapState辅助函数 获取，mapState 介绍使用方便状态及配置的管理。2、页面渲染，带html标签的使用v-html或者 v-text。3、状态映射//两个字段的映射<div>{{item.status==1?'通过':'拒绝'}}</div>//多个字段的映射&l...
2019-12-27 11:51:17
230
转载 vue中使用 minix 混入
总结: vue中混入是是实现类继承的重要方式。1、minix会在引入文件 中进行 属性和方法的合并（混入）minix优先执行，相同字段名 熟悉会覆盖。相同函数名会合并为一个数组，数组会优先执行minix.demo:// minix.jsexport default { data () { return { name: 'min...
2019-12-27 10:52:02
4041
5
转载 vuex 的辅助函数 mapState
使用场景官网介绍:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex'export default { // ... computed...
2019-12-27 10:45:12
289
转载 常用vscode 插件
收集大佬整理https://blog.csdn.net/weixin_39876634/article/details/88562183
2019-12-18 10:10:40
147
转载 oh my zsh + item2 使开发更流畅 （含git简化命令）
1、git简化命令alias ga='git add'alias gb='git branch'alias gba='git branch -a'alias gbd='git branch -d'alias gcam='git commit -a -m'alias gcb='git checkout -b'alias gco='git checkout'alias gcp='g...
2019-12-18 10:02:33
594
原创 js Sleep函数 和 compression(请求压缩)
function sleep(interval) { return new Promise(resolve => { setTimeout(resolve, interval); })}async function test() { for (let index = 0; index < 10; index++) { console.log(index...
2019-07-29 15:53:28
434
转载 解决键盘弹出后挡表单的问题和懒加载
window.addEventListener('resize', function () {if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.getAttribute('contente...
2019-07-29 15:37:17
213
原创 一些不常用的css 却好用的css 属性积累
1、超过N行，显示... .good_title { word-break: break-all; //遇到英文单词允许拆分 overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clam...
2019-04-03 15:28:50
829
1
原创 微信内嵌H5 监听用户返回离开页面
使用场景：保存用户填写部分资料的时候，需要判断用户离开，提示是否保存操作 this.pushHistory(); window.addEventListener("popstate", function(e) { //do something console.log("我监听到页面离开了") }，false);...
2019-04-03 15:09:55
5240
原创 基于vue封装的icon拖拽组件
Drag.vue<style lang="less" scoped> .drag-wraper{ position:fixed; opacity: 0; display: block; z-index: 999; transform:translate(0px,0px) translateZ(0); }</style&...
2019-04-03 14:48:16
739
转载 MAC 配置快速启动APP（sublime vscode atom）
参考链接：https://www.cnblogs.com/hongrunhui/p/5928833.html1、在命令行输入 ls -al 找到 .zshrc 文件vim .zshrc 在文件末尾添加alias subl="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"a...
2019-03-27 15:37:10
485
转载 js-cookie的用法
原文链接：https://www.cnblogs.com/xuyan1/p/8421284.html引用方法:1.直接饮用cdn：<scriptsrc="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>2.本地下载下来后：<scriptsrc="/pat...
2019-03-27 13:59:44
192
原创 移动端图片上传，只能选取相册，不能选取其他文件夹
1、按照MRD文档要求限制了图片上传的格式 <input type="file" accept="image/jpg,image/jpeg,image/png" id="upload" style="display:none"/>实际上线后，发现只能选取相册的照片，不能选取其他相册2、解决方案 <input type="file" accept
2019-03-18 16:51:56
7396
原创 基于vue的移动端Icon图标拖拽（改变定位和使用transform）
功能介绍：1、icon拖拽位移 2、边界判断 （仅在可视区域滑动，防止Icon丢失）3、吸边处理（仅处理X轴方向）开发遇到的问题：1、ios 上拖拽时，body跟随滚动： 解决办法：在move的时候，阻止事件默认行为2、使用transform的时候，再次拖拽出现icon不跟随鼠标现象导致icon不可控 解决办法：transform的值基于DOM的起...
2018-12-11 11:23:29
5994
1
原创 基于react快速定位日期选择（昨日，今日，本周，本月）
效果图:组件的使用： import FastDate from 'common/MyDatePicker'; //导入组件<Row type="flex" align="middle"> <Col ><span>交易时间：</span> </Col> <Col spa
2018-12-11 10:52:11
3646
原创 基于vue的 H5背景音乐处理
<template> <div> <div @click="changeOn" :class="isOff?'isOff':'isOn'"> </div> <audio id="audio" :src="require('../assets/mp3/themass.mp3
2018-11-27 10:48:13
3710
2
原创 ant 表格自定义表头和表格筛选
1、ant 自动表格筛选组件 对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple用于指定多选和单选。 表头设置如下，实现了当前数据的筛选，如果需要查询接口进行数据筛选，而不是当前页的数据筛选，可以监听表格的onchange事件，在参数filters中，可以拿到变化的属性，进行数据的重新渲染。 ...
2018-11-09 15:58:56
13272
1
原创 基于react的颜色拾取器（react-color）
官方文档：http://casesandberg.github.io/react-color/#api-onChangeComplete组件的封装：let React = require('react');import { SketchPicker } from 'react-color';export default class ColorSelect extends React....
2018-11-02 09:36:59
15721
原创 3层map内嵌循环，接收不到返回值
如代码所示：必须写3个return，而非是在最里面写一个return。 Object.keys(publishSelectObj).map((key) => { let item = publishSelectObj[key]; return Object.keys(item)....
2018-10-24 09:46:07
680
1
原创 es6 对象深拷贝和浅拷贝
简介：在项目中，为了不影响原有数据，在操作数据时，经常需要深拷贝一个对象，在开发过程中，实践得出。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。const object1 = { a: 1, b: 2, c: 3};const object2 = Object.assign({c: 4, d: 5}, ...
2018-10-24 09:42:21
20664
6
原创 mint-ui 共用弹窗，内部滚动重置问题
问题描述： 在项目中，一个订单可能含有多个物流轨迹，查看包裹轨迹时，共用了popup组件，发现一个问题，弹窗内部滚动的位置无法重置，检查了css代码,没有什么特殊的，起初搞了一个临时方案，关闭的时候高度置为0，打开的时候重新赋值，总感觉不舒服。<mt-popup v-model="popupVisible" v-if="popupVisible" > ...
2018-09-28 10:18:34
1433
原创 基于vue的移动端图片上传
1、上传效果（含添加和删除设计图）： 达到上传上限，隐藏上传图标，删除后，数量小于上限会自动显示。2、html代码//使用前，要在JS中先把组件引入并挂载import updatefile from "../common/uploadfile";components: { updatefile },//使用<updatefile :multiple...
2018-09-27 10:34:42
9622
18
原创 vue根据路由设置页面是否需要登录判断
1、在main.js中初始化项目var Main = { init:function (){ this.initVue() this.initBeforeEach(); }, initSession :async function (){ let result = await Vue.prototype.$ajax.post('/getUserInfo'); if(!r...
2018-09-25 10:52:10
1232
原创 Vue利用keep-alive实现页面缓存
做列表缓存的时候，受益于@ vonvon_chris 这篇文章原文链接https://blog.csdn.net/akony/article/details/79203745实现了返回不刷新页面，当需要局部刷新的时候，使用activated的生命周期activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在 。 ...
2018-09-25 10:37:08
806
原创 微信内置开发 iOS修改键盘换行为搜索
在微信中搜索的时候， 我们通常使用keycode=13来判断客户是否点击了确定。在安卓上，唤醒搜索框为确认键没问题，而ios就不敢苟同了，ios显示为换行，对于客户使用体验非常不好。解决方案：html代码。 <form @submit.prevent action="#"> <input class="search_input" ref="...
2018-09-25 10:24:14
3483
转载 理解JS的节流、防抖及使用场景
文章来源： https://juejin.im/post/5b8de829f265da43623c4261 函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。//模拟一段ajax请求function ajax(content) { console.log('ajax request ' + content)}fun...
2018-09-05 09:55:46
3675
1
原创 iview-admin 日期时间段约束 及针对日期控件的处理。
1、直接上代码。 :value="form.regiestTimeStart" 用于数据的双向绑定 @on-change="timeFormatStar" 选择时间后，针对数据进行转换，用于数据提交 format="yyyy-MM-dd HH:mm:ss" 指定数据展示格式 :options="startTimeOptions" 设置规则（时间段） &...
2018-08-20 19:00:05
1584
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人