image.png

<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>

原著是一个有趣的人,若有侵权,请通知删除