vue 项目内vue指令常用

1. refs使用

ref 写在标签上时：this.$refs.名字 获取的是标签对应的dom元素
ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用

获取组件上ref

this.$refs.personalAuthForm[0]

获取标签上ref

this.$refs.personalAuthForm[0].$refs.form

代码是工程组件化

<template>
  <div class="personal-auth" :class="themeCode === '2' ? 'gold' : ''">
    <component
      v-for="(item, index) in personalAuth"
      :ref="item.surveyQuestionTypeId"
      :key="index"
      :is="item.surveyQuestionTypeId"
      :relationshipList="item"
      :currentIndex="index"
      :themeCode="themeCode"
      :imageBack="imageBack"
      :imageFront="imageFront"
      :title="title"
      :buttonInfos="buttonInfos"
      @clickButton="clickButton"
      @checkForm="checkForm"
      @handleOcr="handleOcr"
      :btnStatus="btnStatus"
      @switchCompentsFn="switchCompentsFn"
    />
  </div>
</template>

import { personalAuth } from '../config/components-config';
import personalAuthUpload from './personal-auth/components/personal-auth-upload.vue';
import personalAuthForm from './personal-auth/components/personal-auth-form.vue';

export default {
	data() {
    	return {
    		personalAuth: [],
    	}
    },
    props: {},
    components: {
    	personalAuthForm ,
    },
    computed: {},
    watch: {},
    mounted() {
	    this.personalAuth = personalAuth;
	    this.$set(this.buttonInfos[0], 'disabled', true);
	    this.$set(this.buttonInfos[0], 'buttonText', '请上传身份证件信息');
  	},
  	methods: {
  		clickButton() {
	      this.$refs.personalAuthForm[0].$refs.form
	        .validate()
	        .then((res) => {
	          let val = this.$refs.personalAuthForm[0].personInfo;
	          let idCardInfoParams = {
	            productId: this.$route.query.productId,
	            custNo: this.$store.getters['user/getUserInfo'].custNo,
	            idCardInfo: { idcard: val.idCard },
	            nextComponentName: '/authenSuccessSave',
	            idCardInfo: {
	              name: val.fullName,
	              sex: val.gender,
	              nation: val.nationality,
	              address: val.address,
	              idcard: val.idCard,
	              birth: val.idCard.substr(6, 8),
	              authority: val.issuingAuthority,
	              validDate: val.validDate.replace(/\./g, '')
	            }
	          };
	          this.$store.commit('user/setOtherJSON', idCardInfoParams);
	          // sessionStorage.setItem("idCardInfo", JSON.stringify(idCardInfoParams))
	          const params = {
	            ...val,
	            imageBack: this.imageBack,
	            imageFront: this.imageFront
	          };
	          sessionStorage.setItem('nextComponentName', '/authenSuccessSave');
	          this.$router.push({
	            path: globalConfig['faceController'].pathName,
	            query: {
	              partyId: params.partyId,
	              idcard: params.idCard,
	              name: params.fullName,
	              frontFileNo: params.imageBack,
	              comeFrom: this.comeFrom,
	              partyGroupId: this.partyGroupId,
	              data: this.data
	            }
	          });
	        })
	        .catch((err) => {
	          //验证失败
	          console.log('失败！！', err);
	          return false;
	        });
	    }
  	},
}

components-config.js

