小技巧总结

1.margin-right

<div class="father">
  <div class="font">文字按行居中</div>
  <img class="img" alt="x">
</div>

• DOM是平级机构，如果要实现文字的居中，并且图片还要和文字在同一行，可以采用margin有负值的特性实现

.font{
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-right: -10%;
}
.img{
  display: inline-block;
  width:-10%;
}

• 效果如下：

  
  image.png
• codepen地址：
  https://codepen.io/byronlyx/pen/BaBwmeM

---

2.在进行H5页面开发调接口的时候，一定不要忘记设置浏览器跨域

• 谷歌浏览器跨域新旧版本方法不同：

新版本：

1.在电脑上新建一个目录，例如：C:\MyChromeDevUserData。

2.在桌面谷歌浏览器图标-->点击鼠标右键-->快捷方式-->目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData。
--user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面，并打开chrome浏览器。

旧版本：

1.首先谷歌快捷方式上右击，在下拉列表中选择属性。

2.打开属性窗口，切换到快捷方式选项卡下面，默认是常规选项卡。

3.在目标路径的后面添加【 --disable-web-security】，格式如下：
"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security,其中chrome.exe与--disable之间有一个空格。

4.点击应用，然后点击确定关闭窗口。

再次打开chrome，发现有“--disable-web-security”相关的提示，说明chrome又能正常跨域工作了。
tips: 其实设置后，旧版本的话浏览器所在的文件目录下会生成一个chrome_proxy.exe运行文件，而新版本的话，则会在你新建的目录下生成很多代理文件。

5.样式穿透

• vue中有些样式时组件内的默认样式，但是我们可能不需要就需要改变，但是，vue页面里面的style都受到scoped的限制，当然我们如果去掉scoped也可以解决这个问题，但是，也可能给自己或者别人挖了坑，例如权重和命名会影响样式等问题，那么样式穿透这个神操作则可以完美解决这一问题

stylus中通过 '>>> 选择器名'；例如：
>>> .body{
          border-bottom: 0px solid #f2f2f2; 
     }
sass/less中则通过' /deep/ 选择器名'；例如：
/deep/ .body{
          border-bottom: 0px solid #f2f2f2; 
      }

• 原理： css加载顺序 '外层 / >>>stylus) | /deep(sass|less) / 第三方组件'

6.window.location.href和window.location.search

image.png

• href指的是当前页面的url
• search取到的是跳转前拼接在上一个url后面的值
  在项目中其实我们往往用到的只是拼接的内容，所以可以尽量选用search属性

// 应用实例：通过url的传参去决定跳到那个页面
    let route = this.$router;
    let search = window.location.search;
    search = "?status=1&token=sdfsdfsd&loginid=13795406160&password=Hcs123456&devicetype=ios";
    if (search !== '') {
       let t = search.split('?')[1].split('&');
       let searchObj = {};
       t.map((item) => {
          searchObj[item.split('=')[0]] = item.split('=')[1];
       })
       storage.set("login-message", searchObj);
    }
   if(Number(storage.get("login-message").status) === 1) { // 在线页面
       this.$router.replacePage({name: "MessageList"});
   }
   if(Number(storage.get("login-message").status) === 0) { // 离线页面
       this.$router.replacePage({name:"OffLineMessage"});
   }

7.vue中使用input框配合后端实现模糊查询功能

input绑定方法
执行方法

8.vue中，动态渲染列表，如果是两级结构，则需要再dom中也加入相应的层级

数据层代码
dom层
展示效果
这样写的好处是，如果第二层数据没有时，1.不会因为sdatatime不存在而报错，2.你的css样式也不会发生变动

9.文字超过展示区域，省略显示
双行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
单行省略：
overflow hidden
text-overflow ellipsis
white-space nowrap
效果展示

image.png
10.input的checkbox组件

<label class="checkbox-label">
    <span class="checkbox-lists">
        <input
              v-model="item.select"
              class="checkbox-list-input"
              type="checkbox"
              @click="select(item)"
          >
          <span class="checkbox-list-span" />
      </span>
  </label>

.checkbox-list-input {
    display: none;
  }
  .checkbox-list-input:checked + .checkbox-list-span {
    background-color: #c30;
    border-color: #c30;
  }
  .checkbox-list-input:checked + .checkbox-list-span::after {
    border-color: #fff;
    transform: rotate(45deg) scale(1);
  }
  .checkbox-list-input[disabled] + .checkbox-list-span {
    background-color: #d9d9d9;
    border-color: #ccc;
  }
  .checkbox-list-span {
    display: inline-block;
    background-color: #fff;
    border-radius: 100%;
    border: 1px solid #ccc;
    position: relative;
    width: 28px;
    height: 28px;
    vertical-align: middle;
  }
  .checkbox-list-span::after {
    border: 2px solid transparent;
    border-left: 0;
    border-top: 0;
    content: "";
    top: 4px;
    left: 9px;
    position: absolute;
    width: 6px;
    height: 16px;
    transform: rotate(45deg) scale(0);
    transition: transform .2s;
  }

选中
未选中

持续更新中。。。

image.png
image.png
image.png