通过vue.extend实现一个弹窗组件

最新推荐文章于 2022-12-07 22:54:38 发布

HamsterKnight

最新推荐文章于 2022-12-07 22:54:38 发布

阅读量832

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/HamsterKnight/article/details/103992069

版权

本文将介绍如何利用Vue.js的vue.extend方法来创建一个弹窗组件，并详细讲解了从编写基础弹窗组件，到构建灵活使用的弹窗函数，最后在实际组件中调用并应用的过程。

摘要由CSDN通过智能技术生成

1.首先编写需要被继承的弹窗组件

<template>
  <div v-if="show" ref="modal" class="ek-modal_wrap">
    <div class="ek-modal-content">
      <div class="modal-title-wrap">
        <div class="modal-title">{
  { title }}</div>
        <slot name="description"></slot>
      </div>
      <div class="modal-button">
        <a v-if="confirmVisible" class="contral-btn confirm-btn" href="javascript:;" @click="confirm">{
  {
          confirmText
        }}</a>
        <a v-if="cancleVisible" class="contral-btn cancle-btn" href="javascript:;" @click="cancle">{
  { cancleText }}</a>
      </div>
    </div>
  </div>
</template>

<script>