
vue-js
文章平均质量分 51
你蠢哭我咯
个人博客:www.adebibi.com
展开
-
webpack外部扩展,依赖前置
引入了外部jsindex.html<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>js中impor...原创 2019-03-20 10:57:17 · 998 阅读 · 0 评论 -
vue2-preview缩略图插件
https://github.com/daidaitu1314/vue2-preview//npmnpm i vue2-preview -S//引入import VuePreview from 'vue2-preview'Vue.use(VuePreview)//使用<template> <img class="preview-img" v-for="...原创 2018-05-17 20:31:42 · 9995 阅读 · 6 评论 -
vue监听滚动条-吸顶
mounted(){ window.addEventListener('scroll', this.handleScroll)}handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop co...转载 2018-05-17 16:42:47 · 1718 阅读 · 0 评论 -
jsencrypt加密
https://github.com/travist/jsencrypt前端代码<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Login</title&am转载 2018-05-03 19:21:34 · 5446 阅读 · 0 评论 -
vue-router路由按需加载
const login = resolve => require(['@/views/login.vue'], resolve)const Error = resolve => require(['@/views/Error.vue'], resolve)routes:[{ path: '/login', name: 'login', component: ...原创 2018-05-03 21:42:40 · 1451 阅读 · 0 评论 -
vue+flex实现简单的2列瀑布流
<template> <div> <div class="zq-waterfall"> <div class="zq-waterfall-left"> <div class="box" v-for="(item,index) in itemsA" :key="index"> <im原创 2018-04-02 13:35:22 · 9780 阅读 · 9 评论 -
base64转为图片文件上传到服务器
methods:{ base64ToBlob(urlData) { var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1] || 'image/png'; // 去掉url的头,并转化为byte var bytes = window.atob(arr[1]); ...原创 2018-03-15 16:32:17 · 6168 阅读 · 0 评论 -
css实现瀑布流布局
vue<div class="main"> <ul class="clear"> <li v-for="(item,$index) in items" :key="$index"> <img :src="item.imgSrc" alt=""> </li> </ul></div><script> export defa原创 2018-03-08 14:16:43 · 1278 阅读 · 1 评论 -
vue-cli PC端构建
# 全局安装 vue-clinpm install --global vue-cli //首次安装需要# 创建一个基于 webpack 模板的新项目vue init webpack my-project# 安装依赖,走你cd my-projectnpm install//使用cnpm install代替npm run devlocalhost:8080查看安装axios...原创 2017-07-27 17:11:17 · 1601 阅读 · 0 评论 -
vue中excel导出(不兼容IE)
页面中先加上这些<template> <div> <div id='content'> 开始日期<input type='text' v-model='excelBegin'> 结速日期<input type='text' v-model='excelEnd'> <table>内容</table>原创 2018-01-30 09:20:42 · 2737 阅读 · 0 评论 -
vue keep-alive缓存后,进入缓存页需要再次更新数据
在keep-alive时beforeRouteEnter(to, from, next){ next(vm=>{ console.log(vm) // 每次进入路由执行 vm.getData() })},mounted: function () { // 只执行一次的方法 this.getData()}...原创 2018-02-10 15:32:47 · 9056 阅读 · 0 评论 -
axios上传视频进度条
var fd = new FormData()fd.append('file', files[0])let config = { onUploadProgress: progressEvent => { var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) console原创 2018-02-10 09:55:10 · 2783 阅读 · 0 评论 -
vue2-preview 缩略图插件使用后在ie9白屏问题
在build文件夹下webpack.base.conf.js中。加入es6转换resolve('node_modules/vue2-preview/src/plugins/preview')原创 2018-04-27 20:49:04 · 698 阅读 · 0 评论 -
Vue 打包后背景图片不显示问题
如果你是直接打开dist/index.html,需要将config/index.js改为下面build: { assetsPublicPath: './'}build/utils.js增加function generateLoaders (options) { ... if (options.extract) { return ExtractT...原创 2018-05-14 20:04:11 · 3168 阅读 · 0 评论 -
text-shadow文本长阴影
&lt;template&gt; &lt;div class="container"&gt; &lt;h1&gt;文本阴影&lt;/h1&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&原创 2018-05-27 09:48:49 · 853 阅读 · 0 评论 -
element中el-cascader使用props设置value、label、children
从后端拿到arr数据结构:cityList: [ { id: 1, name: '北京', child: [ id: 11, name: '大兴区', child: [ id: 111, name: '亦庄' ] ] }]vue文件代码<el-cascader :options="cityList" :pr...原创 2019-01-02 20:50:29 · 71455 阅读 · 22 评论 -
element-ui 使用input实时限制输入
vue文件<el-input type="text" @input.native="changeCode" v-model="formSearch.licensedCode" maxlength="40" placeholder="请输入" clearable></el-input>changeCode() { this.$nextTick((原创 2018-11-07 17:08:13 · 20823 阅读 · 1 评论 -
vue中清空input标签中file的值
&lt;input type="file" ref="clearFile" name="file" id="file"&gt;&lt;button @click="clearFile"&gt;&lt;/button&gt;cle原创 2018-10-29 18:17:58 · 8100 阅读 · 0 评论 -
简单http请求
简单http请求function clientRequest(url, data) { var client = new XMLHttpRequest(); client.open("POST", url, false); // 响应方式 接口链接 是否异步请求 client.setRequestHeader("Content-Type","application/x-www-for...原创 2018-09-25 17:24:08 · 409 阅读 · 0 评论 -
element表单验证及清除校验
<el-form class="task-dialog-form" :model="againForm" :rules="againRules" size="small" ref="againForm" label-width="80px"> <el-row> <el-col :span="原创 2018-07-25 09:20:10 · 60346 阅读 · 9 评论 -
element el-input @change 无法触发,@input值出错问题
这里是demohtml<div id="app"> el-input <el-input v-model="input" @input="changeValue"></el-input> class el-input <div class="el-input"> <inpu原创 2018-06-20 10:39:26 · 40446 阅读 · 2 评论 -
vue-cli 3.0项目深克隆lodash使用
lodash官网npm i --save lodashmain.jsimport _ from "lodash";使用let data = _.cloneDeep(this.userInfoData)原创 2018-06-16 11:39:37 · 4142 阅读 · 0 评论 -
axios配置
import axios from 'axios'import qs from 'qs'import { Message } from 'element-ui'// import * as _ from '../util/tool'axios.defaults.timeout = 5000; //响应时间// axios.defa...转载 2018-06-14 20:10:56 · 2132 阅读 · 0 评论 -
js监听变量
监听单一变量var obj={};Object.defineProperty(obj,'data',{ get:function(){ return data; }, set:function(newValue){ data=newValue; console.log('set :',newValue); ...转载 2018-06-14 09:21:48 · 2761 阅读 · 1 评论 -
git简单使用
简单提交git statusgit add *git status 全绿色git commit -m ‘提交信息备注’git push配置npm i express http-proxy-middleware --save-devnode server.jsgit branch -a查看所有分支git checkout dev切换到dev分支分支内容提交后git...原创 2018-05-24 22:03:38 · 175 阅读 · 0 评论 -
vue在ios返回上一路由白屏
原文链接问题描述:进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决原因是,经过排查,发现在ios 机器上使用webview 开发Vue项目时候,go history (-1),无法将body 的高度拉掉,使得遮住,触发轻点击,方可消除该遮罩解决的理论:用于最重要的html 容器是container,然而因...转载 2018-06-04 21:20:04 · 6299 阅读 · 0 评论 -
vue滚动后,后退回到记录位置
路由配置文件里const router = new VueRouter({ mode: 'history', [ { path: '/', name: 'home', component: home, meta: { title: 'home', keepAlive: true原创 2018-01-29 11:01:22 · 6140 阅读 · 1 评论 -
axios配置后,post提交formdata
var fd = new FormData()fd.append('file', files[0])let config = { headers: { 'Content-Type': 'multipart/form-data' }}axios.post(that.uploadUrl, fd,config).then( res => { console.原创 2018-01-19 13:27:35 · 67928 阅读 · 4 评论 -
Element-ui table中过滤条件变更表格内容
组件中:<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable> </el-table-co原创 2017-11-01 13:43:03 · 33573 阅读 · 0 评论 -
vue2.0动态改变index中title
第一种let setDocumentTitle = function (title) { document.title = title; let ua = navigator.userAgent; if (/\bMicroMessenger\/([\d\.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) { var i原创 2017-11-09 14:14:40 · 2687 阅读 · 0 评论 -
js时间格式化,日期加减天
2017-11-7简单获取年月日var d = new Date();var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();console.log(str)//2017-11-7简单获取年月日日期格式化dateFtt:function(fmt,date) { //author: meizz var o = {原创 2017-11-07 20:17:05 · 1021 阅读 · 0 评论 -
vue实现3级联动
<el-col :span="4"> <el-form-item label="代理商"> <el-select v-model="formData.agentid" placeholder="" @change="changeAgent"> <el-option label="全部" :value="0"></el-option>原创 2017-11-07 11:43:17 · 2990 阅读 · 0 评论 -
VUE2.0 element upload使用
<template> <div class="uptemp"> <el-upload class="upload-demo" ref="upload" multiple="false" action="/web/api/uploadFile" :on-preview="handlePreview" :on-remov原创 2017-09-29 11:29:18 · 15918 阅读 · 4 评论 -
vue中for循环更改数据,数据变化但页面数据未变
let that = this;for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this原创 2017-09-15 09:22:46 · 10982 阅读 · 0 评论 -
vue-cli代码缩进报错
打开项目根目录下的build文件夹并且打开该文件夹下的webpack.base.conf.js文件,然后去除ESlint在文件中的配置代码就可以了。注释掉这段代码{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test'原创 2017-07-27 17:25:28 · 2139 阅读 · 0 评论 -
vue-cli中引入element
引入elementnpm i element-ui -S使用。在main.js中引入import Vue from 'vue'import App from './App'import router from './router'import '../theme/index.css'import ElementUI from 'element-ui'import echarts from原创 2017-07-27 16:47:31 · 383 阅读 · 0 评论 -
vue中element组件样式修改无效
<style>.homepage { .el-input__inner { height: 48px; }}</style>直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了。原创 2017-08-09 16:00:27 · 17956 阅读 · 17 评论 -
vue引入css
第一种全局引入: 在main.js中import './assets/iconfont/iconfont.css' //注意'./'一定要加不然会报错第二种局部引入: 在组件中<style scoped> @import '../assets/iconfont/iconfont.css';</style>原创 2017-08-01 10:54:09 · 4698 阅读 · 0 评论 -
vue 监听路由变化 mint-ui中tabbar遇到的坑
监听路由变化改变tabber的值。watch: { $route () { console.log('改变路由') this.selected = sessionStorage.getItem('pageUrl') }, selected: function (val, oldVal) { // 这里就可以通过原创 2017-11-09 23:35:01 · 8511 阅读 · 2 评论 -
vue2.0单页面spa在微信中title设置
github地址 摘抄只做笔记使用vue-wechat-titlenpm install vue-wechat-title --savemain.js中Vue.use(require('vue-wechat-title'))路由中{ name: 'Home', path: '/home', meta: { title: '首页' }, component: require翻译 2017-12-09 12:03:21 · 460 阅读 · 0 评论