# 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 脚本 →