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
网友评论