# dialog-el

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

Latest version **0.1.8** (published 2021-11-30) · 0 weekly downloads

## Install

```sh
npm install dialog-el
pnpm add dialog-el
yarn add dialog-el
bun add dialog-el
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2021-11-30 |
| First published | 2021-11-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 305 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wangbig |
| Keywords | dialog, dialog-el |

## Links

- npm: https://www.npmjs.com/package/dialog-el
- npm.io page: https://npm.io/package/dialog-el

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.4

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.1.8 (latest) — 2021-11-30
- 0.1.7 — 2021-11-30
- 0.1.6 — 2021-11-30
- 0.1.5 — 2021-11-30
- 0.1.4 — 2021-11-30
- 0.1.3 — 2021-11-30
- 0.1.2 — 2021-11-30
- 0.1.1 — 2021-11-30
- 0.1.0 — 2021-11-30

## README

## dialog-el

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

### 安装

```
npm i dialog-el
```



### 演示
https://wangdageeee.gitee.io/componentel/



### 使用

```js
// 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
<!-- 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禁止移动的时候才可以选中文件

---
_Source: https://npm.io/package/dialog-el · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._