如何封装一个Vue + ElementUI的弹窗组件

迷南。 2023-09-24 22:58 157阅读 0赞

### 前言 ###

本文将介绍如何封装一个Vue和ElementUI的弹窗组件。弹窗组件是Web开发中常用的交互组件，可以用于展示一些重要信息、警告，或者用于用户的输入。

### 1. 安装ElementUI ###

首先，我们需要安装ElementUI，可以使用npm安装，命令如下：

npm install element-ui --save

### 2. 创建弹窗组件 ###

在Vue项目中创建一个弹窗组件，可以使用ElementUI提供的Dialog组件。可以通过创建一个单独的Vue组件来封装Dialog组件。在这个组件中，我们可以定义弹窗的标题、内容、按钮等。

<template>
      <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false">
        <span>{
        {
        content}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">{
        {
        cancelText}}</el-button>
          <el-button type="primary" @click="ok">{
        {
        okText}}</el-button>
        </span>
      </el-dialog>
    </template>
    
    <script>
    export default {
        
      name: 'MyDialog',
      props: {
        
        title: String,
        content: String,
        cancelText: {
        
          type: String,
          default: '取消'
        },
        okText: {
        
          type: String,
          default: '确定'
        }
      },
      data() {
        
        return {
        
          visible: true
        }
      },
      methods: {
        
        ok() {
        
          this.$emit('ok')
          this.visible = false
        }
      }
    }
    </script>

在这个组件中，我们定义了四个props：title、content、cancelText、okText。我们还定义了一个data，用来控制弹窗的显示与隐藏。在按钮点击事件中，我们通过$emit方法向父组件发送事件，并将弹窗关闭。

### 3. 在父组件中使用弹窗组件 ###

在父组件中，我们可以通过引入弹窗组件，来使用这个组件。在父组件中，我们可以定义弹窗的标题、内容、按钮文本等。

<template>
      <div>
        <el-button @click="showDialog">点击打开弹窗</el-button>
        <my-dialog :title="title" :content="content" :cancel-text="cancelText" :ok-text="okText" @ok="onOk"></my-dialog>
      </div>
    </template>
    
    <script>
    import MyDialog from '@/components/MyDialog'
    
    export default {
        
      name: 'ParentComponent',
      components: {
        
        MyDialog
      },
      data() {
        
        return {
        
          title: '弹窗标题',
          content: '弹窗内容',
          cancelText: '取消',
          okText: '确定'
        }
      },
      methods: {
        
        showDialog() {
        
          this.$refs.dialog.visible = true
        },
        onOk() {
        
          console.log('点击了确定按钮')
        }
      }
    }
    </script>

在父组件中，我们通过引入弹窗组件，并定义四个props，来控制弹窗的显示与内容。在按钮点击事件中，我们通过$refs来获取弹窗组件的实例，并将visible属性设置为true，从而打开弹窗。

### 4. 结语 ###

本文介绍了如何封装一个Vue和ElementUI的弹窗组件。通过将Dialog组件封装成一个单独的Vue组件，并在父组件中引入这个组件，我们可以方便地使用弹窗组件，来实现一些交互功能。希望本文能对大家有所帮助。