使用vue实现各类弹出框组件

使用vue实现各类弹出框组件需要遵循以下步骤:

步骤一:创建全局的Vue组件

首先,我们需要创建一个全局的Vue组件,该组件用于渲染弹出框,并设置如下属性:

  • v-show: 用于控制组件的显隐状态
  • title: 弹出框的标题
  • width: 弹出框的宽度
  • height: 弹出框的高度
  • ok: 点击“确认”按钮时的回调函数
  • cancel: 点击“取消”按钮时的回调函数

示例代码如下:

<template>
  <div class="popup" v-show="visible">
    <div class="popup-header">{{ title }}</div>
    <div class="popup-body">
      <slot></slot>
    </div>
    <div class="popup-footer">
      <button @click="ok()">确认</button>
      <button @click="cancel()">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    width: String,
    height: String,
    ok: Function,
    cancel: Function,
  },
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-header {
  background-color: #fff;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
}

.popup-body {
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-height: 80%;
  overflow: auto;
}

.popup-footer {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

步骤二:创建各类弹出框组件

接下来,我们可以根据实际需求,创建各类不同类型的弹出框组件,例如提示框、确认框、输入框等。这些组件需要继承并扩展全局组件,实现具体的功能。

示例一:实现提示框组件

提示框组件只需要在全局组件的基础上,传入相应的数据即可实现。示例代码如下:

<template>
  <popup
    :visible="visible"
    :title="title"
    :width="width"
    :height="height"
    :ok="onOk"
    :cancel="onCancel"
  >
    <p>{{ message }}</p>
  </popup>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  extends: Popup,
  props: {
    message: String,
  },
  data() {
    return {
      title: '提示框',
      width: '400px',
      height: '200px',
      visible: true,
    };
  },
  methods: {
    onOk() {
      this.visible = false;
    },
    onCancel() {
      this.visible = false;
    },
  },
};
</script>

示例二:实现确认框组件

确认框组件需要额外传入一个确认信息的文本,以及确认框的文案。示例代码如下:

<template>
  <popup
    :visible="visible"
    :title="title"
    :width="width"
    :height="height"
    :ok="onOk"
    :cancel="onCancel"
  >
    <p>{{ message }}</p>
  </popup>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  extends: Popup,
  props: {
    message: String,
    confirmText: {
      type: String,
      default: '确定',
    },
  },
  data() {
    return {
      title: '确认框',
      width: '400px',
      height: '200px',
      visible: true,
    };
  },
  methods: {
    onOk() {
      this.visible = false;
      this.$emit('confirm');
    },
    onCancel() {
      this.visible = false;
      this.$emit('cancel');
    },
  },
};
</script>

步骤三:在组件中使用弹出框

最后,我们可以在其他组件中引入这些弹出框组件,并使用v-show指令控制它们的显隐状态。例如,在一个按钮上绑定click事件,点击后弹出提示框:

<template>
  <div>
    <button @click="showMessage">显示提示框</button>
    <message-popup ref="message" :message="message"></message-popup>
  </div>
</template>

<script>
import MessagePopup from '@/components/MessagePopup.vue';

export default {
  components: {
    'message-popup': MessagePopup,
  },
  data() {
    return {
      message: 'Hello, world!',
    };
  },
  methods: {
    showMessage() {
      this.$refs.message.visible = true;
    },
  },
};
</script>

以上为使用Vue实现各类弹出框组件的完整攻略,其中包含了两个示例,分别实现了提示框和确认框组件。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用vue实现各类弹出框组件 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue 根据数组中某一项的值进行排序的方法

    Vue根据数组中某一项的值进行排序的方法: 使用JavaScript的sort方法进行排序 Vue中的数据排序可以借助JavaScript的sort方法实现。以下是按照某一项属性值进行排序的代码示例: // 数组对象 var data = [{ id: 1, name: ‘Tom’, age: 23 }, { id: 2, name: ‘Lucy’, age…

    Vue 2023年5月27日
    00
  • 关于VueSSR的一些理解和详细配置

    关于VueSSR的一些理解和详细配置 VueSSR简介 Vue Server-Side Rendering(Vue SSR)是为了解决客户端渲染(CSR)中的SEO(Search Engine Optimization)问题而出现的。Vue SSR使用Node.js的服务器渲染Vue组件,在服务器端将Vue组件渲染成HTML并将其发送给客户端。在客户端接收到…

    Vue 2023年5月28日
    00
  • vue-next/runtime-core 源码阅读指南详解

    首先,需要明确阅读 vue-next/runtime-core 源码的目的是为了深入理解 Vue 3 的核心概念及其实现细节。这篇指南将带领读者了解该源码库的组织结构、核心模块的职责和交互关系,并给出示例代码帮助读者理解。以下是该指南的主要内容: 一、源码结构 入口文件:index.ts renderer 目录:处理组件的编译和渲染 reactivity 目…

    Vue 2023年5月27日
    00
  • uni-popup手写菜鸟上门取件时间选择器

    Uni-popup是一个强大的弹出层组件,可以用于实现各种弹出窗口,包括选择器。本攻略将详细讲解如何使用uni-popup手写菜鸟上门取件时间选择器。 第一步:引入uni-popup组件 在页面中引入uni-popup组件,需要在<script>标签中添加如下代码: import uniPopup from ‘@/components/uni-p…

    Vue 2023年5月28日
    00
  • Vue高级特性概念原理详细分析

    Vue高级特性概念原理详细分析 概述 Vue.js是一款流行的JavaScript框架,具有简单易学、高效快捷、灵活可靠等优势,能够为开发人员提供完善的Web应用程序开发解决方案。本文将对Vue.js高级特性概念原理进行详细分析,包括但不限于: Vuex状态管理模式 Vue Router路由器 自定义指令 mixin混合 render 函数 异步组件 Vue…

    Vue 2023年5月27日
    00
  • vue前端RSA加密java后端解密的方法实现

    要实现前端Vue使用RSA加密数据,后端Java进行解密的过程,需要完成以下步骤: 1.在前端Vue中引入RSA库 在前端Vue中,可以使用jsencrypt这个RSA库来实现加密。可以使用npm安装: npm install jsencrypt 然后,在Vue组件中引入: import JSEncrypt from ‘jsencrypt’ 2.在前端Vue…

    Vue 2023年5月28日
    00
  • Vue计算属性与监视属性详细分析使用

    Vue.js是一个非常流行的JavaScript前端框架,其中计算属性和监视属性是Vue.js中的两个重要概念。它们都被用来监听数据的变化,但是它们有着不同的用途和适用场景。 一、 Vue计算属性 Vue计算属性是指根据现有的属性计算得出的另一属性,即Vue.js中的“computed”。Vue计算属性可以非常方便地进行数据处理和关联操作,并且具有缓存功能,…

    Vue 2023年5月28日
    00
  • 简单设置el-date-picker的默认当前时间问题

    下面是详细讲解如何设置 el-date-picker 的默认当前时间的攻略: 1.需求分析 当我们使用 el-date-picker 来选择日期时,默认展示的日期为当前日期,这在大部分场景下都是符合要求的。但有时候我们需要默认选中其他日期,比如一个从某一具体日期开始的查询页面。 在这种情况下,我们就需要设置 el-date-picker 的默认当前时间,让它…

    Vue 2023年5月29日
    00
合作推广
合作推广
分享本页
返回顶部