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>
|
|||
|
|
```
|