Dialog-el NPM | npm.io

dialog-el

一个vue3.x的可以拖拽移动，拖拽缩小和放大的dialog组件

安装

npm i dialog-el

演示

https://wangdageeee.gitee.io/componentel/

使用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import dialogEl from "dialog-el"

createApp(App).use(dialogEl).mount('#app');

<!-- Vue -->
<template>
  <button @click="evClick">打开dialog</button>
  <button @click="evMask">打开遮罩层</button>
  <dialog-el
    title="这是一个标题"
    v-model="isShow"
    :mask="isMask"
    @evOpen="open"
  >
    <div class="box">
      鼠标移动至盒子边缘（鼠标样式发生改变）,
      按住鼠标左键即可拖拽缩放和放大；鼠标移动到盒子内部按住鼠标左键即可移动；鼠标左键抬起事件取消
    </div>
  </dialog-el>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    const isShow = ref(false);
    const isMask = ref(false);

    const evClick = () => {
      isShow.value = true;
    };

    const evMask = () => {
      isMask.value = !isMask.value;
    };

    const open = (data) => {
      console.log("我打开了", data);
    };

    return {
      isShow,
      isMask,

      evClick,
      evMask,
      open,
    };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background: palegoldenrod;
  overflow-y: auto;
}
</style>

属性

属性	说明	类型	默认值
v-model	是否打开dialogEl	Boolean	--
title	标题	String	--
mask	是否展示dialogEl的遮罩层	Boolean	false
WHStyle	dialogEl的默认宽高(无需填写px)	Object	{ width: window.innerWidth / 2,height: window.innerHeight / 2}
isMove	dialogEl是否可以移动	Boolean	true
isZoom	dialogEl是否可以拖拽缩放	Boolean	true
isIcon	dialogEl是否展示放大图标	Boolean	true

插槽

插槽名	说明	默认
--	dialogEl的内容	--
full	dialogEl的放大图标	dialogEl自带图标
close	dialogEl的关闭图标	dialogEl自带图标

方法

方法	说明	回调参数
evOpen	dialogEl打开的回调	data
evClose	dialogEl关闭的回调	data
evMove	dialogEl移动的回调	data
evZoom	dialogEl拖拽缩放的回调	data
evFull	dialogEl最大化的回调	data
evNormal	dialogEl恢复为正常窗口时候的回调	data