标签 vue 下的文章

vue - el-form 的多层循环表单验证

html

<el-form :model="formObj" :rules="rules" ref="ruleForm">
  <el-form-item :label="'护理记录项目配置:'" label-width="180px">
    <template v-for="(formItem, index) in formObj.formDictExtendDoList">
      <div class="hljl-container" :key="formItem.id">
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="'字段名称:'"
              label-width="90px"
              :rules="rules.fieldName"
              :prop="'formDictExtendDoList.'+index+'.fieldName'"
            >
              <el-input
                v-model.trim="formItem.fieldName"
                type="text"
                :clearable="true"
                maxLength="100"
                placeholder="请输入"
              />
              <!--@blur="isRepeat(formItem, index, 'fieldName')"-->
            </el-form-item>
          </el-col>
          <template
            v-for="(child, index1) in formItem.item"
            v-show="formItem.type === 2"
          >
            <el-col :span="8" :key="child.id">
              <el-form-item
                :label="'选项' + (index1+1) + ':'"
                label-width="90px"
                :rules="rules.value"
                :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
              >
                <el-input
                  v-model.trim="child.value"
                  @input="forceUpdate"
                  :clearable="true"
                  type="text"
                  maxlength="20"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>
    </template>
  </el-form-item>
</el-form>

js

阅读全文

vue - 循环出来的 el-input 无法输入

<!--循环出来的-->
<el-input
  v-model.trim="child.value"
  @input="forceUpdate"
  :clearable="true"
  type="text"
  maxlength="20"
  placeholder="请输入"
/>
// 强制重新渲染
forceUpdate () { 
    this.$forceUpdate() 
}

vue - 比较两个Json对象是否相等

// 内容是否有修改
      // true:未改变;false:改变了
      isChange() {
        if(this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm)){
          console.log('未改变');
        }else{
          console.log('改变');
        }
        return this.Compare(this.dialog.detail.form, this.dialog.detail.oldForm);
      },
      /**************************************比较json-start***************************************/
      isObj(object) {
        return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
      },
      isArray(object) {
        return object && typeof(object) == 'object' && object.constructor == Array;
      },
      getLength(object) {
        var count = 0;
        for(var i in object) count++;
        return count;
      },
      CompareObj(objA, objB, flag) {
        for(var key in objA) {
          if(!flag) //跳出整个循环
            break;
          if(!objB.hasOwnProperty(key)) {
            flag = false;
            break;
          }
          if(!this.isArray(objA[key])) { //子级不是数组时,比较属性值
            if(objB[key] != objA[key]) {
              flag = false;
              break;
            }
          } else {
            if(!this.isArray(objB[key])) {
              flag = false;
              break;
            }
            var oA = objA[key],
              oB = objB[key];
            if(oA.length != oB.length) {
              flag = false;
              break;
            }
            for(var k in oA) {
              if(!flag) //这里跳出循环是为了不让递归继续
                break;
              flag = this.CompareObj(oA[k], oB[k], flag);
            }
          }
        }
        return flag;
      },
      Compare(objA, objB) {
        if(!this.isObj(objA) || !this.isObj(objB)) return false; //判断类型是否正确
        if(this.getLength(objA) != this.getLength(objB)) return false; //判断长度是否一致
        return this.CompareObj(objA, objB, true); //默认为true
      },
      /**************************************比较json-end***************************************/

vue - 滑动页面使el-select的选择项不超出页面而自动隐藏

mounted() {
      console.log('mounted');
      let that = this;
      window.addEventListener('scroll', function (e) {
        that.scrollFunc();
      }, true);
    },
    destroyed() {
      window.removeEventListener('scroll', this.scrollFunc);
    },
    methods: {
      scrollFunc() {
        // let header = document.getElementsByClassName('has-gutter')[0];
        let header = $('.has-gutter');
        let header_offset = header.offset();
        let header_top = +header_offset.top + 50;
        if(this.select === undefined || this.select === null || this.select === ''){
          return false;
        }
        let ref = this.$refs[this.select.id][0] || null;
        $('.el-select-dropdown').each(function (e) {
          if($(this).css('display') === 'none'){
          }else{
            let el_select_dropdown = this;
            let el_select_dropdown_offset_top = el_select_dropdown.offsetTop;
            if(+el_select_dropdown_offset_top <= +header_top){
              console.log('小于了');
              ref && ref.blur();
              // $(this).css('display', 'none');
              // ref.$refs.input.blur();
            }
          }
        });
      },
}

阅读全文

vue - 获取元素相对页面的高度

let keyboardDiv = document.getElementsByClassName('keyboard-container')[0];
let keyboard_offsetTop = keyboardDiv.offsetTop;
console.log('键盘高度:' + keyboard_offsetTop);
let wHeight = +keyboard_offsetTop + 270;
let signId = item.signId;
let inputId = 'input-' + signId;
let inputDiv = document.getElementById(inputId);
let ref = this.$refs[inputId][0];
let input_top = ref.$el.getBoundingClientRect().top;