前端学习

layui认识

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，但个人认为layui大多用于业务管理页面的开发，不太适合和用于用户交互比较频繁及效果特别是炫的页面，因为其组件也有一定的局限性，另外vue+layui不是所有组件都能实现双向绑定，就比如下拉框数据改变同时，要手动用vm.$nextTick(function () {layui.form.render(‘select’);});进行渲染等等；但是尽管如此，layui强大的功能依旧是后台开发工程师的福音

##常见的小问题

1. 滚动条问题 ，设定容器宽度。table容器的默认宽度是跟 随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。也就是说，当在小屏的情况下，由于整个页面显示不完全会出现外侧滚动条，在表格不能完全展示时会出现内侧滚动条

2. 分页栏跳动问题，当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常用的标签