wbfc-vs-tpl-editor v0.2.3

wbfc-vs-tpl-editor

wbfc-vs-tpl-editor是一个基于 Element UI 制作的可视化模板编辑器框架。(如果你不喜欢EL，当然也可以全部自定义UI组件) 它是由Wisea base framework cloud - visual templete editor的缩写而命名的。

它可以使用模板数据来自动生成并绑定el的表单。将数据模型驱动显示这种所见即得的功能更好的发挥。

想象一下，你可以提供一套制作好的模板给别人，他们不需要自己制作样式，制作配色，他们只要根据模板中的功能填写数据就可以得到想要的结果！这更接近真实的项目使用方案，毕竟全部动态的代码是很危险的，很容易造成XSS攻击。如果我们有现成的模板，只把数据做动态处理，就安全的多了。于是便有了本项目。

下载安装

npm install wbfc-vs-tpl-editor

import WbfcVsTplEditor from 'wbfc-vs-tpl-editor';
Vue.use(WbfcVsTplEditor);

使用流程

1. 制作你自己需要的vue组件
2. 为该组件制作一个对应的模板
3. 保存模板所需要的数据
4. 完成

以上流程可以查看 Demo 或者 下载源码后 npm run dev 打开对应网页也可见到默认的demo页面

如何制作一个编辑器

在你的模板Vue文件中引入templete-binder和templete-editor(binder负责数据模型绑定，editor负责页面渲染), 模板Vue需要mixins(混入)binder。在页面中使用TempleteEditor， 绑定v-model="tplModel" :tpl-form-elems="tplFormElems", 设置tplFormElems对应的表单元素数据，然后再将editor的插槽showComponent部分写入你的插件并绑定v-model="componentModel"即可。例：

MyComponent.vue

<template>
<div>InputTextVal:{{value.textVal}}</div>
</template>
<script type="text/javascript">
export default {
  name: 'MyComponent',
  props: {
    value: {
      type: Object,
      default () { return {}; }
    }
  }
}
</script>

MyEditor.vue

<template>
  <div>
    <TempleteEditor :tpl-form-elems="tplFormElems" v-model="tplModel" ref="tpl">
      <template v-slot:showComponent>
        <MyComponent v-model="componentModel"/>
      </template>
    </TempleteEditor>
  </div>
</template>
<script type="text/javascript">
import MyComponent from './MyComponent'
import TempleteBinder from 'wbfc-vs-tpl-editor/components/templete-binder'
import TempleteEditor from 'wbfc-vs-tpl-editor/components/templete-editor'

export default {
  name: 'MyEditor',
  mixins: [TempleteBinder],
  components: {
    TempleteEditor,
    MyComponent
  },
  data() {
    return {
      tplFormElems: [{
        type: 'input',
        name: 'textVal',
        label: 'TestTplInput',
      }]
    };
  }
}
</script>

TempleteBinder

Attributes

TempleteEditor

用于渲染模板页面

Attributes

TplFormElems

TplFormElems-Group

TplFormElems-slots

TempleteEditor - Methods

TempleteEditor - Slotes

自定义组件

在一些更为复杂的页面中，可能el提供的这些UI组件无法满足你的需求，这样的情况可以使用自定义组件。自定义组件分为：全局组件、编辑器全局组件、局部组件和局部完全自定义组件。

全局组件

直接可以使用Vue原生的全局组件设置Vue.component('component-a', { /* ... */ }) 详细文档请参考 Vue 组件注册

编辑器全局组件

这种组件是在TempleteEditor标签包裹的范围内均可以使用的全局组件。你可以在加载wbfc-vs-tpl-editor前，用use函数注册这些组件。组件要包裹在components下 例： {components: {你import的组件名}}

import WbfcVsTplEditor from 'wbfc-vs-tpl-editor';
import testComp from '../components/testComp';
Vue.use(WbfcVsTplEditor, {
  components: {
    testComp
  }
});

局部组件

通常的场景下，局部组件的使用场景最多。这种组件只在当前页面和当前页面的TempleteEditor包裹的TplFormElems元素下生效。你需要在自己的页面中使用import，然后再在覆盖beforeCreate函数中使用Vue.$formItemComponentsManager.addComponent({组件名});。

<template>
  <div>
    <TempleteEditor :tpl-form-elems="tplFormElems" v-model="tplModel" ref="tpl" :childComp="childComp">
      <template v-slot:showComponent>
        <MyComponent v-model="componentModel" />
      </template>
    </TempleteEditor>
  </div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import MyComponent from './MyComponent'
import TempleteBinder from '../src/components/templete-binder'
import TempleteEditor from '../src/components/templete-editor'
import test2 from './test2'

export default {
  name: 'MyEditor',
  mixins: [TempleteBinder],
  components: {
    TempleteEditor,
    MyComponent,
  },
  beforeCreate(){
    Vue.$formItemComponentsManager.addComponent({test2});
  }
  ...
}

局部完全自定义组件

当TplFormElems[index].type = 'custom'时，编辑器表单的元素渲染会变成完全自定义的模式，在这样的模式下，必须使用对应的插槽'form_item_' + name才能正确的渲染出结果。_这种组件通常会在只有一个功能使用到了，没有必要制作一个组件的情况下使用__。

