vue
Markov Zheng
认真填坑
展开
-
Vue + html2canvas截图时 不能使用跨域图片或图片不展示
Vue + html2canvas截图时 不能使用跨域图片的解决方案需要修改三个地方:1、修改源码 node_modules/html2canvas/dist/html2canvas.js5710行和5714行 case 2:this.context.logger.debug("Added image " + key.substring(0, 256));return [4 /*yield*/, new Promise(function (resolve, reject) { var img原创 2022-01-12 17:24:21 · 1393 阅读 · 0 评论 -
vue-cli@4.5下使用axios 结合typescript
vue3.0没有全局的vue对象 需要使用app.config.globalProperties 去扩展全局方法然后createApp(App).use(axios) 使用use的用法参数: {Object | Function} plugin ...options (可选)用法:安装 Vue.js 插件。如果插件是一个对象,它必须暴露一个 install 方法。如果它本身是一个函数,它将被视为安装方法。该安装方法将以应用实例作为第一个参数被调用。传给 use 的其他 options原创 2020-12-03 10:38:15 · 1959 阅读 · 4 评论 -
vue3.0+ts+element-plus项目初体验
vue3.0+ts+element-plus+axios项目初体验项目基于vue-cli@4.5下开发的,vue-cli4.5和之前的3.0以下的老版本不一样,安装命令也有所不同。首先得全局安装clinpm install -g @vue/cli //全局安装vue-cli最新版本第二步:实例化项目vue create mypro // 创建项目,mypro项目名,项目名中不允许出现大写字母要使用3.0 选择 >Default (Vue 3 Preview) ([Vue原创 2020-12-03 10:04:04 · 16833 阅读 · 5 评论 -
Vue进阶之路之$set的理解
$set 的深入理解众所周知,Vue 双向数据绑定的原理是通过遍历data属性,利用Object.definePrototype将其转化成setter/getter,但是由于现代js的限制以及object.observe的限制,vue无法检测到对象属性的添加或删除。具体场景如下<template> <ul> <li v-for='(item,key) in ...原创 2019-05-21 16:11:38 · 8368 阅读 · 2 评论 -
Vue2.0直接绑定键盘事件失效
Vue2.0直接绑定键盘事件失效很多刚开始使用v-on或者@的键盘事件时,经常会碰到明明添加了@keyup.按键名/值,却没有起作用,其实不是没有起作用,而是元素没有获取焦点导致的。可以尝试把 keyup 事件绑定在 document 上面。var lett = this; document.onkeydown = function (e) { var key =...原创 2019-05-31 17:27:46 · 1065 阅读 · 0 评论 -
vue组件重载
Vue的组建重载项目开发中遇到需要重载组件的需求,根据我自己的理解有3种方法一、重新加载路由相当于按F5 整个页面重载location.reload();//js的方法//重新替换当前路由 replacethis.$router.replace({ path:"/index/main?name=name", name:"index"});//go(0)刷新当前页 go(-1...原创 2019-06-21 10:29:43 · 5320 阅读 · 0 评论 -
Vue国际化之vue-i18n
Vue国际化之vue-i18n项目中需要一个一键切换用户语言的功能,在代码中加大量判断就太麻烦了,这个时候需要引入vue-i18n,vue国际化插件先npm 安装该插件npm install vue-i18n --save以插件的形式进行使用main.js// The Vue build version to load with the `import` command// (ru...原创 2019-08-19 14:05:39 · 422 阅读 · 0 评论 -
Vue项目每次打开的端口不同,指定端口失效
Vue项目每次打开的端口不同,指定端口失效在config/index.js中指定host: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be dete...原创 2019-08-19 16:51:10 · 2708 阅读 · 4 评论 -
Vue项目跑在IE中报错:vuex requires a Promise polyfill in this browser.
Vue项目跑在IE中报错:vuex requires a Promise polyfill in this browser.因为使用了ES6 Promise,而IE浏览器不支持解决方案:引入babel-polyfill包npm install --save-dev babel-polyfill 在build/webpack.base.conf.js中module.exports = ...原创 2019-08-20 13:56:56 · 202 阅读 · 0 评论 -
Vue组件懒加载和路由懒加载
Vue组件懒加载和Vue路由懒加载这里只记录了router层面上的懒加载方法,还有在*.vue中各种懒加载的方法,例如:需要的时候import组件,用完destory等等。Vue组件的懒加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件router.jsimport Vue from 'vue'import...原创 2019-08-20 16:40:38 · 1224 阅读 · 0 评论 -
Vue指定不编译的文件夹和favicon.ico
Vue指定不编译的文件夹和favicon.ico在Vue3.0中引入public文件夹,不希望被编译的文件都可以放到这个文件夹下,但是在vue2.0中实现类似的功能,需要自己在webpack.prod.conf.js中做一些配置在这里简单的区分一下Vue2.0中的assets和static的区别assets:各组件中的依赖项,会被编译static:不会被编译,原样放到dist文件夹下言归...原创 2019-08-21 17:06:06 · 3369 阅读 · 0 评论 -
Vue项目中,在iphone中软键盘和固定定位(fixed)相关问题的解决办法
Vue项目中,在iphone中软键盘和固定定位(fixed)相关问题的解决办法问题描述:在开发公众号项目的时候,遇到适配苹果7 的情况,苹果软键盘弹出之后会与position:fixed冲突出现问题,具体表现是,软键盘弹出时,底部的按钮会被顶到上面来,当软键盘消失后,滚动区域没有正确回正,导致一些内容点击事件无效。。。解决方案:在软键盘消失的时候,手动将滚动区域回到顶部,具体操作是:&...原创 2019-03-05 13:39:36 · 3191 阅读 · 0 评论 -
VUE中fetch结合支付宝API验证银行卡号
标题VUE中fetch结合支付宝API验证银行卡号工作中提出验证银行卡的需求,在项目基于vue的情况下,刚开始用正则,结果是不太准确换个方法就是要使用支付宝去验证用户输入的手机号Bank组件如下<template> <div> <x-input title="银行卡号" placeholder="请输入银行卡号" type="text" @on-blur...原创 2019-02-28 11:03:50 · 2752 阅读 · 0 评论 -
Vue事件委托-跨域请求
Vue实现事件委托今天有一个需求,在Vue中实现事件委托代码如下<template> <div class="hello"> <div class="head"> <img :src="Logo" alt="幼品汇" class="logo"> &原创 2018-06-29 09:55:21 · 645 阅读 · 0 评论 -
Vue的按需加载
Vue的按需加载按需加载,又称延迟加载或者懒加载,只有在使用到的时候才会加载进来import引入的模块,会在加载imdex.js文件的时候,去加载所有的模块Vue中提供import的加载方式import Vue from 'vue'import Router from 'vue-router'import '@/components/Base'import '@/co...原创 2018-08-14 16:48:33 · 2398 阅读 · 0 评论 -
Vue组件之间传值
Vue组件之间传值组件之间传值的三种方式父传子子传父非父子组件传值父传子父组件<template> <div> <child :inputName="name"></child> </div></template><script> im原创 2018-08-22 14:20:52 · 6313 阅读 · 6 评论 -
vux获取PopupRadio子组件的值
在使用VUX的组件中,用到了PopupRadio组件,但是在文档中,并没有表明如何去获取select中的值,于是,我在这里使用了$refs与ref,直接上代码<template> <div class="getOilCard"> <ul> <li> <PopupRadio :opt...原创 2018-08-28 11:50:42 · 3194 阅读 · 0 评论 -
Vue-elementui 下拉框(el-dropdown)绑定点击事件
ElementUI组件下拉框绑定点击事件无效的解决方案在使用脚手架构建的项目中需要使用到下拉组建 <el-dropdown> <span class="el-dropdown-link" ref="echarType"> 柱状图<i class="el-icon-arrow-down el-icon--right"...原创 2018-09-06 10:09:15 · 41935 阅读 · 21 评论 -
Cannot assign to read only property '__esModule' of #Object 的问题
Cannot assign to read only property ‘__esModule’ of #Object 的问题问题背景:我这里使用了Vue+elementUI构建的项目,项目中依赖echarts,webpack,babel等模块,打包后在高版本浏览器中没有问题,但是在低版本的浏览器中,谷歌1.7.X,或者IE8一下,就会报错Cannot assign to read...原创 2018-09-12 13:49:47 · 7734 阅读 · 0 评论 -
axios的使用.md
axios的使用在本次的项目中使用Vue构建 的项目需要向后台发起请求,Vue本身并不支持发起请求,需要使用vue-sour或者axios等插件,在新版本中对vue-souurce的支持并不友好,我在这里使用了axios,引入的方式有多重,这里只记录通过标签对侵入的方式引入<script src="https://unpkg.com/axios/dist/axios.min.js"&g...原创 2018-09-18 22:00:44 · 521 阅读 · 0 评论 -
Vue动态给一个元素添加类名,兄弟元素移除类名
Vue动态给一个元素添加类名,兄弟元素移除类名直接上代码,亲测可用<template> <div> <ul> <li v-for="(item,index) in list" @click="do(item,index)" :class="{'color':index==current}">{{item.name}}&原创 2018-11-02 16:17:44 · 6304 阅读 · 0 评论 -
Vux 中x-address的使用
Vux 中x-address的使用<template> <div> <Group> <x-address title="地址信息" v-model="MyAddress" placeholder="请选择地址" :list="ChinaAddressV4Data"><原创 2018-11-20 10:33:49 · 3782 阅读 · 0 评论 -
vuex踩坑日志(一)
VUEX踩坑日志源码地址https://github.com/zhengyixun/VUEX我使用的是vue-cli+vuex,vue-cli的安装和使用想必就不用我多说了,我这里主要说一下vuex在vue-cli中的使用方法首先在你的vue-cli下安装vuexnpm install vuex --save--dev在你的src目录下新建一个Store文件夹,用来存放st原创 2018-02-07 11:36:16 · 1298 阅读 · 0 评论