p-tabs

破产案件一体化管理平台 tab 切换组件

特性

1. 传递 tabs 即可渲染出 tab 标签
2. 使用 v-model 绑定选中标签的值
3. 提供 change 事件
4. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx)。

安装和引入

安装

npm install p-tabs -S

引入

import PTabs from "p-tabs";
import "p-tabs/dist/p-tabs.css";

Vue.use(PTabs);

基础使用

<template>
  <div>
    <p-tabs v-model="active" :tabs="tabs" @change="change" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "",
      tabs: [
        { code: "", label: "全部", total: "20" },
        { code: "1", label: "未开始", total: "6" },
        { code: "2", label: "进行中", total: "4" },
        { code: "3", label: "已结束", total: "0" },
        { code: "4", label: "已取消", total: "10" },
      ],
    };
  },
  methods: {
    change(tab) {
      console.log(`选中 ${tab.label} 的tab标签`);
    },
  },
};
</script>

API

p-tabs 属性

参数	类型	默认值	说明
v-model	number/string	-	绑定值
tabs	Array	[]	需要渲染的 tab 集合

p-tabs 事件

事件名称	说明	回调参数
change	选中的标签发送变化	选中 tab 的完整选项

tabs Attributes 属性

需要渲染的 tab 集合

属性	类型	默认值	说明
label	number/string	-	tab 标签中显示的文字
code	number/string	-	tab 标签选项的值
total	number/string	''	显示在 tab 标签后的数量统计