<template>
  <div>
    <TempleteEditor :tpl-form-elems="tplFormElems" v-model="tplModel" ref="tpl" :childComp="childComp">
      <template v-slot:showComponent>
        <MyComponent v-model="componentModel" />
      </template>
      <template v-slot:form_item_bgColor="sc">
        <div class="color-schemes-line">
          <div class="color-schemes-line-text">
            <span>{{sc.data.attrs.text}}</span>
          </div>
          <el-color-picker v-model="tplModel.bgColor"></el-color-picker>
        </div>
      </template>
    </TempleteEditor>
  </div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import MyComponent from './MyComponent'
import TempleteBinder from '../src/components/templete-binder'
import TempleteEditor from '../src/components/templete-editor'

export default {
  name: 'MyEditor',
  mixins: [TempleteBinder],
  components: {
    TempleteEditor,
    MyComponent,
  },
  data() {
    return {
      tplFormElems: [{
        type: 'custom',
        name: 'bgColor',
        label: '局部',
        attrs:{
          text: '完全自定义组件'
        }
      }]
    };
  },
  ...
}

特有组件库

link-editor 链接编辑器

它是一个弹出层式的表单交互式组件,必须在弹出的对话框点击确定按钮时手动处理value。当编辑器元素中包含有链接，可以直接使用链接编辑器组件。它必须要实现一个submitDialog函数，用来处理对话框关闭时的操作，一般这个函数可以做编辑器中组件的回显，如果需要默认值，只要实现events的open事件,调用setValue函数即可。

export default {
  data() {
    return {
      tplFormElems: [{
        type: 'link-editor',
        name: 'linkVal',
        label: '链接',
        defVal: {href: 'https://github.com/xudl33/wbfc-vs-tpl-editor', label: '链接文字', target: '_blank'},
        attrs: {
          submitDialog: (val) => {
            // 回显
            this.$set(this.tplModel, 'linkVal', val);
          }
        },
        events:{
          open: (e, linkEditor) => {
            // 默认赋值
            linkEditor.setValue(this.tplModel.linkVal);
          }
        }
      }]
    };
  },
  ...
}

Attributes

Slotes

propMapping 编辑器表单映射

export default {
  data() {
    return {
      tplFormElems: [{
        type: 'link-editor',
        name: 'linkVal',
        label: '链接',
        defVal: {link: 'https://github.com/xudl33/wbfc-vs-tpl-editor', text: '链接文字', type: '_blank'},
        attrs: {
          propMapping: { // 不是默认结构的数据，需要对表单进行映射转换
             href: 'link',
             label: 'text',
             target: 'type'
          }
        },
        events:{
          open: (e, linkEditor) => {
            // 默认赋值
            linkEditor.setValue(this.tplModel.linkVal);
          }
        }
      }]
    };
  },
  ...

list-sort-editor 列表排序编辑器

它是一个可以直接对列表进行排序操作的编辑器。默认四个按钮，【向上移动】【向下移动】【移动到最前】【移动到最后】。它不是默认的编辑器全局组件，使用前需要import到你的vue中。

<template>
  <div>
          <el-table ref="multipleTable" :data="tplModel.categoryList" style="width:100%">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="text" label="分类名">
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <ListSortEditor v-model="tplModel.categoryList" :index="scope.$index"/>
              </template>
            </el-table-column>
          </el-table>
  </div>
</template>
<script type="text/javascript">
import ListSortEditor from 'wbfc-vs-tpl-editor/components/list-sort-editor'
export default {
  components: {
    ListSortEditor,
  },
  data:{
    return {
    tplModel: {
        categoryList: [{
            text: '分类1',
            href: '/'
          },
          {
            text: '分类2',
            href: '/'
          },
          {
            text: '分类3',
            href: '/'
          },
          {
            text: '分类4',
            href: '/'
          },
          {
            text: '分类5',
            href: '/'
          }
        ]
    }
   };
  }
  ...
}
</script>

Attributes

btns

Slotes

事件

不显示按钮

设置btns属性可以控制按钮是否可见。例： 不显示【移动到最前】【移动到最后】两个按钮。

<template>
  <div>
          <el-table ref="multipleTable" :data="tplModel.categoryList" style="width:100%">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="text" label="分类名">
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <ListSortEditor v-model="tplModel.categoryList" :index="scope.$index" :btns="{top:{enabled:false}, bottom:{enabled:false}}"/>
              </template>
            </el-table-column>
          </el-table>
  </div>
</template>
<script type="text/javascript">
import ListSortEditor from 'wbfc-vs-tpl-editor/components/list-sort-editor'
export default {
  components: {
    ListSortEditor,
  }
  ...
}
</script>

自定义按钮

在一些特殊场合下，默认的样式并不能满足需求，这时可以自定义操作按钮。例：自定义【向上移动】和【向下移动】同时不显示【移动到最前】【移动到最后】两个按钮。

<template>
  <div>
          <el-table ref="multipleTable" :data="tplModel.categoryList" style="width:100%">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="text" label="分类名">
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <ListSortEditor v-model="tplModel.categoryList" :index="scope.$index" :btns="{top:{enabled:false}, bottom:{enabled:false}}">
                  <template v-slot:up="sc">
                      <div><span>UP</span></div>
          </template>
                  <template v-slot:down="sc">
                      <div><span>DOWN</span></div>
          </template>
                </ListSortEditor>
              </template>
            </el-table-column>
          </el-table>
  </div>
</template>
<script type="text/javascript">
import ListSortEditor from 'wbfc-vs-tpl-editor/components/list-sort-editor'
export default {
  components: {
    ListSortEditor,
  }
  ...
}
</script>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.