youha

src/views/monthly/components/createdMonthly.vue

@@ -1,23 +1,27 @@
 <template>
   <el-dialog :show="show" :title="title" :visible.sync="monthly_show" width="60%" class="public_task" @close="$emit('update:show', false)">
     <div class="blueStripe" />
-    <el-form ref="monthly_form" :model="monthly_form" :rules="rules" label-position="left" label-width="80px">
-      <el-form-item label="标题" prop="title">
-        <el-input v-model="monthly_form.title" placeholder="请输入" />
-      </el-form-item>
-      <el-form-item label="缩略图" prop="thumb">
-        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-change="uploadChange" :on-success="handlePictureCardPreview" :on-remove="handleRemove">
-          <i class="el-icon-plus" />
-          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
-        </el-upload>
-      </el-form-item>
-      <el-form-item label="素材" prop="content">
-        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-change="uploadChangeTow" :on-success="handlePictureCardPreviewTow" :on-remove="handleRemoveTow">
-          <i class="el-icon-plus" />
-          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
-        </el-upload>
-      </el-form-item>
-    </el-form>
+    <div class="monthly-justify">
+      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 标题</div>
+      <el-input v-model="monthly_form.title" placeholder="请输入" @input="getInput(monthly_form.title)" />
+    </div>
+    <div v-show="titles" class="monthly-tip"> 标题不能为空</div>
+    <div class="monthly-justify">
+      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 缩略图</div>
+      <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreview">
+        <i class="el-icon-plus" />
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+      </el-upload>
+    </div>
+    <div v-show="thumb" class="monthly-tip"> 缩略图不能为空</div>
+    <div class="monthly-justify">
+      <div class="monthly-thumb"><span style="color: #F56C6C;">*</span> 素材</div>
+      <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreviewTow">
+        <i class="el-icon-plus" />
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
+      </el-upload>
+    </div>
+    <div v-show="content" class="monthly-tip"> 素材不能为空</div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="monthly_show = false">取 消</el-button>
       <el-button type="primary" @click="monthly_dialog">创 建</el-button>
@@ -35,11 +39,9 @@ export default {
     return {
       monthly_show: this.show,
       monthly_form: {},
-      rules: {
-        title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
-        thumb: [{ required: true, message: '缩略图不能为空', trigger: 'change' }],
-        content: [{ required: true, message: '素材不能为空', trigger: 'change' }]
-      }
+      content: false,
+      thumb: false,
+      titles: false
     }
   },
   watch: {
@@ -52,37 +54,25 @@ export default {
   },
   methods: {
     monthly_dialog() {
-      this.$refs.monthly_form.validate((valid) => {
-        if (valid) {
-          this.$emit('monthly_created', this.monthly_form)
-          this.$emit('update:show', false)
-        }
-      })
-    },
-    handleClose(done) {
-      this.monthly_show = false
-    },
-    handleRemoveTow(file, fileList) {
-      if (fileList.length === 0) {
-        this.rules.content = [{ required: true, message: '素材不能为空', trigger: 'change' }]
+      !this.monthly_form.title ? this.titles = true : ''
+      !this.monthly_form.thumb ? this.thumb = true : ''
+      !this.monthly_form.content ? this.content = true : ''
+      if (!this.monthly_form.content || !this.monthly_form.thumb || !this.monthly_form.title) {
+        return false
       }
+      this.$emit('monthly_created', this.monthly_form)
+      this.$emit('update:show', false)
     },
-    uploadChange(file, fileList) {
-      this.$refs.monthly_form.clearValidate('thumb')
-    },
-    uploadChangeTow(file, fileList) {
-      this.$refs.monthly_form.clearValidate('content')
+    getInput(one) {
+      one ? this.titles = false : this.titles = true
     },
     handlePictureCardPreviewTow(file) {
       this.monthly_form.content = 'http:' + file.url
-    },
-    handleRemove(file, fileList) {
-      if (fileList.length === 0) {
-        this.rules.thumb = [{ required: true, message: '缩略图不能为空', trigger: 'change' }]
-      }
+      this.content = false
     },
     handlePictureCardPreview(file) {
       this.monthly_form.thumb = 'http:' + file.url
+      this.thumb = false
     }
   }
 }
@@ -96,6 +86,27 @@ export default {
     color: #303133;
     padding-left: 10px;
 }
+.monthly-justify {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+.monthly-tip {
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-bottom: 20px;
+  margin-left: 80px;
+}
+.monthly-thumb {
+  width: 80px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 700;
+  line-height: 40px;
+  padding: 0 12px 0 0;
+  box-sizing: border-box;
+}
 
 .blueStripe {
   width:4px;