onewebapp-window

安装

npm i -S onewebapp-window

介绍

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

使用

• 单独引用

<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>

• 全局引用

//在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 | 鼠标按下移动时回调 |

注意

// 若出现事件无法取消，则在父元素上添加事件

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

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