- 博客(41)
- 收藏
- 关注
原创 vue3封装命令式弹窗组件
相信大家都封装过弹窗组件,基本思路都是父组件给子组件传递一个变量,子组件props进行接收,当点击确认或者关闭按钮时,通过emit回传事件供父组件调用。这种封装方式缺点是复用性查、使用频繁时需要定义多份{isVisible、handleSubmit、handleClose}代码,代码冗余,今天分享一种命令式组件封装的方式。命令式组件封装是一种将功能封装在组件内部,并通过命令式的方式进行调用和控制的封装方法。
2024-08-30 15:26:46 787
原创 js格式化时间以及格式化时间为中文,传入时间字符串或者时间戳都可以,cv即用
【代码】js格式化时间以及格式化时间为中文,传入时间字符串或者时间戳都可以,cv即用。
2024-04-21 20:52:33 226
原创 element ui el-select组件添加选项下拉加载
需求描述:在做搜索的时候由于有一个下拉列表接口返回数据特别多所以对列表进行了一个下拉触底加载的事件,但是官方文档是没有对应的api的所以自己使用指令写了一个方法。
2024-03-15 22:29:19 962
原创 element ui tabs before-leave的使用
2、官方文档说return false 或者 reject()都会阻止切换,但是实际return false没有阻止切换。先看官方文档描述:切换标签之前的钩子,若返回 false 或者返回 Promise 且被 reject,则阻止切换。1、必须使用async await不然不会生效。
2023-04-19 15:18:10 2438 1
原创 el-time-picker绑定数据遇到的问题
最后贴一下我的解决代码片段,原理就是调用new Data()方法,里面传递当前年月日的信息,将数据转变为组件可以识别的数据。一是数据没有回显,二是时间组件选不了时间无法滚动。网上搜索发现很多人遇到了这个问题,但是良久也没有找到有效的办法。事情是这样的,今天写代码遇到一个回显日期以及时间的需求。至此,el-date-picker回显正常,一切功能正常。回显日期的组件我使用的是:el-date-picker。回显日期的组件我使用的是:el-time-picker。接下来我要对时间赋值进行回显,贴上我的代码。
2023-03-10 21:58:30 1097
原创 解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
2022-08-08 10:29:27 4395 1
原创 ElementUI中的Empty空状态使用
在项目开发中,我们使用elementUi组件库中的table组件,当没有数据的时候显示的是这个样子因为不太美观有时候甲方不太满意,那我们如何修改这个默认样式呢?直接上代码<el-table-column prop="address" label="子活动编码"/><div slot="empty" style="text-align: left;"> <el-empty description="哎呀,你是不是忘记查询啦!" /></
2022-05-23 16:58:01 8752 3
原创 对象的key是数字或者字符串如何输出?
在开发的时候有时候遇到后端返回的结果是这样的let cityObj = { "010":"北京市", "021":"上海市", "022":"天津市", "023":"重庆市", "0311":"石家庄市", "0312":"保定市", "0314":"承德市", "0310":"邯郸市", "0315":"唐山市", "0335":"秦皇岛市", "0871":"昆明市",}这样的对象和一般的对象有所区别,
2022-05-20 11:39:04 872 2
原创 uniapp中使用uview1.0中的u-dorpdown组件的坑
在项目中使用下拉菜单u-dorpdown时,内容过多,但是页面无法滑动,于是加上 scroll-view 发现电脑端能滑动,但是手机端就是滑动不了。解决思路,不要使用scroll-view组件,改成普通的view组件,设置style="height:300rpx;overflow-y:auto"...
2022-04-28 11:57:29 1235
原创 uniapp使用iframe标签实现iframe高度自适应
百度良久试了好多方法都不行。无奈只能用iframe引入这个文件,引入后发现高度只有50%。可以添加一段代码,实现iframe高度自适应。<iframe id="iframe_id" src="./static/map.html" frameborde
2022-04-28 09:56:30 10295 2
原创 浅谈数据模糊搜索
第一步:既然是搜索那就肯定有一个input输入框,我们使用数据双向绑定绑定input输入框的数据上代码<u-input v-model="searchValue" type="text" :border="true" class="searchIpt" @input="iptChangde(searchValue)"placeholder="请输入搜索内容"placeholder-style = "color: #c0c4cc;z-index:999;font-size:20
2022-04-19 18:05:35 566
原创 Vue中使用this.$forceUpdate()强制刷新渲染的用法
用于深结构数据首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。1.相信大家也遇到过,实际上是赋值的 界面上并不渲染change: function(index) {//增加性别属性 this.list[index].sex = '男';},clea
2022-03-31 17:12:17 15527
原创 数组reduce的用法
reduce() 是数组的归并方法,与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他迭代方法无法企及的语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue);是total: 必需。初始值, 或者计算结束后的返回值。 currentValue: 必需。当前元素。 cu
2022-03-23 10:49:35 3044
原创 根据对象的某个属性进行排序
要根据对象的某个属性排序,首先要理解sort()方法的原理 sort()会改变原数组 sort()在不传入参数时默认升序排列 若想自定义排序,如降序排列,按照对象某个属性排序等,就必须往sort()中传入一个回调函数作为参数 var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8}];//定义一个比较器function compare(prop){
2022-03-22 17:53:15 1034
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人