样式定义

基本行为

样式部分可为空，或不设置 style 标签
style 标签中的选择器在未声明 scoped 时根据编译条件可能会在当前文件内内联或挂载到全局，可选择加上 scoped 属性手动标明仅在文件内生效
支持导入其他 CSS 文件或者直接在 style 标签下编写选择器样式
通过 @import 导入其他文件
- 支持嵌套导入多个 CSS 文件
仅支持类和 id 选择器，支持多个类或 id 选择器复用样式，但不支持选择器嵌套，不支持伪类和伪元素。
内联样式匹配选择器时仅匹配非绑定值的 id 和 class
编译后 style 中的样式内联，声明的选择器不会被保留
详细支持与 AIP 规范保持一致

基本使用方式如下：

<!-- 例子1 -->
<aip-view class="style1 style2"> </aip-view>
<!-- 等价于 -->
<aip-view class="style1 style2" style="color:white;background:blue;"> </aip-view>

<!-- 例子2 -->
<aip-view class="style2 style1"> </aip-view>
<!-- 等价于 -->
<aip-view class="style2 style1" style="background:blue;color:white;"> </aip-view>

<!-- 例子3，预处理器不做匹配 -->
<aip-view [class]="[customClass, 'style1']"> </aip-view>
<!-- 等价于 -->
<aip-view [class]="[customClass, 'style1']"> </aip-view>

<!-- 仅编译期存在 -->
<script>
    export default {
        state: {
            customClass: 'style1 style2',
        },
    };
</script>
<style scoped>
    .style1 {
        color: white;
    }
    .style2 {
        background: blue;
    }
</style>

1
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
28
29
30
31

定义了单个 id 选择器样式匹配规则，将样式内联，并去除 style 标签，样例如下：

<!-- 例子1 -->
<aip-view id="style1"> </aip-view>
<!-- 等价于 -->
<aip-view id="style1" style="color:white;"> </aip-view>

<style scoped>
    #style1 {
        color: white;
    }
    #style2 {
        background: blue;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

扩展

支持 Sass 预处理器，需在 style 标签上添加 lang="scss"

<style lang="scss">
    $v1: red;

    .a {
        color: $v1;
    }
</style>

1
2
3
4
5
6
7

# 样式定义

# 基本行为

# 扩展

样式定义

基本行为

扩展