专栏首页达达前端饿了么备注输入框-不吃辣-少放辣-多放辣-不吃蒜-不吃香菜等

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap教程,SQL

    DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言

    达达前端
  • (9)打鸡儿教你Vue.js

    设置元素的样式 用 v-bind 来设置样式属性 class 与 style 是 HTML 元素的属性

    达达前端
  • 第85节:Java中的JavaScript

    后代选择器: 选择器1 选择器2 子元素选择器:选择器1 > 选择器2 选择器分组: 选择器1,选择器2,选择器3{} 属性选择器:选择器[属性名称='属...

    达达前端
  • Mysql 能像 MongoDB 那样存储文档了

    Mysql 5.7.12 做出了一项重大改进:支持文档型存储,意味着在 Mysql 中就可以像 MongoDB 那样存储 JSON document 了 这项改...

    dys
  • 去 BAT 面试,总结了这 55 道 MySQL 面试题!

    Mysql数据库软件是一个客户端或服务器系统,其中包括:支持各种客户端程序和库的多线程SQL服务器、不同的后端、广泛的应用程序编程接口和管理工具。

    Java技术栈
  • 去 BAT 面试,总结了这 50 道 MySQL 面试题!

    CHAR_LENGTH是字符数,而LENGTH是字节数。Latin字符的这两个数据是相同的,但是对于Unicode和其他编码,它们是不同的。

    用户4143945
  • 科技面临大变革 十年以后这些东西还会存在?

    现代社会的科技日新月异,发展频率可谓是飞速。上一个十年,上上个十年,乃至更早的以前,现在的很多新事物在当时肯定是想都不敢想的。而这些科技确实是在后来的今天诞生了...

    企鹅号小编
  • AI一分钟|AI聊机器人“Shibuyu Mirai”获日本居住权,传今日头条3亿美元收购Faceu激萌

    一分钟AI 继Sophia获得公民权后,AI聊机器人“Shibuyu Mirai”获日本居住权 今日头条收购相机拍照工具Faceu激萌,据传交易总价约为3亿...

    AI科技大本营
  • Hiberante知识点梳理

    Hibernate简介 Hibernat是一个ORM(关系映射)框架,对JDBC访问数据库的操作进行了简化,并且将数据库表中的字段和关系映射为对象,简化了对数据...

    李家酒馆酒保
  • hdu1075

    @坤的

扫码关注云+社区

领取腾讯云代金券