purchase-let/uni_modules/zy-passwordboard
zmj c5af02d7c0 add 2024-06-21 11:40:32 +08:00
..
components/zy-passwordboard add 2024-06-21 11:40:32 +08:00
changelog.md add 2024-06-21 11:40:32 +08:00
package.json add 2024-06-21 11:40:32 +08:00
readme.md add 2024-06-21 11:40:32 +08:00

readme.md

zy-passwordboard

密码弹框

兼容说明

仅基于H5进行了开发未进行全面测试后续用到再补

属性

属性名 类型 说明 默认值
visible Boolean 是否显示(支持 v-model:visible false
random Boolean 是否随机排位 true
num Number 密码位数,过多显示会有问题 6
title String 显示标题 --

事件

事件名 说明
complete 输入完毕
colse 关闭

样式说明

未使用 scoped, 通过顶层样式名.zy-passwordboard就可以进行调整。

使用案例

<script setup lang="ts">
import { ref } from 'vue';
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
const passwordBoardVisible = ref(false);
const handleItemClick = () => {
	passwordBoardVisible.value = true;
};
const passwordBoardProps = {
	title: '输入支付密码',
	onComplete(value) {
		console.log(value);
	}
};
</script>
<template>
	<button @click="handleItemClick"></button>
	<ZyPasswordboard v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps" />
</template>