layui认识
layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,但个人认为layui大多用于业务管理页面的开发,不太适合和用于用户交互比较频繁及效果特别是炫的页面,因为其组件也有一定的局限性,另外vue+layui不是所有组件都能实现双向绑定,就比如下拉框数据改变同时,要手动用vm.$nextTick(function () {layui.form.render(‘select’);});进行渲染等等;但是尽管如此,layui强大的功能依旧是后台开发工程师的福音
##常见的小问题
-
滚动条问题 ,设定容器宽度。table容器的默认宽度是跟 随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。也就是说,当在小屏的情况下,由于整个页面显示不完全会出现外侧滚动条,在表格不能完全展示时会出现内侧滚动条
-
分页栏跳动问题,当table不设置高度时,不会出现滚动条问题,但是在进行分页跳转时会出现分页栏跳动,有两个建议,一个是在内置模块中设置高度
height: $(document).height() - $(’#table_id’).offset().top - 20,
另外一种是在页面加上样式.layui-table-page {
background-color: #1AA094;
z-index: 99999;
position: fixed;
bottom: 0;
}.layui-table-box {
margin-bottom: 30px;
},但是这两种方法都有后遗症,还望各位高手赐教,能有更好的解决方法
js知识
缓存的使用:在数据比较多且变动不大的情况下可以把数据放到缓存中sessionStorage.setItem(‘example’, JSON.stringify(r.data)); ,取出来用时sessionStorage.getItem(‘example’);
改变vue集合中的某个值:假如vue有个对象List,按照条件改变其中一个的值
for (let index in List) {
for (let index in r.data) {
if (List[index].example== r.data[index].value) { Vue.set(vm.data.List[index],
'example', r.data[typeIndex].valueName); }}}
页面传参的方法:
getParam: function (key) {
var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
//链接带# window.location.search无效
var href = window.location.href;
var r = '';
if (href.indexOf('#') > -1) {
r = href.substring(href.indexOf('?')).substr(1).match(reg);
} else {
r = window.location.search.substr(1).match(reg);
}
if (r != null) {
return decodeURI(r[2]);
}
return '';
}
vue学习
vue常用的标签