Form Generator添加自定义组件,文本组件
- 1.先在src\components\ 下创建view
- 2.在main.js中引用。
- 3.src\utils\generator\config.js 中添加
- 4.src\views\tool\build\index.vue 中添加,这样左侧会多一个展示型组件,标题
- 5.src\views\tool\build\RightPanel.vue中增加右侧的对应配置内容,到这里就差不多了,但是当复制代码或导出文件时会报错,于是根据报错信息,找到报错文件做出相应修改,也就是第六步
- 6.src\views\tool\build\DraggableItem.vue中增加title的layouts
- 7.src\utils\generator\html.js 中增加处理,先在layouts里加第一段,再在tags里加第二段
Form Generator新增自定义组件,文字组件显示标题
运行预览效果:
需求:加一个新组件,名称为“展示型组件”,下面内容有标题,支持右侧编辑。
以上视频为完成展示。
以下为实现过程
1.先在src\components\ 下创建view
<template>
<div ref="rowTitle" v-text="rowTitleText" :style="setStyle()"></div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
computed: {
rowTitleText () {
return this.$attrs.titleText
},
},
watch:{
$attrs: {
deep: true,
handler (val) {
this.setStyle()
}
},
},
methods: {
setStyle(){
let obj = {
color: this.$attrs.fontColor,
fontSize: this.$attrs.fontSize+'px',
fontWeight: this.$attrs.fontWeight ? 600 : 400,
textAlign: this.$attrs.textAlign,
}
return obj
}
},
};
</script>
<style lang="scss" scoped>
</style>
2.在main.js中引用。
// 标题组件
import RowTitle from '@/components/RowTitle'
// 全局组件挂载
Vue.component('RowTitle', RowTitle)
3.src\utils\generator\config.js 中添加
// 展示型组件 【左面板】
export const showComponents = [
{
__config__: {
layout: 'showFormItem',
tag: 'row-title',
tagIcon: 'row',
label: '标题容器',
document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
},
titleText: '标题',
fontSize: 20,
fontColor: '#606266',
fontWeight: false,
textAlign: 'left',
},
]
4.src\views\tool\build\index.vue 中添加,这样左侧会多一个展示型组件,标题
import {
inputComponents,
selectComponents,
layoutComponents,
showComponents, // 此处为新增
formConf,
} from "@/utils/generator/config";
data() {
return {
showComponents, // 并在data中新增
leftComponents: [
{
title: "输入型组件",
list: inputComponents,
},
{
title: "选择型组件",
list: selectComponents,
},
{
title: "布局型组件",
list: layoutComponents,
},
{
title: "展示型组件", // 这里也要新增
list: showComponents,
},
],
},
5.src\views\tool\build\RightPanel.vue中增加右侧的对应配置内容,到这里就差不多了,但是当复制代码或导出文件时会报错,于是根据报错信息,找到报错文件做出相应修改,也就是第六步
<!-- 标题文字 -->
<el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题文字">
<el-input v-model="activeData.titleText" placeholder="请输入标题文字" />
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题大小">
<el-input v-model.number="activeData.fontSize" type="number" placeholder="请输入标题文字大小" />
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题颜色">
<el-color-picker v-model="activeData.fontColor" />
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'row-title'" label="是否加粗">
<el-switch v-model="activeData.fontWeight" />
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'row-title'" label="对齐方式">
<el-radio-group v-model="activeData.textAlign">
<el-radio-button label="left">
居左
</el-radio-button>
<el-radio-button label="center">
居中
</el-radio-button>
<el-radio-button label="right">
居右
</el-radio-button>
</el-radio-group>
</el-form-item>
6.src\views\tool\build\DraggableItem.vue中增加title的layouts
showFormItem(h, currentItem, index, list) {
const { activeItem } = this.$listeners
const config = currentItem.__config__
const className = this.activeId === config.formId
? 'drawing-row-item active-from-item'
: 'drawing-row-item'
const spanText = 'row'+config.formId
return (
<el-col span={config.span}>
<el-row gutter={config.gutter} class={className}
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
<span class="component-name">{spanText}</span>
<h1>
<render key={config.renderKey} conf={currentItem} onInput={ event => { this.$set(config, 'defaultValue', event) }}></render>
</h1>
{components.itemBtns.apply(this, arguments)}
</el-row>
</el-col>
)
},
7.src\utils\generator\html.js 中增加处理,先在layouts里加第一段,再在tags里加第二段
第一段
showFormItem(scheme) {
const config = scheme.__config__
const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null
let str = `<el-row>
${tagDom}
</el-row>`
str = colWrapper(scheme, str)
return str
}
第二段
'row-title': el => {
return `<h1 style="font-size: ${el.fontSize}px;color: ${el.fontColor};font-weight: ${el.fontWeight ? 600 : 400};text-align: ${el.textAlign};">${el.titleText}</h1>`
},
至此大功告成。
复制代码选择弹框模式,出来以后就是这样的:
<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title">
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-col :span="24">
<el-row>
<h1 style="font-size: 32px;color: #234485;font-weight: 600;text-align: left;">我是标题</h1>
</el-row>
</el-col>
</el-form>
</el-row>
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
希望能带给你启示。