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

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

原创

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

1 ·

CC 4.0 BY-SA版权

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

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>
export default {
  data() {
    return {
      show: true,
      title: '', // 标题
      confirmText: '确定', // 确认文字
      confirmVisible: true, // 是否展示确认按钮
      onConfirm: () => { // 确认执行函