# onewebapp-window

> this is vue module

Latest version **1.1.2** (published 2021-08-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install onewebapp-window
pnpm add onewebapp-window
yarn add onewebapp-window
bun add onewebapp-window
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-08-07 |
| First published | 2021-04-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 121.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CrazyYan |
| Maintainers | wangbig |
| Keywords | window, one, oneweb, onewebapp, onewebapp-window |

## Links

- npm: https://www.npmjs.com/package/onewebapp-window
- npm.io page: https://npm.io/package/onewebapp-window

## Recent versions

- 1.1.2 (latest) — 2021-08-07
- 1.1.1 — 2021-08-07
- 1.0.29 — 2021-05-12
- 1.0.28 — 2021-05-06
- 1.0.27 — 2021-04-27
- 1.0.26 — 2021-04-26
- 1.0.25 — 2021-04-26
- 1.0.24 — 2021-04-26
- 1.0.23 — 2021-04-19
- 1.0.22 — 2021-04-19
- 1.0.21 — 2021-04-19
- 1.0.20 — 2021-04-18
- 1.0.19 — 2021-04-18
- 1.0.18 — 2021-04-17
- 1.0.17 — 2021-04-17
- … 17 more at https://npm.io/package/onewebapp-window/versions

## README

## onewebapp-window

<img src="http://img.shields.io/npm/dm/onewebapp-window.svg">

### 安装
```npm
npm i -S onewebapp-window
```

### 介绍 
这是一个类似于window窗口的组件，可以拖拽移动，拖拽缩放 


### 使用
- 单独引用
```vue
<template>
  <div>
    <window title="窗口" :visible.sync="v">
        <div>内容</div>
    </window>
  </div>
</template>

<script>
import window from 'onewebapp-window'

export default {
  components: {
    window
  },
  data() {
      return {
          v: true
      }
  }
}
</script>

```
- 全局引用
```js
//在main.js
import window from 'onewebapp-window'

Vue.use(window)
```

### 传值

| 参数    | 说明                                         | 类型           | 可选值     | 默认值                                        |
| ------- | -------------------------------------------- | -------------- | ---------- | --------------------------------------------- |
| visible | 是否显示窗口，需要 sync 修饰符, 否则无法关闭 | Boolean        | true/false | false                                         |
| title   | 窗口标题                                     | String         | --         | 窗口                                          |
| isRun   | 是否移动                                     | Boolean        | true/false | true                                          |
| isZoom  | 是否可以缩放                                 | Boolean        | true/false | true                                          |
| width   | 窗口默认宽度                                 | String, Number | --         | window.innerWidth - window.innerWidth * 0.6   |
| height  | 窗口默认高度                                 | String, Number | --         | window.innerHeight - window.innerHeight * 0.4 |
| top     | 窗口默认偏移量                               | String, Number | --         | 0                                             |
| left    | 窗口默认偏移量                               | String, Number | --         | 0                                             |

### 事件

| 事件名称  | 说明               |
| --------- | ------------------ |
| open      | 窗口打开回调       |
| closeFun  | 窗口关闭回调       |
| clickItem | 鼠标按下移动时回调 |

### 注意
```vue
// 若出现事件无法取消，则在父元素上添加事件

<div @mouseup="clearEvent" style="position: relative; width: 100%; height: 100%">
    <window></window>
</div>

clearEvent() {
    document.onmousemove = null;
    document.onmouseup = null;
}
```

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