vue
陈景夏
csdn平常用来记录代码,如有错误,诚邀指正。如有帮助到你,请点个赞嚯。
展开
-
input.focus()失效?vantui autofocus属性失效?
首先声明,input自动聚焦功能ios、safari不支持;原因在于,ios、safari想要聚焦input,必须将input.focus()触发事件写在点击事件内部,onClick、addEventlistener。如果你的页面自动聚焦在安卓or普通浏览器无法自动聚焦,检查该页面的input是否存在多个autofocus属性。温馨提示:弹窗也属于同一个页面下噢。接下来解释,安卓or普通浏览器自动聚焦功能无效?原创 2022-10-27 15:42:21 · 1690 阅读 · 1 评论 -
记录一次vue项目首屏优化
vue默认会自动开启资源预加载,这些资源预加载完是不执行的,在需要的时候才执行;以及预备下一个导航跳转使用;这个设置是将这个预加载关闭掉。原创 2022-07-22 11:01:04 · 399 阅读 · 0 评论 -
vue2 + elementui el-upload文件上传后回显及重新提交思路
vue2 + elementui el-upload文件上传后回显及重新提交思路原创 2022-07-14 11:15:39 · 4640 阅读 · 1 评论 -
vue2 + elementui 表单自定义校验
vue2 + elementui 表单自定义校验 文件上传校验原创 2022-07-14 10:58:25 · 442 阅读 · 0 评论 -
keep-alive记录滚动条位置
在做消息列表时需要记录keep-alive切换页面的滚动条位置。mounted() { // 监听滚动条的位置 this.$refs.scrollDom.addEventListener( 'scroll', (res) => { const height = res.target this.tableScrollTop = height.scrollTop原创 2022-04-22 15:14:12 · 940 阅读 · 0 评论 -
记录一次vue-router在beforeEach中addRoutes无效
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求原创 2022-04-08 09:31:27 · 2652 阅读 · 0 评论 -
记录一个数据格式化
现有一个列表,后端为了储存数据内存最小化,往往会传个标识回来。/* new => '新用户' old => '老用户' 0 => 进行中 1 => 审核中 2 => 已完成*/let list = [ { status: 'new', type: 0}, { status: 'old', type: 1}, { status: 'new', type: 2},]<div v-for="item,index in list" :key="inde原创 2022-04-01 17:52:38 · 376 阅读 · 0 评论 -
vuex解决刷新页面丢失数据
在app.vue中执行该方法// 储存vuex数据 storageVuexFun() { //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("storedata", JSON.stringify(this.$store.state)); }); // 兼容iphone原创 2022-02-20 16:01:14 · 416 阅读 · 0 评论 -
基于vue封装一个公用弹窗
<template> <!-- 公用弹窗封装 --> <div class="popupOuter"> <transition name="leave"> <div class="popup" v-if="show"></div> </transition> <transition name="bounce"> <div class="popupMai原创 2022-01-05 17:42:25 · 798 阅读 · 0 评论 -
常用工具包
// 封装公用方法let common = { // 判断电话号码格式是否正确 /** * 【数据卡】:14号段以前为上网卡专属号段,如中国联通的是145,中国移动的是147,中国电信的是149等等。 【虚拟运营商】:170[1700/1701/1702]、162(电信),1703/1705/1706、165(移动),1704/1707/1708/1709(联通)、171、167(联通) 【卫星通信】: 1740[0-5] (电信),1349(移.原创 2021-11-12 09:39:13 · 78 阅读 · 0 评论 -
记录一次h5上传身份证照片、上传人面像
<template> <div class="pageOuter"> <div class="Submit"> <div class="formModel"> <div class="item"> <div class="label">真实姓名</div> <div class="inptItem"> <原创 2021-10-15 15:25:11 · 1800 阅读 · 0 评论 -
Vue .sync修饰符与$emit(update:xxx)写法问题
在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下:使用.sync修饰符,即// this.$emit('update:father-num',100); //无效this.$emit('update:fatherNum',100); //有效//...... <father v-bind:father-num.sync="test"></father&g转载 2021-09-18 15:09:40 · 631 阅读 · 0 评论 -
记录一次基于axios项目request请求封装
import axios from 'axios'import Vue from 'vue'import router from '../router'import { Dialog} from 'vant'Vue.use(Dialog)// 正在进行中的请求列表let reqList = []/** * 阻止重复请求 * @param {array} reqList - 请求缓存列表 * @param {string} url - 当前请求地址 * @param {f原创 2021-09-07 11:36:19 · 164 阅读 · 0 评论 -
前端js保存页面为图片下载到本地
手机端点击下载按钮将页面保存成图片到本地前端js保存页面为图片下载到本地的坑html2canvas 识别 svg 解决方案方案html2canvas.js:可将 htmldom 转为 canvas 元素。canvasAPI:toDataUrl() 可将 canvas 转为 base64 格式替换 html 为 img,src为 base64vue代码片段手机端将页面保存为图片(即页面展现的内容实际是图片),长按后可保存到本地import html2canvas from 'html2can原创 2020-10-27 11:21:32 · 2149 阅读 · 0 评论 -
vue filters和directives访问this的问题
记录一次奇葩的笔试题。要求自定义一个指令,点击后能跳转指定路由。directives和filters压根就没法访问this。脑袋都想破了。不废话了,上代码。<template> <div> <div v-join="(divData, that)">tag标签</div> <p>{{divData}}</p> <p>{{divData | sum(that)}原创 2020-08-07 11:32:08 · 3094 阅读 · 3 评论 -
vuex刷新后数据丢失解决方案
created () { var store = require('store'); //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("storedata") ) {`在这里插入代码片` this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("storedata")原创 2020-08-03 17:00:40 · 369 阅读 · 0 评论 -
记录一次vue打包优化方案
完整的vue.config.jsconst path = require('path')// 在vue-config.js 中加入// 开启gzip压缩const CompressionWebpackPlugin = require('compression-webpack-plugin');// 判断开发环境const isProduction = process.env.NODE_ENV === 'production';const resolve = dir => { re原创 2020-08-01 11:50:59 · 723 阅读 · 0 评论 -
watch深度监听
data(){ return { student: { name: '张三', age: 18, id: 01 } } }, watch: { student: { deep: true, handler(newVal, oldVal){ console....原创 2020-04-14 13:43:03 · 236 阅读 · 0 评论