Van-UI发送验证码demo -效果篇

Van-UI发送验证码

样式：

       <van-field
          v-model="salaryRange"
          center
          disabled
          label="薪资"
          placeholder="请输入薪资"
        >
          <van-button slot="button" size="small" type="primary" @click="showSalaryRange = true">选择薪资<van-icon name="arrow-down" /></van-button>
        </van-field>
        <!-- 弹框：薪资范围 -->
        <van-popup v-model="showSalaryRange" position="bottom">
          <van-picker 
            show-toolbar 
            :columns="salaryRangecolumns" 
            @confirm="showSalaryRange = false" 
            @cancel="showSalaryRange = false" 
            @change="onClickPickSalaryRange" 
          />
        </van-popup>

<script>
export default {
  name: 'newForm',
  data(){
    return{
      errors: [],
      username: "",
      telphone: "",
      intention: "",  // 意向
      salaryRange: "",  // 薪资范围
      haracteristic: "",  // 特点
      checkedAgreement: true,
      showSalaryRange: false,  //薪资 弹出层不显示
      salaryRangecolumns: ['≤5K','5K-8K','8K-10K','≥10K']
    }
  },
  methods: {        
      onClickLeft() {
        this.$toast('返回');
        javascript:history.go(-1);
      },// 表单提交
      checkForm: function (e) {
        this.$toast("你点击了提交");
        this.errors = [];

        if (!this.username) {
          this.errors.push("username required.");
        }
        if (!this.password) {
          this.errors.push('password required.');
        } else if (!this.validEmail(this.password)) {
          this.errors.push('Valid password required.');
        }

        if (!this.errors.length) {
          return true;
        }

        e.preventDefault();
      },
      validEmail: function (password) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(password);
      },
      // 选择薪资
      onClickPickSalaryRange: function (picker, values) {
        console.log(values); // 返回结果
        this.salaryRange = values;
      }


  }
}

</script>

---

以上就是关于“ Van-UI发送验证码demo -效果篇 ” 的全部内容。