实现功能：点击读取身份证会弹出身份证识别窗口，读取到数据后，回传用户选择是否替换原先数据。

效果演示

1.读取身份证的弹窗

src\components\idCard.vue

<template><el-dialogtitle="读取身份证信息":close-on-click-modal="false":visible.sync="visible"class="cms_formPart"append-to-bodyv-loading="loading"><el-form:model="dataForm":rules="dataRule"ref="dataForm"@keyup.enter.native="dataFormSubmit()"label-width="120px"><div class="tablePart"><el-form-item label="身份证持有人:" prop="name"><el-input v-model="dataForm.name" readonly placeholder="身份证持有人" /></el-form-item><el-form-item label="性别:" prop="sex"><el-radio-group v-model="dataForm.sex"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio></el-radio-group></el-form-item><el-form-item label="身份证号码:" prop="code"><el-input v-model="dataForm.code" readonly placeholder="身份证号码" /></el-form-item><el-form-item label="出生日期:" prop="birthday"><el-input v-model="dataForm.birthday" readonly placeholder="出生日期" /></el-form-item><el-form-item label="辖区派出所:" prop="department"><el-input v-model="dataForm.department" readonly placeholder="辖区派出所" /></el-form-item><el-form-item label="民族:" prop="nation"><el-input v-model="dataForm.nation" readonly placeholder="民族" /></el-form-item><el-form-item label="户籍地址:" prop="address" class="fullList"><el-inputtype="textarea"rows="4"v-model="dataForm.address"placeholder="户籍地址"readonlyresize="none"/></el-form-item></div></el-form><span slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><el-button type="primary" @click="dataFormSubmit()">确定</el-button><el-button @click="getDeathReadIDCard" type="info">读取身份证信息</el-button></span></el-dialog>
</template><script>
import { dialogMixin, IdCardMixin } from "@/mixins";
export default {mixins: [dialogMixin, IdCardMixin],data() {return {dataForm: {additional_address: "", // 地址（暂无数据）age:"",address: "",  // 户籍地址birthday: "", // 出生年月日code: "", // 身份证号department: "", // 辖区管辖派出所end_date: "", // 身份证有效结束日期name: "", // 用户名nation: "", // 民族sex: "",  // 性别start_date: "", // 身份证有效开始日期type: "", // 证件类型},dataRule: {name: [{ required: true, message: "身份证持有人不能为空", trigger: "blur" },],code: [{ required: true, message: "身份证号码不能为空", trigger: "blur" }],},};},methods: {init() {this.$init({defaultMethod: () => {},});},dataFormSubmit() {this.$refs["dataForm"].validate(valid => {if (valid) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {this.visible = false;this.$emit("success", this.dataForm);},});}});},//读身份证getDeathReadIDCard() {this.$readIdCard({after: data => {//this.dataForm = {...data.data};const { name, sex, nation, address, birthday, code, type, department } = data.data;this.dataForm.department = department;this.dataForm.code = code;this.dataForm.name = name;this.dataForm.sex = sex === "男" ? 1 : 2;this.dataForm.address = address;this.dataForm.type = type;// this.dataForm.nationId = this.nationList.filter(//     item => item.name === `${nation}族`,// )[0].id;//this.dataForm.household = address;// this.handleHouseholdChange()this.dataForm.nation = nation;if(type === "居民身份证") this.dataForm.type = 1;const year = birthday.slice(0, 4);const month = birthday.slice(4, 6);const day = birthday.slice(6, 8);this.dataForm.birthday = year + "-" + month + "-" + day;this.dataForm.idcard = code;this.dataForm.age = new Date().getFullYear() - year;},});},},
};
</script>

2.其他页面引入身份证组件

import IdCard from "@/components/idCard";

放入容器中

  components: {IdCard},

3.组件 和显示变量

  data () {return {idcardVisible: false, //显示变量

    <!-- 身份证读取器 要放在 template里面--><IdCard v-if="idcardVisible" ref="idcard" @success="reForm" /></el-dialog>
</template>

成功时调用reForm方法

 // 身份证弹窗识别reForm(data) {if (data) {this.$confirm('是否替换当前人员身份证信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.dataForm.name = data.name;this.dataForm.idcard = data.code;this.dataForm.sex = data.sex;this.dataForm.age = data.age;this.dataForm.address = data.address;this.dataForm.otherAddress = data.address,this.dataForm.idcardTypeId = data.type}).catch(() => {this.$message({type: 'info',message: '已取消替换'});});}},

读取身份证的按钮

<el-button type="primary" @click="$dialog('idcard')">读取身份证</el-button>

如果没有dialog方法的话需要引入

import { dialogMixin}  from "@/mixins";

$dialog(dialog, ...params) {this[`${dialog}Visible`] = true;this.$nextTick(() => {this.$refs[dialog].init(...params);});},

或者

export const dialogMixin = {data() {return {visible: false,loading: false,dataForm: {},};},methods: {_submit({ url, data, params, method, before, after }) {this.loading = true;before && before();this.$http({url: this.$http.adornUrl(url),method,data: this.$http.adornData(data),params: this.$http.adornParams(params),}).then(({ data }) => {if (data && data.code === 0) {after && after(data);this.$success();this.$emit("success");this.visible = false;} else {this.$error(data.msg);}}).finally(() => (this.loading = false));},$submit({url,data = this.dataForm,params,method = "post",validate = true,before,after,}) {if (validate) {this.$refs.dataForm.validate(valid => {if (valid) {this._submit({ url, data, params, method, before, after });}});} else {this._submit({ url, data, params, method, before, after });}},_reset({ resetForm = this.dataForm, after }) {Object.keys(resetForm).forEach(key => {if(getType(resetForm[key]) === 'Array') resetForm[key] = []else resetForm[key] = null;});after && after(resetForm);},$init({url,params,method = "get",reset = true,before,after,defaultMethod,resetMethod = () => {},}) {this.visible = true;if (reset) {this._reset({ after: resetMethod });this.$nextTick(() => {this.$refs.dataForm.clearValidate();});}before && before();if (url) {this.loading = true;this.$http({url: this.$http.adornUrl(url),method,params: this.$http.adornParams(params),}).then(({ data }) => {if (data && data.code === 0) {after && after(data);this.loading = false;}});} else {defaultMethod && defaultMethod();}},},
};