| | |
| | |
|
| | | <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 { drawingDefaultValue, initDrawingDefaultValue, cleanDrawingDefaultValue } 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
|
| | | let clipboard = null
|
| | |
|
| | | export default {
|
| | | components: {
|
| | |
| | | selectComponents,
|
| | | layoutComponents,
|
| | | labelWidth: 100,
|
| | | drawingList: drawingDefalut,
|
| | | drawingList: drawingDefaultValue,
|
| | | drawingData: {},
|
| | | activeId: drawingDefalut[0].formId,
|
| | | activeId: drawingDefaultValue[0].formId,
|
| | | drawerVisible: false,
|
| | | formData: {},
|
| | | dialogVisible: false,
|
| | | generateConf: null,
|
| | | showFileName: false,
|
| | | activeData: drawingDefalut[0]
|
| | | activeData: drawingDefaultValue[0]
|
| | | }
|
| | | },
|
| | | beforeCreate() {
|
| | | initDrawingDefaultValue()
|
| | | },
|
| | | created() {
|
| | | // 防止 firefox 下 拖拽 会新打卡一个选项卡
|
| | |
| | | }
|
| | | },
|
| | | watch: {
|
| | | // eslint-disable-next-line func-names
|
| | | 'activeData.label': function (val, oldVal) {
|
| | | if (
|
| | | this.activeData.placeholder === undefined
|
| | |
| | | }
|
| | | },
|
| | | mounted() {
|
| | | const clipboard = new ClipboardJS('#copyNode', {
|
| | | clipboard = new ClipboardJS('#copyNode', {
|
| | | text: trigger => {
|
| | | const codeStr = this.generateCode()
|
| | | this.$notify({
|
| | |
| | | clipboard.on('error', e => {
|
| | | this.$message.error('代码复制失败')
|
| | | })
|
| | | },
|
| | | beforeDestroy() {
|
| | | clipboard.destroy()
|
| | | },
|
| | | methods: {
|
| | | activeFormItem(element) {
|
| | |
| | | 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()
|
| | |
| | | this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
|
| | | () => {
|
| | | this.drawingList = []
|
| | | cleanDrawingDefaultValue()
|
| | | }
|
| | | )
|
| | | },
|
| | |
| | | </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>
|