自定义Button 实现Flex Button 描边效果。

本文介绍了一个使用ActionScript编写的自定义按钮类,该类为按钮添加了发光效果。通过实例化GlowFilter类并将其应用于按钮的textField属性,实现了按钮的视觉增强。

以下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>
09-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值