# style 样式

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

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

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

# 单位

支持以下长度单位：

单位	描述
px	像素单位，默认单位。
hv	相对屏幕高度的单位，1hv 等于屏幕高度的 1%。例如屏幕高度为 240px 时，10hv 等同于 24px。适用于需要根据屏幕高度进行适配的场景。
wv	相对屏幕宽度的单位，1wv 等于屏幕宽度的 1%。例如屏幕宽度为 240px 时，10wv 等同于 24px。适用于需要根据屏幕宽度进行适配的场景。

# 样式导入

支持 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>

# 媒体查询

支持通过 @media 规则根据不同的屏幕尺寸应用不同的样式。媒体特性支持 max-width、min-width、max-height、min-height，可以根据屏幕的最大/最小宽度和高度来适配不同设备。

部分机型支持该特性，不支持的机型配置了也不生效

/* 屏幕宽度不超过 240px 时生效 */
@media (max-width: 240px) {
  .container {
    height: 240px;
    background-image: url(/common/bg1.png);
  }
}

/* 屏幕宽度不小于 320px 时生效 */
@media (min-width: 320px) {
  .container {
    height: 270px;
    background-image: url(/common/bg2.png);
  }
}

支持的媒体特性：

媒体特性	描述
max-width	屏幕宽度小于等于指定值时生效
min-width	屏幕宽度大于等于指定值时生效
max-height	屏幕高度小于等于指定值时生效
min-height	屏幕高度大于等于指定值时生效

← template 模板 script 脚本 →