tabs.vue 668 B

12345678910111213141516171819202122232425
  1. <template>
  2. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  3. <el-tab-pane label="User" name="first">User</el-tab-pane>
  4. <el-tab-pane label="Config" name="second">Config</el-tab-pane>
  5. <el-tab-pane label="Role" name="third">Role</el-tab-pane>
  6. <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  7. </el-tabs>
  8. </template>
  9. <script lang="ts" setup>
  10. import { ref } from 'vue'
  11. const activeName = ref('first')
  12. const handleClick = (tab: string, event: Event) => {
  13. console.log(tab, event)
  14. }
  15. </script>
  16. <style>
  17. .demo-tabs > .el-tabs__content {
  18. padding: 32px;
  19. color: #6b778c;
  20. font-size: 32px;
  21. font-weight: 600;
  22. }
  23. </style>