XHeader 组件使用教程
优质
小牛编辑
130浏览
2023-12-01
安装
import { XHeader } from 'vux'
export default {
components: {
XHeader
}
}// 在入口文件全局引入
import Vue from 'vue'
import { XHeader } from 'vux'
Vue.component('x-header', XHeader)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| left-options.showBack | boolean | true | 是否显示返回文字 | -- |
| left-options.backText | string | Back | 返回文字 | -- |
| left-options.preventGoBack | boolean | false | 是否阻止返回 | -- |
| title | string | 标题 | -- | |
| transition | string | 标题出现的动画 | -- | |
| right-options.showMore | boolean | false | 是否显示右侧的更多图标 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @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 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @header-background-color | #35495e | -- | |
| @header-title-color | #fff | -- | |
| @header-text-color | #ccc | -- | |
| @header-arrow-color | #ccc | -- |