# 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的元素。

# 样式预编译

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

<!--导入外部文件, 代替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>