效果图：

//点击事件   开启关闭指纹识别验证

<mu-list><mu-list-item button :ripple="false" @click="fingerprintVerification"><mu-list-item-title>指纹验证</mu-list-item-title><mu-list-item-action><mu-switch v-model="zhiwen" readonly></mu-switch></mu-list-item-action></mu-list-item></mu-list>
//组件
<finger-print v-if="showFinger" :fingertext="fingertext" @cancel="cancel_from"></finger-print>

//组件代码

<template><div class="finger-print"><!--弹窗--><div class="white_content"><div style="height: 220px;text-align: center;"><div style="padding:20px"><i class="iconfont" style="font-size: 50px;color: #B9862F;">&#xe72f;</i><p style="font-size: 16px;color: black;">{{fingertext ||'请扫描指纹'}}</p><p style="font-size: 12px;color: black;">验证身份以完成交易</p></div></div><div class="btn"><div class="btn-cancel" @click="cancel()">取消</div></div></div><!--覆盖层--><div class="black_overlay"></div></div>
</template><script>export default {name: 'smsCode',data() {return {}},mounted() {},methods: {//取消cancel(){this.$emit('cancel');}},props: {fingertext: {type: String,require: true,},},computed: {},watch: {}}
</script><style scoped>.finger-print {}
/**
弹窗样式
**/.finger-print .white_content {position: fixed;top: 50%;left: 50%;width: 80%;min-height: 220px;border: 1px solid #D6E9F1;border-radius: 8px;background-color: white;z-index: 99999999;transform: translate(-50%, -50%);}.finger-print .btn {height: 50px;line-height: 50px;position: absolute;bottom: 0;width: 100%;border-top: 1px solid #f5f5f5;}.finger-print .btn .btn-cancel {color: #B9862F;float: left;font-size: 14px;width: 100%;background-color: white;border-bottom-left-radius: 8px;border-right: 1px solid #f5f5f5;text-align: center;}/*** 覆盖层样式*/.finger-print .black_overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .6);z-index: 99999998;opacity: .80;}
</style>

//import,components,data

import FingerPrint from '@/components/Fingerprint'components: {'finger-print': FingerPrint},data() {return {zhiwen: false,showFinger: false,fingertext: '请扫描指纹'}},

 

//开启指纹验证fingerprintVerification() {let _this = this;if(this.zhiwen) {this.zhiwen = false;return;}if(!window.plus) return;// 检查是否支持指纹识别if(plus.fingerprint) {if(!plus.fingerprint.isSupport()) {plus.nativeUI.alert('此设备不支持指纹识别');return;}if(!plus.fingerprint.isKeyguardSecure()) {plus.nativeUI.alert('此设备未设置密码锁屏，无法使用指纹识别');return;}if(!plus.fingerprint.isEnrolledFingerprints()) {plus.nativeUI.alert('此设备未录入指纹，请到设置中开启');return;}//开启指纹识别验证()this.showFinger = truethis.fingertext = '请扫描指纹'var waiting = null;plus.fingerprint.authenticate(function() {plus.nativeUI.alert('指纹识别成功');_this.zhiwen = true_this.showFinger = false;}, function(e) {switch(e.code) {case e.AUTHENTICATE_MISMATCH:plus.nativeUI.toast('指纹匹配失败，请重新输入');_this.fingertext = '指纹匹配失败，请重试'break;case e.AUTHENTICATE_OVERLIMIT:plus.nativeUI.alert('指纹识别失败次数超出限制，请使用其它方式进行认证');_this.showFinger = false;break;default:plus.nativeUI.alert('指纹识别失败(' + e.code + ')，请重试');_this.fingertext = '指纹识别失败(' + e.code + ')，请重试'break;}})} else {plus.nativeUI.alert('当前环境不支持指纹识别API，请更新到最新版本');}},