在vue框架內用class類、建構函式call繼承、展開引數、引數解構來封裝和引入引用自定義操作dom的js方法

阿新 • • 發佈：2020-10-29

實現一個el-elment校驗器以外的輔助校驗，一個盒子包含多個表單元素，如圖

普通元件形式將校驗隱藏顯示也簡單方便，不贅訴

一、class類方法

/**
 * @param  dom,//父元素,傳入#id或.class,傳類名的如果同類名只算第一個
 * @param warningText,警告提示文字
 * @param warningtype,true標紅false取消標紅移除警告
 * @param [],p標籤margin的四個值，輸入數值型別
 * }
 */
class Addvaild {
  constructor(dom, [top = 0, right = 0, bottom = 0, left = 0] = []) {
    const that = this
    this.top = top
    this.left = left
    this.right = right
    this.bottom = bottom
    this.dom = dom

    const domp = document.createElement('p')
    domp.style.margin = `${that.top}px ${that.right}px ${that.bottom}px ${that.left}px`
    domp.style.fontSize = '12px'
    domp.style.color = '#F56C6C'
    domp.classList.add('domp')
    this.domp = domp
  }
  doresult(dowarningtype, warningText) {
     const domparent = document.querySelector(this.dom)
      if (dowarningtype) {
        this.domp.innerText = warningText
      if (!document.getElementsByClassName('domp').length) domparent.appendChild(this.domp)
    } else {
        if (this.domp.parentNode && this.domp.parentNode === domparent) { // 有domp並且還在parent下面
          domparent.removeChild(document.querySelector('.domp'))
        }
    }
  }
}

export default Addvaild

引入和使用

<script>
import Additionvalidata from '@/utils/additionvalidata'
export default {
data() {
    return {
      addvaild: {}
}},
 mounted() {
     this.addvaild = new Additionvalidata('.warningWay', [0, 0, 0, 120])
  },
methods: {
    show(row) {//彈窗前移除
      this.dialogVisible = true
       this.addvaild.doresult(false)
    },
    onSubmit() {
      if (this.temp.emailAddress) this.temp.notificationMethodEmail = true
      if (this.temp.phoneNumber) this.temp.notificationMethodNote = true
      if (
        this.temp.notificationMethodEmail && !this.temp.emailAddress ||
        this.temp.notificationMethodNote && !this.temp.phoneNumber
      ) {
      this.addvaild.doresult(true, '如勾選郵箱提醒或簡訊提醒，必須填寫郵箱或手機')
       return
      } else if (
         this.temp.phoneNumber && (!(/^1[0-9]{10}$/.test(this.temp.phoneNumber)))
      ) { // 手機格式驗證
       this.addvaild.doresult(true, '請填寫正確手機號')
        return
      } else if (
         this.temp.emailAddress && (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3})      {1,2})$/.test(this.temp.emailAddress)))
      ) { // 郵箱格式驗證
         this.addvaild.doresult(true, '請填寫正確郵箱')
          return
      } else {
        this.addvaild.doresult(false)
      }
      this.$refs['dataForm'].validate(vaild => {
        if (vaild) {
          this.postData()
        } else {
          this.$message.error('檢查輸入是否正確')
          return
        }
      })
    },
}
}
</script>

二、建構函式call繼承

/**
 * @param  dom,//父元素,傳入#id或.class,傳類名的如果同類名只算第一個
 * @param warningText,警告提示文字
 * @param warningtype,true標紅false取消標紅移除警告
 * @param [],p標籤margin的四個值，輸入數值型別
 * }
 */
function Addvaild(dom, [top = 0, right = 0, bottom = 0, left = 0] = []) {
  const that = this
    this.top = top
    this.left = left
    this.right = right
    this.bottom = bottom
    const domp = document.createElement('p')
    domp.style.margin = `${that.top}px ${that.right}px ${that.bottom}px ${that.left}px`
    domp.style.fontSize = '12px'
    domp.style.color = '#F56C6C'
    domp.classList.add('domp')
    this.doresult = function(dowarningtype, warningText) {
      const domparent = document.querySelector(dom)
      if (dowarningtype) {
        domp.innerText = warningText
      if (!document.getElementsByClassName('domp').length) domparent.appendChild(domp)
    } else {
        if (domp.parentNode && domp.parentNode === domparent) { // 有domp並且還在parent下面
          domparent.removeChild(document.querySelector('.domp'))
        }
    }
  }
}
function VaildExport(...param) {
  Addvaild.call(this, ...param)
}
export default VaildExport

引入和使用（和方法一程式碼一模一樣）