npm.io
1.1.2 • Published 5 years ago

onewebapp-window

Licence
ISC
Version
1.1.2
Deps
0
Size
121 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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

Keywords

windowoneonewebonewebapponewebapp-window