addMessage.vue

<template>
    <div class="add-message-container">
        <van-nav-bar left-text="取消" right-text="下一步"
                     @click-left="onClickLeft"
                     @click-right="onClickRight"
        />
        <van-panel class="van-panel">
            <template #header>
                <van-field class="message-title" v-model="title" placeholder="请输入标题" />
            </template>

            <van-field class="message-content" v-model="content" placeholder="请输入内容"  input-align="left"  type="textarea"
            />
        </van-panel>
    </div>
</template>

<script>
  export default {
    name: 'addMessage',
    data() {
      return {
        title:'',
        content:''
      }
    },
    beforeRouteEnter(to, from, next){
      next(vm => {
        if(from.name == 'releaseMessage'){
          vm.title = vm.$store.state.message.title
          vm.content = vm.$store.state.message.content
        }
      });
    },
    methods: {
      onClickLeft() {
        this.$router.push('/message')
      },
      onClickRight() {
        //发布  全员发送 获取全部id  部分可见 获取check 的id
        if(!this.title){
          this.$toast("请输入标题")
          return false
        }
        if(!this.content){
          this.$toast("请输入内容")
          return false
        }
        this.$store.commit('message/title',this.title)
        this.$store.commit('message/content',this.content)
        this.$router.push('/releaseMessage')
      },
    }
  }
</script>

<style scoped lang="scss">
    .add-message-container {
        height: 100%;
        overflow: hidden;
        .van-nav-bar {
            padding: 0 20px;
            &:after {
                border: none;
            }
        }
        /deep/.van-panel{
            padding: 0 20px;
            &:after{
                border: none;
            }
            .message-title{
                &:after{
                    left: 0;
                    border-color: #ccc;
                }
                .van-field__control{
                    height: 45px;
                }
            }
            .message-content{
                padding-top: 10px;
                .van-field__control{
                    height: calc(100vh - 110px);
                }
            }
        }
    }
</style>