前端
前端开发
Hy
手忙脚乱的前端
展开
-
macOS系统搭建前端开发环境
安装node原创 2022-07-18 14:48:20 · 240 阅读 · 1 评论 -
vue+axios 实现30分钟不操作清除登录状态返回登录页
首先需要后端配合将token过期时间设置为30分钟将登录获取的token和时间存在缓存中this.$localData('set', 'tokenData', { token: res.data.token, //登录成功后返回的token tokenTime: Date.parse(new Date()) / 1000 //获取token的时间})axios request拦截器中let $http = axios.create({ timeout: 10000 }) //原创 2021-03-24 14:10:04 · 586 阅读 · 0 评论 -
微信小程序踩过的坑,总结的知识点,记录汇总(持续更新)
1.背景图片不能用本地图片(只能使用合法域名内的网络图片或base64图片)。2.2019年7月更新后,进入小程序不能自动调起授权弹窗,必须有一步操作(点击button)。3.不需要分享的页面一定要把onShareAppMessage函数注释掉或者删掉。4.wx:for的列表在数据有可能发生顺序变化的时候一定要加key,如果确定是静态列表数据不会更改,可以不加。5.on开头的API是监听函数,Sync结尾的API是同步函数,其余的大部分都是异步API。6.样式尺寸单位不要用px。7.平时开发可以原创 2020-06-04 15:47:01 · 385 阅读 · 0 评论 -
部分ECMAScript 2020(ES2020)的新特性
总结一些自己会用到的ES2020新特性摘自:https://alligator.io/js/es2020/1.合并空运算符:由于JavaScript是动态类型的,因此在分配变量时,您需要牢记JavaScript对真实/错误值的处理。如果我们有一个带有某些值的对象,有时我们希望允许使用在技术上是虚假的值,例如空字符串或数字0。设置默认值很快会变得令人讨厌,因为默认值将覆盖应为有效值的值。let person = { profile: { name: "", age: 0 }}原创 2020-05-27 14:50:59 · 433 阅读 · 0 评论 -
vue watch监听多个值
有时我们需要监听多个值而执行同一个方法,如果分开监听,该方法会被执行多次,用以下方法监听多个值就可以解决该问题。computed: { watchObj () { let { id, selectTime } = this return { id, selectTime } }},watch: { watchObj:{ ha...原创 2020-03-12 09:33:23 · 3696 阅读 · 2 评论 -
vue项目中使用prototype原型拓展
背景:需要在vue项目中使用原型拓展方法比如:/* 对日期进行格式化输出 */Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.ge...原创 2019-12-20 11:10:21 · 1059 阅读 · 0 评论 -
前端笔记本(持续更新)
div触发blur事件:div加tabindex属性原创 2019-12-02 11:37:50 · 338 阅读 · 0 评论 -
vue单页面应用设置标题
使用vue-router:import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)const router = new Router({ routes: [ { path: '/', ...原创 2019-08-07 11:26:04 · 179 阅读 · 0 评论 -
前端项目打包成.exe桌面应用初体验
使用electrongithub地址:https://github.com/electron/electron-quick-startgit clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm install npm start配置文件main.js中的入口地址 :main...原创 2019-08-05 13:33:56 · 972 阅读 · 0 评论 -
setTimeout中的参数使用
setTimeout(fn,time,param1,param2,...)fn:(必传)需要执行的函数time:(非必传)传值时:倒计时time毫秒后执行fn不传时:默认为0,fn在最早可得的空闲时间执行,在"任务队列"的尾部执行fn,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。param:(非必传)fn函数的参数...原创 2019-04-28 11:31:02 · 1422 阅读 · 0 评论 -
vue 使用基于element-ui的el-tree-transfer插件,实现树形穿梭框省市区选择
最终实现效果:这里使用到的插件:https://github.com/hql7/tree-transfer原创 2019-04-15 14:59:17 · 24565 阅读 · 23 评论 -
小程序app.js中onHide的触发条件
1原创 2019-03-04 15:49:04 · 6743 阅读 · 2 评论 -
微信小程序:解决ios部分机型软键盘弹起挡住输入框的问题
这个问题是因为input在获取焦点时e.detail.height获取的键盘高度不准导致的。经过测试发现是ios独有的问题,并且只在iphone6 6s 7 8 这种屏幕尺寸为667*375的手机中会出现,并且非必现。通过小程序开调试看打印发现,当键盘挡住输入框时,获取的键盘高度为216px,正常时键盘高度为258px,相差了42px。解决方法:<input bindfocus="i...原创 2019-03-04 10:59:41 · 6772 阅读 · 2 评论 -
微信小程序页面上拉触底,子组件加载更多
微信小程序页面注册中提供了:onReachBottom()监听用户上拉触底事件。同时:在Component构造器中提供了selectComponent()选择器所以:在在页面中js这样写:/** * 页面上拉触底事件的处理函数 * #groupTemplate 组件id * getTopGroup() 组件methods */onReachBottom: funct...原创 2018-12-03 09:45:08 · 4406 阅读 · 0 评论 -
微信小程序自定义弹窗
<modal title='提示' wx:if="{{isShowModal}}" bindcancel='cancel' bindconfirm='sure' confirm-text="去查看" cancel-text="知道了"> <view style='text-align: center;'> 您有<text style='...原创 2018-12-19 15:55:45 · 189 阅读 · 0 评论 -
vue实现后台实时编辑预览页面,小程序端展示
这个功能是在后台编辑小程序页面,然后在小程序端展示出来。左侧预览,右侧编辑,下方点击可以添加对应组件。目前只做了2个组件,图片广告和富文本,以后根据需求会慢慢添加。(图片广告为轮播图)图片广告组件:富文本组件:整体功能的思路是这样的:新建与编辑是同一个页面,进入页面时请求后端提供的接口拿到数据库中的数据,并展示出来,点击发布按钮请求后端接口把数据保存到数据库中。json数据格式:...原创 2018-12-20 09:47:18 · 11372 阅读 · 4 评论 -
vue2.0 axios拦截操作
/* 请求拦截器 */axios.interceptors.request.use(function (config) { let token = sessionStorage.getItem('token') if (token) { config.headers.common['token'] = token //每次请求在headers中传入token } ret...原创 2018-12-20 09:51:30 · 220 阅读 · 0 评论 -
vue 登录 + 记住密码 + 密码加密解密
最近需要做一个商家后台系统,有空了就记录一下。首先是登录功能<template> <el-form :model="ruleForm"> <h3 class="title">系统登录</h3> <el-form-item prop="mobile"> <el-i原创 2018-12-10 20:15:50 · 8656 阅读 · 0 评论 -
vue2.0使用vuedraggable实现组件拖动排序
之前做了小程序页面编辑器,现在需要实现左侧预览组件可以拖动排序,如下图:插件文档:Vue.Draggable安装:npm i vuedraggable -S代码:<template> <draggable v-model="list" @update="dragEnd"> <div v-for="(item,index) in list">..原创 2019-01-24 15:18:59 · 3477 阅读 · 1 评论 -
webpack中使用proxyTable代理实现跨域
前后端分离开发调用接口时,使用proxyTable原创 2019-01-27 16:35:15 · 523 阅读 · 0 评论 -
小程序分享出来的页面头部带返回按钮
1原创 2019-01-27 17:14:44 · 2783 阅读 · 0 评论 -
解决微信小程序自定义头部后,软键盘弹起时页面整体上移
1原创 2019-01-27 17:33:34 · 13705 阅读 · 6 评论 -
微信小程序实现长按复制
<view bindlongtap='copy' data-message='你要复制的内容'></view>copy(e){ console.log(e,'长按复制') var text = e.currentTarget.dataset.message wx.setClipboardData({ data: text, ...原创 2019-03-08 14:54:43 · 2152 阅读 · 0 评论 -
vue页面父组件滚动触底,子组件触发事件
vue页面父组件滚动触底,子组件加载更多父组件中监听滚动:methods : { watchScroll : function () {} { let that = this let clientHeight = document.documentElement.clientHeight || document.body.clientHegiht; //页面高度 let divO...原创 2018-11-24 17:55:50 · 1707 阅读 · 0 评论