一、样式相关
@Styles
@Extend
stateStyles
1 @Styles 定义组件重用样式
@Styles | 说明 |
装饰器参数 | 无 |
功能 | 可以提炼公共样式进行复用 |
修饰对象 | 没有参数的函数 |
属性/事件 支持 | 仅支持通用属性和通用事件。 |
定义 | 可以定义在组件内或全局, 在全局定义时需在方法名前面添加function关键字, 组件内定义时则不需要添加function关键字。 |
变量引用 | 定义在组件内的@Styles可以通过this访问组件的常量和状态变量, 并可以在@Styles里通过事件来改变状态变量的值 |
优先级 | 组件内@Styles的优先级高于全局@Styles |
2@Extend 定义扩展组件样式
@Extend | 说明 |
装饰器参数 | 无 |
功能 | 用于扩展原生组件样式。 |
修饰对象 | 函数 |
属性/事件 支持 | 支持通用属性和通用事件。 支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。 |
定义 | 仅支持定义在全局 |
参数传递 | 可以在调用时传递参数,调用遵循TS方法传值调用。 方法的参数可以为function,作为Event事件的句柄。 参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染 |
3@Styles 和 @Extend 区别
@Extend仅支持定义在全局,@Styles支持在组件内部定义,全局定义。
@Styles不支持带参数的函数 ,@Extend 支持
@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。 @Styles仅支持通用属性和通用事件。
4stateStyles 多态样式
@Styles和@Extend仅仅应用于静态页面的样式复用
stateStyles可以依据组件的内部状态的不同,快速设置不同样式
stateStyles | 说明 |
stateStyles | 属性方法 |
状态 | focused:获焦态。 normal:正常态。 pressed:按压态。 disabled:不可用态。 |
变量使用 | 可以通过this绑定组件内的常规变量和状态变量。 |