feat: shortpassword新增doc

src/packages/ShortPassword/demo.vue

@@ -8,16 +8,38 @@
       >点击出现输出框</nut-cell
     >
     <nut-cell>您输入的密码是：{{ state.value1 }}</nut-cell>
+    <h2>自定义长度</h2>
+    <nut-cell @click="switchActionSheet('dialogShow2')"
+      >点击出现输出框</nut-cell
+    >
+    <nut-cell>您输入的密码是：{{ state.value2 }}</nut-cell>
+    <h2>出现提示信息</h2>
+    <nut-cell @click="switchActionSheet('dialogShow3')"
+      >点击出现输出框</nut-cell
+    >
+    <nut-cell>您输入的密码是：{{ state.value3 }}</nut-cell>
     <nut-shortpassword
       v-model:value="state.value"
       v-model:is-visible="state.dialogShow"
-      :show-button="true"
     >
     </nut-shortpassword>
     <nut-shortpassword
       v-model:value="state.value1"
       v-model:is-visible="state.dialogShow1"
-      :show-button="false"
+      :no-button="false"
+      @sureClick="sureClick"
+    >
+    </nut-shortpassword>
+    <nut-shortpassword
+      v-model:value="state.value2"
+      v-model:is-visible="state.dialogShow2"
+      :length="5"
+    >
+    </nut-shortpassword>
+    <nut-shortpassword
+      v-model:value="state.value3"
+      v-model:is-visible="state.dialogShow3"
+      :errorMsg="state.errorMsg"
     >
     </nut-shortpassword>
   </div>
@@ -32,25 +54,33 @@ export default createDemo({
     const state = reactive({
       dialogShow: false,
       dialogShow1: false,
+      dialogShow2: false,
+      dialogShow3: false,
       value: '',
-      value1: ''
+      value1: '',
+      value2: '',
+      value3: '',
+      errorMsg: ''
     });
     // 方法
     function switchActionSheet(param) {
       state[`${param}`] = !state[`${param}`];
     }
+    function sureClick() {
+      state.dialogShow1 = false;
+    }
     watch(
-      () => state.value,
+      () => state.value3,
       val => {
         if (val.length == 6) {
-          state.dialogShow = false;
-          console.log(state.dialogShow);
+          state.errorMsg = '请输入正确密码';
         }
       }
     );
     return {
       state,
-      switchActionSheet
+      switchActionSheet,
+      sureClick
     };
   }
 });

src/packages/ShortPassword/doc.md

