vue弹出框组件封装实例代码

下面我将为你详细讲解“Vue弹出框组件封装实例代码”的攻略。

一、组件功能

我们要封装的组件是一个弹出框组件，其功能包括：

1. 支持自定义标题和内容
2. 支持自定义底部按钮（例如确定和取消）
3. 支持点击遮罩层关闭弹出框

二、组件使用

在使用该组件时，我们需要做以下几步：

1. 下载并安装该组件所需要的依赖库
2. 在项目中引入该组件
3. 使用该组件

1. 下载并安装依赖库

该组件所需要的依赖库有两个，一个是Vue.js本身，另一个是Vue-awesome库，用于支持使用图标。

你可以使用以下命令来安装这两个依赖库：

npm install vue
npm install vue-awesome

2. 引入组件

将组件代码封装到一个Vue组件中，并导出以供其他文件使用：

<template>
  <div v-show="show" class="dialog">
    <div class="dialog-mask" @click="close"></div>
    <div class="dialog-box">
      <div class="dialog-header">
        <h3 class="dialog-title">{{ title }}</h3>
        <i class="dialog-close-icon" @click="close"></i>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer" v-if="buttons.length">
        <button v-for="(item, index) in buttons" :key="index" @click="handleButtonClick(item)">{{ item.text }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import 'vue-awesome/icons/times-circle'
import Icon from 'vue-awesome/components/Icon'

export default {
  name: 'Dialog',
  components: {
    'icon': Icon
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    buttons: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleButtonClick(item) {
      this.$emit('button-click', item)
    }
  }
}
</script>

<style>
  .dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .dialog-box {
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

  .dialog-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 18px;
    font-weight: bold;
  }

  .dialog-title {
    flex: 1;
  }

  .dialog-close-icon {
    font-size: 22px;
    cursor: pointer;
  }

  .dialog-body {
    padding: 24px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
  }

  .dialog-footer button {
    margin-left: 16px;
    font-size: 14px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: #1890ff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    outline: none;
  }
</style>

3. 使用组件

在需要使用该组件的页面中，先通过import语句导入该组件，再在模板中使用该组件。

例如，我们在一个Vue页面中使用这个组件：

<template>
  <div>
    <button @click="showDialog">显示弹出框</button>

    <Dialog :show.sync="dialogVisible" :title="title" :buttons="buttons" @close="handleCloseDialog" @button-click="handleButtonClick">
      <p>{{message}}</p>
    </Dialog>
  </div>
</template>

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

export default {
  components: {
    Dialog
  },
  data: {
    dialogVisible: false,
    title: '',
    message: '',
    buttons: [
      {
        text: '确定',
        type: 'primary',
        value: true
      },
      {
        text: '取消',
        type: 'default',
        value: false
      }
    ]
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      this.title = '提示'
      this.message = '确认删除这篇文章吗？'
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    handleButtonClick(item) {
      if (item.value) {
        // 点击确定按钮的逻辑代码
      } else {
        // 点击取消按钮的逻辑代码
      }
    }
  }
}
</script>

这个例子中，我们通过按钮触发showDialog函数，然后弹出框显示询问是否确认删除文章。在对话框底部提供了确定和取消两个按钮，用户可以进行选择。

三、代码解释

这个组件主要由以下几个部分组成：

1. 模板部分

这部分是组件的模板代码，用来显示弹出框的样式和元素，并与Vue.js的数据进行绑定。它包括了以下几个部分：

• v-show指令：控制组件是否显示。

• .dialog-mask类：显示遮罩层。

• .dialog-box类：显示对话框内容。

• .dialog-header类：显示对话框的标题。

• .dialog-body类：显示对话框的内容。

• .dialog-footer类：显示对话框底部的按钮。

• v-for指令：用来循环渲染按钮。

2. 脚本部分

这部分是组件的脚本代码，用来提供组件的功能和与模板进行交互。它包括了以下几个部分：

• import语句：用来导入依赖的Vue-awesome库和组件的图标。

• name属性：组件的名称。

• components属性：组件中使用到的组件。

• props属性：组件的props属性，用于父组件向子组件传递数据。

• methods属性：组件的方法。

• $emit方法：用来触发自定义事件的方法。

3. 样式部分

这部分是组件的样式代码，用来设置组件中各个元素的样式。

它包括了以下几个部分：

• .dialog类：用来设置对话框的样式。

• .dialog-mask类：用来设置遮罩层的样式。

• .dialog-box类：用来设置对话框中包裹内容的盒子的样式。

• .dialog-header类：用来设置对话框的标题的样式。

• .dialog-title类：用来设置对话框的标题文字的样式。

• .dialog-close-icon类：用来设置对话框的关闭图标的样式。

• .dialog-body类：用来设置对话框的内容的样式。

• .dialog-footer类：用来设置对话框底部按钮的样式。

• v-for指令：用来设置按钮的样式。