vue
saturday-yh
Object.create(null)
展开
-
vue npm ERR! ERESOLVE unable to resolve dependency tree依赖包之报错
npm ERR! ERESOLVE unable to resolve dependency tree原创 2022-12-10 19:14:21 · 470 阅读 · 1 评论 -
Vue 运行报错error:0308010C:digital envelope routines::unsupported
Vue 运行报错error:0308010C:digital envelope routines::unsupported原创 2022-12-10 19:03:46 · 350 阅读 · 0 评论 -
Elementui输入框(text)与文本域(textarea)字体不一样
.el-textarea__inner{ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}原创 2022-04-26 17:35:49 · 867 阅读 · 0 评论 -
vue2 SASS 定义全局变量
cnpm install -D sass-loader node-sass stylus-resources-loader在vue.config.js中pluginOptions: { 'style-resources-loader': { 'preProcessor': 'scss', 'patterns': [ // 文件路径根据实际情况编写 path.resolve(__dirname, '@/assets/css/*.sc.原创 2022-03-28 13:45:52 · 892 阅读 · 0 评论 -
vue history 模式 刷新404 问题
1. src和href的区别src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在页面底部。 href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。 常用在a、link等标签上。2. 对HTML语义化的理解语义化是指根据内容的结构化,选择合适的标签。语义化的优点如下:原创 2022-03-25 11:03:03 · 4765 阅读 · 0 评论 -
vue Uncaught (in promise) Error: Navigation cancelled from “/home“ to “/login“ with a new navigation
1、初始化进入项目 ,登录过期重定向到登录页面,路由报错import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//解决编程式路由往同一地址跳转时会报错的情况const originalPush = VueRouter.prototype.push;const originalReplace = VueRouter.prototype.replace;//pushVueRouter.prototy原创 2021-08-19 15:00:58 · 2165 阅读 · 0 评论 -
vue 使用fastclick 后 点击表单不获取焦点的,控制报错[Intervention] Unable to preventDefault inside passive event liste
安装好fastclick后,在mai.js中import FastClick from 'fastclick'FastClick.attach(document.body)这样在在点击表单时,就获取不到焦点,双击可以获取焦点,但是控制台后报错暴力解决办法:最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为. 手动清除默认行为document.addEventListener('touchmove', function (event.原创 2021-07-29 15:58:36 · 507 阅读 · 0 评论 -
vue 引用Moment.js
1.下载npm install moment --save2.main.js 挂载 引入import moment from 'moment'//导入文件Vue.prototype.$moment = moment;//赋值使用3.组件中使用凡是用的prototype 使用都要this.继承<template> <div style="padding:30px;"> <div>格式化时间</div> {{ this.$mom原创 2021-07-28 17:33:15 · 1608 阅读 · 0 评论 -
vue element 弹框打开滚条回到顶部
<el-dialog:visible.sync="infoDialog":close-on-click-modal="false":close-on-press-escape="false"top="2vh"width="720px"class="infoDialog-box"><divslot="...原创 2020-12-29 15:17:01 · 2111 阅读 · 0 评论 -
vue element上传图片——vueCropper裁剪图片(封装vueCropper组件)
npm ivue-cropper -S<el-form-item label="医院头像:"> <el-upload class="avatar-uploader" accept=".jpg,.jpeg,.png" :action='""' :show-file-list="false" :aut.原创 2020-11-16 16:37:55 · 654 阅读 · 0 评论 -
vue element上传图片——vueCropper裁剪图片(未封装vueCropper)
直接上代码npm ivue-cropper -S<el-form-item label="医院头像:"> <el-upload class="avatar-uploader" accept=".jpg,.jpeg,.png" :action='""' :show-file-list="false" .原创 2020-11-16 16:31:59 · 287 阅读 · 0 评论 -
elementUI 表单验证 在trigger blur change 下无法触发验证的情况,怎么自定义事件触发
这个是我在用VueTreeselect树形下拉框中遇到的表单验证问题,在我的博客中https://blog.csdn.net/qq_42092177/article/details/109224217,可以看VueTreeselect的使用在VueTreeselect中表单验证中trigger和blur 都无法触发验证,后来通过VueTreeselect中有select回调事件,进行在里面触发 element表单方法this.$refs['officeTree'].clearValidate()单...原创 2020-11-06 10:55:55 · 6740 阅读 · 1 评论 -
vue 解决vuex页面刷新数据消失的问题(好用)
这个控件实际也是在用sessionStorage或localStorage,只是自己不用再往sessionStorage或localStorage存储,控件默认存储到sessionStorage或localStorage首先 npm install vuex-persistedstate --saveimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import createPersistedState from "vuex原创 2020-11-05 16:41:37 · 728 阅读 · 0 评论 -
vue 树形下拉选框
npm i wl-vue-select -S<TreeSelect :disabled="isReadonly" :searchable="false" style="width:220px" v-model="editForm.office" :options="optio原创 2020-10-22 16:03:38 · 1102 阅读 · 0 评论 -
vue 打开新窗口,并传值
直接上代码openPage (e) { toUrl = this.$router.resolve({ path: '/imageView', query: { id: "1" } }) window.open(toUrl.href, '_blank', `height=${h},width=${w},toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`)原创 2020-10-13 09:40:52 · 2118 阅读 · 0 评论 -
vue element (sass)css 都可以,组件内修改样式,不影响全局
参考很多博客文章,大多数是cv,没有实质效果错误的就不贴出来了,太坑人了<el-input v-model="account.username" class="input-line" placeholder="请输入" @keyup.enter.native="submitForm('form-box')"></el-input><style scoped原创 2020-09-29 09:58:57 · 1546 阅读 · 2 评论 -
vue 实现手写电子签名-vue-esign
npm install vue-esign --save在main.js中Vue.use(vueEsign)<vue-esign ref="esign" style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth=...原创 2020-06-01 16:01:13 · 11625 阅读 · 2 评论 -
vant 上传图片加水印,并处理ios上传图片旋转问题
首先npm i exif-js -S组件中引入importEXIFfrom'exif-js'<van-uploader v-model="fileList" :after-read="afterRead" :max-count="parseInt(1)" :capture="String('camera')"> ...原创 2020-05-26 15:21:30 · 1673 阅读 · 0 评论 -
vue debugger 定位不准确 解决
添加下面代码module.exports = { configureWebpack: { // webpack 配置 devtool: 'source-map', } }原创 2020-05-13 15:47:16 · 6747 阅读 · 0 评论 -
scrollBehavior 把A页面把页面拖到下面的时候,跳转路由后,B页面也在A页面的位置
把A页面把页面拖到下面的时候,跳转路由后,B页面也在A页面的位置,在router.js下加//每次跳转路由页面初始到最顶部关键代码: scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }...原创 2020-05-13 13:53:35 · 202 阅读 · 0 评论 -
vue/react打包项目生成dist/build文件后,怎么测试 当前打包版本
npm install -g serve(全局安装)serve -s dist(运行打包后的文件)手机输入IP端口直接也可以测试原创 2020-04-15 14:59:32 · 2349 阅读 · 0 评论 -
vue——vuex 模块化的基本使用(1)
直接上代码,这是一个vux的demo,具体有mapState,mapGetters,mapMutations,mapActions的使用,namespaced命名空间的使用,在大型项目中使用,使用命名空间后,在页面绑定值的时候需要注意:比如这里:具体项目代码:https://github.com/saturday-yh/vue2.x-admin-vuex...原创 2020-03-19 10:57:41 · 542 阅读 · 0 评论 -
axios的简单封装
fetch (url, method = 'get', params = {}) { params.access_token = getCookie('access_token'); if (method === 'post') { params = qs.stringify(params); } return new Promise((resolve...原创 2020-03-18 11:32:12 · 143 阅读 · 0 评论 -
vue-router的beforeEach全局守卫
//使用钩子函数对路由进行权限跳转router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_username'); if(!role && to.path !== '/login') { next("/login") } else if...原创 2020-03-12 11:37:44 · 1417 阅读 · 0 评论 -
导航守卫 router.beforeEach
router.beforeEach((to, from, next) => { //NProgress.start(); console.log(to) if (to.path == '/login') { sessionStorage.removeItem('user'); } let user = JSON.parse(sessionStorage.getI...原创 2020-03-07 17:02:08 · 195 阅读 · 0 评论 -
vue 拦截器封装
这里用的elementUIimport axios from 'axios';import qs from 'qs';import { Message } from 'element-ui';import router from 'vue-router';import {baseURL} from "./fetch"axios.defaults.timeout = 30000;...原创 2020-03-06 22:29:46 · 1249 阅读 · 2 评论 -
vuex学习
安装:npm install vuex --save看到这个界面说明项目启动成功,然后我们在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,最后使用export default导出store:然后我们在main.js文件中引入该文件,在文件里...原创 2020-01-07 16:00:33 · 137 阅读 · 0 评论 -
防抖和节流
1、创建一个静态js文件utils.js2、在组件中引入<template> <div> <el-input placeholder="输入关键字进行过滤" @input="inputChange" v-model="filterText"> </el-input&...原创 2020-01-06 15:10:17 · 620 阅读 · 0 评论 -
在vue.js中导出Excel表格 几种方法(实测有用)
npm install -S file-saver xlsxnpm install -D script-loader下载Blob.js和Export2Excel.js,在src目录下新建vendor文件夹,里面放入Blob.js和Export2Excel.js两个JS文件这个两个js文件https://download.csdn.net/download/qq_4209...原创 2019-11-25 17:48:13 · 1891 阅读 · 1 评论 -
html导出PDF 使用html2canvas和jspdf插件实现
npm install html2canvas jspdf --save在项目工具方法存放文件夹utils中创建htmlToPdf.js文件,代码如下: vuecli3z中放在public下// 导出页面为PDF格式import html2Canvas from 'html2canvas';import JsPDF from 'jspdf';export default { ...原创 2019-11-25 14:17:03 · 869 阅读 · 0 评论 -
vue中引入——富文本编辑器
首先链接https://github.com/HaoChuan9421/vue-ueditor-wrapnpm i vue-ueditor-wrap -Smain.jsimportVueUeditorWrapfrom"vue-ueditor-wrap";Vue.component("vue-ueditor-wrap",VueUeditorWrap);...原创 2019-11-25 14:07:34 · 366 阅读 · 0 评论 -
vue input上传图片——裁剪图片
安装npm install vue-cropper全局引入:import VueCropper from 'vue-cropper'Vue.use(VueCropper)下面为单组件引入:<template> <el-form> <el-form-item label="培训图片"> ...原创 2019-11-25 13:24:12 · 1309 阅读 · 0 评论 -
vue 使用地图-AMap
npm install -S vue-amapnpm i element-ui -Smain.js 引入import "element-ui/lib/theme-chalk/index.css";import ElementUI from "element-ui";import VueAMap from "vue-amap"; // 引入vue-amapVue.use(Ele...原创 2019-11-25 13:05:07 · 1232 阅读 · 0 评论 -
vue 中引入elemntUI
npm i element-ui -S在main.js中import ElementUI from 'element-ui' //element-ui的全部组件import 'element-ui/lib/theme-chalk/index.css'//element-ui的cssVue.use(ElementUI) //使用elementUI...原创 2019-11-21 20:29:42 · 227 阅读 · 0 评论 -
vue 和 react 区别
react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。1.数据是不是可变的react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldCompo...原创 2019-11-10 13:33:37 · 185 阅读 · 0 评论 -
vue-cli项目中——跨域之proxyTable——在开发和生产环境的不同配置
一、问题背景利用proxyTable配置之后,编译后生产环境部署失败二、解决过程解决跨域问题又多种方法,网上又很多资料我就不再一 一列举了,直接上proxyTable的配置,我的项目是基于vue-cli脚手架搭建的,找到config/index.js中关于开发环境的配置,增加对proxyTable属性的配置,如下图所示:利用axios发送请求的url都要在前加/api...原创 2019-11-07 15:56:11 · 3859 阅读 · 0 评论 -
vue 引入sass
npm install sass-loader@7.3.1 --save-devnpm install node-sass --savenpm install style-loader --save如果直接 npm install sass-loader --save-dev 会报错Module build failed: TypeError: this.getResolve...原创 2019-10-26 15:21:12 · 174 阅读 · 1 评论 -
vue.js开发devtools的安装方法
1、安装 去gitHub上clone项目,地址 https://github.com/vuejs/vue-devtools 下载好后进入vue-devtools-master工程 执行npm install —–>npm run build. 修改manifest.json 中的persistent为true。shells>chrome>manifes...原创 2018-08-31 17:45:49 · 244 阅读 · 0 评论 -
【求解】vue input radio 点击事件取值问题
<template> <div id="app"> <div class="taskList" @click="handle"> <input type="radio" name="task" value="1" v-model='selectStatus原创 2018-07-06 11:17:23 · 24002 阅读 · 4 评论