Vue
暖一杯茶
这个作者很懒,什么都没留下…
展开
-
v-distpicker重置的问题
v-distpicker重置的问题原创 2023-02-22 11:06:38 · 300 阅读 · 2 评论 -
js中?.、??的具体用法
js中 ?. 、 ??的用法原创 2023-02-21 11:11:19 · 402 阅读 · 0 评论 -
Vue使用Echarts完成水波图效果
Vue使用Echarts完成水波图效果。原创 2022-10-27 10:22:54 · 861 阅读 · 0 评论 -
js 判断数组中对象是否存在某个值,应用到some()方法
js 判断数组中对象是否存在某个值,应用到some()方法原创 2022-08-31 11:43:47 · 411 阅读 · 0 评论 -
element table合计某一列的值
table上加上:summary-method=“getSummaries” ,show-summary<el-table :data="info.inventoryDetailList" style="width: 100%" :summary-method="getSummaries" show-summary></table> getSummaries(param) { const { c.原创 2022-04-29 10:41:28 · 997 阅读 · 0 评论 -
element plus修改CheckBox样式
改为以下样式 :deep(.el-checkbox__inner) { //大小 width: 20px; height: 20px; border-color: #384461; border-radius: 4px; } :deep(.el-checkbox__input.is-checked .el-checkbox__inner) { //选中 border-color: none !important;原创 2021-12-23 15:05:04 · 2387 阅读 · 0 评论 -
vue使用vue-lottie展示JSON格式的图片及相关图片
安装:npm install --save vue-lottie页面引用:import lottie from 'vue-lottie';//注册components: { lottie },页面代码: <lottie :options="defaultOptions" :height="380" :width="200" v-on:animCreated="handleAnimation" />import * as animationData from "@/asset原创 2021-12-08 16:37:15 · 1747 阅读 · 0 评论 -
element table sortable排序的使用以及出现小数、%排序错乱
想实现以下结果:带小数点排序问题只需在表头上加上一个sortable属性即可注意1、当数据中出现小数,导致排序错乱解决方法:需要在el-table-column中添加:sort-method="(a,b)=>{return a.construction_scale - b.construction_scale}"<el-table-column prop="construction_scale" label="建设规模" width="120" :sorta原创 2021-12-01 16:24:35 · 2279 阅读 · 0 评论 -
vue+element上传多组文件
要实现如图效果,只说上传文件。<el-upload action="" :before-upload="(file) => {return handleChange(file, index);}"> //这里是要带着当前的索引,返回一个参数就可以 <span v-if="fileList.length == 0">点击上传</span> <span v-for="(i, idx) in fileList" v-if="index == idx"&.原创 2021-08-23 15:34:43 · 320 阅读 · 0 评论 -
vue中页面跳转拦截器的实现方法
登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)/* Layout */import Layout from '@/layout'// 一种是通用页面路由 constantRoutes原创 2021-08-19 10:03:56 · 2899 阅读 · 0 评论 -
在vue+element中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
element中使用时间选择器的时候设置时分秒会报错,所以自己写了一个方法<el-date-picker v-model="ruleForm.signing_date" type="datetime" placeholder="签约时间" ></el-date-picker>在methods中写一个方法↓//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化dateFormat:function(time) { var date=new原创 2021-06-29 16:01:00 · 1209 阅读 · 0 评论 -
elementui 2.13.2修改el-dialog样式
<el-dialog customClass="customWidth"> 11 </el-dialog>1、为el-dialog添加customClass,2、不能直接在< style scoped=“scoped” lang=“scss”>< /style>里修改,是无效的,应增加< style>标签再写样式。...原创 2021-06-17 16:19:09 · 933 阅读 · 0 评论 -
vue运行 /sockjs-node/info?t= 解决方案
首先 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。如果你的项目没有用到 sockjs,vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口:http://localhost:8080/sockjs-node/info?t=14621837000021、找到/node_modules/sockjs-client/dist/sockjs.js2.找到代码的原创 2021-06-17 15:04:51 · 1393 阅读 · 0 评论 -
vue向后台返回的数据添加图片
后台返回的数据:{ "code":1000, "msg":"查询成功", "data":{ "list":[ { "id":"1", "name":"招标公告" }, { "id":"6", "name":"询价公告" },原创 2021-06-09 10:40:54 · 606 阅读 · 0 评论 -
vue事件
1、stop 在click后面加一个 .stop, 冒泡到了这里就结束了,就不会冒到上级 @click.stop="doc"2、.prevent @click.prevent="doc"提交事件不再重载页面3、.capture 在当前事件上加@click.capture="doc",会让其优先捕捉事件,优先级高于子事件。4、.self @click.self="doc" 只有点击自己,才会导致事件发生5、.once @click.once="doc" 事件只能点击一次...原创 2021-05-31 13:50:37 · 106 阅读 · 0 评论 -
Vue IE9不支持input的placeholder属性
安装ie-placeholdernpm install --save ie-placeholdermain.js引入import 'ie-placeholder'原创 2021-03-22 11:28:08 · 184 阅读 · 2 评论 -
IE9,iview的日期组件无法选择
兼容dataset,ie10及以下不支持dataset,而iview的transfer-dom.js使用了这个属性方法一:安装element-datasetyarn add element-dataset //yarn安装npm install --save element-dataset //npm安装在main.js中添加import ElementDataset from 'element-dataset'ElementDataset()方法二在main.js中添转载 2021-03-19 11:37:20 · 142 阅读 · 0 评论 -
JS判断是否为空对象
1、ES6中可以使用Object.keys(obj)var data = {};var arr = Object.keys(data);console.log(arr.length == 0); //true 为空, false 不为空2、将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");console.log(b); //true 为空, false 不为空..原创 2021-03-04 10:18:58 · 134 阅读 · 1 评论 -
Vue a标签在新窗口打开路由
<a @click="isService()">我已阅读并同意《用户协议》</a> isService() { let routeData = this.$router.resolve({ name: "AffiliatedPrivacy" }); window.open(routeData.href, "_blank"); },原创 2021-02-20 11:47:21 · 1276 阅读 · 0 评论 -
Vue Router 中‘ this.$router.push ‘跳转页面不刷新的问题
在写vue项目 路由跳转时, 肯定遇到过 路由跳转到新页面后 通过接口查询得到的后台数据, 这时候再返回上一个页面再点击路由跳转的时候会发现 新页面通过接口查询的数据没有了。这是因为再你第二次点击路由跳转的时候,你的初始函数方法mounted没有执行。解决办法有两种:第一种:将mounted函数 替换成activated函数。第二种:通过路由监听的方法watch()。将mounted下的方法函数放到watch路由下(用户体验不好)...原创 2021-01-28 11:44:43 · 5083 阅读 · 0 评论 -
在vue中使用axios发送post请求,参数方式
在vue中使用axios发送post请求,参数方式在传参数前,将原先官方提供的格式改为如下:参数:let params = { money: this.val};axios({ url: 'http://xxx/pay.php', method: 'post',data: { money: params},//这一步还是不太明白,希望哪位大佬可以解答一下transformRequest: [ function(data) { var oMyForm = new For转载 2021-01-21 15:09:35 · 3033 阅读 · 0 评论 -
使用iframe标签来显示后台返回的内容
HTML标签<iframe id="iframe" frameborder="0" // 0不显示边框,1显示边框 scrolling="no" //关闭滑动>></iframe>JS代码中infoLawContent({ id: this.id }).then(res => { if (res.code == "1000") { this.info = res.data[0]; var iframe = document.原创 2021-01-11 17:26:43 · 2086 阅读 · 0 评论 -
vue修改浏览器小图标
把图片保存在 static 目录下,命名结束以 .ico结尾原创 2020-12-24 10:39:33 · 1442 阅读 · 3 评论 -
vue循环遍历本地图片显示不了的处理方法
解决方法:使用require请求图片 scope: [ { title: "1", img: require("@/assets/img/icon@1.png"), desc: "11", }, { title: "22", img: require("@/assets/img/icon@2.png"), desc:原创 2020-11-27 16:56:07 · 698 阅读 · 1 评论 -
Vue获取验证码 倒计时
一分钟 倒计时<template> <div> <button v-if="show" @click="getCode">获取验证码</button> <button v-if="!show">{{ times }}s</button> </div></template><script>export default { data() { return {原创 2020-11-13 17:18:46 · 151 阅读 · 0 评论 -
vue封装axios请求
封装axios在项目src目录下新建utils文件夹,然后在其中新建 request.js文件,这个文件是主要书写axios的封装过程。import axios from 'axios'; // 引入axios 安装方法:npm i axios -Simport qs from 'qs'; // 引入qs模块 安装方法:npm install qs --saveimport router from "@/router"; //引入路由// 设置超时时间axios.def原创 2020-10-26 14:50:44 · 330 阅读 · 0 评论 -
[问题记录]报错:npm ERR! missing script: serve
报错:npm ERR! missing script: serve在VSCode Terminal运行npm run serve报错改为npm run dev成功!!转载 2020-09-16 14:24:46 · 1093 阅读 · 0 评论 -
vue 使用浏览器自带打印机打印功能
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。引入安装vue-print.jscnpm i vue-printjs --save-dev解决打印多页只出现一页问题由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装下载 print.jshttps://github.com/zxc19890923/print/b原创 2020-08-19 11:30:39 · 3386 阅读 · 12 评论 -
Vue -- 通过 template 控制表格某一列根据状态不同显示的文字不同
<el-table-column label="状态"> <template slot-scope="scope"> <span v-if="scope.row.status == 'init' ">已预约</span> <span v-if="scope.row.status == 'arrival' ">已预约</span> <span v-if="s原创 2020-08-17 11:55:22 · 2040 阅读 · 0 评论 -
基于vue-cli、elementUI的Vue超简单入门小例子
这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子。开始写例子之前,先对环境...转载 2020-05-18 11:44:15 · 117 阅读 · 0 评论