tnbapp/src/components/upload/publish-article.vue

<template>
  <div>
    <v-row justify="center">
      <v-text-field
        v-model="articlePost.title"
        placeholder="标题"
        label="标题(50字以内)"
        clearable
      />
    </v-row>
    <v-row justify="center">
      <v-btn @click="publish">立即投稿</v-btn>
    </v-row>
    <v-row justify="center" align="center">
      <RichText @content="procContent" />
    </v-row>
    <v-snackbar
      v-model="showMessage"
      :top="true"
      :timeout="3000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import RichText from '@/components/upload/rich-text'

export default {
  components: {
    RichText
  },
  data() {
    return {
      articlePost: {
        title: null,
        content: null
      },
      showMessage: false,
      message: ''
    }
  },
  created() {
  },
  methods: {
    setTitle(title) {
      if (title.length > 50) {
        this.articlePost.title = title.substring(0, 50)
      } else {
        this.articlePost.title = title
      }
    },
    procContent(value) {
      this.articlePost.content = value
    },
    publish() {
      if (this.articlePost.title === null || this.articlePost.title === '') {
        this.message = '稿件标题不能为空'
        this.showMessage = true
        return
      }

      if (this.articlePost.content === null) {
        this.message = '你还没有编写内容'
        this.showMessage = true
        return
      }

      console.log(this.articlePost)
    }
  }
}
</script>

<style>
</style>