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>