HUI-VUE-Pro

# PageAction 操作栏

# 基础用法

Title Title Title Title
基础用法
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-action>
      <el-button type="iconButton" icon="h-icon-import">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-export">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-setting">BTN</el-button>
    </h-page-action>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# 右侧操作内容

Title Title Title Title
右侧操作内容
<h-page-container>
  <h-page-header slot="pageHeader" :breadcrumb="breadcrumb" />
  <h-page-content>
    <h-page-action>
      <el-button type="iconButton" icon="h-icon-import">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-export">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-setting">BTN</el-button>
      <template slot="rightAction">
        <el-button type="iconButton" icon="h-icon-associate">BTN</el-button>
      </template>
    </h-page-action>
  </h-page-content>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# API

# Attributes

参数 说明 类型 可选值 默认值
affix 是否开启图钉模式 Boolean - true
offset-top 距离窗口顶部达到指定偏移量后触发 Number - 0
search-icon 是否显示搜索图标 Boolean - false
search-icon-tips 搜索图标提示信息 String - 'filter'
hide-search-icon-tips 是否隐藏搜索图标提示信息 Boolean - false
search-icon-active 搜索图标是否激活 Boolean - false

# Methods

方法名 说明 参数
resize 重新计算操作栏宽度 -

# Events

事件 说明 回调参数
search-collapse 搜索框显示隐藏时的回调 共一个参数，当前的状态，true 为显示，false 为隐藏

# Slot

name 说明
leftAction 1.10.0+ 操作栏左侧插槽，类似默认插槽，但不会使用 h-page-button-group 进行包裹
rightAction 操作栏右侧插槽

← PageSearch 搜索栏 →