// 个人认证
export const personalAuth = [{
  "surveyQuestionTypeId": "pageHeader",
  "question": "pageHeader",
  "surveyQuestionCategoryName": "页面元素",
  "description": "页面头部",
  "surveyQuestionTypeName": "页面头部",
  "orders": 0,
  "surveyQuestionValue": "{\"label\":\"页面头部\",\"isShow\":true,\"textTip\":\"页面头部\"}"
}, {
  "surveyQuestionTypeId": "personalAuthUpload",
  "question": "personalAuthUpload",
  "surveyQuestionCategoryName": "页面元素",
  "description": "个人认证上传图片",
  "surveyQuestionTypeName": "个人认证上传图片",
  "orders": 1,
  "surveyQuestionValue": "{\"label\":\"个人认证上传图片\",\"isShow\":true,\"textTip\":\"个人认证上传图片\"}"
}, {
  "surveyQuestionTypeId": "personalAuthForm",
  "question": "personalAuthForm",
  "surveyQuestionCategoryName": "页面元素",
  "description": "个人认证表单",
  "surveyQuestionTypeName": "个人认证表单",
  "orders": 2,
  "surveyQuestionValue": "{\"label\":\"个人认证表单\",\"isShow\":true,\"textTip\":\"个人认证表单\"}",
}, 
{
  "surveyQuestionTypeId": "pageFooterButton",
  "question": "pageFooterButton",
  "surveyQuestionCategoryName": "页面元素",
  "description": "页面底部按钮",
  "surveyQuestionTypeName": "页面底部按钮",
  "orders": 2,
  "surveyQuestionValue": "{\"label\":\"页面底部按钮\",\"isShow\":true,\"textTip\":\"页面底部按钮\"}",
},
]

personal-auth-form.vue

<template>
  <maskOpt :isEdit="isEdit" @goItemEdit="goEdit" v-bind="$attrs" v-on="$listeners">
    <div class="personal-auth-form">
      <div class="identCardContainer">
        <div class="tips">身份信息</div>
        <van-button size="small" color="linear-gradient(to right, #ccc, #ccc)" v-if="btnStatus==0"
          @click="switchBtn('1')">
          手动输入</van-button>
        <van-button size="small" color="linear-gradient(to right, #ccc, #ccc)" v-else @click="switchBtn('0')">
          自动识别
        </van-button>
      </div>
      <div class="formContainer">
        <van-form  ref="form" class="">
          <van-field class="top-radius" v-model="personInfo.fullName" name="fullName" input-align="left" label="姓名"
            :readonly="btnStatus==1?false:true" :rules="[{ required: true ,message: '请填写姓名' }]" />
          <van-field class="top-radius" v-model="personInfo.idCard" name="idCard" input-align="left" label="身份证号"
            :readonly="btnStatus==1?false:true" :rules="[{ required: true ,message: '请填写身份证号'}]" />
          <van-field class="top-radius" v-model="personInfo.issuingAuthority" name="issuingAuthority" input-align="left"
            :readonly="btnStatus==1?false:true" label="签发机关" :rules="[{ required: true ,message: '请填写签发机关'}]" />
          <van-field clickable input-align="left" name="validDate" :value="personInfo.validDate" label="有效日期"
            :readonly="btnStatus==1?false:true" @click="choiceDateRange"
            :rules="[{ required: true,message: '请填写有效日期' }]" />
          <van-field class="top-radius" v-model="personInfo.gender" name="gender" input-align="left" label="性别"
            :readonly="btnStatus==1?false:true" clickable @click="choiceGender"
            :rules="[{ required: true,message: '请填写性别' }]" />
          <van-field class="top-radius" v-model="personInfo.nationality" name="nationality" input-align="left"
            label="民族" :readonly="btnStatus==1?false:true" clickable @click="choiceNation"
            :rules="[{ required: true,message: '请填写民族' }]" />
          <van-field class="top-radius" v-model="personInfo.address" name="address" type="textarea" autosize rows="1"
            :readonly="btnStatus==1?false:true" input-align="left" label="住址" maxlength="100"
            :rules="[{ required: true,message: '请填写住址' }]" />
          <!-- <div class="footer-button">
            <van-button block type="info" native-type="submit" @click="onSubmit">提交</van-button>
          </div> -->
        </van-form>
      </div>
      <pickerPopup ref="PickerPopup" :dataList="columns" :themeCode="themeCode" :value="personInfo.gender" :title="'性别'"
        @checkedOneItem="onConfirmGender" />
      <pickerPopup ref="PickerPopupNation" :dataList="columnsNation" :themeCode="themeCode"
        :value="personInfo.nationality" :title="'民族'" @checkedOneItem="onConfirmNation" />
      <calendarRange :isShow="showDateRange" :isPastTime="false" @onCancel="onCancel" v-model="calendar"
        @onSubmit="onSubmitcalendarRang" />
    </div>
  </maskOpt>
</template>

<script>
import { stringify } from 'querystring';


