![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
翘翘红
回头看,轻舟已过万重山。
展开
-
uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化
背景:使用uniapp框架在做h5项目时,领导要求预览图片时不能一次性加载完所有的图片,需要看一张加载一张,这样用户不费流量,优化h5的性能。首先uniapp官网实现图片预览使用的是uni.preview api,但是这样传的urls数组,在点击图片进行预览时一次性加载了所有的图片。所以要实现图片预览,点击一张加载这张图片需要自已写预览组件。这里用到的是swiper组件来进行预览功能。1、新建公共组件 previewImage.vue<template> <view clas原创 2022-03-04 10:24:34 · 2339 阅读 · 0 评论 -
Vue定义全局变量、全局方法,在.vue文件和.js文件里使用
背景:在.vue后缀名的文件,和.js后缀名的文件里,使用全局变量的语法是不一样的。.vue模板文件可以直接访问挂载在Vue实例上的全局对象,而普通的.js文件访问不到。1、 定义全局变量 const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境 const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境 export default { sso原创 2022-01-26 15:42:04 · 10053 阅读 · 5 评论 -
自定义指令实现 防抖v-debounce/加载中v-loading/吸顶v-sticky/波纹v-wave/权限v-permission/拖拽v-draggable
转载链接转载 2021-10-20 16:00:40 · 333 阅读 · 0 评论 -
van-list van-tabs上拉加载分页列表
<van-tabs v-model="active" sticky @click="changeAct"> <van-tab v-for="(item,ind) in navtitle" :title="item" :key="ind"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :fi转载 2021-08-31 10:02:04 · 1609 阅读 · 0 评论 -
vue多选 取消多选
<!-- 选择分类 --> <div class="cell-item"> <div class="item-label">选择分类</div> <div class="item-value" @click="showLabel"> <div class="value"> .原创 2021-08-24 17:23:12 · 418 阅读 · 0 评论 -
适合vue/原生js+jq的项目解决rem适配移动端,以及在浏览器打开的尺寸和移动端一样的处理方式,亲测有效且准确
1、在入口文件index.html下引入适配js //适配兼容 (function (n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize",原创 2021-08-19 10:15:06 · 411 阅读 · 0 评论 -
[Vue warn]: Error in mounted hook: “TypeError: handler.call is not a function“ 解决
出现这个报错是你组件里面定义了空的钩子函数,没有在里面写代码,把这个空的钩子函数删掉就可以原创 2021-08-13 17:00:38 · 2405 阅读 · 0 评论 -
gitlab解决 Please make sure you have the correct access rights and the repository exists
1、在项目目录打开cmd输入回车git config --global user.name "yourname"再输入回车git config --global user.email "your@email.com"2、删除.ssh文件夹下的known_hosts(手动删除)3、在cmd中输入回车ssh-keygen -t rsa -C "your@email.com"4、打开c盘下/user/.ssh,用记事本打开id_rsa.pub,复制全部5、再打开gitlab,粘贴到ssh转载 2021-07-26 14:59:15 · 2743 阅读 · 0 评论 -
vue axios 请求头类型
谈谈axios配置请求头content-type转载 2021-07-20 15:36:50 · 424 阅读 · 0 评论 -
基于Vue的移动端h5页面的电子签名
1、移动端h5页面效果图2、上代码<template> <div> <div ref="canvasBox" id="canvasBox"> <canvas id="canvas" ref="canvas"></canvas> </div> <div class="row row-space-between"> &l转载 2021-07-16 16:41:37 · 1120 阅读 · 0 评论 -
Unknowncustomelementdid you register the component correctly?make sure to provide the “name“ option.
问题描述:正确的import引入,注册了组件,并在页面使用,一直找不到错误最后才发现是多写了一个components:{},在组件里写了两个components,当然会报错,最后删掉了一个components就好了,不细心导致浪费了很多时间,只要有“name” option 多半是钩子函数名字写错了/写了两个一样的函数...原创 2021-07-16 14:55:32 · 155 阅读 · 0 评论 -
vue-router模块化管理
背景:项目非常大的时候路由非常多,路由模块化就易于阅读以及管理1、目录结构2、在main.js中注入routerimport router from "./router";//引入路由出口文件new Vue({ router,//挂载路由实例 store, render: h => h(App)}).$mount("#app");3、router/index.jsimport Vue from 'vue';import Router from 'vue-ro原创 2021-07-15 17:53:00 · 684 阅读 · 0 评论 -
vue vant dialog 弹出框中的input输入框自动获取焦点的问题
1、背景:点击设置金额弹出设置金额的弹出框,要求里面input自动获取焦点2、使用input的自带的autofocus="autofocus"只能在第一次调起弹窗的时候自动获取焦点,不刷新页面再次调起弹窗都不会再获取焦点了3、解决方案:给input autofocus="autofocus"以及一个ref属性,并在nextTick函数回调里面去调用focus()方法,必须在 this.$nextTick(function () {});函数回调里面调用,不然会报错,因为dom没获取到。4、至此,每次弹原创 2021-07-15 15:11:10 · 6424 阅读 · 2 评论 -
vue 父子组件具名插槽的使用
使用场景:项目中有很多地方需要调用一个组件,比如弹窗,但是内容又不固定,有个可能弹出是表格,有的可能弹出是照片,这个决定于需要调用这个子组件的父组件,这种情况下就可以在子组件(这个弹窗中)使用slot,占坑,slot的HTML元素和内容,完全取决于使用他的父组件给他传了啥。1、子组件以name属性区分<van-dialog> <slot name="default"></slot></van-dialog>2、父组件中以template标签原创 2021-07-14 16:19:33 · 716 阅读 · 0 评论 -
vue公共弹窗组件解决报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten wheneve
1、公共dialog子组件<template> <van-dialog v-model="show" :title="title" :width="width" :message="message" :show-cancel-button="showCancelButton" :cancel-button-text="cancelButtonText" :confirm原创 2021-07-13 15:47:59 · 487 阅读 · 0 评论 -
vue------router嵌套路由书写方式
VueRouter:构造函数,通过它实例化路由模块对象routes:添加路由配置router:注入路由router-view:路由所映射组件的展示区域router-link:路由超链接$route:获取路由参数,它是一个对象$router:实现路由跳转,以代码的方式来实现一、npm安装npm install vue-router二、在src中创建router文件夹,文件名为index.js//当前项目的路由模块//如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地.原创 2021-07-12 15:28:30 · 509 阅读 · 0 评论 -
成都国企前端基础面试题2021/7/7
前言:作者是内推面试,所以问的比较水,简单的基础问题,但也不可忽视,从基础看你的技术,这是国企面试的通病,不会问些难的问题。所以简单的总结一下成都橙视传媒(系成都市广播电视台新媒体子公司)面试的流程和问题。一、智联招聘投简历笔者是内推,所以很快就收到hr电话约面试,提前半小时到面试地点,然后填一份基础信息的表格,然后四个人面(Hr,,技术总监,前端负责人,后端负责人),hr问的是为什么想离开这家公司,选择公司看中的是什么,基础信息表填的是吃苦耐劳,从哪些方面体现,如果录用到岗时间。技术总监主要是针对简历原创 2021-07-12 15:18:12 · 1470 阅读 · 0 评论 -
vue this.$emit(事件,值),值为字符串/对象,父组件接收的方式各有不同
1,字符串//子组件this.$emit("wxcSearchbarInputOnInput", this.value );//父组件@wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"wxcSearchbarInputOnInput(value) { console.log(value);},2,对象//子组件this.$emit("wxcSearchbarInputOnInput", { value: this.value });原创 2021-06-29 14:22:21 · 1071 阅读 · 0 评论 -
vue项目不能用包含switch单词的做组件名字
应用场景:需要在vue项目中新建一个版本切换的页面,根据中文名翻译过来叫versionSwitch,所以建了一个versionSwitch.vue,发现一直报错,修改了名字为vesionChange.vue就没有报错了,搜索了一下,发现组件不能用switch,包含switchye来命名也不行。...原创 2021-06-17 17:45:32 · 144 阅读 · 0 评论 -
vue项目npm run dev启起来之后network显示unavailable的解决办法
根据网上的说的网络适配器的原因,去禁用了多余的网络,发现还是没有用,后面发现是环境变量的问题的。1,Windows10—>打开编辑系统环境变量控制面板2,去编辑-添加-C:\windows\System32\Wbem环境变量-确定3,配完环境变量再重启vscode,再重新运行项目,发现network有了ip+port。tips:去百度了一下:WBEM是管理协议和网络标准技术的一项业界倡议,这个程序对你系统的正常运行是非常重要的,不能删,删了就会导致系统网络的一些问题,其中就有上面的netw原创 2021-06-08 16:05:46 · 4766 阅读 · 8 评论 -
vue axios封装,以及vue.config.js配置前端代理
1,在src/utils/axios.js 新建文件,放公共请求方法import axios from 'axios'import { Toast} from 'vant'let loading = null;// // 请求加载效果function startLoading() { loading = Toast.loading({ forbidClick: true, className: "custom-toast", lo原创 2021-05-31 11:27:15 · 1088 阅读 · 0 评论