将van步进器封装成带负数显示的自定义步进器

app.json

@@ -12,7 +12,6 @@
         "components/dkbase/dk-customer-detail/dk-customer-detail",
         "components/dkbase/dk-step/dk-step",
         "components/dkbase/dk-goos-list-step/dk-goos-list-step"
-        
     ],
     "subPackages": [
         {
@@ -34,7 +33,7 @@
                 "pages/basic-data/basic-data",
                 "pages/basic-data/basic-data-sort/basic-data-sort",
                 "pages/product-file/product-file",
-                "pages/product-file/add/add", 
+                "pages/product-file/add/add",
                 "pages/product-file/product-types/product-types",
                 "pages/product-file/product-series/product-series",
                 "pages/product-file/metering-unit/metering-unit",
@@ -317,7 +316,7 @@
         "dk-search": "components/dkbase/dk-search/dk-search",
         "dk-side-pull-menu": "components/dkbase/dk-side-pull-menu/dk-side-pull-menu",
         "dk-step": "components/dkbase/dk-step/dk-step",
-        "dk-goos-list-step": "components/dkbase/dk-goos-list-step/dk-goos-list-step", 
+        "dk-goos-list-step": "components/dkbase/dk-goos-list-step/dk-goos-list-step",
         "dk-table": "components/dkbase/dk-table/dk-table",
         "dk-tabs": "components/dkbase/dk-tabs/dk-tabs",
         "dk-tag": "components/dkbase/dk-tag/dk-tag",
@@ -348,7 +347,8 @@
         "dk-drag": "components/dkbase/dk-drag/index",
         "dk-guide": "components/dkbase/dk-guide/dk-guide",
         "dk-list-report": "components/dkbase/dk-list-report/dk-list-report",
-        "dk-goos-list": "components/dkbase/dk-goos-list/dk-goos-list"
+        "dk-goos-list": "components/dkbase/dk-goos-list/dk-goos-list",
+        "dk-stepper": "components/dkbase/dk-stepper/dk-stepper"
     },
     "tabBar": {
         "color": "#95A8CB",

components/dkbase/dk-popup/dk-popup.js

@@ -413,6 +413,7 @@ Component({
      * @date   : 2024/2/2 11:46
      */
     changeStep(e) {
+      console.log('eee',e);
       if (this.data.readonly) {
         return;
       }

components/dkbase/dk-popup/dk-popup.wxml

@@ -69,7 +69,8 @@
       <!--数量step-->  
       <van-cell wx:if="{{item.type=='step'}}" border="{{ false }}" title-class="cell_title"  title="{{item.title?item.title:'数量'}}" required="{{item.required?true:false }}">
         <van-stepper wx:if="{{item.code == 'box'}}"input-width="50px" value="{{form[item.code]}}" integer="{{true}}"  data-index="{{index}}" data-item="{{item}}" data-key="{{item.code}}" min="{{form[item.code + '_min']?form[item.code + '_min']:( item.min?item.min:-9999999999)}}" max="{{form[item.code + '_max']?form[item.code + '_max']:( item.max?item.max:999999999)}}" bind:change="changeStep" disabled="{{!!readonly}}" />
-        <van-stepper wx:else value="{{form[item.code]}}" input-width="50px" integer="{{ form[stepperDecimal]==0}}"decimal-length="{{ form[stepperDecimal] }}" data-index="{{index}}" data-item="{{item}}" data-key="{{item.code}}" min="{{form[item.code + '_min']?form[item.code + '_min']:( item.min?item.min:-99999999999)}}" max="{{form[item.code + '_max']?form[item.code + '_max']:( item.max?item.max:999999999)}}" bind:change="changeStep" disabled="{{!!readonly}}" />
+        <dk-stepper wx:elif="{{item.code == 'itemQty'}}" value="{{form[item.code]}}" input-width="50px" integer="{{ form[stepperDecimal]==0}}"decimal-length="{{ form[stepperDecimal] }}" data-index="{{index}}" data-item="{{item}}" data-key="{{item.code}}" min="{{form[item.code + '_min']?form[item.code + '_min']:( item.min?item.min:-99999999999)}}" max="{{form[item.code + '_max']?form[item.code + '_max']:( item.max?item.max:999999999)}}" bind:change="changeStep" disabled="{{!!readonly}}" />
+        <van-stepper wx:else value="{{form[item.code]}}" input-width="50px" integer="{{ form[stepperDecimal]==0}}"decimal-length="{{ form[stepperDecimal] }}" data-index="{{index}}" data-item="{{item}}" data-key="{{item.code}}" min="{{form[item.code + '_min']?form[item.code + '_min']:( item.min?item.min:-99999999999)}}" max="{{form[item.code + '_max']?form[item.code + '_max']:( item.max?item.max:999999999)}}" bind:change="changeStep" disabled="{{!!readonly}}"/>
       </van-cell>
       <!--数字类-->
       <dk-number-input wx:if="{{item.type=='number'}}" sign="{{(item.sign || item.sign == '')?item.sign:'¥'}}" digits="{{(item.digits || item.digits == 0)?item.digits:2}}" fontSize="14" left="30rpx" data-key="{{item.code}}" data-item="{{item}}" max="{{(item.max || item.max == '')?item.max:10000000}}" min="{{(item.min || item.min == '')?item.min:-10000000}}"  data-index="{{index}}" center="{{'right'}}" readonly="{{!!readonly || !!item.readonly}}" 

components/dkbase/dk-stepper/dk-stepper.js

@@ -0,0 +1,192 @@
+// components/dkbase/dk-stepper/dk-stepper.js
+Component({
+
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+      // 设置数字部分显示宽度
+      inputWidth:{
+        type: String,
+        value: "32px"
+      },
+      value: {
+        type: String
+      },
+      min: {
+        type: String,
+        value:"1"
+      },
+      max: {
+        type: String
+      },
+      step: {
+        type: String,
+        value:"1"
+      },
+      integer: {
+        type: Boolean,
+        value: false
+      },
+      disabled: {
+        type: Boolean,
+        value: false
+      },
+      disableInput: {
+        type: Boolean,
+        value: false
+      },
+      asyncChange: {
+        type: Boolean,
+        value: false
+      },
+      buttonSize: {
+        type: Number,
+        value: "17px"
+      },
+      showPlus: {
+        type: Boolean,
+        value: true
+      },
+      showMinus: {
+        type: Boolean,
+        value: true
+      },
+      decimalLength: {
+        type: Number
+      },
+      theme:{
+        type: String
+      },
+      disablePlus:{
+        type: Boolean
+      },
+      disableMinus:{
+        type: Boolean
+      },
+      longPress:{
+        type: Boolean,
+        value: true
+      },
+      alwaysEmbed:{
+        type: Boolean,
+        value: false
+      },
+      // 用于控制是否显示负数
+      shieldShow:{
+        type: Boolean,
+        value: true
+      }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      // 光标点击控制遮罩显隐 true遮罩隐藏 false显示
+      checkFocus: false,
+      // 组件内容显示
+      inputValue: '-' + '1',
+      shieldWidth: '',
+      shieldRight: ''
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+      /**
+       * 步进器数值改变
+       * @author 刘尧
+       */
+      changeStep(e){
+        this.setData({
+          inputValue: '-' + e.detail,
+          value: e.detail
+        })
+        // 触发自定义事件  
+        this.triggerEvent('change', String(e.detail));
+      },
+      /**
+       * 显示数字遮罩层
+       * @author 刘尧
+       * @param {*} e 
+       */
+      shieldShow(e){
+        if(this.data.checkFocus){
+          this.setData({
+            checkFocus: false
+          })
+        } 
+      },
+      /**
+       * 步进器点击加号事件
+       * @author 刘尧
+       * @param {*} e 
+       */
+      bindPlus(e){
+        this.shieldShow()
+      },
+       /**
+       * 步进器点击减号事件
+       * @author 刘尧
+       * @param {*} e 
+       */
+      bindMinus(e){
+        this.shieldShow()
+      },
+
+      // 遮罩层input组件和van-stepper组件均绑定以下焦点事件，以便控制遮罩显隐
+
+      /**遮罩组件点击事件
+       * @author : 刘尧
+       * @date : 2024/6/3 09:02
+       * @param {*} e 
+       */
+      inputOnFocus(e){
+        if(!this.data.checkFocus && !this.data.disableInput){
+          this.setData({
+            checkFocus:true
+          })
+        }
+      },
+      /** 
+       * 步进器失去焦点
+       * @author : 刘尧
+       * @date : 2024/6/3 08:44
+       *  */
+      onBlur(e){
+        this.setData({
+          checkFocus:false
+        })
+      },
+      /** 
+       * 步进器获取焦点
+       * @author : 刘尧
+       * @date : 2024/6/3 08:43
+       *  */
+      onFocus(e){
+        this.setData({
+          checkFocus:true
+        })
+      }
+    },
+    observers: {
+      'value, min': function(value, min) {
+        /**
+         * 数据监听当组件被赋予value值或最小值时执行
+         * @author 刘尧
+         */
+        this.setData({
+          inputValue: '-' + value || min
+        })
+      },
+      'inputWidth, buttonSize': function(inputWidth, buttonSize){
+        let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
+        this.setData({
+          shieldWidth: (750 / deviceWidth) * Number(inputWidth.replace('px', '')) + 'rpx',
+          shieldRight: (750 / deviceWidth) * Number(buttonSize.replace('px', '')) + 'rpx'
+        })
+      }
+    }
+})

components/dkbase/dk-stepper/dk-stepper.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/dkbase/dk-stepper/dk-stepper.wxml

@@ -0,0 +1,12 @@
+<view>
+  <view class="com-content">
+    <!-- 将文字显示上方获取焦点相关事件处理遮罩文字显隐 -->
+    <view class="number-view" style="width: {{inputWidth}};margin-right:{{buttonSize}};">
+      <view class="number-content" style="width: {{inputWidth ? inputWidth: ''}};" bindtap="inputOnFocus" wx:if="{{ !checkFocus && shieldShow }}">{{ inputValue }}</view>
+    </view>
+    <!-- 原始步进器组件 -->
+    <van-stepper bind:blur="onBlur"
+    value="{{value}}"
+    input-width="{{inputWidth}}" async-change="{{asyncChange}}" button-size="{{buttonSize}}" show-plus="{{showPlus}}" min="{{min}}" max="{{max}}" bind:focus="onFocus" step="{{step}}" disabled="{{disabled}}" disableInput="{{disableInput}}" integer="{{integer}}" show-minus="{{showMinus}}" decimal-length="{{decimalLength}}" theme="{{theme}}" disable-plus="{{disablePlus}}" disable-minus="{{disableMinus}}" long-press="{{longPress}}" always-embed="{{alwaysEmbed}}" bind:plus="bindPlus" bind:minus="bindMinus" bind:change="changeStep"></van-stepper>
+  </view>
+</view>

components/dkbase/dk-stepper/dk-stepper.wxss

@@ -0,0 +1,22 @@
+.com-content{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 5rpx;
+}
+
+.number-view{
+  position: fixed;
+  display: flex;
+  z-index: 100;
+  justify-content: center;
+  align-items: center;
+  padding: 5rpx;
+}
+
+.number-content{
+  text-align: center;
+  z-index: 100;
+  background-color: #ffffff;
+}