import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

ShortPassword \u77ED\u5BC6\u7801

\u4ECB\u7ECD

\u77ED\u5BC6\u7801\u8F93\u5165\u6846\uFF0C\u53EF\u7528\u4E8E\u8F93\u5165\u5BC6\u7801\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { ShortPassword,Popup } from '@nutui/nutui';
//taro
import { ShortPassword,Popup } from '@nutui/nutui-taro';

const app = createApp();
app.use(ShortPassword);
app.use(Popup);

\u516C\u7528\u7247\u6BB5

<nut-shortpassword
  v-model="state.value"
  v-model:visible="state.visible"
  :no-button="state.noButton"
  :length="state.length"
  :error-msg="state.errorMsg"
  @change="methods.onChange"
  @complete="methods.onComplete"
  @ok="methods.onOk"
  @tips="methods.onTips">
</nut-shortpassword>

import { reactive, getCurrentInstance } from 'vue';
setup() {
  let { proxy } = getCurrentInstance();
  const state = reactive({
    visible: false,
    noButton: true,
    value: '',
    errorMsg: '',
    length: 6
  });
  const methods = {
    onChange(val: string) {
      val && proxy.$toast.text(val);
    },
    onOk(val: string) {
      val && proxy.$toast.text(val);
      state.visible = false;
    },
    onComplete() {
      
    },
    onTips() {
      proxy.$toast.text('\u6267\u884C\u5FD8\u8BB0\u5BC6\u7801\u903B\u8F91');
    }
  };
  return {
    state,
    methods
  };
}

\u57FA\u7840\u7528\u6CD5

<nut-cell title="\u57FA\u7840\u7528\u6CD5" is-link @click="state.visible = true;"></nut-cell>

\u663E\u793A\u6309\u94AE\u7EC4

<nut-cell title="\u663E\u793A\u6309\u94AE\u7EC4" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>

\u81EA\u5B9A\u4E49\u5BC6\u7801\u957F\u5EA64

<nut-cell title="\u81EA\u5B9A\u4E49\u5BC6\u7801\u957F\u5EA64" is-link @click="state.visible = true;state.length = 4;"></nut-cell>

\u5FD8\u8BB0\u5BC6\u7801\u63D0\u793A\u8BED\u4E8B\u4EF6\u56DE\u8C03

<nut-cell title="\u5FD8\u8BB0\u5BC6\u7801\u63D0\u793A\u8BED\u4E8B\u4EF6\u56DE\u8C03" is-link @click="state.visible = true;"></nut-cell>

\u9519\u8BEF\u63D0\u793A\u8BED

<nut-cell title="\u9519\u8BEF\u63D0\u793A\u8BED" is-link @click="state.visible = true;state.errorMsg = '\u8BF7\u8F93\u5165\u6B63\u786E\u5BC6\u7801';"></nut-cell>

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5BC6\u7801\u521D\u59CB\u503C	String
v-model:visible	\u662F\u5426\u5C55\u793A\u77ED\u5BC6\u7801\u6846	Boolean	false
title	\u6807\u9898	String	\u8BF7\u8F93\u5165\u5BC6\u7801
desc	\u5BC6\u7801\u6846\u63CF\u8FF0	String	\u60A8\u4F7F\u7528\u4E86\u865A\u62DF\u8D44\u4EA7\uFF0C\u8BF7\u8FDB\u884C\u9A8C\u8BC1
tips	\u63D0\u793A\u8BED	String	\u5FD8\u8BB0\u5BC6\u7801
close-on-click-overlay	\u662F\u5426\u70B9\u51FB\u906E\u7F69\u5173\u95ED	Boolean	true
no-button	\u662F\u5426\u9690\u85CF\u5E95\u90E8\u6309\u94AE	Boolean	true
length	\u5BC6\u7801\u957F\u5EA6\uFF0C\u53D6\u503C\u4E3A4~6	String\u3001Number	6
error-msg	\u9519\u8BEF\u4FE1\u606F\u63D0\u793A	String	\u2018\u2019

Event

\u4E8B\u4EF6\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u8F93\u5165\u5BC6\u7801\u65F6\u89E6\u53D1\u4E8B\u4EF6	\u5F53\u524D\u8F93\u5165\u6846\u503Cvalue
ok	\u70B9\u51FB\u786E\u5B9E\u65F6\u89E6\u53D1\u4E8B\u4EF6	\u5F53\u524D\u8F93\u5165\u6846\u503Cvalue
cancel	\u70B9\u51FB\u53D6\u6D88\u65F6\u89E6\u53D1\u4E8B\u4EF6	-
close	\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1\u4E8B\u4EF6	-
complete	\u8F93\u5165\u5B8C\u6210\u7684\u56DE\u8C03	\u5F53\u524D\u8F93\u5165\u6846\u503Cvalue

`,22),e=[p],j={setup(r,{expose:s}){return s({frontmatter:{}}),(o,h)=>(t(),a("div",l,e))}};export{j as default};