binu/README.md

This is an easier platfrom with custom component for vue.

## 简介

[binu](https://www.npmjs.com/search?q=binu) 是一个 [vue2.x](https://cn.vuejs.org/v2/guide/installation.html) 插件，用于快速构建页面的 布局、自定义模块集成、自定义场景、可视化展示集成等应用场景，可供技术人员与非技术人员快速迭代页面/场景。

## 安装
```
npm install binu -D
```

### 引入 && 注册
main.js：
```
import "binu/bine.css" // 引入样式文件
import binu from "binu" // 引入插件
Vue.use(binu) // 全局注册插件
```

### 使用说明
vue中使用：

epfm —— 自定义平台插件
```html
1. 编辑模式下：

<template>
    <div id="app">
        <epfm @saveHandle="saveScene" />
    </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    saveScene(data) {
      console.log(data) // 该data值为保存的场景数据，可以调接口保存
      localStorage.setItem('myScene',JSON.stringify(data))
      alert('已保存')
    }
  }
}
</script>
```

```html
2. 展示模式下：

<template>
    <div id="app">
        <epfm @saveHandle="saveScene" :inputScene="scene" :isEdit="false" />
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            scene: null // 需要导入的场景数据(编辑模式下保存的数据)，或通过接口方式获得
        }
    },
    created() {
        const data = JSON.parse(localStorage.getItem('myScene')); // 本示例自定义场景保存在浏览器本地
        this.scene = data;
    },
    methods: {
        saveScene(data) {
            // 展示模式下，如果对重现的布局需要调整位置，仍可通过双击方式切换移动布局位置
            // 通过组合键ctrl + s来再次保存场景
            console.log(data)
        }
    }
}
</script>
```

### 界面操作示图
1. 初始化
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/01.png" />
2. 编辑栏
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/02.png" />
3. 模态框状态
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/03.png" />
4. 删除界面
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/04.png" />
5. 模块拖拽 && 模态框内展示
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/05.png" />
6. 模态框层级说明
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/06.png" />
7. 层级覆盖图示
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/07.png" />
8. 撤除模态框边框图示
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/08.png" />
9. 背景设置
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/09.png" />
10. 本地图片作背景
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/10.png" />
11. 网络图片作背景
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/11.png" />
12. 网络图片背景效果
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/12.png" />
13. 保存自定义场景
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/13.png" />
14. 重现自定义场景效果图
<img src="https://gitee.com/wu-haobin/binu/raw/master/egImg/14.png" />

### 联系方式
```
qq：1204443652
email：13670042232@163.com
```