3 Star 16 Fork 2

ssssssss-team / magic-page-designer

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

magic-page-designer

介绍

magic-page-designer 是一个基于 vue 的在线页面快速开发平台,主要把所有的 vue 代码都改为在线配置,最终获得一个 json 格式的页面,你可以把它存放到服务器的任何地方:数据库、静态文件、redis 等。最方便的是可以在线修改页面,再也不用担心生产出问题了,还得打开 IDE,修改测试打包,直接在线编码,所见即所得。还可以配合 magic-api 使用,完全抛弃 IDE,随时随地 code with me。

特性

  • 使用vue2,并且轻度依赖ant-design-vue(按需加载),主要用于一些自用的配置组件,并不是强依赖,所以不用在意自己的框架是否引入ant
  • 无需重复开发vue文件,只需要将注册到项目的component配置到左侧工具栏,就可以在线拖拽生成页面了
  • 提供在线拖拽编辑页面,可即时修改页面不足之处,再也不用 dev、build 啦~
  • 只需要添加到自己的项目中,再写一个自定义组件的json配置,就可以在页面上配置
  • 没有任何限制,完全基于component自定义组件原理,支持属性、样式、事件配置,只要 vue 文件能写得出,那就能在平台上使用,而且写法完全一样
  • 属性、双向绑定、事件等表达式写法,完全基于jsvue写法实现,无需额外的学习成本

安装教程

  • npm命令(vue2):npm i magic-page-designer
  • npm命令(vue3):npm i magic-page-designer@next
  • yarn命令(vue2):yarn add magic-page-designer
  • yarn命令(vue3):yarn add magic-page-designer@next

使用说明

  1. 注册组件
import Vue from 'vue'
import App from './App.vue'
import MagicPageDesigner from 'magic-page-designer'
// 最后引入自定义css,为了覆盖其它样式
import 'magic-page-designer/dist/magic-page-designer.css'

Vue.config.productionTip = false

Vue.use(MagicPageDesigner)
new Vue({
  render: (h) => h(App)
}).$mount('#app')
  1. 使用组件
<template>
  <magic-page-designer
    :mpdPageConfig.sync="mpdPageConfig"
    :mpdPageValue.sync="mpdPageValue"
    :selectPageNodeDom.sync="selectPageNodeDom"
    :editorMode="editorMode"
    @mpdSave="mpdSave"
  ></magic-page-designer>
</template>

<script>
export default {
  data() {
    return {
      // 需要渲染的页面json数据,必填
      mpdPageConfig: {},
      // 当前页面所存储的值
      mpdPageValue: {},
      // 编辑模式下选中的dom,非必填
      selectPageNodeDom: {},
      // 是否编辑模式,默认false
      editorMode: true
    }
  },
  methods: {
    // 保存事件
    mpdSave(mpdPageConfigVal) {
      console.log('mpdSave', mpdPageConfigVal)
    }
  }
}
</script>
  1. 注册组件库,以便拖拽组件使用
import { addLibrary } from 'magic-page-designer'
addLibrary({
  id: 'text',
  title: '文本',
  list: [
    {
      id: 'span',
      title: 'span',
      mpdConfig: {
        text: '在此处修改span标签内容'
      },
      ext: {
        icon: 'mpd-icon-text-border'
      }
    }
  ]
})
  1. 更多详细说明请查看文档magic-page-designer

Comments ( 0 )

Sign in for post a comment

Releases

No release

Contributors

All

Activities

load more
can not load any more
NodeJS
1
https://gitee.com/ssssssss-team/magic-page-designer.git
git@gitee.com:ssssssss-team/magic-page-designer.git
ssssssss-team
magic-page-designer
magic-page-designer
master

Search

105716 1d94204e 1850385 105716 2d26be5c 1850385