vant坑总结

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