export default {
  name: 'personalAuthForm',
  data() {
    return {
      btnStatusText: "手动输入",
      buttonText: [{
        text: "自动识别",
        value: "personalAuthUpload",
        status: false
      }, {
        text: "手动输入",
        value: null,
        status: true
      }],
      isEdit: false,
      showDateRange: false,
      calendar: {
        startTime: '',
        endTime: '',
        focusFlag: true,
      },
      personInfo: {
        fullName: '', // 身份证姓名
        idCard: '', // 身份证号码
        issuingAuthority: '', // 签发机关
        address: '',
        gender: '', // 1/男，2/女
        nationality: '',
        validDate: '',
      },
      endDate: '', // 到期时间
      startDate: '',
      readonly: true,
      showPicker: false,
      showPickerNation: false,
      columns: ['男', '女'],
      columnsNation: [
        '汉',
        '壮',
        '满',
        '回',
        '苗',
        '维吾尔',
        '土家',
        '彝',
        '蒙古',
        '藏',
        '布依',
        '侗',
        '瑶',
        '朝鲜',
        '白',
        '哈尼',
        '哈萨克',
        '黎',
        '傣',
        '畲',
        '傈僳',
        '仡佬',
        '东乡',
        '高山',
        '拉祜',
        '水',
        '佤',
        '纳西',
        '羌',
        '土',
        '仫佬',
        '锡伯',
        '柯尔克孜',
        '达斡尔',
        '景颇',
        '毛南',
        '撒拉',
        '布朗',
        '塔吉克',
        '阿昌',
        '普米',
        '鄂温克',
        '怒',
        '京',
        '基诺',
        '德昂',
        '保安',
        '俄罗斯',
        '裕固',
        '乌孜别克',
        '门巴',
        '鄂伦春',
        '独龙',
        '塔塔尔',
        '赫哲',
        '珞巴'
      ],
    };
  },
  props: {
    themeCode: {
      type: String,
      default: '',
    },
    btnStatus: {
      type: String,
      default: 0
    }
  },
  watch: {
    personInfo: {
      handler() {
        this.checkForm()
      },
      deep: true,
    }
  },
  components: {
  },
  created() {
  },

  methods: {
    switchBtn(val) {
      this.$emit("switchCompentsFn", val)
    },
    goEdit() { },
    choiceDateRange() {
      if (this.readonly) {
        this.showDateRange = true
      }
    },
    choiceGender() {
      if (this.readonly) {
        this.$refs.PickerPopup.showPicker = true
      }
    },
    choiceNation() {
      if (this.readonly) {
        this.$refs.PickerPopupNation.showPicker = true
      }
    },
    onConfirmGender(value) {
      this.personInfo.gender = value;
    },
    onConfirmNation(value) {
      this.personInfo.nationality = value;
    },
    checkForm() {
      let disabled = false
      for (let key in this.personInfo) {
        if (!this.personInfo[key]) {
          disabled = true
          break
        }
      }
      this.$emit('checkForm', disabled)
    },
    onCancel() {
      this.showDateRange = false
    },
    onSubmitcalendarRang() {
      this.startDate = this.calendar.startTime
      this.endDate = this.calendar.endTime
      this.personInfo.validDate = this.calendar.startTime.replace(/\//g, '.') + '-' + this.calendar.endTime.replace(/\//g, '.')
      this.showDateRange = false
    },
  }
};
</script>

<style scoped lang="scss">
.formContainer {
  padding-bottom: 60px;
}

.footer-button {
  width: 93%;
  background-color: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
}

.identCardContainer {
  display: flex;
  padding-right: 10px;

  button {
    margin-top: 10px;
    margin-left: auto;
  }
}

.personal-auth-form {
  margin: 12px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 4px;

  .tips {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 22px;
    margin: 13px 12px;
  }

  .hiddenInp {
    display: none;
  }

  /deep/ .van-cell {
    font-size: 14px;
    padding: 14px 12px;
    line-height: 20px;
  }

  /deep/ .van-field__label {
    color: #666666;
  }

  /deep/ .van-field__value {
    color: #333333;
  }

  /deep/ .van-cell::after {
    border-bottom: 1px solid #F4F5F6;
  }
}
</style>