fix: review shortpassword

src/packages/shortpassword/demo.vue

@@ -1,87 +1,83 @@
 <template>
-  <div class="demo full">
-    <h2>基础用法</h2>
-    <nut-cell @click="switchActionSheet('dialogShow')">点击出现输出框</nut-cell>
-    <nut-cell>您输入的密码是：{{ state.value }}</nut-cell>
-    <h2>展示按钮</h2>
-    <nut-cell @click="switchActionSheet('dialogShow1')"
-      >点击出现输出框</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>
+  <div class="demo">
     <nut-shortpassword
       v-model:value="state.value"
-      v-model:is-visible="state.dialogShow"
-    >
-    </nut-shortpassword>
-    <nut-shortpassword
-      v-model:value="state.value1"
-      v-model:is-visible="state.dialogShow1"
-      :no-button="false"
-      @sure-click="sureClick"
-    >
-    </nut-shortpassword>
-    <nut-shortpassword
-      v-model:value="state.value2"
-      v-model:is-visible="state.dialogShow2"
-      :length="4"
-    >
-    </nut-shortpassword>
-    <nut-shortpassword
-      v-model:value="state.value3"
-      v-model:is-visible="state.dialogShow3"
+      v-model:visible="state.visible"
+      :no-button="state.noButton"
+      :length="state.length"
       :error-msg="state.errorMsg"
-      @complete="complete"
-      link="http://m.jd.com"
+      @on-change="methods.onChange"
+      @on-complete="methods.onComplete"
+      @on-ok="methods.onOk"
+      @on-tips="methods.onTips"
     >
     </nut-shortpassword>
+    <nut-cell title="基础用法" is-link @click="state.visible = true"></nut-cell>
+    <nut-cell
+      title="显示按钮组"
+      is-link
+      @click="
+        state.visible = true;
+        state.noButton = false;
+      "
+    ></nut-cell>
+    <nut-cell
+      title="自定义密码长度4"
+      is-link
+      @click="
+        state.visible = true;
+        state.noButton = false;
+        state.length = 4;
+      "
+    ></nut-cell>
+    <nut-cell
+      title="忘记密码提示语事件回调"
+      is-link
+      @click="state.visible = true"
+    ></nut-cell>
+    <nut-cell
+      title="错误提示语"
+      is-link
+      @click="
+        state.visible = true;
+        state.errorMsg = '请输入正确密码';
+      "
+    ></nut-cell>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, reactive, watch } from 'vue';
+import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('shortpassword');
 export default createDemo({
   setup() {
+    let { ctx } = getCurrentInstance();
+
     const state = reactive({
-      dialogShow: false,
-      dialogShow1: false,
-      dialogShow2: false,
-      dialogShow3: false,
+      visible: false,
+      noButton: true,
       value: '',
-      value1: '',
-      value2: '',
-      value3: '',
-      errorMsg: ''
+      errorMsg: '',
+      length: 6
     });
-    // 方法
-    function switchActionSheet(
-      param: 'dialogShow' | 'dialogShow1' | 'dialogShow2' | 'dialogShow3'
-    ) {
-      state[param] = !state[param];
-    }
-    function sureClick(val: string) {
-      console.log(val);
-      state.dialogShow1 = false;
-    }
-    function complete() {
-      state.errorMsg = '请输入正确密码';
-    }
+    const methods = {
+      onChange(val: string) {
+        val && ctx.$toast.text(val);
+      },
+      onOk(val: string) {
+        val && ctx.$toast.text(val);
+        state.visible = false;
+      },
+      onComplete() {},
+      onTips() {
+        ctx.$toast.text('执行忘记密码逻辑');
+      }
+    };
+
     return {
       state,
-      switchActionSheet,
-      sureClick,
-      complete
+      methods
     };
   }
 });

src/packages/shortpassword/doc.md

@@ -16,151 +16,102 @@ app.use(ShortPassword);
 
 ## 代码示例
 
-### 基础用法
+### 公用片段
 
 ``` html
-<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
-<nut-shortpassword 
-    v-model:value="state.value" 
-    v-model:is-visible="state.dialogShow"
-    >
+<nut-shortpassword
+  v-model:value="state.value"
+  v-model:visible="state.visible"
+  :no-button="state.noButton"
+  :length="state.length"
+  :error-msg="state.errorMsg"
+  @on-change="methods.onChange"
+  @on-complete="methods.onComplete"
+  @on-ok="methods.onOk"
+  @on-tips="methods.onTips">
 </nut-shortpassword>
 ```
 
 ``` javascript
-  setup() {
-    const state = reactive({
-      dialogShow: false,
-      value: '',
-    });
-    return {
-      state,
-    };
-  },
-// ...
-```
-
-### 展示按钮
+import { reactive, getCurrentInstance } from 'vue';
+setup() {
+  let { ctx } = getCurrentInstance();
+  const state = reactive({
+    visible: false,
+    noButton: true,
+    value: '',
+    errorMsg: '',
+    length: 6
+  });
+  const methods = {
+    onChange(val: string) {
+      val && ctx.$toast.text(val);
+    },
+    onOk(val: string) {
+      val && ctx.$toast.text(val);
+      state.visible = false;
+    },
+    onComplete() {
+      
+    },
+    onTips() {
+      ctx.$toast.text('执行忘记密码逻辑');
+    }
+  };
+  return {
+    state,
+    methods
+  };
+}
 
-``` html
-<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
-<nut-shortpassword 
-    v-model:value="state.value" 
-    v-model:is-visible="state.dialogShow"
-    :no-button="false"
-    @sure-click='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
+<nut-cell title="基础用法" is-link @click="state.visible = true;"></nut-cell>
 ```
 
