更新记录

1.0.4（2024-02-19）

• 更新文档

1.0.3（2024-02-19）

• 更新文档

1.0.2（2024-02-19）

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

平台兼容性

导航栏

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

组件关系

• 依赖组件 dep-status-bar
• 依赖组件 dep-icons

快速使用

<!-- 常规用法 -->
<dep-navigation-bar title-text="标题"></dep-navigation-bar>

<!-- 自定义高度 -->
<dep-navigation-bar title-text="自定义高度" :height="100"></dep-navigation-bar>
<dep-navigation-bar title-text="取消系统状态栏占位高度" :status-bar="false"></dep-navigation-bar>

<!-- 自定义背景颜色 -->
<dep-navigation-bar title-text="自定义背景颜色" background="cyan"></dep-navigation-bar>
<dep-navigation-bar title-text="自定义背景颜色" background="#007AFF"></dep-navigation-bar>

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

<!-- 添加标题样式类 -->
<dep-navigation-bar title-text="自定义返回图标颜色" back-icon-color="#ff0000"></dep-navigation-bar>
<dep-navigation-bar title-text="自定义标题样式" title-classes="color-primary font-20"></dep-navigation-bar>

<!-- 暗黑主题配置 -->
<dep-navigation-bar title-text="自定义主题色彩-暗黑模式" background="#000000" back-icon-color="#ffffff" title-classes="color-white"></dep-navigation-bar>

<!-- 返回按钮或事件 -->
<dep-navigation-bar title-text="移除返回按钮" :back-icon="false"></dep-navigation-bar>
<dep-navigation-bar title-text="自定义返回事件" :back-event="true" @backclick="onCustomBack"></dep-navigation-bar>

<!-- 右侧插槽 -->
<dep-navigation-bar title-text="右侧插槽" :rightIcon="100">
    <template v-slot:right>
        <view class="flex-1 flex-row justify-center">
            <dep-icons type="copy" :size="24"></dep-icons>
        </view>
    </template>
</dep-navigation-bar>

<!-- 默认插槽 -->
<dep-navigation-bar :rightIcon="100">
    <template v-slot:default>
        <view class="bg-light px-24 py-12 radius-40">
            <input class="input" type="text" placeholder="请输入" placeholder-class="placeholder" />
        </view>
    </template>
</dep-navigation-bar>

<!-- 混合插槽 -->
<dep-navigation-bar :rightIcon="100">
    <template v-slot:default>
        <view class="bg-light px-24 py-12 radius-40">
            <input class="input" type="text" placeholder="请输入" placeholder-class="placeholder" />
        </view>
    </template>
    <template v-slot:right>
        <view class="flex-1 flex-row justify-center">
            <dep-icons type="copy" :size="24"></dep-icons>
        </view>
    </template>
</dep-navigation-bar>

属性

方法

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

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

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

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

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

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

变量

• 详见语雀文档

语雀文档