Write the Code. Change the World.

分类目录
9月 06

layer.open 弹出一个对象,有时候会遇到高度自适应的问题。该怎么处理呢。文档虽然说明了怎么做,也的确是高度随着对象的变化,高度也变化了。但是弹层并没有对位置自适应。也就是没居中。其实在对象变化后,手动调用一次 $(window).resize(); 即可。

操作

  1. layer.open 的时候,area 只设置一个宽度值,或设置成 auto
  2. 弹出对象变化的时候,调用一次 $(window).resize();
layer.open({
    ……,
    area: '720px',
    ……
});

# 千万不要下边这种
layer.open({
    ……,
    area: ['720px'],
    ……
});

# 虽然 area 设置成数组形式表示的是宽高。一个值时就是宽。但是只设置一个值时和上边的非数组形式不一样。也就是不会出现自适应。

layer.open({
    ……,
    area: ['720px', '450px'],
    ……
});

就这么一点点了。

8月 31

layui 有第三方比较好的三级联动,多级联动插件。但有时候,因为特殊要求,满足不了需要。这个时候就需要修改源码了。

先看插件文档以及实例。

https://fly.layui.com/extend/selectN,selectM/#doc

https://moretop.gitee.io/layui-select-ext/

特殊需要

1,需要回调。虽然不需要回调 form 提交一样可以拿到数据。可有时候前端就是需要有回调,需要看到具体的变化。这个时候就得改源码了。

2,删除对象时候,需要 confirm 确定后,才能删除。

修改

selectN 三级联动全只读。在初始化的时候,删除 select dom 即可。当然,也需要从 config 中添加配置,读配置。

//只读删除 select 组件,删除图标
if (c.allRead) {
    $E.find('.layui-anim').remove();
    $E.find('.layui-edge').remove();    
    $E.find('input').attr("readonly", true);
}

selectM 回调。在 config 中配置回调函数,并在初始化的时候指定好回调函数。在数据变化的时候,判断下是否有回调函数。存在就回调过去。

if (c.change && typeof c.change === "function" && typeof c.change.nodeType !== "number") {
        c.change(values);
}

selectM 删除确定。同样在 config 中配置变量,默认不需要确定。初始化的时候配置好即可。当需要删除对象的时候,先看是否存在需要确认的变量。不需要则直接删除。需要则先弹出 confirm 框,看操作。

$E.on('click','a i',function(e){
    this.delete = function() {
        var _this = $(this).prev('span');
        var v = _this.attr('lay-value');
        if(v){
            var _dd = $(c.elem).find('dd[lay-value='+v+']');
            _dd.removeClass('layui-this');
            _dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
        }
        o.setSelected();
        _this.parent().remove();
        e.stopPropagation();
    };

    if (o && o.config && o.config.confirm) {
        layer.confirm('您确定要删除该选项?', {btn:['确定']}, (index) =>{
            this.delete();
            layer.close(index);
        });
        return;
    }
    this.delete();
});
10月 26

父元素设置了 flex 布局

display: flex;
align-items: center;

如何让某个子元素靠右呢

方法一

flex: 1;
text-align: right;

方法二

margin-left: auto;
10月 10

axios 拦截器,最佳实践,体验相关:

https://www.cnblogs.com/dhsz/p/6410031.html

https://blog.csdn.net/panyox/article/details/73800241

https://blog.csdn.net/sjn0503/article/details/74729300

http://www.php.cn/js-tutorial-399867.html

如果是 vue 中。可以在路由里先做一步判断,然后请求时 axios 拦截器里边也做处理。这样就可以完美解决问题了。

request 中添加 token,response中处理错误。

Promise 相关

https://www.cnblogs.com/yunfeifei/p/4453690.html

https://www.cnblogs.com/sweeeper/p/8442613.html

jwt bearer token 相关

https://www.cnblogs.com/zfdcp-028/p/6374632.html

https://www.jianshu.com/p/8f7009456abc

https://www.jianshu.com/p/f9faeac8bd5e

https://www.cnblogs.com/Leo_wl/p/7792046.html

8月 31

Vue 用脚手架本地测试,项目都是指向根目录,当发布到外网环境,非根目录时,有人会遇到根本进不去 vue 路由的情况。

既然用了 vue ,遇到问题总的要解决。

网上一些有用的方法

https://segmentfault.com/a/1190000014561644

https://blog.csdn.net/lensgcx/article/details/78439514

其实主要还是得处理 nginx 的 location

处理 location 的规则即可。

location 可以添加很多个不同规则。

比如:

location /{

}

location /web{
    try_files $uri $uri/ /web/index.html;
} 
# vue 这里的二级目录是 web 
7月 20

bootstrap4 相关

Bootstrap 4重大更新,亮点解读

知乎 Bootstrap4

E文文档

他人学习笔记

https://blog.csdn.net/bbdxf/article/details/79251934

漂亮的主题

https://www.creative-tim.com/product/material-kit

bootstrap4 自定义颜色

默认的按钮,input等颜色比较难看,某些设置也不人性化,这些都是通过编译bootstrap的源码来自己来定义的。主要分以下几个步骤。

  1. 前期准备。

安装 npm 并使用 淘宝镜像。http://npm.taobao.org/
git 工具

2,下载原文件包。
https://github.com/twbs/bootstrap
在 scss 目录下,就可以看到它的源码。
找到_variables.scss,并修改里边的颜色值,再编译就可以了。比如:

# 有颜色值的是我修改的
$primary:       #9c27b0 !default;
$secondary:     $gray-600 !default;
$success:       #4caf50 !default;
$info:          #00bcd4 !default;
$warning:       #ff9800 !default;
$danger:        #f44336 !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

sudo cnpm run dist 
# 编译打包就可以了

# 修改点击按钮的时候,按钮周围的边框,好难看,强迫症要干掉。这样会把input的边框也干掉了,不好。
$input-btn-focus-width:       0 !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  none !default;