Vue
hh3167253066
勇敢牛牛,不怕困难
展开
-
CancelToken与interceptors实现请求取消
一. 碰到这样的业务场景:多次触发查询按钮时,取消其他查询请求,只保留最后一个。如果涉及到图表展示的,逻辑会稍需要一些处理,比如点击查询,显示loading,请求回来后,有数据则展示数据,无数据或者返回错误信息则显示未查到相关数据。二、vue项目的实现方式取消请求:if (this.cancelRequest){ this.cancelRequest() //取消前一个请求}let CancelToken = axios.CancelToken this.$axio原创 2022-04-03 13:35:45 · 1284 阅读 · 0 评论 -
单页面vue引入ant design
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/3.0.0-beta.12/antd.css" rel="stylesheet"></head><style> *{ marg原创 2022-03-16 18:57:48 · 2243 阅读 · 3 评论 -
去掉页面滚动条
::-webkit-scrollbar { display: none; }vue项目就直接在App.vue里加就行原创 2022-02-28 17:38:32 · 324 阅读 · 0 评论 -
vue2自定义指令directive
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 需求1:定义一个v-big指令,和v-te原创 2022-02-16 20:00:00 · 1387 阅读 · 0 评论 -
vue-lazyload 使用说明
基本使用方法main.jsimport Vue from 'vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)new Vue({ el: '#app', data: { imgs: [ 'http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp', 'http://covteam.u.qiniudn.com/t原创 2021-11-04 15:58:48 · 5957 阅读 · 0 评论 -
VUE页面中加载外部HTML
方法1,用iframevue页面<template> <button @click="invokeHtmlMethod">调用html种方法</button> <div class="iframestyleset"> <iframe name = "iframeMap" id="iframeMapViewComponent" v-bind:src="getPageUrl" width="1原创 2021-10-04 10:42:13 · 9557 阅读 · 0 评论 -
vue中touch和click共存的解决方式
touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生。touch事件和click事件发生先后顺序:touchstart,touchmove,touchend,click补充知识:touchstart与click同时触发我们可以给某个元素同时绑定 touchstart 和 click 事件,这两个事件在移动设备上会发生冲突。由于移动设备能够同时识别 t原创 2021-09-17 21:17:35 · 2242 阅读 · 0 评论 -
移动端布局之postcss-px-to-viewport(兼容vant)
在之前有一种流行已久的移动端适配方案,那就是rem,我想下面这两句代码,有不少老移动端都不会陌生: const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';在那个移动端UI稿尺寸为7501334满天飞的时代,这两句代码确实给开发者带来原创 2021-09-16 22:21:47 · 2063 阅读 · 2 评论 -
vue-判断设备是手机端还是pc端,进行两套页面样式的编写
经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。在 router/index.js 中有两个页面。export default new Router({ mode: 'history', routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首页 nam原创 2021-09-14 16:20:25 · 4267 阅读 · 7 评论 -
实现文件上传(express + multer)
1、routers 文件夹下新建 upload.js 文件const express = require('express');const router = express.Router();const multer = require('multer'); let upload = multer({ storage: multer.diskStorage({ destination: function (req, file, cb) { cb(nu转载 2021-09-07 20:18:07 · 1073 阅读 · 0 评论 -
router-view孙子组件调用爷爷组件里的方法以及传参
有个需求,孙子组件里有上传头像功能,在爷爷组件里用到了头像,所以想要孙子组件里上传完头像也能动态更新爷爷组件里的头像。在Vue里用了router-view路由占位1. 我的方法是先子组件上传头像成功后调用父组件里的方法userUgrzl子组件(Ugrzl)里:父组件(user)里定义userUgrzl方法,触发父组件与爷爷组件的homeUser方法爷爷组件里定义homeUser方法实现功能如果传参的话使用router-view时组件之间的传值...原创 2021-09-06 13:20:36 · 1765 阅读 · 0 评论 -
vue中使用element ui的input框做一个带模糊搜索的输入框
说不多说直接贴代码,在template里面: <el-autocomplete class="inline-input" v-model="disease" :fetch-suggestions="querySearch" placeholder="请输入疾病名称" :trigger-on-focus="false" //这个改为true就是激活即列出输入建议转载 2021-09-05 14:09:10 · 1543 阅读 · 0 评论 -
Vue 子组件与子组件之间传值
可以借用公共父元素。子组件A this.$emit(“eventName”, data) 触发事件,父组件监听事件,更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props(注意不是watch 子组件B自身data)<el-tab-pane label="组织信息" name="second"> <el-row :gutter="30"> <el-col :span="6"原创 2021-09-03 22:47:37 · 3621 阅读 · 0 评论 -
vue项目中监听sessionStorage值发生变化
首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEvent方法,当我在执行sessionStorage.setItem(k, val)这句话的时候,初始化事件,并派发事件。Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'watchStorage') {原创 2021-09-03 22:43:08 · 2696 阅读 · 0 评论 -
vue中使用markdown编辑器
1. 安装安装mavon-editor:npm install mavon-editor --save2. 引入、配置在要使用markdown编辑器的组件内操作:<script>// 导入组件 及 组件样式import { mavonEditor } from 'mavon-editor'import 'mavon-editor/dist/css/index.css'</script>components: { mavonEditor },3. 使用&l原创 2021-09-03 20:05:33 · 1028 阅读 · 0 评论 -
vue中主动失去焦点
原创 2021-09-03 13:35:20 · 1799 阅读 · 0 评论 -
简单说明下 $router 和 $route 的区别:
$router :是指整个路由实例,你可以操控整个路由,用法如下:this.$router.go(-1); // 向前或者向后跳转n个页面,n可为正整数或负整数this.$router.push('/'); // 跳转到指定url路径,history栈中会有记录,点击返回会跳转到上个页面this.$router.replace('/'); // 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面route:是指当前路由实例route:是指当前路由实例route:原创 2021-09-03 12:43:42 · 803 阅读 · 0 评论 -
vue子组件给父组件传值
子组件:<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { data () { return { //将msg传递给父组件转载 2021-09-03 12:07:13 · 804 阅读 · 0 评论 -
使用router-view时组件之间的传值
1.子组件给父组件传值父组件:<router-view @getShopCode='getShopCode'></router-view>methods:{ getShopCode(value){ conso.log(value); } }子组件:methods:{ goShopList(value){ this.$emit('getShopCode',value) this.$router.push(原创 2021-09-03 12:03:40 · 1834 阅读 · 0 评论 -
vue/no-side-effects-in-computed-properties
computed使用时报no-side-effects-in-computed-properties错误解决:不要在计算属性内直接修改data里面的数据,eslint会报 no-side-effects-in-computed-properties 错误,如果非要改可以写在一个函数里,然后在计算属性里调用该函数。...原创 2021-09-02 16:46:48 · 2375 阅读 · 0 评论 -
2021-08-22vue项目 报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465
在做vue项目时,突然就报sockjs.js?9be2:1606 GET http://192.168.43.226:8080/sockjs-node/info?t=1584966826465 net::ERR_CONNECTION_TIMED_OUT这个错误网上找到的原因说是:sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后,network会一直调用这个接口。如果没有使用,那么就一直会转载 2021-08-22 22:06:57 · 1596 阅读 · 1 评论 -
vue methods 方法中 方法 调用 另一个方法。
转载 2021-08-22 20:07:03 · 2802 阅读 · 0 评论 -
vue的跳转方式(打开新页面)及传参
转载 2021-08-22 13:48:55 · 852 阅读 · 0 评论 -
vue鼠标划过移入移出触发方法
<ul>> <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"></li></ul>methods:{ // 鼠标移入加入class changeActive($event){ $event.currentTarget.className="active"; }, removeActive($even原创 2021-08-21 15:03:15 · 2159 阅读 · 0 评论 -
Vue中currentTarget $event 的用法
<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.fi原创 2021-08-21 15:01:33 · 1915 阅读 · 0 评论 -
vue实时监听元素距离顶部高度的操作
原创 2021-08-20 15:03:30 · 1488 阅读 · 0 评论 -
vue中的method调用method,且解决调用后this指向问题
export default { data() { return { hello:"你好" } }, methods:{ open(that) { that.hello = "hello world!" }, close() { this.$options.methods.open(this) } }}close函数调用open函数,close函数里调用的open函数的参数this赋值给that,这样可原创 2021-08-13 11:43:14 · 1442 阅读 · 0 评论 -
Vue axios 中提交表单数据(含上传文件),以及接受服务器返回的数据
原始方法<!DOCTYPE html><html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form met转载 2021-08-08 11:08:40 · 2335 阅读 · 1 评论 -
element在Vue中的按需引入步骤
在vue项目的可视化面板中下载安装插件运行依赖开发依赖(按需导入要用)在项目里面创建plugins文件夹,里面建个element.js文件(用来按需引入element)在项目的main.js中引入在创建的element.js中按需引入需要的组件,并注册到vue中在babel.config.js配置文件里面引入使用的时候直接,即可 <el-button type="info">信息按钮</el-button>...原创 2021-07-31 09:26:46 · 939 阅读 · 0 评论 -
Can‘t resolve ‘element-ui/lib/button/style.css‘
没有引入button的CSS文件,可能是忘引入了原创 2021-07-31 09:11:34 · 1683 阅读 · 0 评论 -
vue中页面跳转方法
1:router-link<!-- 直接跳转 --><router-link to='/testDemo'> <button>点击跳转2</button></router-link> <!-- 带参数跳转 --><router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳转1</button></原创 2021-07-26 15:42:24 · 2269 阅读 · 1 评论 -
Unexpected tab character(no-tabs)
是因为检查代码规范的问题,可以在项目的.eslintrc.js文件的rules中加上"no-tabs":“off”原创 2021-06-09 23:28:28 · 2250 阅读 · 0 评论 -
TypeError: this.getOptions is not a function
Vue运行时报错: TypeError: this.getOptions is not a function发现是less-loader版本过高引起解决: cmd中cd到对应文件夹,再npm uninstall less-loadercnpm install [email protected]原创 2021-05-30 11:06:20 · 811 阅读 · 0 评论 -
phpstudy,在用MySQL管理导入sql文件,点击导入键没有响应,但是导出键能响应
黑马vue项目时,使用phpstudy,在用MySQL管理导入sql文件,点击导入键没有响应,但是导出键能响应解决:将sql文件拉到桌面,再重新选择路径原创 2021-05-28 21:28:22 · 1220 阅读 · 0 评论 -
vue ui 没反应
安装3.x版本的Vue脚手架(管理员cmd安装):cnpm install -g @vue/cli原创 2021-05-27 20:38:07 · 810 阅读 · 0 评论