如何封装一个Vue + ElementUI的弹窗组件-蒲公英云

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

迷南。 2023-09-24 22:58 207阅读 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>