vue-dragmodal

This package is dragable modal for Vue.js

Setup

npm install vue-dragmodal

Add main.js file example codes:

import DragModal from "vue-dragmodal";
import "vue-dragmodal/styles.css";
app.use(DragModal)

Configs

Option	Type	Values	Description
isOpen	boolean	true or false	If you want open the modal, you can set true
size	string	md, lg, xl, xxl or full	Modal width size
bgCloseEvent	boolean	true or false	If you want to close when modal background clicked, you can set this value as true
bgColor	string	css colors	You can set custom background color the modal
bgOpacity	number	number values	You can set opacity for bgColor
modalTitle	-	string or vue template	You can customize your Modal Title
modalBody	-	vue template	You can customize your Modal Body
modalFooter	-	string or vue template	You can customize your Modal Footer
onSubmit	function	-	You can set onSubmit function for default Modal Footer buttons
isDragable	boolean	true or false	You can activate dragable mode to Modal. Set true for activation

Example

<script setup>

import Modal from "./components/Modal.vue";
import CustomHeader from "./components/CustomHeader.vue";
import CustomeFooter from "./components/CustomeFooter.vue";
import ModalBody from "./components/ModalBody.vue";

const testSubmit = () => {
  alert("Submit success");
};

</script>

<template>
  <Modal
    :is-open="true"
    size="xl"
    :bgCloseEvent="false"
    :modalTitle="CustomHeader"
    :onSubmit="testSubmit"
    :modalBody="ModalBody"
    :bgOpacity="0"
    :isDragable="false"
  />
</template>

Dependencies

FontAwesome 5.15.4 (import with url your css file)

Keywords

modal, vue-modal, vue, dragable-modal, dragable