前端框架 VUE 开发指引

「 问题总结 」 十一月 17, 2020

前端框架 VUE 开发指引

文章字数 3.8k 阅读约需 3 mins. 阅读次数 1000000

1. vue页面加载时，v-if标签导致页面闪频解决

页面添加style,并在 v-if 标签添加调用：

1
2
3
4
5
6
7

[v-cloak] {

  /* display: none !important; */

  visibility: hidden !important;

}

点击并拖拽以移动

个人建议使用 visibility: hidden ，因为只是显示问题，没必要使用 display: none , 程度没那么严重；

2. css 字体粗细问题

1
2
3

font-weight: bolder;  // 更粗字体

font-weight: bold;  // 粗字体

点击并拖拽以移动

3. css 背景透明

1

background: transparent;

点击并拖拽以移动

4. 去除原生 select 下拉框的边框和倒三角

1
2

border: 0; // 去除边框
-webkit-appearance: none; // 去除倒三角

点击并拖拽以移动

5. div 内容上下左右居中

1
2
3

display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

点击并拖拽以移动

6. select 下拉框内容靠右 text-align: right; 不生效问题

1

direction: rtl;

点击并拖拽以移动

7. 按钮圆角

1

-webkit-border-radius: 3rem;

点击并拖拽以移动

rem 大小根据实际情况自行定义

罗韬

A nine story platform begins with a pile of soil; a journey of a thousand miles begins with a single step
0%