饿了么备注输入框-不吃辣-少放辣-多放辣-不吃蒜-不吃香菜等
时间:2022-07-23
本文章向大家介绍饿了么备注输入框-不吃辣-少放辣-多放辣-不吃蒜-不吃香菜等,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 安防视频云服务EasyCVR集成海康SDK时语音对出现杂音问题,如何解决?
- arm linux利用alsa驱动并使用usb音频设备
- linux 磁盘转移空间的方法
- 详解git中配置的.gitignore不生效的解决办法
- Apache Thrift环境配置
- CentOS 7更新时出现:Multilib version problems问题的解决方法
- Linux模拟网络丢包与延迟的方法
- centos6.5通过yum安装nginx
- Linux系统利用cp命令实现强制覆盖功能的方法
- leetcode队列之设计循环双端队列
- Centos7学习之添加用户和用户组的方法
- Linux静态库与动态库实例详解
- Linux字符终端如何用鼠标移动一个红色矩形详解
- Linux中出现“No space left on device”错误的排查与解决方法
- 浏览器是如何调度进程和线程的?