测试常见前端bug-Toy模板网

这篇具有很好参考价值的文章主要介绍了测试常见前端bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

协作

后端：确定数据类型保持一致

修改公共组件：同步修改

测试方法

标签：标签内容/ref/

调用方法/属性前要确保一定存在：赋初值/判断

arr&&arr.length

this.$message.error(e && e.msg)

动态文字

交互

包裹icon

样式不生效：devtools查找，编译前的标签，运行时不一定存在

可交互的需要提示

hover样式

没有交互逻辑，就不要设置交互

无法交互的情况需要交互失效

按钮失效

查看时不可编辑，hover都显示禁点（鼠标默认select是可点，input是禁点）

超出内容的样式

传值前要有默认值，除非保证必传，以减少报错

切换选择时，之前的数据要清空

设置数据前要清空

注意区分中英文符号（，：）

提示

表单

远程搜索

条数过多时，防抖

条数有限时，回显

点击没选不应该校验，取消选择才需要校验，最后提交时才校验必填项有无值

validate

覆盖已有内容的红色边框

设置select样式

适配性

PC：window/mac都要测试

协作

后端：确定数据类型保持一致

修改公共组件：同步修改

要把其他用到公共组件的地方也改了，vs中搜索即可

测试常见前端bug,前端,开发,javascript,前端,html

测试方法

标签：标签内容/ref/

    <div class="right-wrap">
      {{ formData.moduleDataType.includes(1) }}
      <mds-tabs position="right" v-model="active" @change="scroll(active, $event)">
        <mds-tabs-pane ref="ttttt" tab="1" :index="1">1</mds-tabs-pane>
        <mds-tabs-pane style="color: brown;" tab="2" :index="2">2</mds-tabs-pane>
        <mds-tabs-pane tab="3" :index="3">3</mds-tabs-pane>
      </mds-tabs>
    </div>

调用方法/属性前要确保一定存在：赋初值/判断

arr&&arr.length

this.$message.error(e && e.msg)

UI

动态文字

不设置长度width，不然会超出省略

不必设置文本字体font-family

默认不加粗，所以不必设置font-weight

默认就是text-align:left

测试常见前端bug,前端,开发,javascript,前端,html

交互

包裹icon

直接给icon添加事件，可能不起效，因为是::before

<span class="cancel-upload" @click="cancelUpload"><mds-icon type="line-close" /></span>

样式不生效：devtools查找，编译前的标签，运行时不一定存在

可交互的需要提示

hover样式

.span-operate {
    color: #1564FF;
    cursor: pointer;
  }

测试常见前端bug,前端,开发,javascript,前端,html

没有交互逻辑，就不要设置交互

测试常见前端bug,前端,开发,javascript,前端,html

无法交互的情况需要交互失效

按钮失效

例如：无成功上传的文件则无法进行下一步

测试常见前端bug,前端,开发,javascript,前端,html

查看时不可编辑，hover都显示禁点（鼠标默认select是可点，input是禁点）

测试常见前端bug,前端,开发,javascript,前端,html

::v-deep .mds-input[disabled] {
    cursor: not-allowed !important;
}

<mds-inputnumber style="width: 400px" v-model="formData.confmTmRange[0]" placeholder="请输入1-28的整数"

:maxlength="2" :disabled="disabled" clearable controls-position="right" hover :min="1"

:max="28"></mds-inputnumber>

超出内容的样式

测试常见前端bug,前端,开发,javascript,前端,html

传值前要有默认值，除非保证必传，以减少报错

切换选择时，之前的数据要清空

设置数据前要清空

openLogDrawer() {
    this.logData = [];
    API.getQuery(`getOtherIndexFileLog/${this.wpReleId}`).then((res: any) => {
      res.data.forEach((val: any) => {
        this.logData.push({
          name: val.fileNm || 'undefined',
          time: val.createTm || 'undefined',
          creator: val.creator || 'undefined',
          state: this.status[val.status] || 'undefined',
          fileUrl: val.fileUrl || 'undefined',
          fileLogId: val.id || -1,
        })
      })
      this.visibility = true
    })
  }

