czy-avue-form-design
Version:
Vue3.0版本，因Avue还存在一些bug，请慎重使用。
76 lines (75 loc) • 5.93 kB
JavaScript
import demo from './demo.vue'
import html from './html.vue'
import qrcode from './qrcode.vue'
export const customComponents= [
demo,
html,
qrcode,
]
export const customIndex= [
{
title: '自定义',
list: [{
label:'demo',
type: 'custom-demo',
component: 'custom-demo',
icon: 'el-icon-warning',
span: 24,
display: true,
},{
label:'HTML',
type: 'custom-html',
labelWidth: '0',
value:"",
component: 'custom-html',
icon: 'el-icon-warning',
readonly: true,
span: 24,
display: true,
},{
label:'互联网二维码',
type: 'custom-qrcode',
labelWidth: '0',
value:"",
component: 'custom-qrcode',
icon: 'el-icon-warning',
readonly: true,
span: 24,
display: true,
}]
},
{
title: '模板标签',
list: [{
label:'标题',
type: 'custom-qrcode',
labelWidth: '0',
value:'{\"type\":1,\"color\":\"white\",\"data\":\"<div class=\\\"editorItem\\\" contenteditable=\\\"false\\\">\\n<section class=\\\"c\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"text-align: center;\\\">\\n<section contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"padding: 5px; border: 2px solid rgb(215, 48, 28);\\\">\\n<section class=\\\"title-content\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"padding: 10px 20px; line-height: 19px; color: rgb(247, 240, 177); font-size: 17px; background-color: rgb(208, 36, 16);\\\">党员活动</section>\\n</section>\\n</section>\\n</div>\\n\",\"name\":null}',
component: 'custom-qrcode',
icon: 'el-icon-warning',
readonly: true,
span: 24,
display: true,
},{
label:'正文',
type: 'custom-qrcode',
labelWidth: '0',
value:'{\"type\":1,\"color\":\"white\",\"data\":\"<div class=\\\"editorItem\\\" contenteditable=\\\"false\\\">\\n<section class=\\\"c\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"text-align: left;\\\">\\n<section contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"position: relative; display: inline-block; z-index: 3;\\\">\\n<section class=\\\"title-index style-background\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"display: inline-block; margin-left: 15px; padding: 10px 20px; background-color: rgb(238, 54, 54); color: rgb(247, 240, 177); font-size: 17px; line-height: 18px; z-index: 3;\\\">01 聚焦两会</section>\\n\\n<section class=\\\"style-border-left\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"position: absolute; left: 9px; bottom: -6px; width: 0px; height: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent rgb(238, 54, 54); border-image: initial; transform: rotate(-135deg);\\\"> </section>\\n\\n<section contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"position: absolute; left: 9px; bottom: -6px; width: 0px; height: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent rgba(0, 0, 0, 0.3); border-image: initial; transform: rotate(-135deg); z-index: 2;\\\"> </section>\\n</section>\\n\\n<section contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"margin-top: -15px; position: relative;\\\">\\n<section class=\\\"style-background\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgb(238, 54, 54); opacity: 0.05;\\\"> </section>\\n\\n<section class=\\\"title-content style-border\\\" contenteditable=\\\"true\\\" data-v-67c3cd42=\\\"\\\" style=\\\"position: relative; padding: 35px 18px 12px; border: 1px solid rgb(238, 54, 54); font-size: 15px; color: rgb(51, 51, 51); line-height: 30px; text-align: left;\\\">两会是对自1959年以来历年召开的中华人民共和国全国人民代表大会和中国人民政治协商会议的统称。</section>\\n</section>\\n</section>\\n</div>\\n\",\"name\":null}',
component: 'custom-qrcode',
icon: 'el-icon-warning',
readonly: true,
span: 24,
display: true,
},{
label:'分割线',
type: 'custom-qrcode',
labelWidth: '0',
value:'{\"type\":1,\"color\":\"white\",\"data\":\"<div class=\\\"editorItem\\\" contenteditable=\\\"false\\\">\\n<section contenteditable=\\\"true\\\" data-v-7b7da8a0=\\\"\\\" style=\\\"text-align: center; font-size: 0px;\\\">\\n<section contenteditable=\\\"true\\\" data-v-7b7da8a0=\\\"\\\" style=\\\"display: flex; max-width: 100%; min-height: 20px; justify-content: center;\\\">\\n<section class=\\\"style-border\\\" contenteditable=\\\"true\\\" data-v-7b7da8a0=\\\"\\\" style=\\\"flex: 1 1 0%; border-top: 2px solid rgb(51, 133, 255); margin-top: 10px;\\\"> </section>\\n\\n<section class=\\\"style-color\\\" contenteditable=\\\"true\\\" data-v-7b7da8a0=\\\"\\\" style=\\\"line-height: 20px; margin: 0px 14px; font-size: 18px; font-family: "PingFang SC"; font-weight: 600; color: rgb(51, 133, 255);\\\">END</section>\\n\\n<section class=\\\"style-border\\\" contenteditable=\\\"true\\\" data-v-7b7da8a0=\\\"\\\" style=\\\"flex: 1 1 0%; border-top: 2px solid rgb(51, 133, 255); margin-top: 10px;\\\"> </section>\\n</section>\\n</section>\\n</div>\\n\",\"name\":null}',
component: 'custom-qrcode',
icon: 'el-icon-warning',
readonly: true,
span: 24,
display: true,
},]
}
]