- 博客(45)
- 收藏
- 关注
原创 vue 封装的axios接口,请求接口动态增加headers&responseType
【代码】vue 封装的axios接口,请求接口动态增加headers&responseType。
2023-03-23 11:55:22
4571
原创 vue js字符串 转base64
//字符串转base64function encode(str){// 对字符串进行编码var encode = encodeURI(str);// 对编码的字符串转化base64var base64 = btoa(encode); //这一行就可以字符串转base64了return base64;} // base64转字符串function decode(base64){// 对base64转编码var decode = atob(base64); //这一行就可以base6
2022-03-10 09:19:27
3958
原创 vue forEach和map的区别
记录工作中遇到的问题,选择右边数组一项进行删除,forEach和map的区别就出来了1.刚开始是foreach写的,效果没出来 this.rightTree:表示右边的数组 this.oriFatherId.id:选中一个的id this.rightTree.forEach((i)=>{ console.log(i.id); console.log(this.oriFatherId.id); if(i.id == this.o
2022-03-08 17:08:44
1441
原创 Element ui tree树形控件获取当前节点id和父节点id
方法一:直接在el-tree单击时获取当前节点node,会接收三种参数,分别是当前data节点数据,node当前节点,root根节点数据,我们获取当前node节点即可,通过node.parent可获取父节点数据,祖先级可一层层遍历上去node.parent.parent获取。let oriFatherId = node.parent.parent.data // 祖父节点信息 let fatherId = node.parent.data // 父节点信息方法二:可通过单击获取当前节点id
2022-03-04 15:55:27
10419
原创 vue 路由跳转静态页面跳vue页面
1.静态页面跳vue页面window.open("/#/murelease", "_self"); 或者 window.location.href="/#/murelease"2.要多加一个/#才能跳过去
2022-03-03 10:21:12
1172
原创 vue identify--验证码插件
identifyidentify是vue的一个插件,使用canvas来生成图形验证码,使用起来非常方便,拿过来然后再注册使用就可以。首先看一下效果1.引入方法:在main.js里添加 import SIdentify from './views/login/components/identify' //注意引入路径 Vue.use(SIdentify)2.创建identify.vue文件<template> <div class="s-canvas">
2022-01-14 15:21:20
2007
1
原创 vue scope 插槽用法
1.插槽 scope表格中使用插槽 <template scope="scope"> <span v-if="scope.row.inp_mc == 1">{{scope.row.date}}</span> <el-input v-else v-model="scope.row.date" @keyup.enter.native="searchAllCompany(scope.row)" placeholder="请输入内
2021-12-16 16:25:21
563
原创 模仿百度网盘的全屏拖拽上传文件dragenter拖入和dragleave拖出和enentDrop拖拽松开鼠标问题解决
1.》就是在用户把文件拖住到我们的编辑器时,编辑器样式上需要做出反应,让用户知道拖拽已经进入有效范围,不就是监听一个dragenter和dragleave事件的问题么1.1》结果写完发现拖拽的时候的改变一直闪动,触发的dragenter事件中总是夹着dragleave1.2》原因是,鼠标进入事件监听的子元素的时候,会先触发dragleave事件1.3》原理:当鼠标进入父元素时,添加类名,在此类名下重写它的所有子元素样式,全部添加穿透属性当鼠标离开时,移除类名。我们要想实现一个简单的拖拽文件上传,只
2021-12-16 16:12:49
1140
原创 vue非父子组件之间的传值 eventbus的应用
1.创建一个global-bus.js文件 相当于呼叫中心,文件里边这么写 // 全局呼叫总线 // 呼叫中心 // 作用:任何组件之间相互通信 import Vue from "vue" export default new Vue()2.假设修改头像a组件改完要把这个值给b组件传过去a组件发布通信事件这么写import globalBus from "../../assets/js/pass/global-bus";//第一个参数为事件名和b组件一致就行,第二个参数为要传的参数 g
2021-12-01 16:36:33
729
原创 vue 子传父 (父组件拿子组件的值)
1.父组件拿子组件的值2.通过ref获取子组件的值,父组件写点击事件,子组件ref起个名字3.通过 this.$refs.blindsamplData.form 拿到子组件data.form表单里的值4.yyds
2021-09-27 10:28:47
187
原创 vue 点击锚点后手动刷新页面,显示空白
1、a标签锚点链接后,手动刷新页面显示空白 <li v-for="(item, index) in listTow2" :key="index" :class="{ current: index == isActive2 }" @click="check(index)" > <div class="yinying">
2021-09-13 16:55:23
1275
2
原创 vue elementUI表格 el-table-column
在使用element-ui的表格时,有时候后台给你的字段和你要显示在表格列里的内容不一致。例如后台给的字段是testType,它的值为01或02,要求显示在表格里是‘鉴定试验’或‘型式试验’这时可以给el-table-column添加一个属性:formatter,代码如下:<el-table ref="accountTable" :data="accountsListData" border> <el-table-column property="testType" labe
2021-08-29 15:23:22
3547
2
原创 vue+elementui中的el-table中拼接接口返回的两个字段的数据并展示
1.遇到个问题就是其中有个 要展示的数据来自接口返回的两个字段
2021-08-27 19:19:38
2049
2
原创 vue 封装axios
1.首先配置vue.config.jsvue.config.js module.exports = { lintOnSave: false, //如果为false,就是取消eslint规则的检查 devServer: { overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, hot: true, host:
2021-08-20 17:01:32
356
原创 2021-07-14 vue 文件或图片上传发给后台前台渲染
1.文件上传发给后台HTML代码 <el-upload class="upload-demo" action="#" :on-preview="handlePreview" :on-remove="handleRemove" :on-exceed="handleExceed" :http-request="http_request" multiple > <el-button size="small" type="primary"&
2021-08-13 16:11:48
268
原创 2021-07-07 vue获取地址栏的参数
vue获取地址栏的参数1. 用this.$route console.log(this.$route.query.id); console.log(this.$route.query.type);
2021-07-07 19:53:14
520
原创 vue解决element-ui popover弹出框点击取消时 popover的显示与隐藏问题
1.解决办法如下在el-popover中加属性 :ref="popover-${scope.$index}"取消el-button按钮加 @click="scope._self.$refs[popover-${scope.$index}].doClose()"2.具体代码如下<template slot-scope="scope"> <div class="operation"> <el-popover trigger="click" :ref="`
2021-07-05 17:06:50
3846
1
原创 2021-06-02 vue中使用vueX
vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。一、适合初学者使用,保存数据以及获取数据1、在store文件夹,新建个index.js文件(命名看个人习惯,如果没有该文件夹,可以新建一个,当然也可以不建文件夹,直接新建个js文件也是可以的)在新建的js文件中写入如下代码: import Vue from "vue
2021-06-10 10:41:37
137
原创 2021-05-28 vue使用filter过滤数组
在不使用计算属性的情况下,可以使用filter方法对数组进行过滤例如this.teachers = this.teachers.filter(function (teacher) { return !(teacher === ''); });return的结果是一个布尔值,根据自己的实际情况设定条件即可!上述代码将teachers数组中的空值全部过滤掉了,但是filter并不会改变原有数组以及排序,因此如果需要反复使用过滤后的数组,需要将过滤后的返回值重新赋值给一个新的变量!过滤掉了 数组中每
2021-05-28 13:06:17
6267
原创 vue 往数组中push对象
vue 往数组中push对象在使用vue框架开发时,遇到一个数组push一条对象而导致之前push进去的对象也变成后面进去对象的值。后来发现是因为push对象时,指针一直指向的是之前输入框绑定的对象地址,所以输入框下次输入时值改变,数组内的值也就变了。 remark_formInline: { name: '', type: 'IT反馈', creator: 'admin', time: '' , account:'' }this.remark_dat
2021-05-26 11:30:07
16414
1
原创 vue上传文件+下载
vue上传文件+下载1.用elementui里的组件 HTML <el-upload class="upload-demo" action="/upload/LABFILE/PORTAL/PortalAnnexFile" :on-preview="handlePreview" :http-request="http_request"
2021-05-24 17:29:11
199
原创 vue 自定义上传图片
vue自定义上传图片1.用elementUI 里的el-upload上传 <div class="businesster"> <el-form-item label="封面图片" prop="headImg"> <div class="businesster_ying"> <el-upload class="avatar-uploader" a
2021-05-19 13:25:14
975
原创 vue 万能回车查询事件
万能回车查询事件 created() { // 回车事件 var _self = this; document.onkeydown = function (e) { if (window.event == undefined) { var key = e.keyCode; } else { var key = window.event.keyCode; } if (key == 13
2021-05-13 17:27:41
267
原创 vue 子组件访问父组件的方法
vue 子组件访问父组件的方法1. 父页面 定义一个@close 方法 <Noticetwo v-show="onshow" @close="showUserInfo"></Noticetwo> showUserInfo(){ this.isshow = true, this.onshow = false },2.子页面 通过$emit 来调用父组件的方法 <el-button @click="
2021-04-29 15:05:33
247
原创 vue动态绑定class
vue v-for循环 动态绑定class1.在el-ment-item标签里写<el-menu-item @click="check2(index)" :index="item.luyou" :class="{on: index == isActive}" v-for="(item,index) in listTow" :key="index"
2021-04-25 14:58:38
179
原创 vue-Cropper 重复上传同一张照片没反应问题
vue-Cropper 重复上传同一张照片没反应问题因为项目要求要使用vue-Cropper裁剪图片总结一下1.但是发现…如果两次选择同一张图片就出不来东西然后看其他人的博客就是"> <img src="../ass
2021-04-07 09:19:37
219
2
原创 echarts使用
echarts 的使用1.引入echarts 或安装echarts<script src="echarts.min.js"></script> 2.div起个ID名<body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400px;"></div></body>3.在mount
2021-04-06 16:20:51
126
原创 vue导出Excel
vue导出Excel表格全局函数(简洁明了)vue导出excel全局函数(简洁明了)将导出到Excel功能封装成一个公用js函数,供其他vue页面复用。1.安装Excel插件npm install --save xlsx file-saver2.编写公用js函数htmlToExcel.js 代码如下:import FileSaver from 'file-saver';import XLSX from 'xlsx';export default { // 导出Excel表格
2021-04-02 16:22:19
235
原创 vue导出word 文档
vue导出word 文档安装 jquery main全局导入jQuery在这里给出jquery.wordexport.js源码 封装成组件如果报错就写方法里边if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn.wordExport = function (fileName) { fileName = typ
2021-04-01 18:14:21
342
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人