1 line
3.4 KiB
JSON
1 line
3.4 KiB
JSON
{"ast":null,"code":"export default {\n name: \"tabBar\",\n data() {\n return {};\n },\n methods: {\n changeTab(index) {\n if (this.clickFlag) {\n this.$emit('changeTab', index);\n }\n }\n },\n props: {\n activeTab: {\n // 传入当前选中的 tab\n type: Number,\n default: 0\n },\n serverList: {\n // 服务列表\n type: Array,\n default: []\n },\n clickFlag: {\n // 是否可以切换 服务tab\n type: Boolean,\n default: true\n }\n }\n};","map":{"version":3,"names":["name","data","methods","changeTab","index","clickFlag","$emit","props","activeTab","type","Number","default","serverList","Array","Boolean"],"sources":["src/components/tabBar.vue"],"sourcesContent":["<template>\r\n <div class=\"tab_content\">\r\n <div class=\"top_line\"></div>\r\n <div class=\"tab_wrap\">\r\n <div v-for=\"(item, index) in serverList\" @click=\"changeTab(index)\" class=\"tab_item\" :class=\"{ 'tab_active': index == activeTab }\">\r\n {{ item.serverName }}\r\n </div>\r\n </div>\r\n <div class=\"server_desc\">\r\n {{serverList[activeTab].serverDesc}}\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n name: \"tabBar\",\r\n data() {\r\n return {\r\n }\r\n },\r\n methods: {\r\n changeTab(index) {\r\n if( this.clickFlag ) {\r\n this.$emit('changeTab', index)\r\n }\r\n }\r\n },\r\n props: {\r\n activeTab: { // 传入当前选中的 tab\r\n type: Number,\r\n default: 0\r\n },\r\n serverList: { // 服务列表\r\n type: Array,\r\n default: []\r\n },\r\n clickFlag: { // 是否可以切换 服务tab\r\n type: Boolean,\r\n default: true,\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n .tab_content {\r\n background: #FAFAFA;\r\n padding-top: 10px;\r\n .top_line {\r\n width: 34px;\r\n height: 3px;\r\n background: #9FA5B4;\r\n border-radius: 3px;\r\n opacity: 0.19;\r\n margin: 0 auto;\r\n }\r\n .tab_wrap {\r\n padding-top: 10px;\r\n display: flex;\r\n border-bottom: 1px solid #F1F2F5;\r\n .tab_item {\r\n flex: 1;\r\n padding: 10px 0;\r\n text-align: center;\r\n font-size: 15px;\r\n color: rgba(0, 0, 0, 0.4);\r\n font-weight: 500;\r\n }\r\n .tab_active {\r\n position: relative;\r\n font-weight: 600;\r\n color: #3678FF;\r\n }\r\n .tab_active:after {\r\n display: inline-block;\r\n content: '';\r\n width: 18px;\r\n height: 3px;\r\n background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);\r\n border-radius: 2px;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n }\r\n .server_desc {\r\n padding: 5px;\r\n font-size: 12px;\r\n \r\n }\r\n }\r\n</style>\r\n"],"mappings":"AAeA;EACAA,IAAA;EACAC,KAAA;IACA,QACA;EACA;EACAC,OAAA;IACAC,UAAAC,KAAA;MACA,SAAAC,SAAA;QACA,KAAAC,KAAA,cAAAF,KAAA;MACA;IACA;EACA;EACAG,KAAA;IACAC,SAAA;MAAA;MACAC,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;IACAC,UAAA;MAAA;MACAH,IAAA,EAAAI,KAAA;MACAF,OAAA;IACA;IACAN,SAAA;MAAA;MACAI,IAAA,EAAAK,OAAA;MACAH,OAAA;IACA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]} |