更新记录

1.0.4（2024-02-19）

• 更新文档

1.0.3（2024-02-19）

• 更新文档

1.0.2（2024-02-19）

• 升级到4.01版本，调整部分参数的类型

平台兼容性

状态栏

• 组件名 dep-status-bar
• 代码助手 <dep-st
• 语雀文档
• 下载演示应用

快速使用

<!-- 默认透明占位 -->
<dep-status-bar></dep-status-bar>

<!-- 自定义背景颜色 -->
<dep-status-bar background="cyan"></dep-status-bar>
<dep-status-bar background="#FFFF00"></dep-status-bar>

<!-- 自定义渐变色背景 linear-gradient(<direction>, <color-start>, <color-stop>) -->
<dep-status-bar background="linear-gradient(to right, cyan, yellow)"></dep-status-bar>

属性

• 注意：background属于简写属性，支持 background-color 和 background-image，且官方的background-image目前仅支持linear-gradient渐变
• 注意：当需要 background-color 和 background-image 切换时，注意这个background简写存在差异，需要父组件手动调用本子组件方法setElementBackground

方法

• 设置组件背景 setElementBackground(propertyStyle : string) : void {}

  <dep-status-bar ref="status-bar" :background="background"></dep-status-bar>

  const element = this.$refs['status-bar']! as ComponentPublicInstance
  this.background = 'rgba(0,0,0,1)'
  element.$callMethod('setElementBackground', this.background)

• 设置组件样式 setElementStyle(propertyName : string, propertyStyle : any) : void

  <dep-status-bar ref="status-bar" background="cyan"></dep-status-bar>

  const element = this.$refs['status-bar']! as ComponentPublicInstance
  // 设置背景
  element.$callMethod('setElementStyle', 'background', 'orange')
  // 设置高度
  const height : int = (Math.random() * 100).toInt()
  element.$callMethod('setElementStyle', 'height', height)

语雀文档