- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue table循环嵌套form表单时高频率传值简单处理
随手记：当form表单被组件引用在table循环中并length大于1时，每次点击保存，$emit方法在form的下标0传回时就执行了保存造成报错，特用防抖来解决。防抖防抖本质上就是优化高频率执行代码的一种手段；n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时；可以通过 setTimeout 实现；demo实现<template> <el-button @click="thesubmit">提交</el-button> <el-ta.
2022-02-16 15:44:15
856
原创 vue + element table单选、动态求和功能
随手记：table表格在vue中的单选、单行求和问题。html<el-table :data="tableData" border style="width: 100%">// 单选<el-table-column width="60px" align="center"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.checked" @chang.
2022-02-07 17:53:49
1382
原创 vue + element 自定义table表尾合计行
随手记：table表格引用官网自定义总价功能html 主要用到 show-summary 表尾显示合并行 和 summary-method 自定义计数方法。<el-table :data="tableData" border style="width: 100%" show-summary :summary-method="getSummaries">....</el-table>js 进行自定义方法的定义methods: { getSumm.
2022-02-07 16:28:50
1606
原创 vue element + DatePicker日期限制功能
记录下自定义日期选择器，需求开始时间不超过当前日期并且不大于结束时间，结束时间不小于开始时间。存在两个日期选择器主要使用disabledDate来限制禁用状态<div class="cards"> <div class="header">账户明细</div> <div class="content"> <el-form ref="form" :model="form" label-width="120.
2021-07-27 15:54:16
744
原创 vue+vant实现全选、单选、下拉加载功能
通过 vant 的 Checkbox 来进行列表数据的选择，需求单选、多选、下拉加载、最多选中功能了解：Checkbox 可搭配 CheckboxGroup 进行选中和非选中状态切换使用到的参数 max（最大可选）、@change（当绑定值变化时触发）van-list 无限加载功能未选中按钮置灰，选中按钮可点击触发事件html<template> <div class="advance"> <div class="item-box"> .
2021-06-09 17:13:01
3703
2
原创 vue 封装公共组件--父传子
使用 vant 组件库封装可复用组件，主要展示Dialog 弹出框。此只使用父子传值方法，也可使用 vuex 等。达成目标：父组件点击按钮触发子组件功能（可复用）。需求：1. 可自由传值。2. 需要避免子组件直接更改父组件状态造成报错。思路：因封装组件为弹框，可默认子组件为显示状态，父组件通过 v-if 来判断是否需要显示隐藏，子组件点击事件可通过$emit方法传值给父组件，通过自定义方法来进行显示隐藏等。父组件<template> <submitHint .
2021-05-25 14:18:16
387
原创 深入理解页面布局常用属性 css -- display
display 属性在网页布局中非常常见，是用于控制布局的最重要的 CSS 属性,每个 HTML 元素都有一个默认的 display 值,取决于元素的类型，大部分默认值为 block 或 inline。浏览器支持常用属性值display: none;常用于显示和隐藏属性，而不需要删除和重建。相对于 visibility:hidden；的隐藏属性，隐藏后移除元素不影响页面布局，不占位置。通常搭配javascript 或vue项目中三目运算进行使用display: block;可.
2021-05-13 18:17:37
1973
原创 vue 封装组件--可复用
应项目需求，为避免代码重复，耦合性高，使用 vue + vant UI 来进行公共代码封装。本次封装头部标题区块。目标样式创建目录在src / components / 创建 headTips 文件封装组件html – headTips/index.vue<template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> <.
2021-04-21 16:58:39
655
原创 vue 点击tabs平滑滚动(锚点事件)
避免切换速度过快显得突兀，在不使用 a 标签以及添加 class类 进行锚点操作时，这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。定义scrollTo(xpos,ypos),包含两个必须属性xpos（指定滚动到X轴指定位置）ypos（指定滚动到X轴指定位置）使用：// 滚动到指定位置window.scrollTo(100,500)scrollTo(options)，包含三个必须属性top (y-coord) 相当于y轴指定位置left (x-coord) 相当.
2021-04-19 10:59:35
1182
2
原创 ios 弹框focus事件聚焦不弹出键盘
ios调用input的focus事件，input无反应无键盘弹出，需要用户手动点击才能触发。解决方法在ios中调用不能使用v-if或者v-show事件，css不能display:none; 要保证input一直处于页面中，可以使用z-index调整层级，opacity:0;改变div的透明度来进行，也可以使用定位方法将input定位到用户不可见的位置，触发弹框再将input定位回来显示html<div class="text-center dialog password-panel"&.
2021-04-02 14:41:20
1431
原创 vue 仿日历格式对账单下载功能
本次主要是使用vue+element UI来完成对账单功能的实现，需求是当前时间及之前一天不可点击，大于当前日期置灰不可点击。模板简陋敬请谅解 …先上效果图vue页面布局方便数据渲染<template> <div class="download-box"> <div class="block"> <el-date-picker value-format="yyyy-M" v-model="val.
2021-03-25 14:36:28
290
1
原创 css hover遮罩层效果
运用css方法达到鼠标移入文字消失，图片占满，遮罩层展示。用到了transition （过渡）、 position（定位）、opacity（透明度）等效果图html<div class="hot-product3"> <a href="javascript:;" target="_blank" class="item"> <div class="img"> <img src="../images/bg.p.
2021-03-15 16:08:15
1291
原创 mui picker选择器的使用
本次需求是使用mui选择器完成银行卡切换选择参考地址：https://dev.dcloud.net.cn/mui/ui/#picker参考官网数据html//首先肯定是引用mui的js、css依赖文件<link rel="stylesheet" type="text/css" href="static/public/css/mui.picker.min.css"><script type="text/javascript" src="static/public/js/mu.
2021-03-15 14:05:12
790
原创 mui中input失去焦点后页面回弹至顶部
在mui中，当前页面出现滚动条，如果点击input输入后失去焦点，页面直接拉至顶部，经验证后发现是由于mui框架会监听input失焦事件造成的原因。这种现象是在ios测试机中出现的，经测试发现解决方法有效。网上的解决方法还有很多，只展示当前使用的一种。解决方法//只需要在input的失焦事件中添加当前代码就可以了 $("input").blur(function () { $("body").removeClass("mui-focusin"); });...
2021-03-12 13:52:47
748
1
原创 css loading动画实现
使用css来实现loading动画是非常方便的，只需要用到css的动画属性就可以。animationanimation: name duration timing-function delay iteration-count direction;// name: 需要绑定到选择器的 keyframe 名称// duration: 完成动画所花费的时间// timing-function: 动画的速度曲线// delay: 动画开始之前的延迟// iteration-count: 动画应该播.
2021-03-12 13:33:21
368
原创 css滚动条样式修改
css滚动条样式修改很常见，首先需要了解滚动条的一些属性滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动::-webkit-scrollbar-track 滚动条的轨道::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-.
2021-03-12 10:21:53
216
原创 金额保留小数点后两位方法
vue金额格式化的方法封装全局js文件，并在main.js中引用//global.jsexport default { install(Vue) { Vue.prototype.$moneyFormat = (money) => { if ((/^(([1-9][0-9]*)|(([1-9]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(money))) { const moneyArr = Number(money)
2021-03-11 16:10:13
2215
原创 table表格自动滚动
大屏展示表格数据，需要进行实时滚动的效果当前没使用json数据渲染，如果渲染要把内容放在 id=“fTbody” 的表格中 <table> <tbody> <tr class="f16"> <th width="10%">时间</th> <th width="10%">品类</th> <th widt.
2021-03-11 15:45:56
6110
4
原创 移动端验证码倒计时及实时监听输入框
应产品需求，需要在输入验证码时实时监听，如果输入六位验证码则提交按钮高亮，反之则置灰。设置倒计时功能//设置60秒倒计时，并在倒计时结束修改样式function clsTimerFun() { let timerData = 60; let timerObject = $(".clstxtClick"); timerObject.css({ "color": '#333' }); timerObject.html(timerData + 's后重新获取') timerSet =.
2021-03-11 15:10:56
205
原创 vue echarts在tab选项卡中样式丢失
echarts图表会在页面加载时绘图，但是在tab选项卡中如果进行切换，第一个选项卡的echarts样式就会失效，宽度会默认变成100px。查明原因后发现是因为tab切换时会添加display: none; 属性，使当前echarts拿不到当前元素造成这种原因解决方法只需要 autoresize 这个属性就可以判断实例是否需要自动进行重绘 <v-chart :options="setDatas" autoresize style="height: 195px" />.
2021-03-09 18:13:43
538
原创 vue中监听浏览器宽度变化及跨域处理
vue中监听浏览器宽度变化及跨域处理本文主要做笔记防止遗忘，需求是页面自适应浏览器大小展示不同数量数据浏览器事件通过 document.body.clientWidth 来获取到浏览器的宽，然后通过 window.onresize 来监听浏览器窗口的变化在vue.js中先在data中定义自定义属性data() { return { screenWidth: document.body.clientWidth, // 获取浏览器宽度 }; },...
2021-03-09 16:45:23
748
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人