| | |
| | | :close-on-press-escape="false" |
| | | :wrapper-closable="false" |
| | | :append-to-body="true" |
| | | :modal="false" |
| | | @close="close" |
| | | > |
| | | <div slot="title" class="window__header"> |
| | | <span class="header__btn-back" @click="close"><i class="el-icon-arrow-left"></i></span>{{title}} |
| | | <!-- {{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">确定</el-button> |
| | | <el-button @click="close">取消</el-button> |
| | | <el-button @click="confirm" :loading="confirmWorking" type="primary">{{text}}</el-button> |
| | | <el-button @click="close">返回</el-button> |
| | | </slot> |
| | | </div> |
| | | </el-drawer> |
| | |
| | | props: { |
| | | width: { |
| | | type: String, |
| | | default: '36%' |
| | | default: '100%' |
| | | }, |
| | | // 是否包含底部操作 |
| | | withFooter: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | // 提交按钮文字 |
| | | text: { |
| | | type: String, |
| | | default: '确定' |
| | | }, |
| | | // 确认按钮loading状态 |
| | | confirmWorking: { |
| | |
| | | // 输入框高度 |
| | | $input-height: 32px; |
| | | .global-window { |
| | | top: 80px !important; |
| | | left: 250px !important; |
| | | // 头部标题 |
| | | /deep/ .el-drawer__header { |
| | | ::v-deep .el-drawer__header { |
| | | padding: 0 10px 0 0; |
| | | line-height: 40px; |
| | | border-bottom: 1px solid #eee; |
| | | // text-align: center; |
| | | font-weight: 500; |
| | | color: #222; |
| | | // 返回按钮 |
| | | .header__btn-back { |
| | | display: inline-block; |
| | |
| | | } |
| | | } |
| | | // 主体 |
| | | /deep/ .el-drawer__body { |
| | | ::v-deep .el-drawer__body { |
| | | display: flex; |
| | | flex-direction: column; |
| | | position: absolute; |
| | |
| | | bottom: 0; |
| | | width: 100%; |
| | | overflow: hidden; |
| | | // background-color: #f7f7f7; |
| | | // 内容 |
| | | .window__body { |
| | | // width: 1100px; |
| | | // margin: 0 auto; |
| | | // background-color: #fff; |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | padding: 12px 16px; |
| | | |
| | | // 标签 |
| | | // .el-form-item__label { |
| | | // float: none; |
| | | // } |
| | | // 元素宽度为100% |
| | | .el-form-item__content > *{ |
| | | width: 100%; |
| | | } |
| | | } |
| | | // 尾部 |
| | | .window__footer { |