Honeycomb Design

# 标签页 Tabs

分隔内容上有关联但属于不同类别的数据集合。

# 基础用法

协议信息content 附属房产content 权益人信息content 付款情况content 销售变更content 售后服务content
基础用法

基础的、简洁的标签页。

<title>基础用法</title>
<describe>基础的、简洁的标签页。</describe>
<template>
  <hc-tabs v-model="activeName" @change="handleChange">
    <hc-tab-pane label="协议信息" name="protocolInformation">协议信息content</hc-tab-pane>
    <hc-tab-pane label="附属房产" name="affiliatedProperty">附属房产content</hc-tab-pane>
    <hc-tab-pane label="权益人信息" name="equityInformation">权益人信息content</hc-tab-pane>
    <hc-tab-pane label="付款情况" name="paymentSitustion">付款情况content</hc-tab-pane>
    <hc-tab-pane label="销售变更" name="salesChange">销售变更content</hc-tab-pane>
    <hc-tab-pane label="售后服务" name="afterSalesService">售后服务content</hc-tab-pane>
  </hc-tabs>
</template>
<script>
export default {
   props: ['slot-key'],
   data () {
     return {
       activeName: 'protocolInformation'
     }
   },
   methods: {
    handleChange (e) {
      console.log(e)
    }
   }
}
</script>

# 切换tab之前提示

协议信息content
before-leave

切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换

<title>before-leave</title>
<describe>切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换</describe>
<template>
  <div>
    <hc-tabs v-model="activeName" :before-leave="beforeLeave" @change="handleChange">
     <hc-tab-pane v-for="(tab, index) in tabs"
        :key="index"
        :label="tab.label"
        :name="tab.name"
      >
      </hc-tab-pane>
    </hc-tabs>
    <div class="content" v-if="activeName == 'protocolInformation'">
      协议信息content
    </div>
    <div class="content" v-if="activeName == 'affiliatedProperty'">
      附属房产content
    </div>
    <div class="content" v-if="activeName == 'equityInformation'">
      权益人信息content
    </div>
    <div class="content" v-if="activeName == 'paymentSitustion'">
      付款情况content
    </div>
    <div class="content" v-if="activeName == 'salesChange'">
      销售变更content
    </div>
    <div class="content" v-if="activeName == 'afterSalesService'">
     售后服务content
    </div>
  </div>
</template>
<script>
export default {
   props: ['slot-key'],
   data () {
     return {
      activeName: 'protocolInformation',
      tabs: [
        {
          label: '协议信息',
          name: 'protocolInformation'
        },
        {
          label: '附属房产',
          name: 'affiliatedProperty'
        },
        {
          label: '权益人信息',
          name: 'equityInformation'
        },
        {
          label: '付款情况',
          name: 'paymentSitustion'
        },
        {
          label: '销售变更',
          name: 'salesChange'
        },
        {
          label: '售后服务',
          name: 'afterSalesService'
        },
       ]
     }
   },
   methods: {
    handleChange (e) {
      console.log(e)
    },
    beforeLeave (activeName, oldActiveName) {
      if (oldActiveName === "protocolInformation") {
        return new Promise((resolve, reject) => {
          this.$confirm("您还有数据未保存，是否离开当前页面?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              resolve();
            })
            .catch(() => {
              reject();
            });
        });
      }
    },
   }
}
</script>

# 属性及事件

# HcTabs 属性

属性 说明 类型 可选值 默认值
value 当前输入的值，可配合 v-model 使用 string -- --
before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换 Function(activeName, oldActiveName) -- --

# HcTabPane 属性

属性 说明 类型 可选值 默认值
label 选项卡标题 string -- --
name 与选项卡绑定值 value 对应的标识符，表示选项卡别名换 string -- --

# HcTabs 事件

事件 说明 回调参数
change 值改变时触发事件 value
input 选中值时触发事件 value

← 图片 Image →