美文网首页
小技巧总结

小技巧总结

作者: 洛音轩 | 来源:发表于2019-10-22 09:07 被阅读0次

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%;
}

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

相关文章

  • iOS小技巧总结

    iOS小技巧总结### 参考iOS_小松哥的iOS小技巧总结 总结日常代码生活中的小技巧,随时可用 阿拉伯数字转中...

  • iOS小技巧总结,绝对有你想要的

    iOS小技巧总结,绝对有你想要的 iOS小技巧总结,绝对有你想要的

  • iOS小技巧总结

    iOS小技巧总结,绝对有你想要的

  • iOS小技巧总结

    iOS小技巧总结,绝对有你想要的

  • 总结小技巧

    用来总结工作中遇到的一些问题,或者说是一些小技巧。 获取TextView中的某一行的文字 获取Viewpager中...

  • 小技巧总结

    1.margin-right DOM是平级机构,如果要实现文字的居中,并且图片还要和文字在同一行,可以采用marg...

  • 算法--leetcode-283-移动零

    相当于是使用 for 进行交换的一个小技巧的练习,后面会给出一些算法的小技巧,都是总结的一些算法的小技巧。

  • 今天小计划

    1、总结收藏的EXCEL小技巧并应用。 2、总结数学题型和有效性分析文章。

  • iOS开发调试技巧总结

    iOS开发调试技巧总结 iOS开发调试技巧总结

  • iOS 小技巧总结

    禁止锁屏 默认情况下,当设备一段时间没有触控动作时,iOS会锁住屏幕。但有一些应用是不需要锁屏的,比如视频播放器。...

网友评论

      本文标题:小技巧总结

      本文链接:https://www.haomeiwen.com/subject/mbkhyctx.html