-### 自定义长度
+### 显示按钮组
 
 ``` html
-<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
-<nut-shortpassword 
-    v-model:value="state.value" 
-    v-model:is-visible="state.dialogShow"
-    :length=5
-    >
-</nut-shortpassword>
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>
 ```
 
-``` javascript
-setup() {
-    const state = reactive({
-      dialogShow: false,
-      value: '',
-    });
-    function switchActionSheet() {
-        state.dialogShow = !state.dialogShow
-    }
-    return {
-      state,
-      switchActionSheet
-    };
-  },
-```
+### 自定义密码长度4
 
-### 出现提示信息
+``` html
+<nut-cell title="自定义密码长度4" is-link @click="state.visible = true;state.length = 4;"></nut-cell>
+```
+### 忘记密码提示语事件回调
 
 ``` html
-<div @click="switchActionSheet('dialogShow')" >点击出现输出框</div>
-<nut-shortpassword 
-    v-model:value="state.value" 
-    v-model:is-visible="state.dialogShow"
-    :error-msg = state.errorMsg
-    >
-</nut-shortpassword>
+<nut-cell title="忘记密码提示语事件回调" is-link @click="state.visible = true;"></nut-cell>
 ```
 
-``` 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
-    };
-  },
+### 错误提示语
+``` html
+<nut-cell title="错误提示语" is-link @click="state.visible = true;state.errorMsg = '请输入正确密码';"></nut-cell>
 ```
 
 ### Prop
 
 
 | 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| title | 标题| Boolean | '请输入密码'
-| is-visible | 是否展示短密码框| Boolean | false
-| value | 密码值 | string | ''
+|----- | ----- | ----- | ----- |
+| title | 标题| String | 请输入密码|
+| desc | 密码框描述| String | 您使用了虚拟资产，请进行验证|
+| tips | 提示语| String | 忘记密码|
+| visible | 是否展示短密码框| Boolean | false|
+| value | 密码初始值 | String | ''|
 | no-button | 是否隐藏底部按钮 |Boolean|true|
-| length | 密码长度，取值为4，5，6 |string||Number|6|
-| error-msg | 错误信息提示 |string|''|
-| show-password-tips | 忘记密码提示信息 |string|'忘记密码'|
-| link | 忘记密码跳转链接 |string|''|
+| length | 密码长度，取值为4~6 |String||Number|6|
+| error-msg | 错误信息提示 |String|''|
 
 
 ### Event
 
 | 事件名称 | 说明 | 回调参数
 |----- | ----- | ----- 
-| input | 输入密码时触发事件 | --
-| sure-click | 点击确实时触发事件 | value
+| change | 输入密码时触发事件 | --
+| on-ok | 点击确实时触发事件 | value
 | complete | 输入完成的回调 | value
-
-
-

src/packages/shortpassword/index.vue

@@ -2,13 +2,13 @@
   <view>
     <nut-dialog
       :title="title"
-      :visible="isVisible"
+      :visible="visible"
       @ok-btn-click="sureClick"
       @cancel-btn-click="close"
       @close="close"
       :no-footer="noButton"
     >
-      <view class="nut-shortpsd-subtitle">您使用了虚拟资产，请进行验证</view>
+      <view class="nut-shortpsd-subtitle">{{ desc }}</view>
       <view class="nut-input-w">
         <input
           ref="realpwd"
@@ -33,9 +33,9 @@
       </view>
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
-        <view class="nut-shortpsd-forget" v-if="showPasswordTips">
+        <view class="nut-shortpsd-forget" v-if="tips">
           <nut-icon class="icon" size="11px" name="tips"></nut-icon>
-          <view @click="link">忘记密码</view>
+          <view @click="onTips">{{ tips }}</view>
         </view>
       </view>
     </nut-dialog>
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('shortpassword');
 export default create({
@@ -52,7 +52,15 @@ export default create({
       type: String,
       default: '请输入密码'
     },
-    isVisible: {
+    desc: {
+      type: String,
+      default: '您使用了虚拟资产，请进行验证'
+    },
+    tips: {
+      type: String,
+      default: '忘记密码'
+    },
+    visible: {
       type: Boolean,
       default: false
     },
@@ -71,22 +79,15 @@ export default create({
     length: {
       type: [String, Number], //4～6
       default: 6
-    },
-    showPasswordTips: {
-      type: Boolean,
-      default: true
-    },
-    link: {
-      type: String,
-      default: ''
     }
   },
   emits: [
-    'sure-click',
     'update:value',
-    'update:is-visible',
-    'complete',
-    'input'
+    'update:visible',
+    'on-complete',
+    'on-change',
+    'on-ok',
+    'on-tips'
   ],
   setup(props, { emit }) {
     const realInput = ref(props.value);
@@ -95,7 +96,7 @@ export default create({
 
     // 方法
     function sureClick() {
-      emit('sure-click', realInput.value);
+      emit('on-ok', realInput.value);
     }
     function focus() {
       realpwd.value.focus();
@@ -108,19 +109,19 @@ export default create({
         realInput.value = val;
       }
       if (realInput.value.length === comLen.value) {
-        emit('complete', val);
+        emit('on-complete', val);
       }
-      emit('input', val);
+      emit('on-change', val);
       emit('update:value', val);
     }
     function close() {
-      emit('update:is-visible', false);
+      emit('update:visible', false);
     }
     function range(val: number) {
       return Math.min(Math.max(4, val), 6);
     }
-    function link() {
-      if (props.link) window.location.href = props.link;
+    function onTips() {
+      emit('on-tips');
     }
     return {
       comLen,
@@ -131,7 +132,7 @@ export default create({
       range,
       changeValue,
       close,
-      link
+      onTips
     };
   }
 });