Hxc (#197)

* demo: radio 单选demo 修改 * feat(input): 添加属性 align right 右对齐 * release: 2.1.0发版准备
jd-ftf · Sep 30, 2020 · 692a43b · 692a43b
1 parent 603a360
commit 692a43b
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 50 deletions.
diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
@@ -1,11 +1,14 @@
 ## 更新日志
 
-### 2.0.1
+### 2.1.0
 
-*待定*
+*2020-09-30*
 
 #### 新特性
 
+- Input
+  - 新增属性 `align-right`, 支持设置内容右对齐 (by [@HXCStudio123](https://github.com/HXCStudio123) )
+
 #### Bug 修复
 
 - Search

diff --git a/example/pages/radio/index.js b/example/pages/radio/index.js
@@ -9,8 +9,10 @@ Page({
     value5: 1,
     value6: 1,
     value7: 1,
+    value8: 1,
     value9: 1,
-    value8: 1
+    value10: 1,
+    value11: 1
   },
   change (event) {
     const index = event.target.dataset.index

diff --git a/example/pages/radio/index.jxml b/example/pages/radio/index.jxml
@@ -24,8 +24,8 @@
 <demo-block title="修改形状--dot">
   <wd-radio-group
     shape="dot"
-    data-index="{{9}}"
-    value="{{value9}}"
+    data-index="{{2}}"
+    value="{{value2}}"
     bind:change="change"
   >
     <wd-radio value="{{1}}">京麦</wd-radio>
@@ -39,8 +39,8 @@
 >
   <wd-radio-group
     cell
-    data-index="{{2}}"
-    value="{{value2}}"
+    data-index="{{3}}"
+    value="{{value3}}"
     bind:change="change"
   >
     <wd-radio value="{{1}}">京麦</wd-radio>
@@ -53,8 +53,8 @@
   transparent
 >
   <wd-radio-group
-    data-index="{{3}}"
-    value="{{value3}}"
+    data-index="{{4}}"
+    value="{{value4}}"
     cell
     shape="button"
   >
@@ -70,19 +70,29 @@
 
 <demo-block title="同行展示">
   <wd-radio-group
-    data-index="{{4}}"
-    value="{{value4}}"
+    data-index="{{5}}"
+    value="{{value5}}"
     inline
   >
     <wd-radio value="{{1}}">单选框1</wd-radio>
     <wd-radio value="{{2}}">单选框2</wd-radio>
   </wd-radio-group>
+  <view class="divider"></view>
+  <wd-radio-group
+    data-index="{{6}}"
+    value="{{value6}}"
+    inline
+    shape="dot"
+  >
+    <wd-radio value="{{1}}">单选框1</wd-radio>
+    <wd-radio value="{{2}}">单选框2</wd-radio>
+  </wd-radio-group>
 </demo-block>
 
 <demo-block title="修改选中颜色">
   <wd-radio-group
-    data-index="{{5}}"
-    value="{{value5}}"
+    data-index="{{7}}"
+    value="{{value7}}"
     bind:change="change"
   >
     <wd-radio
@@ -105,15 +115,15 @@
     <wd-radio value="{{1}}">京麦</wd-radio>
     <wd-radio value="{{2}}">商家后台</wd-radio>
   </wd-radio-group>
-  <view style="margin-bottom: 10px;">
-    <wd-radio-group
-      value="{{1}}"
-      disabled
-    >
-      <wd-radio value="{{1}}">京麦</wd-radio>
-      <wd-radio value="{{2}}">商家后台</wd-radio>
-    </wd-radio-group>
-  </view>
+  <view class="divider"></view>
+  <wd-radio-group
+    value="{{1}}"
+    disabled
+  >
+    <wd-radio value="{{1}}">京麦</wd-radio>
+    <wd-radio value="{{2}}">商家后台</wd-radio>
+  </wd-radio-group>
+  <view class="divider"></view>
   <wd-radio-group
     value="{{1}}"
     disabled
@@ -126,19 +136,30 @@
 
 <demo-block title="大尺寸">
   <wd-radio-group
-    data-index="{{6}}"
-    value="{{value6}}"
+    data-index="{{8}}"
+    value="{{value8}}"
     size="large"
   >
     <wd-radio value="{{1}}">单选框1</wd-radio>
     <wd-radio value="{{2}}">单选框2</wd-radio>
   </wd-radio-group>
+  <view class="divider"></view>
   <wd-radio-group
-    data-index="{{7}}"
-    value="{{value7}}"
+    data-index="{{9}}"
+    value="{{value9}}"
+    size="large"
+    shape="dot"
+  >
+    <wd-radio value="{{1}}">单选框1</wd-radio>
+    <wd-radio value="{{2}}">单选框2</wd-radio>
+  </wd-radio-group>
+  <view class="divider"></view>
+  <wd-radio-group
+    data-index="{{10}}"
+    value="{{value10}}"
     size="large"
     inline
-    class="group"
+    custom-class="group"
   >
     <wd-radio value="{{1}}">单选框1</wd-radio>
     <wd-radio value="{{2}}">单选框2</wd-radio>
@@ -149,9 +170,9 @@
   <wd-radio-group
     hape="button"
     disabled
-    checked-color="#f00"
-    data-index="{{8}}"
-    value="{{value8}}"
+    checked-color="#fa4350"
+    data-index="{{11}}"
+    value="{{value11}}"
     bind:change="change"
   >
     <wd-radio

diff --git a/example/pages/radio/index.jxss b/example/pages/radio/index.jxss
@@ -1,6 +1,5 @@
-.group {
-  display: block;
+.divider {
   margin-top: 10px;
-  padding: 10px 0;
+  margin-bottom: 10px;
   border-top: 1px solid rgba(0, 0, 0, 0.04);
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wot-design-mini",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A ui component library for mini program",
   "scripts": {
     "dev": "npm run build:icon && cross-env EFF_ABSOLUTE_PATHS=true NODE_ENV=development gulp dev --gulpfile build/gulpfile.js",

diff --git a/packages/input/index.js b/packages/input/index.js
@@ -88,6 +88,7 @@ VueComponent({
       type: Boolean,
       value: false
     },
+    alignRight: Boolean,
     // 原生属性结束
     value: {
       type: null,

diff --git a/packages/input/index.jxml b/packages/input/index.jxml
@@ -1,17 +1,17 @@
-<view class="wd-input {{ type === 'textarea' ? 'is-textarea' : '' }} {{ label || useLabelSlot ? 'is-cell' : '' }} {{ center ? 'is-center' : '' }} {{ border ? 'is-border' : '' }} {{ size ? 'is-' + size : '' }} {{ error ? 'is-error' : '' }} {{ disabled ? 'is-disabled' : '' }} {{ autoHeight ? 'is-auto-height' : '' }} {{ value && value.length > 0 ? 'is-not-empty' : '' }} {{ noBorder ? 'is-no-border' : '' }} custom-class">
+<view class="wd-input {{ type === 'textarea' ? 'is-textarea' : '' }} {{ label ? 'is-cell' : '' }} {{ useLabelSlot ? 'is-custom' : '' }} {{ center ? 'is-center' : '' }} {{ border ? 'is-border' : '' }} {{ size ? 'is-' + size : '' }} {{ error ? 'is-error' : '' }} {{ disabled ? 'is-disabled' : '' }} {{ autoHeight ? 'is-auto-height' : '' }} {{ value && value.length > 0 ? 'is-not-empty' : '' }} {{ noBorder ? 'is-no-border' : '' }} custom-class">
   <view
     jd:if="{{ label || useLabelSlot }}"
     class="wd-input__label custom-label-class {{ required ? 'is-required' : '' }}"
     style="{{ labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : '' }}"
   >
     <view jd:if="{{ prefixIcon || usePrefixSlot }}" class="wd-input__prefix">
-      <wd-icon jd:if="{{ prefixIcon }}" custom-class="wd-input__icon" name="{{ prefixIcon }}" bind:tap="onClickPrefixIcon" />
-      <slot name="prefix"></slot>
+      <wd-icon jd:if="{{ prefixIcon && !usePrefixSlot }}" custom-class="wd-input__icon" name="{{ prefixIcon }}" bind:tap="onClickPrefixIcon" />
+      <slot jd:else name="prefix"></slot>
     </view>
-    <view class="wd-input__label-inner">
-      <block jd:if="{{label && !useLabelSlot}}">{{ label }}</block>
+    <block>
+      <view class="wd-input__label-inner" jd:if="{{label && !useLabelSlot}}">{{ label }}</view>
       <slot jd:else name="label"></slot>
-    </view>
+    </block>
   </view>
   <!-- 文本域 -->
   <view jd:if="{{ type === 'textarea' }}" class="wd-input__textarea {{ showWordCount ? 'is-show-limit' : '' }}">
@@ -66,7 +66,7 @@
     <block jd:else>
       <input
         jd:if="{{ showPassword && !isPwdVisible }}"
-        class="wd-input__inner {{ prefixIcon ? 'wd-input__inner--prefix' : '' }} {{ showWordCount ? 'wd-input__inner--count' : '' }} custom-input-class"
+        class="wd-input__inner {{ prefixIcon ? 'wd-input__inner--prefix' : '' }} {{ showWordCount ? 'wd-input__inner--count' : '' }} {{alignRight? 'is-align-right' : ''}}  custom-input-class"
         type="password"
         password="{{ isPwdVisible }}"
         value="{{ value }}"
@@ -96,7 +96,7 @@
       <!-- 密码不隐藏 -->
       <input
         jd:else
-        class="wd-input__inner {{ prefixIcon ? 'wd-input__inner--prefix' : '' }} {{ showWordCount ? 'wd-input__inner--count' : '' }} custom-input-class"
+        class="wd-input__inner {{ prefixIcon ? 'wd-input__inner--prefix' : '' }} {{ showWordCount ? 'wd-input__inner--count' : '' }} {{alignRight? 'is-align-right' : ''}} custom-input-class"
         type="{{ type }}"
         value="{{ value }}"
         placeholder="{{ placeholder }}"
@@ -126,11 +126,11 @@
         <wd-icon jd:if="{{ showClear }}" custom-class="wd-input__clear" name="error-fill"  bindtap="clear"/>
         <wd-icon
           jd:if="{{ showPassword }}"
-          custom-class="wd-input__icon"
+          class="wd-input__icon"
           name="{{ isPwdVisible ? 'view' : 'eye-close' }}"
           bindtap="togglePwdVisible"
         />
-        <view jd:if="{{ showWordCount }}" class="wd-input__count">
+        <view jd:if="{{ showWordCount }}" custom-class="wd-input__count">
           <text
             class="{{ value && value.length > 0 ? 'wd-input__count-current' : '' }} {{  value.length > maxlength ?  'is-error' : '' }}"
           >{{ value.length }}</text>/{{ maxlength }}

diff --git a/packages/input/index.scss b/packages/input/index.scss
@@ -148,6 +148,13 @@
       @include halfPixelBorder("top", $-input-cell-padding);
     }
   }
+
+  @include when(custom) {
+    display: flex;
+    align-items: flex-start;
+    padding: 0;
+    background-color: $-input-cell-bg;
+  }
   @include when(large) {
     .wd-input__prefix {
       font-size: $-input-fs-large;
@@ -203,32 +210,30 @@
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
     }
+
+    @include when(align-right) {
+      text-align: right;
+    }
   }
   @include e(icon) {
     margin-left: 8px;
     font-size: $-input-icon-size;
     color: $-input-icon-color;
     vertical-align: middle;
-    height: $-input-inner-height;
-    line-height: $-input-inner-height;
     background: $-input-bg;
   }
   @include e(clear) {
     margin-left: 8px;
     font-size: $-input-icon-size;
     color: $-input-clear-color;
     vertical-align: middle;
-    height: $-input-inner-height;
-    line-height: $-input-inner-height;
     background: $-input-bg;
   }
   @include e(count) {
     margin-left: 15px;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;
-    height: $-input-inner-height;
-    line-height: $-input-inner-height;
     background: $-input-bg;
   }
   @include e(count-current) {