开发中遇到的bug

原创已于 2023-02-03 17:41:38 修改 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式

于 2023-02-03 11:17:10 首次发布

文章讲述了在前端开发中使用卡片布局以适应页面数据变化的需求，推荐使用特定插件来加速搜索和添加功能的开发。同时，为减少错误，提出了禁止输入空格和确保序号连续的操作，提供了Vue.js组件中实现输入框空格过滤的代码示例。

遇到要用卡片的，必须用卡片，因为随着页面数据的调整，页面长度也要跟着调整，

2.象搜索，添加这种为了开发速度，建议用下面的插件

3.为了减少bug，需要了解禁止输入空格和序号可以连续这种操作、

输入框禁止输入空格：

@keyup.native="clearBlank(1)"
@input="inputFun($event, 1)"

 //html部分
          <Form :model="form" :label-width="80" ref="addform" :rules="rules">
        <FormItem prop="name" label="用户名">
          <Input
            v-model.trim="form.name"
            @keyup.native="clearBlank(1)"
            @input="inputFun($event, 1)"
            type="text"
            :maxlength="30"
            placeholder="请输入用户名"
          ></Input>
        </FormItem>
        <FormItem prop="mobile" label="联系方式">
          <Input
            v-model.trim="form.mobile"
            @keyup.native="clearBlank(2)"
            @input="inputFun($event, 2)"
            type="text"
            :maxlength="11"
            placeholder="请输入联系方式"
          ></Input>
        </FormItem>
        <FormItem prop="account" label="账号">
          <Input
            v-model.trim="form.account"
            :disabled="modelid == 2"
            @keyup.native="clearBlank(3)"
            @input="inputFun($event, 3)"
            type="text"
            :maxlength="30"
            placeholder="请输入账号"
          ></Input>
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input
            v-model.trim="form.password"
            @keyup.native="clearBlank(4)"
            @input="inputFun($event, 4)"
            type="password"
            :minlength="6"
            :maxlength="30"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem prop="role_id" label="部门信息:">
          <Select v-model="form.role_id" :disabled="modelid == 2">
            <Option
              v-for="(item, index) in departmentList"
              :value="item.id"
              :key="index"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
   </Form>

对应的methods方法：

 // 过滤空格
    inputFun(e, num) {
      this.$nextTick(() => {
        // 正则过滤空格
        if (num == 1) {
          this.form.name = e.replace(/s\+/g, "");
        }
        if (num == 2) {
          this.form.mobile = e.replace(/s\+/g, "");
        }
        if (num == 3) {
          this.form.account = e.replace(/s\+/g, "");
        }
        if (num == 4) {
          this.form.password = e.replace(/s\+/g, "");
        }
      });
    },
    // 去除输入框空格
    clearBlank(id) {
      this.$nextTick(() => {
        if (id == 1) {
          this.form.name = this.form.name.replace(/[, ]/g, "");
        }
        if (id == 2) {
          this.form.mobile = this.form.mobile.replace(/[, ]/g, "");
        }
        if (id == 3) {
          this.form.account = this.form.account.replace(/[, ]/g, "");
        }
        if (id == 4) {
          this.form.password = this.form.password.replace(/[, ]/g, "");
        }
      });
    },