vue
胜天一子半
Teach Yourself Programming in Ten Years。
展开
-
vue 拖拽排序
<template> <div> <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80p...原创 2021-12-17 09:41:24 · 262 阅读 · 0 评论 -
echart中label怎么输出空格
1、试了直接用空格,可以的,不够美观2、 不识别3、\xa0 可以用,截取部分代码formatter: (name) => { const index = data.findIndex(item => item.name === name) const item = data[index] let space = '' for(let i = 1; i<= item.space; i++){ space +原创 2020-11-05 17:32:39 · 3521 阅读 · 0 评论 -
Vue项目打包上线部署的那些坑
1、跨域问题开发环境的跨域可以直接在vue cofig中设置,这个没啥说的,打包完成后就一点关系都没了解决方案:a.通过jsonp跨域b.通过修改document.domain来进行跨域c.使用window.name跨域d.使用HTML5中新引进的window.postMessage方法来跨域传送数据e.CORS最好的解决办法我觉得还是后端给设置响应头解决跨域2、打包完的版本问题如果你用的npm、或者cnpm,打完包,再上线,过半年,重新install...原创 2020-09-25 16:33:52 · 843 阅读 · 0 评论 -
vue项目上线,出现缓存问题
1、html文件加mate标签<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />https://www.cnblogs.com/zdz8207/p/vue-meta-no-c原创 2020-09-21 09:34:02 · 1827 阅读 · 1 评论 -
VUE前端界面在iOS中遇到的坑
段时间,公司用前端做了一个微型图片生成界面,通过考虑,选择使用vue多页面进行编写,在界面编写完成之后,本地浏览器进行测试,发现一切都很顺利,然后嵌入到APP端进行联合测试。前期,界面在Android上运行比较顺利,个人以为没什么问题,但是当页面嵌入到iOS中,问题暴露了出来,主要体现在三点上:1、界面使用了瀑布流滑动效果,但是在iOS上滑动效果非常的差,会出现卡顿现象;2、在界面进行点击的时候,界面响应明显要比Android上要慢很多;3、界面按钮点击之后会产生一个灰色的阴影图层;开始,在转载 2020-08-21 15:39:50 · 1454 阅读 · 0 评论 -
vue.js实现点击按钮和弹出层其他位置弹出层消失方法
首先想到的是直接阻止按钮和弹出层的事件冒泡,然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了,使用的场景也很苛刻,要求页面中只有一个弹出层效果才行,虽然不建议使用,但是也提供了一种思路。然后想到可以检验事件的target,如果target不是按钮和弹出层就可以让弹出层消失,这也是用jQuery 的常用写法,那么关键点就是用vue.js定位到按钮和弹出层,vm.$refs可以解决这个问题,使用 ref 为子组件指定一个索引 ID,在 JavaScript 中就可以直接访问子组件了。原创 2020-06-29 14:09:00 · 1282 阅读 · 0 评论 -
前端图片直传阿里OSS实现方法
前端图片直传阿里OSS并不是唯一解决方法,也可以放置到后端处理,本文只探讨前端图片直传阿里OSS实现方式。# 流程:1、初始化OSS2、获取上传的图片3、长传图片# 要处理的点:1:如果用户上传的图片过大,要进行微损压缩图片2:如果苹果手机旋转拍照上传图片会造成旋转错位(兼容性处理)项目采用vant,封装一个直传阿里oss的功能,代码为:/** * Created by SongPeng on 2019-8-9 */import OSS from...原创 2020-05-27 17:35:49 · 1886 阅读 · 0 评论 -
vue移动端添加路由动画
<template> <div id="app" > <transition :name="transitionName" > <router-view class="appView"></router-view> </transition> </div></templ...原创 2020-03-10 10:15:05 · 504 阅读 · 0 评论 -
vue 项目
1、基于 Vue.js 的做 PPT 的框架https://github.com/zulko/eagle.js/原创 2019-10-31 17:36:32 · 88 阅读 · 0 评论 -
vue css >>> /deep/ 穿透
在vue引用了第三方UI组件后,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped,得到覆盖第三方样式的需求。有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符(>>>的别名)<style scoped>外层...原创 2019-09-24 12:01:28 · 698 阅读 · 1 评论 -
provide 与 inject
父组件provide () { return { clearInput: this.clearInput } },methods: clearInput子组件inject: ['clearInput']this.clearInput()可以调用父组件的事件原创 2019-09-05 16:46:19 · 101 阅读 · 0 评论 -
vue项目手写微信样式拖动返回首页按钮
微信样式拖动框:<template> <div :class="['drag-button', state === 1?'border-right trans':state === 2?'border-left trans':'']" @click.stop.prevent="click" @touchstart="touchstart($event)" @touc...原创 2019-08-16 16:11:57 · 349 阅读 · 0 评论 -
vue项目上使用exif-js解决ios上级直传阿里云oss图片旋转90度问题
uploadImg.js/** * Created by SongPeng on 2019-8-9 */import OSS from 'ali-oss'import { getOssUploadRole } from '@/api/wallet'import { Toast, Dialog } from 'vant'import { ossUrl } from '@/confi...原创 2019-08-07 16:56:45 · 1832 阅读 · 0 评论 -
vue自定义指定实现input只能输入正整数
问题:vue项目中如果想让一个input只能输入正整数,那么需要写一个键盘监听事件对这个input处理,但是如果有很多input需要这样处理,又或者想封装一下,怎样实现比较方便又实用?解决办法:方便以后的使用,就需要封装一个自定义指定来的方便,就像v-if类似,实用自定就可以实现步骤:11、创建drectives.js 代码:注册v-Int 自定义指令import Vue ...原创 2019-08-14 10:46:30 · 2758 阅读 · 1 评论 -
vue-cli3.0 搭建项目模版教程(ts+vuex+axios)
Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript、vue全家桶能够掌握和运用此次项目模版主要涉及的技术框架:vue2.5 vuex3.0 vue-router3.0 axios typescript3.2Tip: 由于vue-cli3.0帮我们简化了webpack的配置,...转载 2019-08-06 15:55:38 · 1559 阅读 · 0 评论 -
h5中的横屏判断与提示,vue组件封装
通过 H5新特性 orientationchange 事件判断是否横屏window.onorientationchange = function () { if(window.orientation === 90 || window.orientation === -90){ alert('横屏了') } else { alert('没有横屏...原创 2019-08-06 11:08:10 · 1070 阅读 · 0 评论 -
vue项目,跳转回来保持数据与滑动位置
在vue项目中,遇到这样的问题:有一排动态加载的列表,点击进入详情页,然后回退的时候,数据又重新刷新了,里面的筛选条件也没了。这种时候可以用vuex储存筛选状态,但是最完美的用法是keep-alive<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们比如在项目中列表页PageOrder.vue和详情页PageOrderDetail.vue都...原创 2019-07-19 18:10:09 · 650 阅读 · 0 评论 -
vscode 安装Live Server
搜索插件Live Server 然后 Install这样就可以右键以服务器的形式打开html文件可以实现和vue-cli 自动监听页面的变化,不用人力去刷新浏览器原创 2019-07-15 11:08:06 · 1025 阅读 · 1 评论 -
vue项目禁止input输入小数点
<van-field v-model="inputPirce" input-align='right' type='tel' maxlength='10' :disabled="type===1" @input="pirceInput" />pirceInput () { let str = '' + this.inputPirce ...原创 2019-07-10 11:31:16 · 3846 阅读 · 0 评论 -
express 快速搭建node服务
express server -e #新建项目cd ./server #进入目录cnpm i #安装依赖app.js// 监听端口app.listen(888,()=>{ console.log('888端口服务器已经启动')})#cmdnodemon app#...原创 2019-01-29 15:15:23 · 336 阅读 · 0 评论 -
vue项目上线刷新404问题
vue router mode 默认为hsas, 这样的url中带有#,让有强迫症的人很不爽,可以修改const router = new Router({mode: 'history'});mode: 'history'就能去掉#号,不过这样也导致一个问题,就是想服务器上因为没有# 直接去找资源文件,肯定是没有的要嘛去配置服务器nginx,修改nginx.conf ...原创 2018-07-18 18:34:10 · 1783 阅读 · 0 评论 -
vue滤器——长度过滤与时间过滤
/** * 长度截取 * @param {string} value * @param {number} num 截取位数 */const ellipsis = function (value, num = 8) { if (!value) return '' if (value.length > num) { return value.slice(0, num...原创 2019-04-10 16:45:04 · 607 阅读 · 1 评论 -
vue中textarea自适应高度
转载于https://www.cnblogs.com/lin-kn/p/10570758.html<textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea>data () { r...转载 2019-04-08 11:35:32 · 5007 阅读 · 1 评论 -
ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决
在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN1-NaNnew Date("2019-04-12 17:30:00".replace(/-/g,'/')).getTime(); // 解决了问题!!当然getFullYear() ,getMonth(),getDate()需要re...原创 2019-04-12 18:12:55 · 2199 阅读 · 0 评论 -
vue-cli3+vant+vantRem适配方案项目搭建
1、安装vue-cli3脚手架,不懂的去vue-cli官网npm install -g @vue/cli2、通过vue-cli3创建项目vue create my-project创建的过程有很多选项,我的常用选项:简单介绍一下:a、Babel:转码工具,有了它就可以开心的用es2015以上的代码,那必须有!b、Router:前端路由,对一个单页面来说,基本不...原创 2019-05-22 16:00:14 · 10448 阅读 · 6 评论 -
vue中对axios的封装
import axios from 'axios' // 引入axios// import store from '@/store/index'import router from '../router/index'import qs from 'qs' // 根据需求是否导入qs模块import { Toast, Dialog } from 'vant'import common f...原创 2019-05-22 16:33:46 · 270 阅读 · 0 评论 -
本地启用支持 https 的 Web 服务器
首先打开命令行窗口,进入项目目录,通过 npm 安装 http-server 包:$ cd project$ npm install -g http-server接着通过 openssl 创建私钥和证书:$ openssl genrsa 2048 > key.pem$ openssl req -x509 -days 1000 -new -key key.pem -out ...原创 2019-05-22 16:59:40 · 1035 阅读 · 0 评论 -
vue项目,给router跳转加一个进度条
使用已有的轮子nprogress.js 来实现//安装npm install nprogress -S//在main.js中引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'//样式定制NProgress.configure({ easing: 'ease', // 动画方式 sp...原创 2019-06-12 16:19:12 · 390 阅读 · 0 评论 -
封装mqtt.js实现websocket连接
/** * Created by SongPeng on 2019-5-31 */import { Dialog } from 'vant'import mqtt from 'mqtt'// import tools from './tools'import common from './common'import store from '@/store/index'// imp...原创 2019-06-03 15:50:16 · 3600 阅读 · 0 评论 -
vue项目做微信js-sdk开发
1、微信js-sdk简介:做微信js-sdk开发,首先要了解微信js-sdk是干什么的,微信官方这里可以查看其实就是调取微信app原生的能力,让h5页面可以调用起来微信扫码、支付、分享等接口2、vue项目中安装wx-js-sdknpm i -S weixin-js-sdk安装过之后再main.js中全局注入import wx from 'weixin-js-sdk'V...原创 2020-04-30 17:50:10 · 1934 阅读 · 0 评论 -
vuex中使用commit 与dispatch
vuex中,如果不想引入mapMutations或者mapMutations,可以分别用commit 与dispatch 代替commit 同步操作 this.$store.commit('mutations的方法',paramas)dispatch 异步操作 this.$store.dispatch('actions的方法',paramas)...原创 2019-06-18 09:10:52 · 857 阅读 · 0 评论 -
vue项目配置 autoprefixer 报出警告问题
vue项目autoprefixer 控制台 出现了警告问题:Replace Autoprefixer browsers option to Browserslist configUse browserslist key in package.json or .browserslistrc file.原因是版本高了,引用有修改postcss.config.js ...原创 2019-07-08 10:54:16 · 12671 阅读 · 5 评论 -
vue 项目软键盘回车触发搜索事件
目的:掉起来右下角为搜索的按钮步骤:1、input的type改为search,再写keydown按下时的事件调取搜索事件的方法这样安卓手机上回车就变成了“搜索”,不过ios仍然是换行2、input 外面套form,必须要有action,action=“javascript:return true”我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮...原创 2019-07-08 15:45:36 · 5319 阅读 · 0 评论 -
微信浏览器中解决vuex刷新页面丢失的问题
if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('store')))) sessionStorage.removeItem('store') } w...原创 2019-07-03 11:36:27 · 994 阅读 · 3 评论 -
Vue项目中出现Loading chunk {n} failed问题的解决方法
我i的Vue项目中,用到了Vue-cli3,路由懒加载模式,在本地调试和部署上都没有任何问题,一上线跳转路由的时候会偶尔出现Loading chunk {n} failed的报错,上网查了查: 报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会...原创 2019-07-03 15:19:15 · 6477 阅读 · 0 评论 -
vue-cli 命令
npm install -g vue-cli //首先全局安装 vue init webpack my-project //结合webpack 在此目录下生成一个叫my-project的项目文件夹 cd my-project // 进入项目文件夹 npm install //下载项目依赖 node_modules npm run d...原创 2018-06-13 15:38:26 · 200 阅读 · 0 评论