XHeader

XHeader

demo 原始链接demo 源码编辑文档组件源码

x-header - 图1

二维码

x-header - 图2

Install

安装

局部注册

全局注册

  1. import { XHeader } from 'vux'
  2. export default {
  3. components: {
  4. XHeader
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { XHeader } from 'vux'
  4. Vue.component('x-header', XHeader)

API

属性

名字类型默认值说明版本要求
left-options.showBackbooleantrue是否显示返回文字
left-options.backTextstringBack返回文字
left-options.preventGoBackbooleanfalse是否阻止返回
titlestring标题
transitionstring标题出现的动画
right-options.showMorebooleanfalse是否显示右侧的更多图标

事件

名字参数说明版本要求
@on-click-more点击右侧更多时触发
@on-click-back当left-options.preventGoBack为true,点击左边返回时触发
@on-click-title点击标题时触发

插槽

名字说明版本要求
默认插槽标题
left左侧部分插槽,在返回文字后,不会影响到原有的图标
overwrite-left重写左侧部分的返回文字及图标v2.2.2
right右侧部分插槽
overwrite-title标题插槽,用于自定义标题位置内容v2.5.3

Variables

## 样式变量


名字默认值说明继承自变量
@header-background-color #35495e
@header-title-color #fff
@header-text-color #ccc
@header-arrow-color #ccc

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 18,贡献人数 3
airylandPlortinusF-loat

Changelog

发布日志

  • v2.5.3 [feature] 添加 slot:overwrite-title #1669
  • v2.2.2 [feature] 添加 slot:overwrite-left 方便覆写左侧部分
  • v2.1.1-rc.13 [fix] 修复不能设置返回文字为空 #1109 @erguotou520
  • v2.1.1-rc.8 [fix] 修复过渡动画
  • v2.1.1-rc.8 [fix] 修复 返回文字 国际化