upd: drag,shortpassword (#409)

src/packages/actionsheet/demo.vue

@@ -25,7 +25,6 @@
 
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
       <span><label>选项状态</label></span>
-      <!-- <div class="selected-option">打开</div> -->
     </nut-cell>
 
     <!-- demo 基础用法 -->

src/packages/actionsheet/index.vue

@@ -4,7 +4,6 @@
       v-model:show="state.maskIsVisible"
       position="bottom"
       round
-      :closeable="closeAbled"
       @click-overlay="closeMask"
     >
       <view class="nut-actionsheet-panel">
@@ -72,10 +71,6 @@ export default create({
       type: String,
       default: '#ee0a24'
     },
-    closeAbled: {
-      type: Boolean,
-      default: false
-    },
     description: {
       type: String,
       default: ''
@@ -88,7 +83,6 @@ export default create({
   emits: ['cancel', 'choose'],
 
   setup(props, { emit }) {
-    console.log(props);
     const state = reactive({
       maskIsVisible: false
     });

src/packages/drag/demo.vue

@@ -1,24 +1,32 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
-    <nut-drag :style="{ top: '100px', left: '8px' }">
+    <nut-drag :style="{ top: '120px', left: '8px' }">
       <nut-button type="primary">触摸移动</nut-button>
     </nut-drag>
-    <h2 style="top:30px;position:relative">限制拖拽方向</h2>
+    <h2 style="top: 30px; position: relative">限制拖拽方向</h2>
     <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
       <nut-button type="primary">只能X轴拖拽</nut-button>
     </nut-drag>
     <nut-drag direction="y" :style="{ top: '200px', right: '50px' }">
       <nut-button type="primary">只能Y轴拖拽</nut-button>
     </nut-drag>
-    <h2 style="top:70px;position:relative">自动吸边</h2>
+    <h2 style="top: 60px; position: relative">自动吸边</h2>
     <nut-drag
       direction="x"
       :attract="true"
-      :style="{ top: '300px', left: '8px' }"
+      :style="{ top: '275px', left: '8px' }"
     >
       <nut-button type="primary">拖动我</nut-button>
     </nut-drag>
+    <h2 style=" top: 90px ;position: relative">限制拖动边界</h2>
+    <div class="drag-boundary"></div>
+    <nut-drag
+      :boundary="{ top: 361, left: 9, bottom: bottom(), right: right() }"
+      :style="{ top: '400px', left: '50px' }"
+    >
+      <nut-button type="primary">限制拖拽边界</nut-button>
+    </nut-drag>
   </div>
 </template>
 
@@ -27,8 +35,28 @@ import { ref, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('drag');
 export default createDemo({
-  setup() {}
+  setup() {
+    function right() {
+      return document.documentElement.clientWidth - 300 - 9;
+    }
+    function bottom() {
+      return document.documentElement.clientHeight - 559;
+    }
+    return {
+      right,
+      bottom
+    };
+  }
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.drag-boundary {
+  position: absolute;
+  top: 360px;
+  left: 8px;
+  width: 300px;
+  height: 200px;
+  border: 1px solid red;
+}
+</style>

src/packages/drag/doc.md

@@ -0,0 +1,51 @@
+# Drag 拖拽
+实现可拖拽的任意元素
+
+## 基本用法
+```html
+<nut-drag>
+  <div class="touch-dom">可点击，可拖拽</div>
+</nut-drag>
+```
+## 限制拖拽方向
+```html
+<nut-drag direction="x">
+  <div class="touch-dom">只能在X轴拖动</div>
+</nut-drag>
+```
+## 自动吸边
+```html
+<nut-drag direction="x" :attract="true">
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+```
+## 限制拖拽边界
+```html
+<nut-drag
+  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
+  :attract="true"
+>
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+<script>
+ setup() {
+    function right() {
+      return document.documentElement.clientWidth - 300 - 9;
+    }
+    function bottom() {
+      return document.documentElement.clientHeight - 559;
+    }
+    return {
+      right,
+      bottom
+    };
+  }
+</script>
+```
+## Prop
+
+| 字段      | 说明                                              | 类型           | 默认值                              |
+| :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
+| attract   | 是否开启自动吸边                                  | Boolean        | false                                |
+| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | String         | 'all'                               |
+| boundary  | 拖拽元素的拖拽边界                                | Object         | {top: 0,left: 0,right: 0,bottom: 0} |

src/packages/drag/index.vue

@@ -161,7 +161,7 @@ export default create({
         currX =
           currX < state.screenWidth / 2 ? state.boundary.left : rightLocation;
       }
-      if (props.direction !== 'y' && props.attract) {
+      if (props.direction != 'y' && props.attract) {
         if (currX < state.screenWidth / 2) {
           requestAniFrame(() => {
             goLeft(target);

src/packages/shortpassword/demo.vue

@@ -12,13 +12,24 @@
       @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 = true;
+        state.length = 6;
+        state.errorMsg = '';
+      "
+    ></nut-cell>
     <nut-cell
       title="显示按钮组"
       is-link
       @click="
         state.visible = true;
         state.noButton = false;
+        state.length = 6;
+        state.errorMsg = '';
       "
     ></nut-cell>
     <nut-cell
@@ -26,20 +37,28 @@
       is-link
       @click="
         state.visible = true;
-        state.noButton = false;
+        state.noButton = true;
         state.length = 4;
+        state.errorMsg = '';
       "
     ></nut-cell>
     <nut-cell
       title="忘记密码提示语事件回调"
       is-link
-      @click="state.visible = true"
+      @click="
+        state.visible = true;
+        state.length = 6;
+        state.errorMsg = '';
+        state.noButton = true;
+      "
     ></nut-cell>
     <nut-cell
       title="错误提示语"
       is-link
       @click="
         state.visible = true;
+        state.length = 6;
+        state.noButton = true;
         state.errorMsg = '请输入正确密码';
       "
     ></nut-cell>
@@ -52,7 +71,8 @@ import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('shortpassword');
 export default createDemo({
   setup() {
-    let { ctx } = getCurrentInstance();
+    let { ctx } = getCurrentInstance() as any;
+    console.log(ctx);
 
     const state = reactive({
       visible: false,

src/packages/shortpassword/index.scss

@@ -1,6 +1,16 @@
+.nut-shortpsd-title {
+  line-height: 1;
+  font-size: $font-size-3;
+  color: $title-color;
+}
+
 .nut-shortpsd-subtitle {
-  display: inline-block;
+  display: block;
+  margin-top: 12px;
   margin-bottom: 24px;
+  line-height: 1;
+  font-size: $font-size-1;
+  color: $text-color;
 }
 
 .nut-input-w {
@@ -20,6 +30,10 @@
   }
 }
 
+.nut-popup {
+  border-radius: 12px;
+}
+
 .psd-blink {
   display: inline-block;
 }
@@ -57,21 +71,56 @@
 
 .nut-shortpsd-message {
   margin-top: 9px;
-  margin-left: 20px;
   display: flex;
   justify-content: space-between;
   width: 247px;
+
   .nut-shortpsd-error {
     line-height: 10px;
     font-size: 10px;
     color: $shortpsd-error;
   }
+
   .nut-shortpsd-forget {
     line-height: 12px;
     font-size: $font-size-1;
     color: $shortpsd-forget;
   }
 }
+
+.nut-shortpsd-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+
+  .nut-shortpsd-cancle {
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(250, 44, 25, 1);
+    border-radius: 15px;
+    padding: 8px 38px;
+    line-height: 14px;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: rgba(250, 44, 25, 1);
+  }
+
+  .nut-shortpsd-sure {
+    background: linear-gradient(
+      135deg,
+      rgba(250, 44, 25, 1) 0%,
+      rgba(250, 63, 25, 1) 45%,
+      rgba(250, 89, 25, 1) 83%,
+      rgba(250, 100, 25, 1) 100%
+    );
+    border-radius: 15px;
+    padding: 8px 38px;
+    line-height: 14px;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
 .nut-dialog-content {
   padding-bottom: 0;
 }

src/packages/shortpassword/index.vue

@@ -1,13 +1,17 @@
 <template>
   <view>
-    <nut-dialog
-      :title="title"
-      :visible="visible"
-      @ok-btn-click="sureClick"
-      @cancel-btn-click="close"
-      @close="close"
-      :no-footer="noButton"
+    <nut-popup
+      :style="{
+        padding: '32px 24px 28px 24px',
+        borderRadius: '12px',
+        textAlign: 'center'
+      }"
+      v-model:show="show"
+      :closeable="true"
+      @click-close-icon="close"
+      @click-overlay="close"
     >
+      <view class="nut-shortpsd-title">{{ title }}</view>
       <view class="nut-shortpsd-subtitle">{{ desc }}</view>
       <view class="nut-input-w">
         <input
@@ -38,12 +42,15 @@
           <view @click="onTips">{{ tips }}</view>
         </view>
       </view>
-    </nut-dialog>
+      <view v-if="!noButton" class="nut-shortpsd-footer">
+        <view class="nut-shortpsd-cancle" @click="close">取消</view>
+        <view class="nut-shortpsd-sure" @click="sureClick">确认</view>
+      </view>
+    </nut-popup>
   </view>
 </template>
-
 <script lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('shortpassword');
 export default create({
@@ -86,7 +93,7 @@ export default create({
     const realInput = ref(props.value);
     const realpwd = ref();
     const comLen = computed(() => range(Number(props.length)));
-
+    const show = ref(props.visible);
     // 方法
     function sureClick() {
       emit('ok', realInput.value);
@@ -94,6 +101,12 @@ export default create({
     function focus() {
       realpwd.value.focus();
     }
+    watch(
+      () => props.visible,
+      value => {
+        show.value = value;
+      }
+    );
     function changeValue(e: Event) {
       const input = e.target as HTMLInputElement;
       let val = input.value;
@@ -125,7 +138,8 @@ export default create({
       range,
       changeValue,
       close,
-      onTips
+      onTips,
+      show
     };
   }
 });