前端最终规范


公共弹窗组件

<p>公共弹窗组件</p> <pre><code class="language-javascript">&lt;template&gt; &lt;el-dialog class="super-dialog" :class="title ? 'c-bm1-mwhite-dialog' : ''" :visible.sync="show" :width="width" :top="top" :show-close="showClose" :close-on-click-modal="closeOnClickModel" :custom-class="customClass" :modal-append-to-body="modalAppendToBody" :append-to-body="appendToBody" :before-close="handleClose"&gt; &lt;div slot="title" v-if="title"&gt; &lt;slot name="title"&gt; &lt;span class="c-fs-16 c-fc-333"&gt;{{title}}&lt;/span&gt; &lt;/slot&gt; &lt;/div&gt; &lt;div v-if="scroll" :style='{"height":maxHeight}'&gt; &lt;el-scrollbar style="height:100%"&gt; &lt;slot name="content"&gt;&lt;/slot&gt; &lt;/el-scrollbar&gt; &lt;/div&gt; &lt;div v-else&gt; &lt;slot name="content"&gt;&lt;/slot&gt; &lt;/div&gt; &lt;div slot="footer" v-if="showButton"&gt; &lt;el-button v-if="showCloseButton" @click="handleClose" plain style="width: 80px;"&gt;{{cancelText}}&lt;/el-button&gt; &lt;el-button v-if="showConfirmButton" @click="handleConfirm" :disabled="btnLoading" v-loading.fullscreen="btnLoading" type="primary" style="width: 80px;"&gt;{{confirmText}}&lt;/el-button&gt; &lt;/div&gt; &lt;/el-dialog&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'superDialog', props: { show: { // 是否显示 type: Boolean, default: false }, scroll: { type: Boolean, default: false }, maxHeight: { type: String, default: '400px' }, title: { type: String, default: '' }, width: { // 宽度 type: String, default: '50%' }, closeOnClickModel: { // 是否点击遮罩层关闭 type: Boolean, default: true }, top: { // 距离顶部距离 type: String, default: '15vh' }, showClose: { // 显示关闭按钮 type: Boolean, default: true }, customClass: { // 自定义样式类名 type: String, default: '' }, modalAppendToBody: { type: Boolean, default: true }, appendToBody: { type: Boolean, default: false }, confirmText: { // 确定按钮文字 type: String, default: '确定' }, cancelText: { // 取消按钮文字 type: String, default: '关闭' }, showButton: { // 是否显示按钮 type: Boolean, default: true }, showConfirmButton: { // 显示确定按钮 type: Boolean, default: true }, showCloseButton: { // 显示取消按钮 type: Boolean, default: true }, loading: { type: Boolean, default: false } }, data() { return { } }, computed: { btnLoading() { return this.loading } }, watch: { loading() { this.btnLoading = this.loading } }, created() { }, methods: { handleClose(done) { this.$emit('close') }, handleConfirm() { this.$emit('confirm') } } } &lt;/script&gt; &lt;style lang="scss" scoped&gt; .super-dialog ::v-deep .el-dialog__header { padding: 15px 15px; } ::v-deep { .el-dialog__header { background-color: #E0E0E0; color: #000; font-weight: 600; } } .super-dialog ::v-deep .el-dialog { margin-bottom: 50px; } .super-dialog ::v-deep .el-dialog__footer { padding: 20px; border-top: 1px solid rgb(228, 228, 228); } &lt;/style&gt;</code></pre> <p>引用方式</p> <pre><code class="language-javascript"> &lt;super-dialog :show="show" @close="close" title="添加消息模板" cancelText="取消" @confirm="confirm" width="35%"&gt; &lt;div slot="title"&gt; {{dialogType==="add" ? "添加" : "编辑"}}消息模板 &lt;/div&gt; &lt;div slot="content"&gt; &lt;el-form ref="form" :model="form" :rules="rules" label-width="90px"&gt; &lt;el-form-item label="模板键值:" prop="primaryKey"&gt; &lt;el-input v-model="form.primaryKey" placeholder="请填写参数名称"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="模板名称:" prop="templateName"&gt; &lt;el-input v-model="form.templateName" placeholder="请填写参数键名"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="模板内容:" prop="keyValue"&gt; &lt;el-input placeholder="请填写参数键值" v-model="form.keyValue"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="备注:" prop="remark"&gt; &lt;div class="desc relative"&gt; &lt;el-input type="textarea" rows="7" class="word-limit-textarea" placeholder="输入备注" v-model="form.remark" maxlength="300"&gt;&lt;/el-input&gt; &lt;span class="word-limit-tips word-limit-textareaTips"&gt;已输入 {{form.remark ? getLength(form.remark) : 0}}/300&lt;/span&gt; &lt;/div&gt; &lt;/el-form-item&gt; &lt;/el-form&gt; &lt;/div&gt; &lt;/super-dialog&gt;</code></pre>

页面列表

ITEM_HTML