- 博客(88)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 给循环数组里的每个对象做表单校验
需求是需要对下面循环产生的数组中的每行身份证和电话号码做校验规则和单表单对象校验不同的是prop而已。单对象表单prop是写死的。当数组中的对象校验时，数组外层用el-form包裹，里面循环产生的对象prop要用动态拼接的方式，如：:prop="‘peersList.’ + index +’.idcard’"。<el-form :model="ruleForm" ref="peerForm" class="peersList" > <el-row v-for="(row,in
2020-07-23 15:24:25
1469
1
原创 git指令的使用
一、无他人提交或者有他人提交但无页面冲突的情况下：git add .git commit -m ‘注释’git pullgit push二、有他人提交且有页面冲突的情况下：git add .git commit -m ‘test’git push出现如下报错：且界面提示选择保留那张哪种：选择后git push即可，如还有其实冲突按提示操作。三、或者你可以先git fetch 再git merge然后再git add .如果有提示说你有uncommit change的话就按第一种
2020-07-15 16:00:25
375
原创 获取今天日期，年月日格式2020-01-01
获取今天日期，年月日格式getMonthDate() { var date = new Date(); //Wed Jul 15 2020 09:58:54 GMT+0800 (中国标准时间) var year = date.getFullYear() + ""; //2020 var month = (date.getMonth() + 1) + ""; //7 if(month.length<2){
2020-07-15 10:07:24
1794
原创 el-tree组件说明汇总，实现过滤筛选、添加、编辑、删除、选中节点功能等
使用el-aside和el-main布局，实现el-tree和el-form相结合的左树右表结构。表单参照Form 表单使用，下面主要说明el-tree的常见使用方法：<el-aside> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-button type="primary" icon="el-icon-plus" size="small" @click="
2020-07-08 09:29:40
5094
2
原创 点击文件实现WPS工具预览功能
页面如图：需要点击对应文件名弹窗WPS文件预览页面，效果如下：一、首先在组件文件夹中建立如下文件api.js文件如下：需与后端联调import request from '@/router/axios'// 一键生成export const hybgxxJsbg = (query) => { return request({ url: '/swbj/hybgxx/jsbg', method: 'post', data: query })}
2020-07-02 17:41:40
5323
3
原创 el-upload组件说明汇总，实现上传、点击下载、删除功能等
<el-upload class="upload-demo" action="/admin/sys-file/upload" //文件上传路径 :headers="headers" //请求头配置信息 :file-list="fileList" //上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] :limit="5" /
2020-07-02 11:14:52
4831
1
原创 判断两个区间有无交集
有两个区间A[a1，b1]， B[a2，b2]，判断这两个区间有没有交集思路就是如果两个区间不相交，那么最大的开始端一定大于最小的结束端if(max(a1, a2) < min(b1, b2)){ return "有交集"}else{ return "无交集"}...
2020-06-30 14:33:53
4197
3
原创 css 文本超出2行就隐藏并且显示省略号
首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？css3解决了这个问题，解决方法如下：display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排
2020-06-11 14:28:17
668
原创 vue中图片路径以变量形式require传入
data() { return { zwtpImg:require('../../../public/img/zwtp.png') } }
2020-06-02 15:14:13
4835
原创 el-input-number步长设置后，手输和显示不一致问题
el-input-number有个坑，设置步长20后，输入44显示40，但是v-model拿到的值却是44，导致传给后台的数据是错的！如何解决？<el-input-number v-model="info.cartNum" :step="info.qtyctn" :min="1" :max="9999" @change="changeCartNum(info)"></el-input-number>changeCartNum(info) { const para
2020-05-30 11:48:50
1473
原创 vue中watch的用法
需求：输入框有内容时，按钮启用，没内容时按钮禁用<el-input v-model="content"></el-input><el-button :disabled="addOrSaveCommentShow" type="primary" @click="addOrSaveComment">发 表</el-button>data() { return { addOrSaveCommentShow:true,
2020-05-25 09:45:39
300
原创 上传【身份证】识别信息自动填充组件
效果如下图：<template> <div > <el-form :model="form" label-width="160px"> <el-row> <el-col :span="12"> <el-form-item label="身份证号:" style="margin-bottom: 15px !important;"> <el-inp
2020-05-23 11:23:10
1050
原创 element-ui的滚动条组件el-scrollbar（官方没有）
可直接使用<el-scrollbar></el-scrollbar>组件，将需要滚动的内容包在里面。注意要设置el-scrollbar及他外层的高度，以及组件里.el-scrollbar__wrap{overflow-x: hidden;}<template> <div > <el-drawer title="查看预览" :visible.sync="DialogShow" direction="rtl" size="80%" >
2020-05-23 10:55:33
614
原创 el-date-picker禁用日期以及日期获取的方法
<el-date-picker v-model="cdeliveryDate" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" align="right" type="d
2020-05-19 15:32:44
1688
原创 计算过去的某天距离今天多少天
var today=new Date(); //今天 for(var i=0;i<this.tableData.length;i++){ var date=new Date(this.tableData[i].replyTime); //过去的某天 var d=Math.floor((today-date)/1000) //相差的秒数 this.$set(this.tableData[i],'days'...
2020-05-19 10:30:17
2397
原创 vue点击按钮或者router-link带参数跳转新页面
一、通过router-link跳转新页面<router-link tag="a" target="_blank" :to="{path:'/editReport' ,query:{ids: '', bgnr: 'lsfw-'+scope.row.fileUrl.split('lsfw/')[1]}}"> 打开wps文档</router-link>target="_blank"是通过新的页面打开path:’/editReport’ 是指跳转到路由配置的这个页面
2020-05-15 10:18:25
2689
原创 前端vue实现全屏和按esc退出全屏功能
function openBig () { # 想要全屏展示的模块包含class名content var elem = document.querySelector('.content'); requestFullScreen(elem);};function requestFullScreen (elem) { #兼容不同的浏览器 var requestMethod = elem.requestFullScreen || elem.webkitRequestFullScree
2020-05-13 09:30:43
3484
原创 div九宫格图片布局
以前我都会用display:flex弹性布局的方式来写，今天学会了一种新写法，不浮动，也不弹性的方式，用div的方式实现。给div设置固定宽度，并带上右外边距。然后用style对index第4个（一排放4个的话index % 4 === 3 ）的margin-right:0px<div style="width: 100%;min-height: 800px;margin-top: 6...
2020-05-07 10:38:49
1957
原创 avue框架将左侧菜单栏换为顶置菜单栏
avue默认的左侧边栏如下：修改为顶置菜单栏效果如下：如何实现的？一、先注释左侧边栏的部分二、新建一个子组件topMenuList<template> <div> <div style="display: flex;height: 60px;align-items: center;background-color:transparent;...
2020-04-30 17:12:21
3149
1
原创 鼠标移入移出给图片加蒙层
可用a标签实现，鼠标移入图片，添加蒙层在img里写一个a标签，里面放蒙层div ，class=“mask”重点是要对图片img设置position: relative;作为蒙层的定位父级原始。蒙层 .mask设置定位和背景透明度： position: absolute; top: 0; left: 0;background: rgba(0, 0, 0, 0.5); ...
2020-04-30 17:00:49
746
原创 html2canvas截屏后，对图片裁剪、标注
html2canvas实现自动截屏效果如下：具体如何实现可以看之前我写的文档，https://blog.csdn.net/weixin_44770377/article/details/104292784(https://blog.csdn.net/weixin_44770377/article/details/104292784)==============================...
2020-04-30 16:48:37
1517
原创 监听鼠标按下事件
document.onmousedown=function(event){ var obj = event.target var endCB=function (e) { console.log(e,'jietu') } if(obj.id=='feedback'){ var ks=new kscreenshot({ key: 65,//65指键盘中的...
2020-04-28 18:06:30
1712
原创 pre使用
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。< pre > 标签的一个常见应用就是用来表示计算机的源代码。如下图效果：<pre class="addclass-4" v-html="brandArray[brandCheck]['brandStory']"></pre>.ad...
2020-04-24 15:09:15
607
原创 用下标的方式遍历对象
var count=0,newrow={}，obj={} for(var key in row){ obj[key]=row[key] } for(var key in obj){ ...
2020-04-14 13:32:38
1307
原创 清空对象值无效，界面不刷新
如图，点击清空对象设置为{}，但是界面不渲染。方法一、强制渲染指令this.searchForm = {}this.$forceUpdate();方法二、用this.$set的赋值方法//this.searchForm.isNew=1this.$set(this.searchForm ,'isNew',1)方法三、遍历对象，对属性赋值为空// this.searchForm=...
2020-04-13 14:27:38
539
原创 获取img对象的高度宽度像素
var img=new Image();img.src="图片路径";然后调用img.widthimg.height
2020-04-07 18:19:28
399
原创 element用el-dialog实现查看图片的大小和原图尺寸一样
我会弹出一个dialog 里面是轮播图片,让这个dialog的宽度长度根据图片的变化而变化,让图片百分百的展示出来。由于dialog的高度是自适应的，只要获取图片宽度赋值给dialog就能实现<el-dialog append-to-body :visible.sync="visible" :width="width"> <img :src="src...
2020-04-07 17:17:08
2738
1
原创 el-upload上传和显示功能汇总
一、上传文件附件（可上传多个文件，需一个一个点开选择后上传）<el-upload class="upload-demo" :headers="headers" action="/admin/sys-file/upload" :on-preview="receipt...
2020-04-07 15:39:13
2527
原创 下拉框有值但是不显示值
查看信息时，明明有值传入，可是下拉框的数据不会自动带出。如图：情况有很多种：1、值类型不对可能后台放回的数字是字符串类型的，需要转换this.firstform["cateId"]=parseInt(this.firstform["cateId"])2、请求滞后下拉框的请求代码虽在前面，赋值在后。但是由于是异步的，所以导致赋值在前请求滞后若果多个请求同时进行，可以用嵌套的方式...
2020-04-01 16:34:37
4670
原创 el-upload multiple多文件上传，只传上一个的问题
问题： 使用el-upload设置了multiple上传多文件时，但是on-success钩子只拿到了一个response，上传其实只成功上传了一个。解决：使用:http-requst来覆盖默认的上传行为，可以自定义上传的实现。代码：<el-upload :headers="headers" action="/admin/sys-file/upload" ...
2020-03-31 18:13:29
3316
1
原创 avue弹窗设置为卡片样式
avue弹窗设置为卡片样式，效果如下：在js文件中设置属性card：true即可使分组达到card的阴影样式但是搜索栏会连带阴影样式。只能人工去除
2020-03-20 18:20:39
3103
原创 给对象赋值但是界面不显示this.$set
目前设计上传完图片后再附件名称处显示出文件名。但是一直文件名显示不出来，强制刷新页面也没用。尝试输出这个表格数组，发现对象里的这个属性和其他不一样。其他属性值是(…)，隐藏的，但是这个字段是直接""这样的！后来尝试用this.$set的赋值方式距离解决了for(var x=0;x<this.upData.length;x++){ this.$set(this.upDa...
2020-03-20 13:49:15
718
原创 n个数组实现排列组合
命题场景：现在有一批手机，其中颜色有［‘白色’,‘黑色’,‘金色’］；内存大小有［‘16G’,‘32G’,‘64G’］，版本有［‘移动’,‘联通’,‘电信’］，要求写一个算法，实现［［‘白色’,‘16G’,‘移动’］, [‘白色’,‘16G’,‘联通’] …］这样的组合//数组排列组合方法 doExchange(arr){ var len = arr...
2020-03-18 18:14:42
2629
1
原创 项目中上传图片使用的图片素材库组件
在components文件中新建一个子组件，文件的所有代码如下：<template> <div v-if="type == 'image'"> <!--图片列表，value是完整url数组--> <ul class="el-upload-list el-upload-list--picture-card" v-for="(item,i...
2020-03-13 17:48:55
466
原创 mavonEditor富文本存储md文件以及md文件解析成html文件
演示详见链接添加链接描述一、安装npm install mavon-editor --save二、在main.js中全局注册//富文本import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)三、vue中使用<mavon-edit...
2020-03-13 17:38:19
804
原创 elementUI的el-pagination分页
<el-pagination :current-page="pagination.currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" ...
2020-03-11 15:20:37
1385
1
原创 选择框的change事件执行两次
<avue-input v-model="newbusinessname" @change="changeBusinessname" type="tree" :dic="businessnameList"/>data() { return { a:'', newbusinessname:''...
2020-03-09 16:26:01
3019
3
原创 JS阻止冒泡和取消默认事件(默认行为)
当需要停止冒泡行为时，@clock.stop=change又用不了的情况下，可以使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;
2020-03-06 15:43:01
104
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人