binu v1.0.9

简介

binu 是一个 vue2.x 插件，用于快速构建页面的 布局、自定义模块集成、自定义场景、可视化展示集成等应用场景，可供技术人员与非技术人员快速迭代页面/场景。

安装

npm install binu -D

引入 && 注册

main.js：

import "binu/bine.css" // 引入样式文件
import binu from "binu" // 引入插件
Vue.use(binu) // 全局注册插件

使用说明

vue中使用：

epfm —— 自定义平台插件

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>

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. 初始化
2. 编辑栏
3. 模态框状态
4. 删除界面
5. 模块拖拽 && 模态框内展示
6. 模态框层级说明
7. 层级覆盖图示
8. 撤除模态框边框图示
9. 背景设置
10. 本地图片作背景
11. 网络图片作背景
12. 网络图片背景效果
13. 保存自定义场景
14. 重现自定义场景效果图

联系方式

qq：1204443652
email：13670042232@163.com