feat: shortpassword init

src/config.js

@@ -20,7 +20,7 @@ module.exports = {
       path: '/'
     },
     {
-      name: '/',
+      name: 'intro',
       cName: '组件',
       path: '/'
     },
@@ -407,6 +407,16 @@ module.exports = {
           sort: 5,
           show: true,
           author: ''
+        },
+        {
+          version: '3.0.0',
+          name: 'ShortPassword',
+          type: 'component',
+          cName: '短密码',
+          desc: '短密码组件',
+          sort: 6,
+          show: true,
+          author: 'Drjingfubo'
         }
       ]
     },

src/packages/ShortPassword/demo.vue

+<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>
+    <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"
+    >
+    </nut-shortpassword>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, reactive, toRefs, watch } from 'vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('shortpassword');
+export default createDemo({
+  setup() {
+    const state = reactive({
+      dialogShow: false,
+      dialogShow1: false,
+      value: '',
+      value1: ''
+    });
+    // 方法
+    function switchActionSheet(param) {
+      state[`${param}`] = !state[`${param}`];
+    }
+    watch(
+      () => state.value,
+      val => {
+        if (val.length == 6) {
+          state.dialogShow = false;
+          console.log(state.dialogShow);
+        }
+      }
+    );
+    return {
+      state,
+      switchActionSheet
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/packages/ShortPassword/index.scss

+.nut-shortpsd-subtitle {
+  display: inline-block;
+  margin-bottom: 24px;
+}
+
+.nut-input-w {
+  padding: 24px 0 10px 0;
+  text-align: center;
+  position: relative;
+
+  input {
+    width: 247px;
+    height: 41px;
+    background: rgba(245, 245, 245, 1);
+    border-radius: 4px;
+  }
+
+  .nut-input-real {
+    padding: 0 12px;
+  }
+}
+
+.psd-blink {
+  display: inline-block;
+}
+
+.nut-shortpsd-fake {
+  width: 100%;
+  height: 41px;
+  margin: 0 auto;
+  background: rgba(245, 245, 245, 1);
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  position: absolute;
+  left: 0;
+  top: 29%;
+  z-index: 0;
+}
+
+.nut-shortpsd-li {
+  width: 41px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nut-shortpsd-icon {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background: #000;
+  display: inline-block;
+}
+
+.nut-shortpsd-message {
+  margin-top: 9px;
+  margin-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  width: 247px;
+
+  .nut-shortpsd-error {
+    line-height: 10px;
+    font-family: PingFangSC-Regular;
+    font-size: 10px;
+    color: rgba(242, 39, 12, 1);
+  }
+
+  .nut-shortpsd-forget {
+    line-height: 12px;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: rgba(128, 128, 128, 1);
+  }
+}
+.nut-dialog-content {
+  padding-bottom: 0;
+}

src/packages/ShortPassword/index.vue

+<template>
+  <view>
+    <nut-dialog
+      title="请输入密码"
+      :visible="dialogShow"
+      @ok-btn-click="sureClick"
+      @cancel-btn-click="dialogShow = false"
+      @close="close"
+      :noFooter="showButton"
+    >
+      <view class="nut-shortpsd-subtitle">您使用了虚拟资产，请进行验证</view>
+      <view class="nut-input-w">
+        <input
+          ref="realpwd"
+          class="nut-input-real"
+          type="number"
+          maxlength="6"
+          v-model="realInput"
+          @input="changeValue"
+        />
+        <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-li"
+            ><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-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>
+      </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
+        >
+      </view>
+    </nut-dialog>
+  </view>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, watch, reactive, watchEffect } from 'vue';
+import { createComponent } from '@/utils/create';
+const { create } = createComponent('shortpassword');
+export default create({
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    errorMsg: {
+      type: String,
+      default: ''
+    },
+    showButton: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { emit }) {
+    const dialogShow = ref(false);
+    const realInput = ref(props.value);
+    const realpwd = ref();
+    // 方法
+    function sureClick() {
+      dialogShow.value = false;
+      emit('sureClick');
+    }
+    function focus() {
+      realpwd.value.focus();
+    }
+    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 (realInput.value.length > 6) {
+        realInput.value = realInput.value.slice(0, Number(6));
+      }
+      emit('input', val);
+      emit('update:value', val);
+    }
+    function close() {
+      emit('update:isVisible', false);
+    }
+    watch(
+      () => props.isVisible,
+      val => {
+        console.log(val);
+        if (val) {
+          dialogShow.value = true;
+        } else {
+          dialogShow.value = false;
+        }
+      }
+    );
+    return {
+      dialogShow,
+      sureClick,
+      realInput,
+      realpwd,
+      focus,
+      changeValue,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/tabbar/index.vue

@@ -67,8 +67,8 @@ export default create({
     }
   },
   components: {},
+  emits: ['tab-switch'],
   setup(props, { emit }) {
-    console.log(props);
     const currIndex: any = ref(0);
     const { tabbarList } = props;
     function initbar() {

src/sites/doc/router.ts

@@ -10,7 +10,7 @@ files.keys().forEach(component => {
   const componentEntity = files(component).default;
   const name = `${component.split('/')[1]}`;
   pagesRouter.push({
-    path: name,
+    path: '/' + name,
     component: componentEntity,
     name
   });
@@ -20,24 +20,26 @@ docs.keys().forEach(component => {
   const componentEntity = docs(component).default;
   const name = `${component.split('/')[1].replace('.md', '')}`;
   pagesRouter.push({
-    path: name,
+    path: '/' + name,
     component: componentEntity,
     name
   });
 });
+
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: '/',
-    component: Index,
-    children: pagesRouter
-  },
+  { path: '/', redirect: '/main' },
   {
     path: '/main',
-    name: '/main',
+    name: 'main',
     component: Main
     // children: pagesRouter
   },
+  {
+    path: '/index',
+    name: 'index',
+    component: Index,
+    children: pagesRouter
+  },
   {
     path: '/resource',
     name: 'resource',

src/sites/doc/views/Main.vue

@@ -76,7 +76,7 @@ export default defineComponent({
       const route = useRoute();
     });
     function toIntro() {
-      router.push({ path: '/index' });
+      router.push({ path: '/intro' });
     }
 
     return {