@@ -0,0 +1,162 @@
+# ShortPassword 短密码组件
+
+### 介绍
+
+XXXXXX
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { ShortPassword } from '@nutui/nutui';
+
+const app = createApp();
+app.use(ShortPassword);
+
+```
+
+## 代码示例
+
+### 基础用法
+
+``` html
+<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
+<nut-shortpassword 
+    v-model:value="state.value" 
+    v-model:is-visible="state.dialogShow"
+    >
+</nut-shortpassword>
+```
+
+``` javascript
+  setup() {
+    const state = reactive({
+      dialogShow: false,
+      value: '',
+    });
+    return {
+      state,
+    };
+  },
+// ...
+```
+
+### 展示按钮
+
+``` html
+<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
+<nut-shortpassword 
+    v-model:value="state.value" 
+    v-model:is-visible="state.dialogShow"
+    :no-button="false"
+    @sureClick='sureClick'
+    >
+</nut-shortpassword>
+```
+
+``` javascript
+setup() {
+    const state = reactive({
+      dialogShow: false,
+      value: '',
+    });
+    function switchActionSheet() {
+        state.dialogShow = !state.dialogShow
+    }
+    function sureClick() {
+      state.dialogShow = false
+    }
+    return {
+      state,
+      switchActionSheet,
+      sureClick
+    };
+  },
+  
+```
+
+### 自定义长度
+
+``` html
+<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
+<nut-shortpassword 
+    v-model:value="state.value" 
+    v-model:is-visible="state.dialogShow"
+    :length=5
+    >
+</nut-shortpassword>
+```
+
+``` javascript
+setup() {
+    const state = reactive({
+      dialogShow: false,
+      value: '',
+    });
+    function switchActionSheet() {
+        state.dialogShow = !state.dialogShow
+    }
+    return {
+      state,
+      switchActionSheet
+    };
+  },
+```
+
+### 出现提示信息
+
+``` html
+<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
+<nut-shortpassword 
+    v-model:value="state.value" 
+    v-model:is-visible="state.dialogShow"
+    :errorMsg = state.errorMsg
+    >
+</nut-shortpassword>
+```
+
+``` javascript
+setup() {
+    const state = reactive({
+      dialogShow: false,
+      value: '',
+      errorMsg:''
+    });
+    function switchActionSheet() {
+        state.dialogShow = !state.dialogShow
+    }
+    watch(
+      () => state.value3,
+      val => {
+        if (val.length == 6) {
+          state.errorMsg = '请输入正确密码'
+        }
+      }
+    );
+    return {
+      state,
+      switchActionSheet
+    };
+  },
+```
+
+### Prop
+
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| isVisible | 是否展示短密码框| Booble | false
+| value | 密码值 | string | ''
+| noButton | 是否隐藏底部按钮 |Booble|true|
+| length | 密码长度 |string||Number|6|
+| errorMsg | 错误信息提示 |string|''|
+
+
+### Event
+
+| 事件名称 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| input | 输入密码时触发事件 | --
+| sureClick | 点击确实时触发事件 | --
+
+
+

src/packages/ShortPassword/index.scss

@@ -41,7 +41,7 @@
 }
 
 .nut-shortpsd-li {
-  width: 41px;
+  width: 16.5%;
   display: flex;
   justify-content: center;
   align-items: center;

src/packages/ShortPassword/index.vue

@@ -6,7 +6,7 @@
       @ok-btn-click="sureClick"
       @cancel-btn-click="dialogShow = false"
       @close="close"
-      :noFooter="showButton"
+      :noFooter="noButton"
     >
       <view class="nut-shortpsd-subtitle">您使用了虚拟资产，请进行验证</view>
       <view class="nut-input-w">
@@ -20,30 +20,30 @@
         />
         <view class="nut-shortpsd-fake" @click="focus">
           <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 0"></view>
-          </view>
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 0"></view
+          ></view>
           <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 1"></view>
-          </view>
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 1"></view
+          ></view>
           <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 2"></view>
-          </view>
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 2"></view
+          ></view>
           <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 3"></view>
-          </view>
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 4"></view>
-          </view>
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 5"></view>
-          </view>
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 3"></view
+          ></view>
+          <view v-if="length >= 5" class="nut-shortpsd-li"
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 4"></view
+          ></view>
+          <view v-if="length == 6" class="nut-shortpsd-li"
+            ><view class="nut-shortpsd-icon" v-if="realInput.length > 5"></view
+          ></view>
         </view>
       </view>
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
         <view class="nut-shortpsd-forget">
-          <nut-icon class="icon" size="11px" name="tips"></nut-icon>
-          忘记密码</view
+          <nut-icon class="icon" size="11px" name="tips"></nut-icon
+          >忘记密码</view
         >
       </view>
     </nut-dialog>
@@ -68,9 +68,13 @@ export default create({
       type: String,
       default: ''
     },
-    showButton: {
+    noButton: {
       type: Boolean,
-      default: false
+      default: true
+    },
+    length: {
+      type: String || Number,
+      default: 6
     }
   },
   setup(props, { emit }) {
@@ -79,7 +83,6 @@ export default create({
     const realpwd = ref();
     // 方法
     function sureClick() {
-      dialogShow.value = false;
       emit('sureClick');
     }
     function focus() {
@@ -88,11 +91,11 @@ export default create({
     function changeValue(e: Event) {
       const input = e.target as HTMLInputElement;
       let val = input.value;
-      if (val.length > 6) {
-        val = val.slice(0, Number(6));
+      if (val.length > Number(props.length)) {
+        val = val.slice(0, Number(props.length));
       }
-      if (realInput.value.length > 6) {
-        realInput.value = realInput.value.slice(0, Number(6));
+      if (realInput.value.length > Number(props.length)) {
+        realInput.value = realInput.value.slice(0, Number(props.length));
       }
       emit('input', val);
       emit('update:value', val);
@@ -103,7 +106,6 @@ export default create({
     watch(
       () => props.isVisible,
       val => {
-        console.log(val);
         if (val) {
           dialogShow.value = true;
         } else {