<!-- 隐藏状态 -->
<re-button theme="primary" @click="showDefault = true">打开短密码</re-button>
<!-- 显示状态 -->
<re-button theme="primary" @click="showVisible = true">显示短密码</re-button>
<!-- 带标题 -->
<re-button theme="primary" @click="showTitle = true">带标题</re-button>
<!-- 带描述 -->
<re-button theme="primary" @click="showDesc = true">带描述</re-button>
<!-- 带提示 -->
<re-button theme="primary" @click="showTips = true">带提示</re-button>
<!-- 预设值 -->
<re-button theme="primary" @click="showValue = true">预设值</re-button>
<!-- 自定义长度 -->
<re-button theme="primary" @click="showLength4 = true">4位密码</re-button>
<re-button theme="primary" @click="showLength6 = true">6位密码</re-button>
<!-- 完整配置 -->
<re-button theme="primary" @click="showFull = true">完整配置</re-button>
<!-- 事件日志 -->
<re-short-password class="demo-default" :visible="showDefault" @update:visible="showDefault = $event" @close="onClose('default')" @complete="onComplete('default', $event)" />
<re-short-password class="demo-visible" :visible="showVisible" @update:visible="showVisible = $event" @close="onClose('visible')" @complete="onComplete('visible', $event)" />
<re-short-password class="demo-title" title="请输入支付密码" :visible="showTitle" @update:visible="showTitle = $event" @close="onClose('title')" @complete="onComplete('title', $event)" />
<re-short-password class="demo-desc" title="支付密码" description="请输入6位数字密码" :visible="showDesc" @update:visible="showDesc = $event" @close="onClose('desc')" @complete="onComplete('desc', $event)" />
<re-short-password class="demo-tips" title="支付密码" tips="忘记密码?" :visible="showTips" @update:visible="showTips = $event" @close="onClose('tips')" @complete="onComplete('tips', $event)" />
<re-short-password class="demo-value" :value="123" :visible="showValue" @update:visible="showValue = $event" @close="onClose('value')" @complete="onComplete('value', $event)" />
<re-short-password class="demo-length-4" :length="4" :visible="showLength4" @update:visible="showLength4 = $event" @close="onClose('length4')" @complete="onComplete('length4', $event)" />
<re-short-password class="demo-length-6" :length="6" :visible="showLength6" @update:visible="showLength6 = $event" @close="onClose('length6')" @complete="onComplete('length6', $event)" />
<re-short-password class="demo-full" title="支付密码" description="请输入6位数字" tips="忘记密码?" :value="12" :length="6" :visible="showFull" @update:visible="showFull = $event" @close="onClose('full')" @complete="onComplete('full', $event)" />