关于封装 Vue 弹窗组件的一些思考

最新推荐文章于 2024-08-07 21:53:27 发布

原创最新推荐文章于 2024-08-07 21:53:27 发布 · 436 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何封装一个可复用的Vue弹窗组件，通过传入不同参数实现定制化对话框，包括标题、内容及按钮文本。同时，组件支持通过回调函数返回操作状态，便于父组件监听。

CustomAlert.vue

样式差不多只是弹窗中字不一样的组件，可以用一下方式封装，防止每次都要在父组件中重新给子组件重新赋值，而且还可以通过回调函数都方式返回子组件中都返回值

<template>
    <el-dialog
        custom-class="component custom-alert"
        :title="localTitle"
        :visible="isShow"
        @update:visible="e => { isShow = e }"
        width="600px">
        <span v-if="localContent">{{localContent}}</span>
        <span slot="footer">
            <el-button @click="isShow = false">{{localCancelBtn}}</el-button>
            <el-button type="primary" @click="callBack(true), isShow = false">{{localOkBtn}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'CustomAlert',
    props: {
        titile: {
            type: String,
            default: '提示'
        },
        content: {
            type: String
        },
        okBtn: {
            type: String,
            default: '确定'
        },
        cancelBtn: {
            type: String,
            default: '取消'
        }
    },
    data: () => ({
        isShow: false,
        localTitle: '',
        localContent: '',
        localOkBtn: '',
        localCancelBtn: ''
    }),
    methods: {
        show ({ title = this.title, content = this.content, okBtn = this.okBtn, cancelBtn = this.cancelBtn }, cb) {
            this.localTitle = title
            this.localContent = content
            this.localOkBtn = okBtn
            this.localCancelBtn = cancelBtn
            this.isShow = true
            
            // 子组件返回值
            this.callBack = cb
        }
    }
}
</script>

<style lang="scss">
.component.custom-alert {}
</style>

这样使用

每次调用都时候给子组件传递需要显示都值，或者需要异步加载数据都 id，并且通过一个回调函数接收子组件的返回值

<template>
    <div class="app">
        <el-button type="primary" @click="$refs.AlertEl.show({
            title: '是否删除',
            content: '删除当前项目，此操作不可逆！',
            cancelBtn: '暂不删除',
            okBtn: '删除'
        }, deleteEvent)">删除</el-button>
        <el-button type="primary" @click="$refs.AlertEl.show({
            title: '是否取消',
            cancelBtn: '暂不取消',
            okBtn: '取消'
        }, cancelEvent)">取消</el-button>
        <custom-alert ref="AlertEl"></custom-alert>
    </div>
</template>

<script>
import CustomAlert from './components/CustomAlert'

export default {
    name: 'App',
    methods: {
        deleteEvent (status) {
            console.log('删除', status)
        },
        cancelEvent (status) {
            console.log('取消', status)
        }
    },
    components: {
        CustomAlert
    }
}
</script>

<style>
.app {}
</style>