- 博客(23)
- 收藏
- 关注
RSS订阅原创 2021-07-14
el-table组件在flex元素的包裹下，出现表格项宽度无限变宽问题在开发vue项目时，出现父元素使用了flex布局，嵌套 el-table组件的时候。在客户的电脑出现表格项宽度无限延长问题。如下截图：正常显示界面如下图:解决问题只需在包裹元素上，添加样式代码 overflow:hidden即可解决问题。如下代码： <el-row style="display:flex;overflow: hidden;"> <el-table class="tablehe
2021-07-14 15:24:37
182
原创 2021-07-14
vue项目实现表格文字溢出和文字提示我这里采用的是饿了么团队，开发的element-ui组件库正常情况下只是单元素的时候，只需要在el-table-column组件中添加属性show-overflow-tooltip就可实现，如下代码：<el-table-column label="商品名称" width="200" align="center" show-overflow-tooltip prop='itemName'>&
2021-07-14 11:50:41
135
原创 使用正则，将数字或文本。部分内容用**代替显示
文本内容的替换 let text = "杭州市6688公司" let transforms = text.replace(/(?<=市)(\S*)(?=公)/, "****") console.log(transforms); // 结果：杭州市****公司手机号中间四位被替换let mobile = " 13563210000 ";let regmobile = /^(\d{3})\d{4}(\d{4})$/;let replaceResult = mobile.trim(
2020-10-10 14:17:35
354
原创 vue项目下载zip压缩包代码
首先客户有个需求，需要将文件压缩一下，下载后端返回我一个编码的base64的字符串接下来是前段进行处理的代码，如下：**首先第一步封装一个处理方法**function basecodeBlob(base64Data,contentType){ let decodebase64 = window.atob(base64Data) let cacheData = new ArrayBuffer(decodebase64.length) // 缓存区数据 如下图：ArrayBuffer()方法
2020-08-27 10:39:18
2378
原创 vue实现文档导出功能
vue实现文档导出下载的功能，后端返回文档流数据，前端将这个文档流利用Bolb技术来处理下载’ **第一步调用接口，我这里是将接口封装调用的** **responseType: `arraybuffer` //响应类型一定要写 ** this.$http.rules.exportTemplate( {responseType: `arraybuffer`}).then(res=>{ console.log(res) // 可以输出一下，看一下后台返回的结果数据 if
2020-08-14 10:35:40
473
原创 vscode编辑器 vue文件自动保存，格式符合校验eslint插件
下载上述插件在vscode编辑器的工具栏中找到 文件->首选项->设置settings.json文件代码如下：{ "editor.mouseWheelZoom": true, //按 ctrl 键是代码字体缩放 "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue..
2020-08-12 13:46:04
600
原创 手机号和身份证号加星号显示
身份证号如下代码： <template slot-scope='scope'> {{ scope.row.idcard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2") }} </template> 手机号如下代码： <template slot-scope='scope'> {{ scope.row.phone.replace(/^(.{3}).*(.{4})$/, '$1****$2') }.
2020-08-12 10:43:57
962
原创 elementui中插件el-tree点击选中背景色的自定义
<el-aside> <el-tree :highlight-current='true' default-expand-all :expand-on-click-node="false" :data="tableDatas" :props="defaultProp" @node-click="handleNodeClick">...
2020-08-11 17:13:34
2777
原创 uni-app框架写的类似于六位验证码组件
效果图是这样的(如下图): validCode.vue文件代码如下： <!-- 自定义验证码输入、密码输入使用 使用方法：maxlength：输入最大长度isPwd：是否是密码模式@finish：回调函数 <validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode> --><template> <view class="code-area">
2020-08-11 16:58:27
617
8
翻译 HTML和CSS3写的switch插件
原开发者为：Coder 小何 提供非常感谢 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>switch(开关)</title> </he
2020-08-11 16:36:51
220
原创 关于VUE项目根据后台返回的手机号和身份证号做正则校验
首先将后端返回的数据取到我的后端数据是通过事件去回调得到的 // 触发****按钮 handleEntry (type, item, title) { //将获取到手机号和身份证号数据赋值给变量方便后续使用 const a = item.mcPartyPerson.idcard const b = item.mcPartyPerson.phone // 手机号正则表达式 var regphone = /(^1\d{10}$)|(^[0-
2020-06-24 15:17:16
560
原创 vue项目实现用户扫二维码实现支付功能
首先第一步是需要在命令行里面下载安装一个生成二维码的插件qrcodejs2,代码如下:npm install qrcodejs2 -S第二步封装一个组件:模板如下代码:<!-- 微信二维码 --><template><div class=''> <el-dialog title="微信扫码支付" :visible.sync="dialogData.dialogVisible" width="20%"
2020-06-19 15:50:40
4963
2
原创 vue项目支付宝支付功能
第一步需要在vue模板里写一个div标签,如下代码:<div v-html="content"></div>指令 v-html可以显示并接受后台返回的HTML代码片段在数据定义一个content的属性,方便向后端请求接口数据时将需要的值赋值给content属性,如下图:后端返回的form数据格式如下代码:<form name="punchout_form" method="post" action="https://openapi.alipay.co
2020-06-19 15:35:44
1481
2
原创 VsCode编辑器设置自动保存
VsCode编辑器设置自动保存,便于修改代码后文件在发生改变后进行保存,便于vue项目的热加载vscode编辑器工具栏找到 文件->首选项->设置会出现下面图片中的弹框...
2020-04-27 11:25:46
756
原创 自动上传图片功能
自动上传图片功能利用bootstrap框架的插件(fileinput)使用第一步:<link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" /><script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></sc...
2020-03-26 13:54:18
541
1
转载 前端使用(ThymeleafJava模板引擎)来写下拉框联动效果
前端使用的bootstrap框架和一些插件组合,利用ThymeleafJava模板引擎来渲染HTMl代码<div class="form-group"> <label class="col-sm-2 control-label"><span style="color: red">*</span>抽检单位：</...
2020-03-05 16:45:15
1451
5
原创 关于echarts柱状图动态数据渲染
前端柱状图动态数据渲染HTML代码 <div class="col-sm-6 select-table table-striped table-bordered"> <div id="echarts" style="width:820px;height: 540px;"></div> </div&g...
2020-01-08 15:15:37
2048
原创 关于echarts饼状图动态数据渲染
第一步在html结构里面写一个dom元素**HTML代码** <div class="col-sm-6 select-table table-striped table-bordered"> <div id="echarts" style="width:820px;height: 540px;"></div> //这行...
2020-01-08 14:39:04
2442
4
原创 js常见的日期格式
日期常见格式:年-月-日-星期**/**日期时间*/ var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; var localtoday = ''; var date = new Date(); localtoday = date.getFullYear()+"年"+ (date.getMonth() + 1)+"月"+d...
2020-01-08 14:21:00
664
1
原创 git命令行经常用的命令
git命令行经常用的命令克隆远程仓库到本地：git clone https://git.coding.net/xiaolei69/station.git进入文件夹：cd 文件夹名添加文件：git add *查看状态：git status标记：git commit -m “标记” 报错 run上传：git push...
2020-01-08 12:03:49
99
原创 wamp软件修改默认地址的操作步骤
wamp软件修改默认地址的操作步骤wamp更改路径步骤：1.在C盘中打开C:\Windows\System32\drivers\etc 找到hosts文件以记事本方式打开在里面手动输入端口号127.0.0.1 www.zzk.com2.在C:\wamp64\bin\apache\apache2.4.37\conf 有一个httpd.conf文件以记事本方式打开搜索Include conf/e...
2020-01-08 12:01:01
413
原创 关于下拉框回填选中效果,用java模板引擎(thymeleaf)
关于下拉框选中效果,用java模板引擎(thymeleaf)本人是一名前端,之前没用过thymeleaf,问了一下后端人员他说他也不清楚,我只好通过百度来看别人的分享的代码来进行书写,今天主要是分享一个前端最常用的在编辑中select选中效果的使用代码如下:<select name="smallTypeId" id="" class="form-control"> ...
2020-01-07 19:12:08
215
原创 关于组合框(可选可输入)的心得
关于组合框(可选可输入)的使用心得问题是这样的用户需求要可选可输入的input框,通过判断输入为新的项目(id为空,新的项目名称),而选择则为已有的项目(已有id,已有的项目名称).我用的是java模板引擎方式来写前端页面:HTML代码 <label class="col-sm-2 control-label"><span style="co...
2020-01-07 18:58:44
503
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人