1、步进器
1、列表,每一个都有一个步进器,同时获取数值和索引
方法1:
<van-stepper v-model="item.buy_num" :max="item.num" @change="changeNum($event,i)" />
// 改变数量
changeNum(e, i) {
console.log(e); //数量
console.log(i); //索引
},
方法2:
<van-stepper v-model="item.buy_num" :max="item.num" @change="changeNum(item.buy_num,i)" />
// 改变数量
changeNum(num, i) {
console.log(num); //数量
console.log(i); //索引
},
2、九宫格图片适配使用rem单位 icon-size=“0.6rem”
<div class="list">
<van-grid :column-num="4" :border="false" icon-size="0.6rem">
<van-grid-item
v-for="(item, i) in menus"
:key="i"
@click="$router.push(item.uri)"
:icon="item.icon"
:text="item.title"
:info="item.num == 0 ? '' : item.num"
/>
</van-grid>
</div>
3、 表单错误提示Field和Form
//对于普通的field输入框,error布尔值,true的时候显示红色文本 error-message为错误信息提示,但是提交的时候依然需要做验证
<van-cell-group>
<van-field
v-model="username"
:error="username === ''"
:error-message=" username.trim() === '' ? '用户名不能为空' : '' "
required
label="用户名"
placeholder="请输入用户名"
/>
<van-field
v-model="phone"
required
:error="phone === ''"
label="手机号"
placeholder="请输入手机号"
:error-message=" /^1[3456789]\d{9}$/.test(phone) || phone == '' ? '' : '手机号格式错误' "
/>
</van-cell-group>
<button @click="submit">提交</button>
// 对于Form表单的field输入框,rules为数组,每个对象为一条规则, required是否必填 , message 错误提示 trigger时机:onChange、onBlur ,提交按钮native-type=“submit”,使用form时间提交的时候以每个field的name属性为准
<van-form @submit="onSubmit">
<van-cell-group>
<van-field
v-model="username"
required
label="用户名"
placeholder="请输入用户名"
name="username"
:rules="[
{ required: true, message: '请输入正确内容', trigger: 'onBlur' }
]"
/>
<van-field
v-model="phone"
required
name="tel"
label="手机号"
placeholder="请输入手机号"
:rules="[{ pattern, message: '手机号格式错误', trigger: 'onBlur' }]"
/>
</van-cell-group>
<van-button round block type="info" native-type="submit">
提交
</van-button>
</van-form>
onSubmit(values) {
console.log("submit", values); //submit {username: "111111", tel: "16632121212"}
}