You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
3.3 KiB
1 line
3.3 KiB
{"ast":null,"code":"import { ref } from 'vue';\nexport default {\n __name: 'header',\n setup(__props, {\n expose: __expose\n }) {\n __expose();\n const activeIndex = ref('1'); // 初始选中项\n\n const handleSelect = index => {\n activeIndex.value = index;\n };\n const __returned__ = {\n activeIndex,\n handleSelect,\n ref\n };\n Object.defineProperty(__returned__, '__isScriptSetup', {\n enumerable: false,\n value: true\n });\n return __returned__;\n }\n};","map":{"version":3,"names":["ref","activeIndex","handleSelect","index","value"],"sources":["D:/vue/demo/src/components/header.vue"],"sourcesContent":["<template>\r\n <el-menu\r\n :default-active=\"activeIndex\"\r\n class=\"el-menu-demo\"\r\n mode=\"horizontal\"\r\n @select=\"handleSelect\"\r\n background-color=\"#FFFFFF\"\r\n text-color=\"#000000\"\r\n active-text-color=\"#FEB2D7\"\r\n >\r\n <div class=\"logo\">\r\n <img src=\"./Logo.png\" alt=\"Logo\" />\r\n </div>\r\n <el-menu-item index=\"1\" :class=\"{ 'active-item': activeIndex === '1' }\">智能推荐</el-menu-item>\r\n <el-sub-menu index=\"2\">\r\n <template #title>\r\n <span :class=\"{ 'active-item': activeIndex === '2' }\">社区互动</span>\r\n </template>\r\n <el-menu-item index=\"2-1\" :class=\"{ 'active-item': activeIndex === '2-1' }\">item one</el-menu-item>\r\n <el-menu-item index=\"2-2\" :class=\"{ 'active-item': activeIndex === '2-2' }\">item two</el-menu-item>\r\n <el-menu-item index=\"2-3\" :class=\"{ 'active-item': activeIndex === '2-3' }\">item three</el-menu-item>\r\n </el-sub-menu>\r\n <el-menu-item index=\"3\" disabled>情感助手</el-menu-item>\r\n <el-menu-item index=\"4\" :class=\"{ 'active-item': activeIndex === '4' }\">个人空间</el-menu-item>\r\n <div class=\"tu\">\r\n <img src=\"./tu.png\" alt=\"tu\" />\r\n </div>\r\n <div class=\"tooltip-ball\" v-if=\"activeIndex\">\r\n <span>提示信息</span>\r\n </div>\r\n </el-menu>\r\n <div class=\"h-6\" />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue';\r\n\r\nconst activeIndex = ref('1'); // 初始选中项\r\n\r\nconst handleSelect = (index) => {\r\n activeIndex.value = index;\r\n};\r\n</script>\r\n\r\n<style>\r\n.el-menu-demo {\r\n justify-content: space-between; /* 平铺菜单项 */\r\n position: relative; /* 确保 tooltip 能够定位 */\r\n}\r\n\r\n.logo img,\r\n.tu img {\r\n height: 40px; /* 根据需要调整高度 */\r\n width: auto; /* 自适应宽度 */\r\n margin-right: 10px; /* 与菜单项的间距 */\r\n}\r\n\r\n.active-item {\r\n position: relative; /* 让提示球相对这个按钮定位 */\r\n}\r\n\r\n.tooltip-ball {\r\n position: absolute;\r\n bottom: 100%; /* 显示在按钮上方 */\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n white-space: nowrap;\r\n z-index: 10; /* 确保在其他元素之上 */\r\n}\r\n</style>\r\n"],"mappings":"AAmCA,SAASA,GAAG,QAAQ,KAAK;;;;;;;IAEzB,MAAMC,WAAW,GAAGD,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;;IAE9B,MAAME,YAAY,GAAIC,KAAK,IAAK;MAC9BF,WAAW,CAACG,KAAK,GAAGD,KAAK;IAC3B,CAAC","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |