tab 选项卡（齐思博）

基础用法

tab选项卡

book-size

<template>
  <div>
    <h-tab v-model="tabvalue" :list="tablist"></h-tab>
    {{ tabvalue }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      tablist: [
        {
          name: '基本信息',
          code: 'book-base',
          disabled: true
        },
        {
          name: '规格组',
          code: 'book-size'
        },
        {
          name: '食材',
          code: 'book-food'
        },
        {
          name: '步骤',
          code: 'book-step'
        },
        {
          name: '营养成分',
          code: 'book-nutrition',
          disabled: true
        },
        {
          name: '特征标签',
          code: 'book-feature',
          disabled: true
        },
      ],
      tabvalue: 'book-size'
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value/v-model	选项卡绑定值	string	—	—
list	选项卡数据集合	array	—	—

list

参数	说明	类型	可选值	默认值
name	选项名称	string	—	—
code	对应选项值与绑定值value对应	string	—	—
disabled	是否禁用	boolean	true/false	false

Events

方法名	说明	参数
input	选项选中后触发	选项值
change	选项选中后触发	选项值