fix: password taro upd (#519)

* fix: checkbox间距调整，官网案例样式调整

* fix: checkbox样式调整

* fix: taro drag

* fix: taro drag doc

* fix: checkbox间距调整

* upd: actionsheet shortpassword taro doc

* fix: password taro upd

* fix: drag taro demo

src/packages/__VUE/shortpassword/index.scss

@@ -32,6 +32,7 @@
   }
 
   .nut-input-real {
+    width: 0;
     padding: 0 12px;
     opacity: 0;
   }

src/packages/__VUE/shortpassword/index.taro.vue

@@ -6,6 +6,7 @@
         borderRadius: '12px',
         textAlign: 'center'
       }"
+      class="nut-short-popup"
       v-model:visible="show"
       :closeable="true"
       @click-close-icon="closeIcon"
@@ -16,12 +17,12 @@
       <view class="nut-shortpsdWx-subtitle">{{ desc }}</view>
       <view class="nut-input-w">
         <input
-          ref="realpwd"
           class="nut-input-real"
           type="number"
           :maxlength="length"
           v-model="realInput"
           @input="changeValue"
+          @blur="blur"
         />
         <view class="nut-shortpsd-fake" @click="focus">
           <view
@@ -116,6 +117,8 @@ export default create({
     function focus() {
       let a = document.getElementsByClassName('nut-input-real')[0] as any;
       a.focus();
+      realpwd.value = document.getElementsByClassName('popup-center')[0] as any;
+      realpwd.value.style.top = '45%';
     }
     watch(
       () => props.visible,
@@ -150,6 +153,12 @@ export default create({
     function onTips() {
       emit('tips');
     }
+    function blur() {
+      let popupCenter = document.getElementsByClassName(
+        'popup-center'
+      )[0] as any;
+      popupCenter.style.top = '50%';
+    }
     onMounted(() => {
       eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
     });
@@ -164,7 +173,8 @@ export default create({
       onTips,
       focus,
       show,
-      closeIcon
+      closeIcon,
+      blur
     };
   }
 });

src/sites/mobile-taro/vue/src/base/pages/drag/index.vue

@@ -2,7 +2,12 @@
   <div class="demo full">
     <h2>基础用法</h2>
     <nut-drag
-      style="width: 90%; height: 200px; border: 1px solid red"
+      style="
+        width: 70%;
+        height: 200px;
+        border: 1px solid red;
+        margin: 0 0 0 20px;
+      "
       direction="all"
       width="120"
       height="40"
@@ -11,30 +16,25 @@
         >触摸移动</nut-button
       >
     </nut-drag>
-    <h2 style="margin: 60px 0 0 0">限制拖拽方向</h2>
+    <h2 style="margin: 30px 0 0 0">限制拖拽方向</h2>
     <nut-drag
-      style="width: 100%; height: 200px; position: absolute"
+      style="width: 80%; height: 50px; margin: 10px 0 0 20px"
       direction="x"
       width="120"
       height="40"
     >
       <nut-button style="width: 120px; height: 40px" type="primary"
-        >只能X轴拖拽</nut-button
+        >X轴拖拽</nut-button
       >
     </nut-drag>
     <nut-drag
-      style="
-        width: 100%;
-        height: 200px;
-        position: absolute;
-        margin: 0 0 0 200px;
-      "
+      style="width: 100%; height: 200px; margin: 0 0 0 20px"
       direction="y"
       width="120"
       height="40"
     >
       <nut-button style="width: 120px; height: 40px" type="primary"
-        >只能y轴拖拽</nut-button
+        >y轴拖拽</nut-button
       >
     </nut-drag>
   </div>
@@ -46,4 +46,8 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.dragDemo {
+  margin-left: 20px;
+}
+</style>