教程 其他 框架 组件 接口

style 样式

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

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

为了解决屏幕适配问题,所有与大小相关的样式(例如 width、font-size)均以基准宽度(默认 750px)为基础,根据实际屏幕宽度进行缩放,例如 width:100px,在 1500px 宽度屏幕上,width 实际上为 200px

文件导入

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

选择器

支持的选择器有:

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
tagdiv选择所有 div 组件
,.a, .b选择所有 class=“.a” 以及 class=“.b”的组件
#id .class tag.page .body text支持 id,class,tag 的后代选择器,也可以使用">"表示直接后代
<style>
  /* 单个选择器 */
  text {
  }
  .class-abc {
  }
  #idAbc {
  }
  /* 后代选择 */
  .doc-page #testTag div text {
  }
  .doc-page #test-class .class1 {
  }
  .doc-page #testId #testIdId1 {
  }
  /* 直接后代选择 */
  .doc-page #testTag .flex-column > text {
  }
  /* 同一样式适应多个选择器 */
  .font-text, .font-comma {
  }
</style>

注意,选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量,当前只支持:CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新

<template>
  <div class="{{docBody}}">
    <text class="{{rowDesc}}">描述内容</text>
  </div>
</template>

<style>
  .doc-body .row-desc1 {
    color: #ff0000;
  }
  .doc-body .row-desc2 {
    color: #0000ff;
  }
  .doc-body2 .row-desc1 {
    color: #00ff00;
  }
</style>

<script>
  export default {
    // 页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
    private: {
      rowDesc: 'row-desc1',
      docBody: 'doc-body'
    }
  }
</script>

以上的代码示例,当我们把rowDesc变量row-desc1变为row-desc2时是通知 Native 更新节点样式,但是如果把docBody变量doc-body变为doc-body2,是不会通知 DOM 更新的。

因为doc-body不是最后一个选择器,非末尾的选择器变更有可能影响很多 DOM 元素,从而影响到渲染性能

选择器优先级

当前样式的选择器的优先级计算保持与浏览器一致,是浏览器 CSS 渲染的一个子集(仅支持:inline, id, class, tag, 后代,直接后代)

选择器优先级规则如下(假设多条 CSS 声明匹配到同一个元素 div),应用在该元素上的 CSS 声明总体优先级是:inline > #id > .class > tag,这四大类

匹配到该元素的多个 CSS 声明,如:#page .class-div.page .class-div,其优先级按照各选择器的分数高低之和来比较

ID 选择器的权值为 10000 Class 类选择器的权值为 100 Tag 标签选择器的权值为 1

那么以下 CSS 声明计算分数为:

#page的分数为:10000

#page .class-div的分数为:10100

#page .class-div text的分数为10101

#page #body .container div text的分数为:20102

因此:

#page .class-div和.page .class-div比较,分数不一致,分数高优先级高;如果分数相同,则按照声明顺序:后者覆盖前者

样式预编译

目前支持less, sass的预编译

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

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

伪类

任何组件中,如果某个属性是 boolean 类型且默认值为 false 时,均可通过该属性名字来声明伪类,当属性变为 true 时伪类生效,例如所有组件的 disabled 属性、input 组件的 checked 属性等

另外部分组件会有其他形式的伪类支持,比如 input 组件可以通过主动调用 focus 方法,或者用户操作获得焦点,使得 focus 伪类生效,详情请参考各组件内部说明

1010+版本上提供了 active 伪类的支持,当用户按下组件时该伪类生效。其中默认可点击的组件(input, a, picker, switch 等)声明即有效,非默认可点击组件(image, text, div, stack 等)声明该伪类后须同时监听 click 事件才有效果

伪类写法举例:

<template>
  <div class="doc-page">
    <input type="button" class="btn" disabled="{{btndisabled}}" value="Click" onclick="btnClick" />
  </div>
</template>

<style>
  .doc-page {
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  .btn {
    width: 360px;
    height: 120px;
    background-color: red;
  }
  .btn:disabled{
    background-color: green;
  }
</style>

<script>
  export default {
    data: {
      btndisabled: false
    },
    btnClick () {
      this.btndisabled = true
    }
  }
  </script>

当组件的 disabled 属性变为 true 时,disabled 伪类的样式生效,叠加到原有样式上,例子中 background-color 会从红色变成绿色

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容