| | |
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import draggable from 'vuedraggable'
|
|---|
| | | import { saveAs } from 'file-saver'
|
|---|
| | | import beautifier from 'js-beautify'
|
|---|
| | | import ClipboardJS from 'clipboard'
|
|---|
| | | import render from '@/utils/generator/render'
|
|---|
| | | import RightPanel from './RightPanel'
|
|---|
| | | import {
|
|---|
| | | inputComponents,
|
|---|
| | | selectComponents,
|
|---|
| | | layoutComponents,
|
|---|
| | | formConf
|
|---|
| | | } from '@/utils/generator/config'
|
|---|
| | | import {
|
|---|
| | | exportDefault, beautifierConf, isNumberStr, titleCase
|
|---|
| | | } from '@/utils/index'
|
|---|
| | | import {
|
|---|
| | | makeUpHtml, vueTemplate, vueScript, cssStyle
|
|---|
| | | } from '@/utils/generator/html'
|
|---|
| | | import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
|
|---|
| | | import { beautifierConf, titleCase } from '@/utils/index'
|
|---|
| | | import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
|
|---|
| | | import { makeUpJs } from '@/utils/generator/js'
|
|---|
| | | import { makeUpCss } from '@/utils/generator/css'
|
|---|
| | | import drawingDefalut from '@/utils/generator/drawingDefalut'
|
|---|
| | | import drawingDefault from '@/utils/generator/drawingDefault'
|
|---|
| | | import logo from '@/assets/logo/logo.png'
|
|---|
| | | import CodeTypeDialog from './CodeTypeDialog'
|
|---|
| | | import DraggableItem from './DraggableItem'
|
|---|
| | |
|
|---|
| | | const emptyActiveData = { style: {}, autosize: {} }
|
|---|
| | | let oldActiveId
|
|---|
| | | let tempActiveData
|
|---|
| | |
|
|---|
| | |
|---|
| | | selectComponents,
|
|---|
| | | layoutComponents,
|
|---|
| | | labelWidth: 100,
|
|---|
| | | drawingList: drawingDefalut,
|
|---|
| | | drawingList: drawingDefault,
|
|---|
| | | drawingData: {},
|
|---|
| | | activeId: drawingDefalut[0].formId,
|
|---|
| | | activeId: drawingDefault[0].formId,
|
|---|
| | | drawerVisible: false,
|
|---|
| | | formData: {},
|
|---|
| | | dialogVisible: false,
|
|---|
| | | generateConf: null,
|
|---|
| | | showFileName: false,
|
|---|
| | | activeData: drawingDefalut[0]
|
|---|
| | | activeData: drawingDefault[0]
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | created() {
|
|---|
| | | // 防止 firefox 下 拖拽 会新打卡一个选项卡
|
|---|
| | | document.body.ondrop = event => {
|
|---|
| | | event.preventDefault()
|
|---|
| | | event.stopPropagation()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | // eslint-disable-next-line func-names
|
|---|
| | | 'activeData.label': function (val, oldVal) {
|
|---|
| | | if (
|
|---|
| | | this.activeData.placeholder === undefined
|
|---|
| | |
|---|
| | | execDownload(data) {
|
|---|
| | | const codeStr = this.generateCode()
|
|---|
| | | const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
|---|
| | | saveAs(blob, data.fileName)
|
|---|
| | | this.$download.saveAs(blob, data.fileName)
|
|---|
| | | },
|
|---|
| | | execCopy(data) {
|
|---|
| | | document.getElementById('copyNode').click()
|
|---|
| | |
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang='scss'>
|
|---|
| | | body, html{
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | background: #fff;
|
|---|
| | | -moz-osx-font-smoothing: grayscale;
|
|---|
| | | -webkit-font-smoothing: antialiased;
|
|---|
| | | text-rendering: optimizeLegibility;
|
|---|
| | | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | input, textarea{
|
|---|
| | | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .editor-tabs{
|
|---|
| | | background: #121315;
|
|---|
| | | .el-tabs__header{
|
|---|
| | |
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </style>
|
|---|
