lightning-fawn-low-code v0.2.0

一个低代码平台的前端部分，靠拖拉拽生成页面。

主要目录说明

-- packages 预览组件，用于发布npm

-- src 源码部分，平台主要代码

命令

运行： yarn serve

打包： yarn build

发布npm

npm组件打包： yarn lib

npm登录(首次)：npm login

npm发布: npm publish

组件使用

安装依赖

yarn add elemnet-ui
yarn add gxx-low-code

在main.js中

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import LowCode from 'gxx-low-code'
import 'gxx-low-code/style/index.css'

Vue.use(ElementUI)
Vue.use(LowCode)

在组件内

<template>
    <div class="home">
        <LowCodeView ref="LowCodeView"
                     style="margin: 0 auto;"
                     :disabled="disabled"
                     @clickButton="clickButton"
                     :componentData="data" />
       <div style="text-align: center;">
           <el-button type="primary" @click="change">修改</el-button>
           <el-button type="primary" @click="getData">获取数据</el-button>
           <el-button type="primary" @click="setComponentDataByKey">设置被检测人为不可编辑</el-button>
       </div>
    </div>
</template>

<script>
import LowCode from "lightning-fawn-low-code"
import lowCodeTemplate from '@/assets/lowCodeTemplate.json'

const { setComponentData, setButtonDataByKey, setComponentDataByKey } = LowCode
export default {
    name: 'HomeView',
    data() {
        return {
            data: lowCodeTemplate,
            myData: {
                gender: '女'
            },
            // 默认可以编辑
            disabled: false
        }
    },
    methods: {
        change() {
            this.data = setComponentData(this.myData, this.data)
        },
        getData() {
            console.log('getData', this.$refs.LowCodeView.getData())
        },
        // 点击签字
        clickButton(code) {
            console.log('我点击了', code)
            setTimeout(() => {
                this.setButtonDataByKey(code)
            }, 1000)
        },
        // 修改签字
        setButtonDataByKey(code) {
            // code; 回显内容; 当前模板；
            this.data = setButtonDataByKey(code, 'http://192.168.78.193/img/20210312/9527.jpg', this.data)
        },
        // 单独设置某个组件不可编辑，也可以直接修改json
        setComponentDataByKey() {
            setComponentDataByKey('tested', 'isEdit', false, this.data)
        }
    }
}
</script>