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