drag-modal-vue

基于vue,不依赖任何UI库的可拖拽弹窗组件

演示动画.gif">

安装及使用

yarn add drag-modal-vue -S
or
npm install drag-modal-vue -S

// main.js
import dragModalVue from "drag-modal-vue";
import "drag-modal-vue/lib/main.css"
Vue.use(dragModalVue);
...

// page.vue
<template>
  <drag-modal-vue
    v-model="visible"
    title="测试弹层"
  >
  基于vue,不依赖任何UI库的可拖拽弹窗组件
  </drag-modal-vue>
</template>

属性

属性名	含义	默认值	类型
visible(v-model)(visible.sync)	弹窗的显隐	false	Boolean
title	标题	''	String
width	弹窗宽度	500	Number
height	弹窗高度	0(auto)	Number
mask	是否显示遮罩	true	Boolean
maskClosable	点击遮罩是否允许关闭	true	Boolean
zIndex	内容的z-index值	10	Number
ok	点击"确认按钮"的回调	-	Function
cancel	点击"取消按钮"的回调	-	Function

插槽

插槽名	含义	默认值	类型
footer	弹窗页脚	确认取消按钮(建议使用自己UI库按钮)	slot
close	自定义右上角关闭按钮	"X"号图片	slot

代码贡献

ZSJ1314、sorryljt