代理分佣后台网站开发,国家信息企业公示系统全国,东道设计有限公司,常州网站优化公司首先看效果图 如图所示#xff0c;标签在浏览器窗口居中#xff0c;但是下面的内容依然是默认从左到右#xff0c;不会受到tab样式的影响
templatedivdiv styledisplay: flex; justify-content: center; align-items: center;el-…首先看效果图 如图所示标签在浏览器窗口居中但是下面的内容依然是默认从左到右不会受到tab样式的影响
templatedivdiv styledisplay: flex; justify-content: center; align-items: center;el-tabs v-modelactiveName classdemo-tabs no-content tab-clickhandleClickel-tab-pane label文本 namefirst!-- TextCode /--/el-tab-paneel-tab-pane label网址 namesecond/el-tab-paneel-tab-pane label文件 namethird/el-tab-paneel-tab-pane label图片 namefourth/el-tab-paneel-tab-pane label音视频 namefive/el-tab-pane/el-tabs/divdiv stylebackground-color: #f6f8f7;TextCode v-ifactiveName second//div/div
/template
script langts setup
import { ref } from vue
import type { TabsPaneContext } from element-plus
import TextCode from ./code/textCode.vue;const activeName ref(first)const handleClick (tab: TabsPaneContext, event: Event) {console.log(tab, event)
}
/script
style
.demo-tabs .el-tabs__content {padding: 32px;color: #6b778c;font-size: 32px;font-weight: 600;background-color: #f6f8f7;
}.no-content .el-tabs__content {display: none;
}
/style
