123456789101112131415161718192021222324252627282930313233 |
- <template>
- <div class="config-tabs">
- <template v-for="group in groupList" :key="group.name">
- <config-tab :name="group.value" :is-active="group.value === active" @onClick="activeGroup">{{group.label}}</config-tab>
- </template>
- </div>
- </template>
- <script>
- import ConfigTab from './config-tab'
- export default {
- components: { ConfigTab },
- props: {
- active: String,
- groupList: Array
- },
- emits: ['update:active'],
- setup (props, { emit }) {
- const activeGroup = (name) => {
- emit('update:active', name)
- }
- return {
- activeGroup
- }
- }
- }
- </script>
- <style lang="less">
- .config-tabs{
- display: flex;
- height: 45px; // 与toolbar 高度相同
- border-bottom: 1px solid #ddd;
- }
- </style>
|