表单校验提示信息
实现思路要点：
- label和input对齐，需给label添加样式 vertical-align: middle;
- 为避免动态显示隐藏的的必填 * 和校验提示信息影响页面布局，都使用absolute进行布局，通过margin调整位置
技术要点：
- absolute布局的元素都会变成块级元素，可以设置margin
- 只添加absolute，不设置left、right、top、bottom属性时，元素会悬浮在原来的位置，并不会飘到页面的左上角。
<template> <div style="padding: 20px"> <div class="formItem"> <label class="formLabel"><span class="requireMark">*</span>邮 箱</label> <input> <span class="warnTips">邮箱格式不正确</span> </div> <div class="formItem"> <label class="formLabel"><span class="requireMark">*</span>手机号码</label> <input> <span class="warnTips">手机号码格式不正确</span> </div> </div> </template> <style scoped> .formItem { width: 300px; margin: 0px auto 10px auto; } .formLabel { width: 80px; display: inline-block; vertical-align: middle; } .warnTips { position: absolute; margin: 4px 0 0 10px; font-size: 12px; color: orange; } .requireMark { position: absolute; margin: 4px 0 0 -10px; color: red; } </style>
制作角标
<template> <div style="padding: 20px"> <p><span>右上角角标</span><i class="myIcon rightTop"></i></p> </div> </template> <style scoped> .myIcon { background: url("https://demo.cssworld.cn/images/6/new.png") no-repeat center; width: 12px; height: 13px; } .rightTop { position: absolute; margin: -6px 0 0 2px; } </style>
带输入建议的输入框
<template> <div style="padding: 20px"> <div class="search-box"> <input class="search-input" placeholder="搜索"> <i class="search-btn"></i> <div class="search-suggest"> <p>搜索建议1</p> <p>搜索建议2</p> <p>搜索建议3</p> <p>搜索建议4</p> <p>搜索建议5</p> </div> </div> </div> </template> <style scoped> /* 搜索按钮的无依赖绝对定位 */ .search-btn { width: 24px; height: 19px; background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3241362042,118478454&fm=26&gp=0.jpg) no-repeat center; background-size: 100% 100%; position: absolute; margin: 3px 0 0 -26px; } /* 搜索列表的无依赖绝对定位 */ .search-suggest { position: absolute; background: white; border: 1px solid #e6e8e9; width: 142px; padding:0 10px; display: none; } /*当输入框获得焦点时，显示搜索下拉列表*/ .search-input:focus ~ .search-suggest { display: block; } </style>
