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 |

Tip

鼠标移动至盒子边缘（鼠标样式发生改变）, 按住鼠标左键即可拖拽缩放和放大；鼠标移动到盒子内部按住鼠标左键即可移动；鼠标左键抬起事件取消

由于选中文本会导致元素移动和缩放出现问题，所以只能在dialogEl禁止移动的时候才可以选中文件