Vue 3 的通用可访问模态组件 - vue-universal-modal

Vue 3 的通用可访问模态组件 - vue-universal-modal
插件名称 vue-universal-modal
发布时间 2021年7月21日
插件作者 hoiheart

适用于 Vue 3 应用程序的功能丰富、可访问且可自定义的模态插件。

安装和下载:

# NPM
$ npm i vue-universal-modal --save

使用

1. 导入模态组件。

import 'vue-universal-modal/dist/index.css'
import VueUniversalModal from 'vue-universal-modal'
app.use(VueUniversalModal, {
  teleportTarget: '#modals'
})

2. 创建一个基本的模态窗口。

<template>
  <div>
    <button
      :class="style.button"
      @click="showModal"
    >
      Show modal
    </button>
  </div>
  <Modal
    :model-value="true"
    :close="closeModal"
    :disabled="!isShow"
  >
    <div class="modal">
      <p>
        change v-show
      </p>
      <button
        :class="style.button"
        @click="closeModal"
      >
        close
      </button>
    </div>
  </Modal>
</template>
import { defineComponent, ref } from 'vue'
import { style } from './style'
export default defineComponent({
  setup () {
    const isShow = ref(false)
    function showModal () {
      isShow.value = true
    }
    function closeModal () {
      isShow.value = false
    }
    return {
      isShow,
      showModal,
      closeModal,
      style
    }
  }
})

3. 带有选项和模态中模态。

<template>
  <div>
    <button
      :class="style.button"
      @click="showModal('modal1')"
    >
      Show modal
    </button>
  </div>
  <Modal
    v-model="isShowModal.modal1"
    :close="() => closeModal('modal1')"
    :options="options"
    :style="{ backgroundColor: 'rgba(59, 130, 246, 0.3)' }"
  >
    <div class="modal">
      <p>
        modal1
      </p>
      <button
        :class="style.button"
        class="mr-2"
        @click="showModal('modal2')"
      >
        open modal2
      </button>
      <button
        :class="style.button"
        @click="() => closeModal('modal1')"
      >
        close
      </button>
    </div>
  </Modal>
  <Modal
    v-model="isShowModal.modal2"
    :close="() => closeModal('modal2')"
    :options="options"
  >
    <div class="modal">
      <p>
        modal2
      </p>
      <button
        :class="style.button"
        @click="() => closeModal('modal2')"
      >
        close
      </button>
    </div>
  </Modal>
</template>
import { defineComponent, reactive } from 'vue'
import { style } from './style'
export default defineComponent({
  setup () {
    const isShowModal = reactive({
      modal1: false,
      modal2: false
    })
    const options = {
      transition: false,
      closeClickDimmed: false,
      closeKeyCode: false,
      styleModalContent: { justifyContent: 'flex-start' }
    }
    function showModal (key: 'modal1' | 'modal2') {
      isShowModal[key] = true
    }
    function closeModal (key: 'modal1' | 'modal2') {
      isShowModal[key] = false
    }
    return {
      isShowModal,
      options,
      showModal,
      closeModal,
      style
    }
  }
})

4.自定义动画。

.vue-universal-modal-enter-from,
.vue-universal-modal-enter-to,
.vue-universal-modal-leave-from,
.vue-universal-modal-leave-to {
  .modal {
    transition: 0.3s transform;
  }
}
.vue-universal-modal-enter-to .modal,
.vue-universal-modal-leave-from .modal {
  transform: translate3d(0, 0, 0);
}
.vue-universal-modal-enter-from .modal,
.vue-universal-modal-leave-to .modal {
  transform: translate3d(0, 50px, 0);
}

5. 事件。

<template>
  <div>
    <button
      :class="style.button"
      @click="showModal"
    >
      Show modal
    </button>
  </div>
  <Modal
    v-model="isShow"
    :close="closeModal"
    @before-enter="beforeEnter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @after-leave="afterLeave"
  >
    <div class="modal">
      <p>
        Hello
      </p>
      <button
        :class="style.button"
        @click="closeModal"
      >
        close
      </button>
    </div>
  </Modal>
</template>
import { defineComponent, ref } from 'vue'
import { style } from './style'
export default defineComponent({
  setup () {
    const isShow = ref(false)
    function showModal () {
      isShow.value = true
    }
    function closeModal () {
      isShow.value = false
    }
    function beforeEnter () {
      console.log('before enter')
    }
    function afterEnter () {
      console.log('after enter')
    }
    function beforeLeave () {
      console.log('before leave')
    }
    function afterLeave () {
      console.log('after leave')
    }
    return {
      isShow,
      showModal,
      closeModal,
      style,
      beforeEnter,
      afterEnter,
      beforeLeave,
      afterLeave
    }
  }
})