admin-cms-1/src/layout/news/mainForm.vue

<template>
  <div id="mainForm">
    <el-row>
      <el-col :span="24" class="mainForm">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="资讯名称">
            <el-input v-model="form.title" placeholder="请输入资讯名称"></el-input>
          </el-form-item>
          <el-form-item label="封面图片">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="资讯内容">
            <wang-editor v-model="form.content" upload-img-server=""></wang-editor>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleCancel">返回</el-button>
            <el-button type="primary" @click="handleEdit()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WangEditor from '@/components/wang-editor.vue';
export default {
  name: 'mainForm',
  props: {
    form: null,
  },
  components: {
    WangEditor,
  },
  data: () => ({
    fileList: [],
  }),
  created() {},
  computed: {},
  methods: {
    handleEdit() {
      this.handleCancel();
    },
    handleCancel() {
      this.$router.push({ path: './index' });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  padding: 0 200px;
}
.mainForm {
  padding: 20px 0;
}
</style>