随笔分类 - Vue学习坎坷路
摘要：get请求转码 关于qs插件 qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。 安装qs axios中自带qs无需下载，若单独下载只需npm install qs即可 使用 组件中单独引入 import qs from 'qs' 或者全局引入(ma
阅读全文
摘要：图片等比放大居中 在一些情况下需要保证图片缩略图窗口大小固定，但是图片分辨率比例多种多样，需要在展示固定比例的窗口下展示不同分辨率的图片，还需保证展示的图片不被拉伸变形，保持原有比例的基础上进行等比放大。 // 外层 .img-box { // 等比放大图片，超出部分隐藏 width: 120px;
阅读全文
摘要：Vant列表list使用方法 Vant列表list的使用方法和注意事项 下列代码为允许下拉刷新 1.使用组件 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finis
阅读全文
摘要：three.js 3D模型使用 安装 安装three.js npm install three 安装轨道控件插件 npm install three-orbit-controls 安装加载.obj和.mtl文件的插件 npm install --save three-obj-mtl-loader 安
阅读全文
摘要：elementUI表单校验 1.表单上加rules {object}（常用） 增加普通校验规则 <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名：" :label-width="formLabelWid
阅读全文
摘要：WebSocket实时推送 创建一个WebSocket对象： 准备变量 mounted() { // 初始化 const uri = window.location.href; // 获取网页url const protocol = uri.split("/")[0]; // https: 确定当前
阅读全文
摘要：VUE项目导出功能_前端导出Excel_Export2Excel.js vue项目利用插件直接进行excel生成。 1.安装依赖 npm install -S file-saver npm install xlsx@0.14.1 -S npm install -D script-loader 高版本
阅读全文
摘要：img标签图片加载异常处理 img标签中的src如果加载失败会显示错误文件，可以利用以下方法处理异常图片 VUE 写法 页面 <img :src="scope.row.picUrl" alt="" @load="imgLoad" @error="setDefaultImage($event)" />
阅读全文
摘要：upload上传组件的使用方法 上传图片后自动上传（也可以手动上传），图片上传成功后由后端返回特定图片地址，在表单提交后将表单数据同图片地址一并返回即可完成图片上传功能。 组件HTML <!-- 上传图片 --> <div style="margin: 4px 0">图片上传（仅支持jpg、png格
阅读全文
摘要：moment时间格式修改 1. 引入moment.js npm install moment 2.在main.js中进行使用 import moment from 'moment'; moment.locale('zh-cn'); Vue.prototype.moment = moment; 3.在
阅读全文
摘要：日期组件时间选择范围 1.限制选中的时间范围 点击时间选择器后，展示的时间如果不在规定的范围内将会被置灰 <el-date-picker v-model="time" :picker-options="pickerOptions" popper-class="range-class" type="d
阅读全文
摘要：vant自动上传文件/图片 vant上传图片与elementUI有所不同，没有自动上传功能，所以与后端进行接口对接的时候可以在after-read中将文件进行上传 html页面 <!-- 上传图片 --> <van-field name="uploadImg" label="图片"> <templa
阅读全文
摘要：问题出现场景 移动端引入fastclick后快速双击出现该问题 解决方案 在 style 中添加下列样式 * { touch-action: pan-y; }
阅读全文
摘要：vuex使用方法/如何使用 什么是vuex？ vuex是多个组件共享数据或者是跨组件传递数据，为组件之间的数据传递提供了一个全局变量。 如何使用？ 1.声明全局变量 在 src/store 文件夹下的 index.js 中创建变量 //state：数据仓库 const state = { globa
阅读全文
摘要：ElementUI的el-table表格使用cell-style根据表格不同数据显示不同颜色 1.在表格中添加属性 在el-table标签中添加 :cell-style="cellStayle" <el-table :data="tableData" stripe class="" style="w
阅读全文
摘要：前端下载文件的几种方式 在网页需要下载文件功能时需要进行点击下载功能，下面列出几种常见文件下载的方式 1.直接下载 通过在浏览器地址栏输入相应下载url进行下载，本质为发送GET请求进行下载 2.利用a标签的download属性进行点击下载 <a href="完整下载地址">点击下载</a> 但是这
阅读全文
摘要：Vue相同组件跳转不刷新，created只执行一次 vue页面跳转 想在created 或mounted中 使用初始化函数 不成功 eg： Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 cre
阅读全文
摘要：Vue中Echarts使用示例 示例 1 引入echarts的三方包 npm install echarts --save 2.引入三方包（main.js） const echarts = require("echarts"); Vue.prototype.$echarts = echarts; 3
阅读全文
摘要：登录页 触发登录事件 methods: { //触发登录事件 onSubmit() { // 如果登录成功 if (this.id 'admin' && this.password '123456') { this.$router.push('/main') //跳转页面 localStorage.
阅读全文
摘要：1.对应的包 import { Loading } from 'element-ui' 2.data中进行声明 data() { return { loadingInstance: null, } }, 3.加入动画 this.loadingInstance = Loading.service({
阅读全文
