饿了么备注输入框-不吃辣-少放辣-多放辣-不吃蒜-不吃香菜等

<template>
  <div class="add-remark">
    <div class="input">
      <textarea maxlength="50" placeholder="请输入备注，最多50个字哦" v-model="message"></textarea>
      <span class="font-number" >{{message.length}}/50</span>
    </div>
    <div class="hint-content" v-on:click="handleHint($event)">
      <span class="hint">不吃辣</span>
      <span class="hint">少放辣</span>
      <span class="hint">多放辣</span>
      <span class="hint">不吃蒜</span>
      <span class="hint">不吃香菜</span>
      <span class="hint">不吃葱</span>
    </div>
    <div class="btn" v-on:click="goback">完成</div>
  </div>
</template>

<style scoped lang="less">
  @main-color: #51B1B0;
  @sub-color: #eeefef;
  div.add-remark {
    div.input {
      position: relative;
      padding: 0.2rem 0.5rem;
      textarea {
        box-sizing: border-box;
        width: 100%;
        height: 4rem;
        font-size: 0.4rem;
        padding: 0.3rem;
        border: 0.0294rem solid @sub-color;
        &:focus {
          box-shadow: 0 0 0.0417rem @main-color;
        }
      }
      span.font-number {
        position: absolute;
        font-size: 0.4rem;
        color: #aaa;
        bottom: 0.5rem;
        right: 0.7rem;
      }
    }
    div.hint-content {
      padding: 0.2rem;
      span.hint {
        display: inline-block;
        margin: 0.2rem 0.3rem 0.2rem 0.3rem;
        padding: 0.25rem;
        border: 0.02rem solid @sub-color;
        border-radius: 0.1rem;
        &:active {
          background-color: @sub-color;
        }
      }
    }
    div.btn {
      width: 9rem;
      height: 1rem;
      margin: 0.3rem auto;
      line-height: 1rem;
      text-align: center;
      background-color: @main-color;
      font-size: 0.45rem;
      font-weight: bold;
      color: white;
      border-radius: 0.2rem;
    }
  }
</style>

<script>
  export default {
    data () {
      return {
        message: ""
      }
    },
    watch: {
      message: function (val, oldValue) {
        if (val.length == 50) {
          this.$toast("备注最多输入50字哦");
        }
      }
    },
    methods: {
      handleHint: function (e) {
        if (e.target.nodeName.toLowerCase() == "span") {
          this.message += ("  " + e.target.innerHTML )
        }
      },
      goback () {
        this.$router.back();
      }
    }
  }
</script>