注意区分中英文符号（，：）

测试常见前端bug,前端,开发,javascript,前端,html

提示

表单

远程搜索

条数过多时，防抖

 <mds-form-item v-show="formData.applyType === 1" label="OA" prop="applyOa" :required="formData.applyType === 1">
            <mds-select
              style="width: 480px"
              v-model="formData.applyOa"
              :multiple="true"
              placeholder="选择或搜索OA"
              filterable
              :remote="true"
              :remote-method="searchOA"
              :disabled="showDetail"
              clearable
              @change="changeOA"
            >
              <mds-option
                class="select-oaAndDept"
                v-for="item in OAoptions"
                :key="item.oa"
                :value="item.empOa"
                :label="item.empNmAndOa"
              >
                <div class="select-name">
                  {{ item.empNmAndOa }}
                  <div class="select-dept">{{ item.deptNm }}</div>
                </div>
              </mds-option>
            </mds-select>
          </mds-form-item>

// OA list
  OAoptions: any = []
  searchOA = debounce(this.searchOaAPi, 500)
  searchOaAPi(val: any) {
    if (!val) return
    bspUserInfoFuzzyQueryOaList({
      empOaOrNm: val,
      partitionDt: ''
    }).then((res: any) => {
      if (res && res.code == 200) {
        this.OAoptions = res.data || []
      } else {
        this.$message.error(res.msg || '系统错误')
      }
    }).catch((e: any) => {
      this.$message.error(e.msg)
    })
    // this.OAoptions = [
    //   { name: 'zhangsan-', oa: 'zhangsan' },
    //   { name: 'lisi-', oa: 'lisi' }
    // ]
  }

条数有限时，回显

测试常见前端bug,前端,开发,javascript,前端,html

<mds-select
              :class="{'validate-success': formData.applyTeamAttr.length}"
              style="width: 480px; display: block;"
              v-model="formData.applyTeamAttr"
              placeholder="选择团队属性"
              filterable
              multiple
              :remote="true"
              :remote-method="searchTeam"
              :disabled="showDetail || !!cfgTyp"
              clearable
              @change="changeApplyTeam"
            >
              <mds-option
                v-for="item in teamList"
                :key="item"
                :value="item"
                :label="item"
              ></mds-option>
            </mds-select>

  teamList: any = []
  searchTeam(val: any = '') {
    bspUserInfoFuzzyQueryTeamAttrList({
      partitionDt: '',
      teamAttr: val
    }).then((res: any) => {
      if (res && res.code == 200) {
        this.teamList = res.data || []
      } else {
        this.$message.error(res.msg || '系统错误')
      }
    }).catch((e: any) => {
      this.$message.error(e.msg)
    })
  }

mounted() {
    if (!this.notCreate) {
      this.searchTeam()
     
    }
  }

点击没选不应该校验，取消选择才需要校验，最后提交时才校验必填项有无值

  rules = {
//input类型：blur
    confmNm: [{ required: true, message: '请输入工作台版本名称', trigger: 'blur' }],
//选择类型：change
    applyType: [{ required: true, message: '请选择适用人群', trigger: 'change' }],
    applyOa: [{ required: true, validator: this.applyOaValidator, trigger: 'change' }],
  }

测试常见前端bug,前端,开发,javascript,前端,html

validate

测试常见前端bug,前端,开发,javascript,前端,html

测试常见前端bug,前端,开发,javascript,前端,html 文章来源地址https://www.toymoban.com/news/detail-613014.html

覆盖已有内容的红色边框

  ::v-deep .validate-success .mds-input {
    border-color: #d8dce6 !important;
  }

设置select样式

<mds-select :class="{'validate-success': formData.confmTm}" >
<mds-option v-for="item in CONFM_TM" :value="item.id" :label="item.label" :disabled="isDisabledTm(item)"/>
</mds-select>

到了这里，关于测试常见前端bug的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！