feat: stepper 组件增加只读属性 (#1036)

compiled/alipay/demo/pages/Stepper/index.axml

@@ -32,6 +32,11 @@
     defaultValue="{{ 0 }}"
     disabled />
 </container>
+<container title="输入框只读">
+  <stepper
+    defaultValue="{{ 0 }}"
+    inputReadOnly />
+</container>
 <container title="受控组件">
   <stepper
     value="{{ value }}"

compiled/alipay/src/Stepper/index.axml

@@ -10,7 +10,13 @@
     disabled="{{ disabled || (mixin.value !== '' && mixin.value <= min) }}"
     onTap="onTap" />
   <view class="ant-stepper-input-wrap">
+    <view
+      a:if="{{ inputReadOnly }}"
+      class="ant-stepper-input ant-stepper-input-readonly">
+      {{ mixin.value }}
+    </view>
     <ant-input
+      a:else
       className="ant-stepper-input {{ disabled ? 'ant-stepper-input-disabled' : '' }} {{ inputClassName ? inputClassName : '' }}"
       style="{{ inputStyle }}"
       type="{{ type }}"

compiled/alipay/src/Stepper/index.md

@@ -23,6 +23,7 @@ toc: 'content'
 | -----|-----|-----|----- |
 | className | 类名 | string | - | 
 | disabled |  是否禁用 | boolean | false |
+| inputReadOnly |  输入框是否只读状态 | boolean | false |
 | defaultValue |  初始值 | number | - |
 | focus |  输入框选中状态 | boolean | false |
 | inputClassName |  输入框类型 | string | - |

compiled/alipay/src/Stepper/props.ts

@@ -52,6 +52,12 @@ export interface IStepperProps extends IBaseProps {
    */
   disabled?: boolean;
 
+  /**
+   * @description 输入框是否只读
+   * @default false
+   */
+  inputReadOnly?: boolean;
+
   /**
    * @description 输入框初始值
    */

compiled/wechat/demo/pages/Stepper/index.wxml

@@ -32,6 +32,11 @@
     defaultValue="{{ 0 }}"
     disabled />
 </container>
+<container title="输入框只读">
+  <stepper
+    defaultValue="{{ 0 }}"
+    inputReadOnly />
+</container>
 <container title="受控组件">
   <stepper
     value="{{ value }}"

compiled/wechat/src/Stepper/index.md

@@ -23,6 +23,7 @@ toc: 'content'
 | -----|-----|-----|----- |
 | className | 类名 | string | - | 
 | disabled |  是否禁用 | boolean | false |
+| inputReadOnly |  输入框是否只读状态 | boolean | false |
 | defaultValue |  初始值 | number | - |
 | focus |  输入框选中状态 | boolean | false |
 | inputClassName |  输入框类型 | string | - |

compiled/wechat/src/Stepper/index.wxml

@@ -10,7 +10,13 @@
     disabled="{{ disabled || (mixin.value !== '' && mixin.value <= min) }}"
     bind:tap="onTap" />
   <view class="ant-stepper-input-wrap">
+    <view
+      wx:if="{{ inputReadOnly }}"
+      class="ant-stepper-input ant-stepper-input-readonly">
+      {{ mixin.value }}
+    </view>
     <ant-input
+      wx:else
       className="ant-stepper-input {{ disabled ? 'ant-stepper-input-disabled' : '' }} {{ inputClassName ? inputClassName : '' }}"
       style="{{ inputStyle }}"
       type="{{ type }}"

demo/pages/Stepper/index.axml.tsx

@@ -28,6 +28,9 @@ export default (_, { value, }: InternalData) => (
     <Container title="禁用状态">
       <Stepper defaultValue={0} disabled />
     </Container>
+    <Container title="输入框只读">
+      <Stepper defaultValue={0} inputReadOnly />
+    </Container>
     <Container title="受控组件">
       <Stepper
         value={value}

src/Stepper/index.axml.tsx

@@ -14,6 +14,7 @@ export default (
     type,
     max,
     focus,
+    inputReadOnly,
   }: TSXMLProps<IStepperProps>,
   { mixin, enableNative, alwaysSystem, confirmType, confirmHold }
 ) => (
@@ -32,24 +33,30 @@ export default (
       onTap="onTap"
     />
     <View class="ant-stepper-input-wrap">
-      <AntInput
-        className={`ant-stepper-input ${
-          disabled ? 'ant-stepper-input-disabled' : ''
-        } ${inputClassName ? inputClassName : ''}`}
-        style={inputStyle}
-        type={type}
-        enableNative={enableNative}
-        alwaysSystem={alwaysSystem}
-        confirm-type={confirmType}
-        confirm-hold={confirmHold}
-        disabled={disabled}
-        focus={focus}
-        onChange="onChange"
-        onFocus="onFocus"
-        onBlur="onBlur"
-        onConfirm="onConfirm"
-        value={mixin.value}
-      />
+      {inputReadOnly ? (
+        <View class="ant-stepper-input ant-stepper-input-readonly">
+          {mixin.value}
+        </View>
+      ) : (
+        <AntInput
+          className={`ant-stepper-input ${
+            disabled ? 'ant-stepper-input-disabled' : ''
+          } ${inputClassName ? inputClassName : ''}`}
+          style={inputStyle}
+          type={type}
+          enableNative={enableNative}
+          alwaysSystem={alwaysSystem}
+          confirm-type={confirmType}
+          confirm-hold={confirmHold}
+          disabled={disabled}
+          focus={focus}
+          onChange="onChange"
+          onFocus="onFocus"
+          onBlur="onBlur"
+          onConfirm="onConfirm"
+          value={mixin.value}
+        />
+      )}
     </View>
     <AntButton
       className={`ant-stepper-button ant-stepper-button-up ${

src/Stepper/index.md

@@ -23,6 +23,7 @@ toc: 'content'
 | -----|-----|-----|----- |
 | className | 类名 | string | - | 
 | disabled |  是否禁用 | boolean | false |
+| inputReadOnly |  输入框是否只读状态 | boolean | false |
 | defaultValue |  初始值 | number | - |
 | focus |  输入框选中状态 | boolean | false |
 | inputClassName |  输入框类型 | string | - |

src/Stepper/props.ts

@@ -52,6 +52,12 @@ export interface IStepperProps extends IBaseProps {
    */
   disabled?: boolean;
 
+  /**
+   * @description 输入框是否只读
+   * @default false
+   */
+  inputReadOnly?: boolean;
+
   /**
    * @description 输入框初始值
    */
@@ -98,4 +104,5 @@ export const StepperFunctionalProps: Partial<IStepperProps> = {
   inputClassName: '',
   inputStyle: '',
   disabled: false,
+  inputReadOnly: false,
 };