vue
lizhen_software
前端、node、关注新技术
展开
-
mint-ui MessageBox 浏览器返回上一页,一直显示,没有关闭解决方法
在弹框的页面增加如下代码:1、离开页面钩子2、this.$messagebox 是MessageBox 实例,直接调用close 方法即可beforeRouteLeave(to,form,next){ this.$messagebox.close(); next();},...原创 2020-03-18 11:04:09 · 695 阅读 · 0 评论 -
vue+koa2+webpack 打包后提示Uncaught Error: [HMR] Hot Module Replacement is disabled.
vue用webpack打包后并且用node作为代理监听的话,还是会走webpack,那种会提示:Uncaught Error: [HMR] Hot Module Replacement is disabled.如果提示这个的话,将入口文件里面的entry:绿框内的内容删除掉,在node执行监听的时候动态修改entry这个值,代码如下:命令执行代码如下:执行命令时传入参数,用...原创 2018-10-18 15:22:40 · 776 阅读 · 0 评论 -
vue cli3 多页面应用搭建,打包后每个页面都一个文件夹
项目结构如下:注意:每个页面的.html 那个文件必须不能同名,不然本地开发环境无法拆分页面,本地如果想访问其他页面的话,地址如下:http://localhost:8080/order.html。最好src/pages/的文件夹名和.vue名 和.html名和.js的名字都一样,这样打包时容易拆分git地址:https://github.com/seizeDev/vue-more...原创 2018-11-29 17:05:43 · 20371 阅读 · 34 评论 -
mint-ui picker 选择器 用defaultIndex 修改选中项失败
这种修改失败时可以使用picker 实例上的一些方法:<mt-picker :slots="slots2" ref="picker2" @change="onValuesChange2"></mt-picker>先绑定实例,然后调用实例的setValues方法self.$refs.picker2.setValues([self.endHour])setV...原创 2018-12-22 16:59:23 · 4748 阅读 · 0 评论 -
vue-photo-preview 异步图片放大失效的解决方法
官方提供的异步图片加载的话,在数据加载完之后执行this.$previewRefresh(),但我这里测试的并不好使,最后解决的方式是加transition,代码截图如下:注意v-if一定要在transtion上加,v-if一定要有,fade的css如下:...原创 2019-02-27 11:40:50 · 5237 阅读 · 1 评论 -
vue 使用vue-awesome-swiper实现原生滑动切换及点击动画切换TAB
首先需要引入vue-awesome-swiper,代码如下:import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)在main.js引入 cssimport '../../static/swiper/swiper.min.css'这样咱们就可以使用swiper了,使用代码如下:这...原创 2019-03-14 18:08:13 · 13484 阅读 · 3 评论 -
vue-cli3 单文件及多文件.html 文件预处理 按需删除部分无用js 文件
在使用vue-cli3 的过程中,本地及测试环境使用conlog 的js,但生产环境用不到,挨个删容易出问题,也容易漏删,粗略的看了下vue-cli3 的配置文件,并未找到这类文件预处理的方式,但发现可以用插件的形式处理,因为对插件不是很熟悉,所以使用node js 文件处理的形式 以正则替换的方法,把匹配到的文件全部删除。这是我打包后的多文件存放地址。这是我部署生产时执行的命令,...原创 2019-06-23 00:07:22 · 1618 阅读 · 0 评论 -
vue 及 js 微信中 页面输入框被键盘顶上去之后,点击域错误 弹出框fixed absolute 定位的输入框 键盘弹出导致点击域失效 解决办法
造成这种问题的原因是body没有复位,所以把body 复位就可以了。解决思路:1、input获取焦点的时候记住当前滚动的位置,2、input失去焦点的时候滚动到之前的位置。(亲测有效)。附vue 代码,其他框架可以依据该思路修改。PageScroll:0,// 位置 这个在data 里面定义变量inputLoseBlur() { setTimeout(() => {...原创 2019-08-13 11:22:42 · 614 阅读 · 0 评论 -
vue-router addrouters 刷新导致页面空白或404 解决方案
vue-router动态路由加载会遇到一些问题,最严重的问题是刷新动态路由页面导致404,网上查了不少资料,都有点问题,解决了一下,附代码及解决思路。1、使用动态路由时需要一个全局变量,用来控制什么时候加载这个动态路由,我用的是vuex全局状态集管理,用他有个好处就是,刷新时路由信息会丢失,vuex状态也会丢失,所以根据他的状态来判断比较好,设置一个初始值 , 默认false,等动态路由加载完...原创 2019-09-02 18:14:57 · 6555 阅读 · 0 评论 -
vue ios11 IOS11.3系统滑动是父元素跟着滑动的解决方案 全机型滑动父元素跟着滚动
IOS11.4系统如果弹框后父元素也跟着滚动的话,解决方案如下:methods:{ _preventDefault(e) { e.preventDefault(); }, GetPageScroll(){ var y; if (window.pageYOffset) { // all except IE y =...原创 2018-08-23 11:31:41 · 1400 阅读 · 0 评论 -
在vue中使用ifream需要注意的地方
在前端中,ifream我们这边其实用得比较少,因为不像原生那样,修改之后就需要重新下载,H5的话只需要发布到服务器上,下次打开会更新页面,所以一直没注意过用h5来包外部页面的需求。近期,公司一个原生应用要做H5版本的,因为涉及到很多webview页面,这些webview页面包括:H5的协议页面、第三方保险的授权页面、其他授权页面。这些授权都是第三方公司给的页面,授权成功有后端来异步爬取第三方公司的...原创 2018-06-28 13:40:42 · 6042 阅读 · 0 评论 -
vue-resource post请求,header无法设置解决方案
在vue-resource 里面加header头的时候,get请求正常加入,但post,没有正常加上,这种情况是因为options.emulateHTTP覆盖导致的,在请求拦截器里面加请求头也不行,所以解决方案是全局写死请求头:Vue.http.options.emulateHTTP = true;Vue.http.options.headers = { 'Content-Type': ...原创 2018-07-10 12:45:22 · 9827 阅读 · 0 评论 -
vue js IOS H5focus无法自动弹出键盘的解决方法
IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法代码如下,有问题欢迎评论<template> <div class="p...原创 2018-02-27 16:11:00 · 13072 阅读 · 0 评论 -
vue TS使用props,vuex,mixins详解
在vue中使用TS相信大家网上能找到很多实践方案,我之前也写过一个DEMO,GIT地址:https://github.com/seizeDev/vue-ts光有DEMO没有什么用,还是要具体到业务层中使用具体的API,所以给大家介绍一下,子组件怎么接受props,怎么引入vuex,怎么使用mixins,其实这些才是我们用TS+VUE的主要方案,TS是为了规范代码,规范书写格式和检查静态变量。在vu...原创 2018-04-15 21:57:39 · 26999 阅读 · 7 评论 -
vue ts ,vue使用typescript的时候,父组件给子组件传值提示 Invalid prop: type check failed for prop "fatherSearch". Expe
vue使用ts会遇到各种各样的问题,最近使用时发现父组件给子组件传值时提示vue is object but string这种,子组件接收的方式如下:这个问题找了好几天,后来发现是因为vue的默认属性导致,需要改成:如果提示其他类型不存在的话,也是一样的解决方式,就改成其他的类型就行了,我不确定TS哪个版本会导致这个问题,因为之前我这个项目没报这个错,就突然有一天不知道弄了个啥,就出现了这个问题,...原创 2018-05-14 14:02:27 · 12995 阅读 · 0 评论 -
vue build用nginx指定路径,有跳板机nginx导致图片没有取nginx的配置地址
nginx配置如下: location /web/asset/wap/ { try_files $uri $uri/ /index.html =404;#这样配置 #alias /data/test/project/front/asset/wap/; root /data/test/project/front/asset/wap/static/; ...原创 2018-05-15 12:40:23 · 1397 阅读 · 0 评论 -
vue nginx配置默认路径,nginx默认配置
我们开发一个系统的2.0版本,之前的版本是纯静态页面,比如登录是:login.html,列表页:list.html。我们2.0版本是用vue的单页面实现的,路由用的vue-router,要求是如果访问我们之前的某个页面的话,要直接跳转到我们现在的登录页面。因为我们公司所有外网访问的都有一个跳板机,跳板机再指向目标机器,目标机器上配置相关路径,因为目标机器的路径配置的是带前缀的,用vue官网的那个方...原创 2018-05-22 10:51:34 · 6248 阅读 · 0 评论 -
vue-cli + koa2 生成自动koa2驱动vue的前端项目,koa2作为中间层,vue作为前端渲染,开发环境和生产环境搭建
网上找了很多资料,都没有实现vue-cli + koa2渲染的实现方式,即使有部分教程,讲得也不是很彻底,我总结了部分教程并且用webpack生成一个基于vue-cli、在koa2层上渲染的DEMO,希望给大家一些帮助。git地址:https://github.com/seizeDev/vue-koa2,有问题可以讨论做之前我给这个demo的要求是:1、基于vue-cli2、koa...原创 2018-06-04 17:16:44 · 7481 阅读 · 1 评论 -
vue 使用jsx需要注意的问题
vue 使用jsx官网提供了一些方式,为什么用jsx,因为jsx足够灵活,模板引擎虽然比较简单,但复杂dom结构仍然生成不了,我近期做了一个递归生成dom结构的DEMO,因为递归的原因,普通的模板引擎实现不了这种,所以我用了jsx。引入JSX比较简单,用https://github.com/vuejs/babel-plugin-transform-vue-jsx这个网站里面提供的,增加这些依赖就可...原创 2018-06-07 18:10:46 · 5758 阅读 · 0 评论 -
使用webpack-hot-middleware不能刷新的解决方法
使用webpack-hot-middleware实现自动刷新的方式如下:1、修改entryentry: { index: ['webpack-hot-middleware/client?noInfo=true&reload=true',path.resolve(__dirname, '../src/main.js')] },2、plugins增加new webpack.HotM...原创 2018-06-08 16:59:39 · 5885 阅读 · 2 评论 -
vue 模拟支付宝六位密码支付,直接上代码
<template> <div class="pwdpush-box"> <h4 class="enter-password" @click="enterPwd">输入密码</h4> <div class="phonenum-show" :class="pushShow?'原创 2018-02-27 16:09:17 · 6646 阅读 · 2 评论