# style 样式

用于描述 template 模板的组件样式，决定组件应该如何显示

样式布局采用 CSS Flexbox（弹性盒）样式，针对部分原生组件，对 CSS 进行了少量的扩充以及修改

手表屏幕物理宽高为240*240

# 样式导入

支持 2 种导入外部文件的方式

<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>

<!-- 合并外部文件 -->
<style>
  @import './style.css';
  .a {
  }
</style>

# 模板内部样式

支持使用 style、class 属性来控制组件的样式

<!-- 内联inline -->
<div style="color:red; margin: 10px;"/>
<!-- class声明 -->
<div class="normal append"/>

# 选择器

css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：

选择器	样例	样例描述
.class	.container	用于选择class="container"的组件。
,	.title, .content	用于选择class="title"和class="content"的组件。

暂不支持id选择器和父子级联选择器

# 伪类

css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。仅支持background-color 和background-image 的样式设置。

名称	支持组件	描述
:active	input[type="button"]	表示被用户激活的元素，如：被用户按下的按钮。
:checked	input[type="checkbox"、type="radio"]	表示checked属性为true的元素。

# 样式预编译

支持less与sass的预编译，可以提供变量、运算等功能，令开发者更便捷地定义组件样式。 暂不支持less与sass的嵌套属性

<!--导入外部文件, 代替style内部样式-->
<style lang="less" src="./lessFile.less"></style>

<!--合并外部文件-->
<style lang="less">
  @import './lessFile.less';
  .page-less #testTag .less-font-text,
  .page-less #testTag .less-font-comma{
    font-size: 60px;
  }
  /*不支持的写法*/
  .page-less {
    #testTag {
      .less-font-text, .less-font-comma {
        font-size: 60px;
      }
    }
  }
</style>

# 动态改变样式

动态修改样式有多种方式，与传统前端开发习惯一致，包括以下：

修改 class ：更新组件的 class 属性中使用的变量的值
修改内联 style ：更新组件的 style 属性中的某个 CSS 的值
修改绑定的对象：通过绑定的对象控制元素的样式
修改绑定的样式字符串：通过样式字符串控制元素的样式

<template>
  <div class="container">
    <text class="title {{ className }}" onclick="changeClassName">点击我修改文字颜色</text>
    <text class="title" style="color: {{ textColor }}" onclick="changeInlineStyle">点击我修改文字颜色</text>
    <text class="title" style="{{ styleObj }}" onclick="changeStyleObj">点击我修改文字颜色</text>
    <text class="title" style="{{ styleText }}" onclick="changeStyleText">点击我修改文字颜色</text>
  </div>
</template>

<script>
export default {
  data: {
    className: 'text-blue',
    textColor: '#0faeff',
    styleObj: {
      color: 'red'
    },
    styleText: 'color: blue'
  },
  changeClassName() {
    this.className = 'text-red'
  },
  changeInlineStyle() {
    this.textColor = '#f76160'
  },
  changeStyleObj() {
    this.styleObj = {
      color: 'yellow'
    }
  },
  changeStyleText() {
    this.styleText = 'color: green'
  }
}
</script>

← template 模板 script 脚本 →