# style 样式
用于描述 template 模板的组件样式,决定组件应该如何显示
样式布局采用 CSS Flexbox(弹性盒)样式,针对部分原生组件,对 CSS 进行了少量的扩充以及修改
为了解决屏幕适配问题,所有与大小相关的样式(例如 width、font-size)均以基准宽度为基础,根据实际屏幕宽度进行缩放
# 文件导入
支持 2 种导入外部文件的方式
<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>
<!-- 合并外部文件 -->
<style>
@import './style.css';
.a {
}
</style>
2
3
4
5
6
7
8
9
# 模板内部样式
支持使用 style、class 属性来控制组件的样式
<!-- 内联inline -->
<div style="color: #f00; margin: 10px;"/>
<!-- class声明 -->
<div class="normal append"/>
2
3
4
# 选择器
支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
tag | div | 选择所有 div 组件 |
, | .a, .b | 选择所有 class=“.a” 以及 class=“.b”的组件 |
<style>
/* 单个选择器 */
text {
}
.class-abc {
}
#idAbc {
}
/* 同一样式适应多个选择器 */
.font-text, .font-comma {
}
</style>
2
3
4
5
6
7
8
9
10
11
12
注意,选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量,当前只支持:CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新
<template>
<div class="{{docBody}}">
<text class="{{rowDesc}}">描述内容</text>
</div>
</template>
<style>
.row-desc1 {
color: #ff0000;
}
.row-desc2 {
color: #0000ff;
}
.doc-body{
color: #000fff;
}
</style>
<script>
export default {
// 页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
data: {
rowDesc: 'row-desc1',
docBody: 'doc-body'
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
以上的代码示例,当我们把rowDesc变量
从row-desc1
变为row-desc2
时是通知 Native 更新节点样式,但是如果把docBody变量
从doc-body
变为doc-body2
,是不会通知 DOM 更新的。
因为doc-body
不是最后一个选择器,非末尾的选择器变更有可能影响很多 DOM 元素,从而影响到渲染性能
# 选择器优先级
当前样式的选择器的优先级计算保持与浏览器一致,是浏览器 CSS 渲染的一个子集(仅支持:inline, id, class, tag)
多条 CSS 声明可以匹配到同一个元素 如 div,应用在该元素上的 CSS 声明总体优先级是:inline > #id > .class > tag,这四大类匹配到该元素的多个 CSS 声明
ID选择器
(例如: #hello)的权值为 10000类选择器
(例如: .example)的权值为 100类型选择器
(例如: h1)的权值为 1
css 的优先级计算文档也可以查看MDN 文档 (opens new window)入门
# 样式预编译
目前快应用支持less
与sass
的预编译,具体教程也可以参考这里
<!--导入外部文件, 代替style内部样式-->
<style lang="less" src="./lessFile.less"></style>
<!--合并外部文件-->
<style lang="less">
@import './lessFile.less';
@px:12px;
.less-font-text{
font-size: @px;
}
</style>
2
3
4
5
6
7
8
9
10
11
12