模板模式 <template></template> 段內推薦通過 class 對樣式進行設置，例如 <text class="mytext">?。

CSS 樣式

支持 class、id、type 選擇器，不支持父子、狀態等更復雜的組合。支持的三類示例如下：

// class
.class {
}

// id
#id {
}

// type
div {
}

內聯樣式

模板模式提供運行時樣式注入能力，主要通過組件的內置屬性 style 字段來實現。

內聯樣式的書寫規范同前端流行框架（VueJS 和 ReactJS）的規范一致，同時支持綁定和非綁定兩種格式。

• 綁定內聯樣式

  • 待綁定的樣式字段應統一收斂至一個 JSONObject 內。

  • 待綁定的樣式字段的 KEY 應符合駝峰命名規范（如 background-color 應轉換為 backgroundColor）。

• 非綁定內聯樣式

  • 待綁定的樣式字段應按照 CSS 的書寫規范收斂至一個字符串內。

  • 待綁定的樣式字段的 KEY 應按照 CSS 規范單詞間通過連字符-進行拼接（如 background-color）。

樣式優先級從高至低依次為 inline style、id、class、type。

// main.vue
<template>
  <div class="root">
    <div class="div1" :style="style"></div>
    <div class="div2" style="width: 100px; background-color: blue"></div>
  </div>
</template>

// mock.json
{
  "style": {
    "height": "100px",
    "backgroundColor": "red"
  }
}

模板在內聯樣式上接收的屬性值是一個 JS object。

<div class="root" :style="{height: height}"> // 上文示例

動態綁定 class

組件的 CSS 樣式，可以動態綁定不同的選擇器（selector）。

<div :class="mydiv">

媒體查詢 @media

模板模式中引入 CSS 規范內的媒體查詢能力，主要用于處理移動端 UI 適配相關工作。

相對于 CSS 規范，模板模式中支持的媒體查詢能力有限，使用時也有一些特定的用法，具體可參考以下幾個方面。媒體查詢相關信息可參考 @media 介紹。

• 媒體類型

  無需填寫，默認使用 all。

  媒體類型	是否支持
  all	是
  screen	否
  print	否
  speech	否

• 媒體特性

  卡片中，媒體特性主要以固件特性為基礎進行設計，這點同前端瀏覽器不同。

  媒體特性	取值	說明
  platform	ios | android	針對平臺適配，使用時同 CSS 規范有所區別，@media 后直接設置平臺值即可，例如 @media android。
  support	safearea	針對 iOS 平臺屏幕安全區域適配。

• 媒體運算符

  運算符	是否支持
  and	是
  not	否
  only	否

下面是結合 CSS 特性與 @media 媒體查詢能力進行樣式適配的示例。

<template>
    <div class="banner"></div>
</template>
<style>
    @media android {
        .banner {
                  width: 100px;
                        height: 100px;
            background-color: #00fff0;
        }
    }
    @media ios and (support: safearea) {
        .banner {
            width: 100px;
                        height: 100px;
            background-color: #00fafb;
        }
    }
    .banner {
              width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

樣式導入

在導入樣式之前，先了解以下兩種不同類型的樣式：

• 導入樣式：存在于 .css 文件中的可供統一管理、導入的樣式。

• 限定樣式：存在于 .vue 文件中 <style></style> 段內僅作用于本模板的樣式。

語法格式

樣式導入的語法格式如下：

<style src="[.css文件相對路徑]" />

• 文件結構

.
└── template_name                                                 //                       模板文件夾（以模板ID命名）
    ├── main.vue                                                       //                        模板布局、樣式描述文件
    ├── manifest.json                                                //                        模板配置文件
    └── mock.json                                                     //                        模板可供綁定的測試數據
    └── common.css                                                 //                        模板公共樣式文件

• 模板代碼

<template>
        ... [模板布局相關描述]
</template>

<style src="./common.css" />

<style>
        ... [僅作用在本模板內的樣式]
</style>

層疊規則

模板模式在對 .vue 文件內涉及的樣式資源進行編譯時，僅對 selector 相同的樣式字段進行層疊整合，不同的 selector 會完整保留。

導入樣式 + 限定樣式 = 層疊結果，如下表所示。

.special {
 color: red;
 width: 100px;
}
.others {
 color: red;
 width: 100px;
}

.special {
 background-color: red;
 width: 200px;
}
.scoped {
 background-color: red;
 width: 200px;
}

.special {
 color: red;
 background-color: red;
 width: 200px;
}
.scoped {
 background-color: red;
 width: 200px;
}
.others {
 color: red;
 width: 100px;
}

代碼示例

下載代碼示例 FalconDemo。