以下app.vue依照原功能樣式增加一個註冊按鈕，頁面位置在./components/register.vue，
app.vue:
<template>
<div
class="app-container">
<!-- 顶部固定菜单 - 新增医案查询按钮 -->
<div
class="fixed-menu">
<!-- 医仙按钮 -->
<
button class="external-link">
醫仙
</
button>
<!-- 动态组件切换按钮 -->
<
button @click="setCurrentView('mreditor')"
:
class="{ active: currentView === 'mreditor' }">
醫案編輯
</
button>
<
button @click="setCurrentView('mrassociator')"
:
class="{ active: currentView === 'mrassociator' }">
醫案關聯
</
button>
<!-- 新增医案查询按钮 -->
<
button @click="setCurrentView('mrquery')"
:
class="{ active: currentView === 'mrquery' }">
醫案查詢
</
button>
<!-- 醫案匯入器按钮 -->
<
button @click="setCurrentView('mrcrud')"
:
class="{ active: currentView === 'mrcrud' }">
醫案匯入
</
button>
<
button @click="setCurrentView('dncrud')"
:
class="{ active: currentView === 'dncrud' }">
病態匯入
</
button>
<!-- 新增效驗匯入按钮 -->
<
button @click="setCurrentView('encrud')"
:
class="{ active: currentView === 'encrud' }">
效驗匯入
</
button>
<!-- 新增論治匯入按钮 -->
<
button @click="setCurrentView('tncrud')"
:
class="{ active: currentView === 'tncrud' }">
論治匯入
</
button>
<!-- 新增辨證匯入按钮 -->
<
button @click="setCurrentView('diancrud')"
:
class="{ active: currentView === 'diancrud' }">
辨證匯入
</
button>
<!-- 人物匯入按钮 -->
<
button @click="setCurrentView('fncrud')"
:
class="{ active: currentView === 'fncrud' }">
人物匯入
</
button>
<!-- 方劑匯入按钮 -->
<
button @click="setCurrentView('pncrud')"
:
class="{ active: currentView === 'pncrud' }">
方劑匯入
</
button>
<
button @click="setCurrentView('mncrud')"
:
class="{ active: currentView === 'mncrud' }">
本草匯入
</
button>
<
button @click="setCurrentView('sncrud')"
:
class="{ active: currentView === 'sncrud' }">
典籍匯入
</
button>
</div>
<!-- 动态组件展示区域 -->
<div
class="content-wrapper">
<keep-alive :include="cachedComponents">
<component :is="currentViewComponent" :key="currentView" />
</keep-alive>
</div>
</div>
</template>
<script>
import mrassociator from "./components/mrassociator.vue";
import mrquery from "./components/mrquery.vue"; // 新增医案查询组件
import mreditor from "./components/mreditor.vue";
import dncrud from "./components/dncrud.vue";
import encrud from "./components/encrud.vue";
import tncrud from "./components/tncrud.vue";
import mncrud from "./components/mncrud.vue";
import mrcrud from "./components/mrcrud.vue";
import sncrud from "./components/sncrud.vue";
import pncrud from "./components/pncrud.vue";
import fncrud from "./components/fncrud.vue";
import diancrud from "./components/diancrud.vue";
export default {
components: {
mrassociator,
mrquery, // 注册医案查询组件
mreditor,
dncrud,
encrud,
tncrud,
mncrud,
mrcrud,
sncrud,
pncrud,
fncrud,
diancrud
},
data() {
return {
currentView: "mrassociator",
// 添加mrquery到缓存列表
cachedComponents: [
"mrassociator", "mrquery", "mreditor", "dncrud", "encrud",
"tncrud", "mncrud", "mrcrud", "sncrud",
"pncrud", "fncrud", "diancrud"
]
};
},
computed: {
currentViewComponent() {
return this.currentView;
}
},
methods: {
setCurrentView(viewName) {
if (this.currentViewComponent && this.currentViewComponent.beforeLeave) {
this.currentViewComponent.beforeLeave();
}
this.currentView = viewName;
localStorage.setItem("lastActiveView", viewName);
},
restoreLastView() {
const lastView = localStorage.getItem("lastActiveView");
if (lastView && this.cachedComponents.includes(lastView)) {
this.currentView = lastView;
}
}
},
mounted() {
this.restoreLastView();
}
};
</script>
<style scoped>
.app-container {
display:
flex;
flex-direction: column;
min-height: 100vh;
}
.fixed-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #2c3e50;
padding: 10px;
display:
flex;
gap: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 100;
flex-wrap: wrap; /* 允许按钮换行 */
}
.fixed-menu
button {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #3498db;
color: white;
cursor: pointer;
transition: background 0.3s;
white-space: nowrap; /* 防止按钮文字换行 */
}
.fixed-menu
button:hover {
background: #2980b9;
}
.fixed-menu
button.active {
background: #e74c3c;
font-weight: bold;
}
.fixed-menu
button.external-link {
background: #0094ff;
cursor: default;
}
.fixed-menu
button.external-link:hover {
background: #0094ff;
}
.content-wrapper {
flex: 1;
margin-top: 60px;
padding: 20px;
background: #f5f5f5;
height: calc(100vh - 80px);
overflow-y: auto;
}
</style>
本文介绍了一个使用ActionScript编写的自定义按钮类，该类为按钮添加了发光效果。通过实例化GlowFilter类并将其应用于按钮的textField属性，实现了按钮的视觉增强。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
