Write the Code. Change the World.

分类目录
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;
5月 24

仅仅看表象,以为是 js 实现的效果,却是 css 实现的。这里有一个例子,利用 radio 的单选特性,实现单选效果。

步骤

  1. 创建 input标签,邻居创建 span标签。
  2. 父容器相对定位,input绝对定位,left,top为0,opacity为0。看不见看不见。
  3. 利用 + ,~ 处理邻居 div。
  4. 利用 checked 实现变化。

让 input 透明掉,其实就是让你去美化 span,不再需要 radio 那难看的容颜。是不是有点不道德啊。

请看 code:

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性,实现了不用js也能实现的效果。右边是 scss -->

.tags-select{
  font-size: 0;

  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;


     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }

     .name:hover{
         background-color: #FE3591;
     }

     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;

         //选中
         &:checked +.name{
             background-color: #FE3591;
         }

         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}

记得,上边使用了 scss。

效果

https://jsfiddle.net/vini123/ad30qpyb/