46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
# zy-passwordboard
|
||
密码弹框
|
||
|
||
## 兼容说明
|
||
仅基于H5进行了开发，未进行全面测试，后续用到再补
|
||
|
||
## 属性
|
||
|属性名 |类型 |说明 | 默认值 |
|
||
|:-- |:-- |:-- |:-- |
|
||
|visible|Boolean|是否显示（支持 v-model:visible） | `false` |
|
||
|random |Boolean|是否随机排位 | `true` |
|
||
|num |Number |密码位数，过多显示会有问题 | `6` |
|
||
|title |String |显示标题 | -- |
|
||
|
||
## 事件
|
||
|事件名 |说明 |
|
||
|:-- |:-- |
|
||
| complete | 输入完毕 |
|
||
| colse | 关闭 |
|
||
|
||
## 样式说明
|
||
未使用 `scoped`, 通过顶层样式名`.zy-passwordboard`就可以进行调整。
|
||
|
||
## 使用案例
|
||
|
||
``` vue
|
||
<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>
|
||
```
|