UI框架
文章平均质量分 55
UI框架
lilly呀
这个作者很懒,什么都没留下…
展开
-
layui框架中如何实现,在登录超时实现自动跳转登录页?
前言: 最近,接手了一个layui框架做的系统,现在需要实现接口登录超时,自动跳转到登录页的操作。 方案:后台判断是否超时,前端根据接口返回的code码,实现自动跳转至登录页面。 问题点:前端重定向经常使用的是----w原创 2021-09-15 10:32:39 · 4175 阅读 · 0 评论 -
ElementUI中如何让DatePicker组件禁用当前日期之后的日期
前言: 有时候,我们会遇到在日期选择器中,对于当前日期之后的日期不让用户选择,对未发生的日期,还未产生数据,接口也需要屏蔽掉未发生的日期。效果如下图所示: 其实,组件文档里面有说明,只需要设置一下picker-options即可,下面,让我们看下代码吧:<el-date-picker v-model="value1" :popper-append-to-body="false" type="date"原创 2021-11-24 14:28:16 · 3084 阅读 · 2 评论 -
如何在element-ui中获取select选中的label值
在element-ui中获取select选中的label值原创 2022-03-01 17:13:26 · 5592 阅读 · 3 评论 -
elementUI中使用formdata进行上传文件
前言:在使用elementUI文档的时候,上传图片的组件,使用了formdata的方式,第一次使用,在此记录一下。根据文档,就是在上传的时候,有一个上传图片的接口,点击上传之后会返回给你一个网络路径,再将网络路径跟表单的其他的信息通过提交接口,提交到后台即可。一、el-upload中的相关参数<!--上传图片--> <el-upload ref="upload" :headers="headers"原创 2021-07-20 15:20:39 · 5682 阅读 · 0 评论 -
ElementUI小技巧
前言:开发项目的时候,经常会用到elementUI的框架,里面有很多组件,会多次使用,在此记录一下,以备下次使用。一、实时远程搜索 elementUI提供了下拉框远程搜索,请求后台获取数据并展示下拉内容。通过remote-method来实现实时发起搜索请求,需要在el-select中绑定几个属性即可。<div class="searchTitle">请输入社区名称</div> <el-select v-mo原创 2021-11-01 14:11:59 · 501 阅读 · 0 评论 -
elementUI中el-checkbox-group,动态禁用el-checkbox项
前言: 最近在项目中,需要一个动态禁用el-checkbox选项的功能,某些选项在某些场景下,需要禁止掉,让用户不可选的状态。一、elementUI框架文档elementUI框架文档只提供disabled的标签,这种状态是固定的,不是动态的,那么,如何给el-checkbox-group数组下面的某一项el-checkbox-button,动态添加禁用状态呢?二、动态添加动态添加禁用标签,使用:disabled属性,前面加冒号,disabled后面接上禁用的条件。<div class="f原创 2021-09-08 09:59:27 · 8118 阅读 · 3 评论 -
【Vue2.0】mint-ui解决IOS端picker和datetime picker穿透滚动问题
前言:在使用mint-ui的弹框时,滚动弹框内部分区域,会导致页面滚动。使用datetime picker时,只有ios会出现这个问题;而picker在安卓和ios上都有这个问题。一、解决办法 解决思路:弹出层打开时禁止body的滚动事件,弹出层关闭时回复body的滚动事件。//vue数据变量区data(){/*----------监听函数---------*/ handler:function(e){ e.preventDefault() }...原创 2020-06-05 15:30:42 · 561 阅读 · 0 评论 -
mint-ui之Message-box自定义样式,添加取消按钮的回调函数
背景:在mint-ui中的message-box中,有时候,官方文档给出的样式,无法满足自定义的需求,而且,里面的取消按钮没有相应的回调函数,需要自己根据需求进行自定义解决。一、js相关代码MessageBox.confirm('',{ message:'请确认银行签约结果', title:'温馨提示', showConfirmButton:true, showCancelButton:true, cancelButtonClass:'cancelButto原创 2020-09-17 10:42:28 · 685 阅读 · 0 评论 -
在Mint-UI中的MessageBox.alert,如何修改样式,并使用模板字符串解决动态传值
背景:我们在项目中使用Mint-UI时,可以使用里面的组件,但有时需要对组件进行修改或者自定义,或者动态传值,此时就需要使用模板字符串了。一、如何使用模板字符串进行自定义样式修改var htmls = ` <div class="box"> <div class="isunbind" style="text-align:left;">可用于购买本产品的医保个人账户额度为${this.lnzhyeMoney}元,您的医保可用额度不足以全额抵扣保费,需.原创 2020-08-27 20:13:30 · 1446 阅读 · 0 评论 -
mint-ui的日期组件DatetimePicker兼容问题,安卓手机显示空白
背景:在使用mint-ui的日期组件DatetimePicker时,发现在一些安卓手机不兼容,日期组件打开显示为空白,只有确定和取消按钮。问题图片如下所示:解决方法:通过在谷歌游览器调试工具中,发现在这些手机中,picker-items这个样式类,没有继承父元素的宽度,修复方法时手动添加样式。<style>.picker-items{ width:100%;}</style>...原创 2020-09-15 14:51:23 · 718 阅读 · 0 评论 -
【Vue2.0】mint-ui解决datetime-picker穿透滚动问题
背景:在移动端开发中,使用了mint-ui组件库,其中,使用组件popup组件和datetime-picker组件存在滚动性穿透问题。一、问题原因HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候会连续触发; 所以,当激发出组件popup组件和datetime-picker的弹出层时,我们在弹出层选择内容时,上下连续滑动是会触发该事件的。二、解决思路在弹出层出现之后阻止body的touchmove事件,在弹出层消失之后,移除阻止事件。三、例外 然而,Date...原创 2020-09-15 16:44:48 · 586 阅读 · 0 评论 -
[收藏]VUE优秀UI组件库合集
[收藏]VUE优秀UI组件库合集(来源于https://shimo.im/doc/LkpdnWxM1j40BDJj/)前言:vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考,期待开发者们推出更多优秀的组件库。一、相关框架介绍 ---------...转载 2018-06-14 16:13:12 · 55171 阅读 · 8 评论 -
移动端UI框架小汇总
前言:随着前端技术的更新,Vue,React,Angular等JS类框架不断的深入使用,各种WebApp、混合App、微信H5等应用的发展,各种配套的前端UI框架应运而生。最近,通过在Github、前端社区、掘金等平台上,对当下流行的前端UI框架进行了小小的整理与记录,希望以此来找到适合公司项目改版的移动端UI框架。(PS:前端UI框架通过GitHub star数,社区热度和使用范围进行汇总。)...原创 2019-01-10 13:11:42 · 7956 阅读 · 0 评论