寫了個代碼生成工具，vue + element-ui的能夠來瞧瞧

時間 2019-11-25

標籤寫了代碼生成工具 vue element 能夠瞧瞧简体版

原文原文鏈接

寫代碼是比較枯燥的，茫茫多的業務代碼更加枯燥了，實現需求的時候，特別是一些管理平臺，無外乎一些表單、表格、彈框等，項目用的是vue + element-uijavascript

eg: 彈框在業務裏面幾乎是都會用到，下面👇這個模版應該是每一個彈框的代碼均可以公用；平時問了一些朋友同事，大部分都是複製下以前實現的一些需求代碼，而後粘貼出來刪刪改改

<template>
    <el-dialog
        :title='dialogTitle'
        :visible.sync='innerVisible'
        @confirm='onConfirm'
        @close='onClose'
        @open='onOpen'
    >
        <!--XXX-->
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
          type: Boolean,
          default: false
        }
    },
    computed: {
        innerVisible: {
          get() {
            return this.visible
          },
          set(newVal) {
            this.$emit('update:visible', newVal)
          }
        },
        dialogTitle() {
          // TODO: write your code
          return '彈框標題'
        }
    },
    methods: {
        onConfirm() {
          // TODO: write your code
        },
        onClose() {
          // TODO: write your code
        },
        onOpen() {
          // TODO: write your code
        }
    }
}
</script>
複製代碼

eg: 再來看下錶單代碼

<template>
  <el-form
    ref="form"
    class="form"
    :model="formModel"
    :rules="formRules"
    :label-width="labelWidth"
  >
    <el-form-item
      prop="label1"
      label="表單項1"
    >
      <el-input
        v-model="formModel.label1"
        placeholder="請輸入"
      >
      </el-input>
    </el-form-item>
    <el-button
      type="primary"
      @click="onSubmit"
    >
    </el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      labelWidth: "100px"
      formModel: {
        // TODO: write your code
        label1: undefined
      },
      formRules: {
        // TODO: write your code
        label1: [
          { required: true, message: '不可爲空' }
        ]
      }
    }
  },
  components: {
    // TODO: write your code
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        // TODO: write your code
      })
    }
  },
  computed: {
    // TODO: write your code
  }
}
</script>
複製代碼