From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001 From: doum <doum> Date: 星期五, 26 九月 2025 09:24:03 +0800 Subject: [PATCH] H5静态化 --- admin/src/components/common/GlobalWindow.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 153 insertions(+), 0 deletions(-) diff --git a/admin/src/components/common/GlobalWindow.vue b/admin/src/components/common/GlobalWindow.vue new file mode 100644 index 0000000..a670937 --- /dev/null +++ b/admin/src/components/common/GlobalWindow.vue @@ -0,0 +1,153 @@ +<template> + <el-drawer + class="global-window" + title="title" + :visible="visible" + :with-header="true" + :size="width" + :close-on-press-escape="false" + :wrapper-closable="false" + :append-to-body="true" + @close="close" + > + <div slot="title" class="window__header"> + <span class="header__btn-back" @click="close"><i class="el-icon-arrow-left"></i></span>{{title}} + </div> + <div class="window__body"> + <slot></slot> + </div> + <div v-if="withFooter" class="window__footer"> + <slot name="footer"> + <el-button @click="confirm" :loading="confirmWorking" type="primary">{{confirmText}}</el-button> + <el-button @click="close">{{cancelText}}</el-button> + </slot> + </div> + </el-drawer> +</template> + +<script> +export default { + name: 'GlobalWindow', + props: { + width: { + type: String, + default: '36%' + }, + // 鏄惁鍖呭惈搴曢儴鎿嶄綔 + withFooter: { + type: Boolean, + default: true + }, + // 纭鎸夐挳loading鐘舵�� + confirmWorking: { + type: Boolean, + default: false + }, + // 纭鎸夐挳鏂囨 + confirmText: { + default: '纭畾' + }, + // 鍙栨秷鎸夐挳鏂囨 + cancelText: { + default: '鍙栨秷' + }, + // 鏍囬 + title: { + type: String, + default: '' + }, + // 鏄惁灞曠ず + visible: { + type: Boolean, + required: true + } + }, + methods: { + /** + * 纭 + */ + confirm () { + this.$emit('confirm') + }, + /** + * 鍏抽棴 + */ + close () { + this.$emit('update:visible', false) + } + } +} +</script> + +<style scoped lang="scss"> +@import "@/assets/style/variables.scss"; +// 杈撳叆妗嗛珮搴� +$input-height: 32px; +.global-window { + // 澶撮儴鏍囬 + /deep/ .el-drawer__header { + padding: 0 10px 0 0; + line-height: 40px; + border-bottom: 1px solid #eee; + // 杩斿洖鎸夐挳 + .header__btn-back { + display: inline-block; + width: 30px; + background: $primary-color; + color: #fff; + text-align: center; + margin-right: 12px; + border-right: 1px solid #eee; + } + .el-drawer__close-btn:focus { + outline: none; + } + } + // 涓讳綋 + /deep/ .el-drawer__body { + display: flex; + flex-direction: column; + position: absolute; + top: 40px; + bottom: 0; + width: 100%; + overflow: hidden; + // 鍐呭 + .window__body { + height: 100%; + overflow-y: auto; + padding: 12px 16px; + // 鏍囩 + .el-form-item__label { + float: none; + } + // 鍏冪礌瀹藉害涓�100% + .el-form-item__content{ + & > * { + width: 100%; + } + } + // 寮�鍏宠〃鍗曢」 + .form-item-switch { + .el-form-item__content > * { + width: auto !important; + } + .switch-text { + color: #999; + margin-left: 6px; + font-size: 13px; + vertical-align: middle; + } + } + } + // 灏鹃儴 + .window__footer { + user-select: none; + border-top: 1px solid #eee; + height: 60px; + line-height: 60px; + text-align: center; + } + } +} +</style> -- Gitblit v1.9.3