purchase-let/uni_modules/zy-passwordboard/readme.md

46 lines
1.2 KiB
Markdown
Raw Normal View History

2024-06-21 11:40:32 +08:00
# 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>
```