vue2实现一个抽屉组件封装

组件

<!-- 凭证管理 - 添加凭证 -->
<template>
    <div class="add-voucher">
        <el-drawer
            :title="title"
            :visible.sync="dialogVisible"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :wrapper-closable="false"
            :destroy-on-close="true"
            direction="rtl"
            :size="650"
            @close="closeDrawer()"
        >
            <div class="drawer-wrap">
                <el-form
                    ref="ruleFormRef"
                    :model="form"
                    label-width="145px"
                    :rules="rules"
                >
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="closeDrawer">
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="submitForm('form')"
                >
                    {{ loading ? '提交中 ...' : '确 定' }}
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    name: 'AddVoucher',
    components: { },
    data() {
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.authPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        let validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.privPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            loading: false,
            cerTypeOptions: [{label: 'SNMPV1/V2', value: 'SNMPV1/V2'}, {label: 'SNMPV3', value: 'SNMPV3'}],
            authProtocolOptions: [{label: '-', value: '-'}, {label: 'MD5', value: 'MD5'}, {label: 'SHA', value: 'SHA'}],
            privProtocolOptions: [{label: '-', value: '-'}, {label: 'DES', value: 'DES'}, {label: 'AES-128', value: 'AES-128'},
                {label: 'AES-192', value: 'AES-192'}, {label: 'AES-256', value: 'AES-256'}],
            cascadeFlot: [],
            form: {
                cerType: 'SNMPV1/V2',
                name: '',
                describe: '',
                readCommunity: '', 
                username: '', 
                authProtocol: '',
                authPassword: '',
                authPasswordRepeat: '',
                privProtocol: '',
                privPassword: '',
                privPasswordRepeat: '',
                writeCommunity: '', 
                context: '', 
                port: '',
                timeOut: '',
            },
            title: '',
            type: '',
            editId: '',
            rules: {
                cerType: [{
                    required: true, message: '请选择', trigger: 'change'
                }],
                authPasswordRepeat: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                privPasswordRepeat: [
                    { validator: validatePass3, trigger: 'blur' }
                ],
                name: [{
                    required: true, message: '请输入', trigger: 'blur'
                }]
            },
            activeNames: ['1']
        };
    },
    methods: {
        // 打开弹框
        async openDrawer(params) {
            // console.log('openDrawer', params);
            this.loading = false;
            this.dialogVisible = true;
            this.title = params.title;
            this.type = params.type;
            this.editId = params.id;
            if (params.type === 'edit') {
                let {data: resData} = await this.$api.cloudWatch.voucherDetail({id: params.id});
                // console.log('resData', resData);
                if (resData.code === '200' && resData.message === '操作成功') {
                    this.form = Object.assign({}, resData.data);
                } else {
                    this.$message.error(resData.message);
                }
            }
        },
        // 关闭弹框
        closeDrawer() {
            this.$refs.ruleFormRef.resetFields();
            Object.keys(this.form).forEach(key=>{this.form[key] = '';});
            this.dialogVisible = false;
            this.form.cerType = 'SNMPV1/V2';
            this.editId = '';
        },
        // 提交
        submitForm() {
            this.$refs.ruleFormRef.validate(async valid=>{
                if (valid) {
                }
            });
        }
    }
};

</script>
<style  lang="scss" scoped>
.add-voucher {

	::v-deep .el-drawer__header {
		padding-bottom: 15px;
		border-bottom: 1px solid #eee;
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8px;
	}

	.demo-drawer__footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64px;
		line-height: 64px;
		border-top: 1px solid #eee;
		text-align: end;
		padding-right: 24px;
		background-color: #fff;
	}

	.drawer-wrap {
		padding: 16px 26px 16px 16px;
		overflow-y: auto;
		height: calc(100% - 40px);

		::v-deep .el-input__inner {
			width: 400px;
		}

		::v-deep .el-input--small {
			width: 400px;
		}

		.tip {
			margin-bottom: 20px;
			color: #2469F1;
			font-size: 14px;
			font-family: PingFangSC-Semibold, PingFang SC;
		}

		.form-tip {
			color: #999;
			font-size: 14px;
			font-family: PingFangSC-Semibold, PingFang SC;
		}

		.advanced-set {
			display: flex;
			justify-content: end;
			margin-right: 30px;
			margin-bottom: 14px;
			color: #2469F1;
			font-size: 14px;
			font-family: PingFangSC-Semibold, PingFang SC;
			cursor: pointer;
		}

		// ::v-deep .el-collapse-item__header {
		// 	border-bottom: 1px solid transparent;
		// }

		.authentication-wrap {

			.authentication-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				color: #2469F1;

				.line {
					margin-left: 5px;
					width: calc(100% - 100px);
					border-top: 1px solid #2469F1;
				}
			}
		}

		.collapse-title {
			display: flex;
			justify-content: end;
			width: 100%;
			height: 40px;
		}
	}

	::v-deep {

		.el-input--small,
		.el-radio__label,
		.el-checkbox__label {
			font-size: 12px;
			font-weight: 400;
		}

		.el-form-item__label {
			font-size: 12px;
			padding: 0 16px 0 0;
			color: #333333;
		}
	}
}
</style>

使用组件

            <AddVoucher
                ref="AddVoucherRef"
                @renewTable="getDataPage"
            />

        addClick() {
            const params = {
                type: 'add',
                title: '添加凭证'
            };
            this.$refs.AddVoucherRef.openDrawer(params);
        },