feat: 完善form表单

sadais-org · Feb 4, 2021 · c2d2b91 · c2d2b91
1 parent 4db5103
commit c2d2b91
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 38 deletions.
diff --git a/components/pi-form-item/index.vue b/components/pi-form-item/index.vue
@@ -1,13 +1,17 @@
 <template>
   <view
-    class="pi-form-item pi-align-center"
+    class="pi-form-item"
     :style="[customStyle, itemStyle]"
-    :class="[{ border: getBorder }, customClass]"
+    :class="[{ border: getBorder }, { 'pi-align-center': !getWrap }, customClass]"
     @tap.stop="handleItemClick"
   >
-    <!-- 左侧区域 -->
-    <view class="form-label pi-align-center pi-flex-nowrap" :style="[getLabelStyle, labelStyle]">
-      <view v-if="required" style="color: red;" class=" pi-mg-right-12" :style="[requiredStyle]">
+    <!-- 表单标题 -->
+    <view
+      class="form-label pi-align-center pi-flex-nowrap"
+      :style="[getLabelStyle, labelStyle]"
+      :class="[{ border: getWrap && getLabelWrapBorder }]"
+    >
+      <view v-if="required" style="color: red;" class="pi-mg-right-12" :style="[requiredStyle]">
         *
       </view>
       <slot name="label">
@@ -16,17 +20,19 @@
       <view v-if="getColon" class="pi-pd-left-8">:</view>
     </view>
 
-    <!-- 中间区域 -->
+    <!-- 内容区域 -->
     <view
-      class="input-wrap pi-flex-sub pi-align-center"
-      :style="[inputWrapStyle]"
-      :class="[getInputAlign]"
+      class="content-wrap pi-align-center"
+      :class="[{ 'pi-flex-sub': !getWrap }]"
+      :style="[contentWrapStyle]"
     >
-      <slot />
-    </view>
-    <!-- 右侧区域 -->
-    <view v-if="$slots && $slots.right" class="pi-pd-left-24">
-      <slot name="right" />
+      <view class="input-wrap " :class="[{ wrap: getWrap, nowrap: !getWrap }, getInputAlign]">
+        <slot />
+      </view>
+      <!-- 右侧区域 -->
+      <view v-if="$slots && $slots.right" class="pi-pd-left-24">
+        <slot name="right" />
+      </view>
     </view>
   </view>
 </template>
@@ -131,6 +137,16 @@ export default {
         return ['left', 'center', 'right'].includes(value)
       }
     },
+    // 是否以换行样式显示表单
+    wrap: {
+      type: Boolean,
+      default: formItem.wrap
+    },
+    // wrap样式label是否显示边框
+    labelWrapBorder: {
+      type: Boolean,
+      default: formItem.labelWrapBorder
+    },
     // 是否在 label 后面添加冒号
     colon: {
       type: Boolean,
@@ -151,6 +167,14 @@ export default {
     getBorder() {
       return this.inheritProps.border !== null ? this.inheritProps.border : this.border
     },
+    getWrap() {
+      return this.inheritProps.wrap !== null ? this.inheritProps.wrap : this.wrap
+    },
+    getLabelWrapBorder() {
+      return this.inheritProps.labelWrapBorder !== null
+        ? this.inheritProps.labelWrapBorder
+        : this.labelWrapBorder
+    },
     getColon() {
       return this.inheritProps.colon !== null ? this.inheritProps.colon : this.colon
     },
@@ -161,26 +185,37 @@ export default {
       return this.inheritProps.inputAlign !== null ? this.inheritProps.inputAlign : this.inputAlign
     },
     itemStyle() {
-      const style = {
-        padding: this.padding
+      const style = {}
+      if (!this.getWrap) {
+        style.padding = this.padding
       }
       const height = this.height || this.inheritProps.height
-      if (height) {
+      if (!this.getWrap && height) {
         style.height = this.$pi.common.addUnit(height)
       }
       return style
     },
     getLabelStyle() {
       const style = {}
+      if (this.getWrap) {
+        style.padding = this.padding
+      }
       const labelWidth = this.labelWidth || this.inheritProps.labelWidth
       if (labelWidth) {
         style.minWidth = this.$pi.common.addUnit(labelWidth)
       }
+      const height = this.height || this.inheritProps.height
+      if (this.getWrap && height) {
+        style.height = this.$pi.common.addUnit(height)
+      }
       style.textAlign = this.getLabelAlign
       return style
     },
-    inputWrapStyle() {
+    contentWrapStyle() {
       const style = {}
+      if (this.getWrap) {
+        style.padding = this.padding
+      }
       style.justifyContent = alignFlexMap[this.getInputAlign]
       return style
     }
@@ -201,7 +236,6 @@ export default {
 @import '../../scss/border.scss';
 
 .pi-form-item {
-  height: $pi-form-item-height;
   font-size: $pi-form-size;
   &.border {
     @include pi-border;
@@ -213,15 +247,32 @@ export default {
   .form-label {
     font-weight: $pi-form-label-weight;
     color: $pi-form-label-color;
+    &.border {
+      @include pi-border;
+      &::after {
+        border: 0 solid $pi-form-border-color;
+        border-bottom-width: $pi-form-border-width;
+      }
+    }
   }
   .input-wrap {
-    padding-left: 24rpx;
+    width: 100%;
+    &.nowrap {
+      margin-left: 24rpx;
+    }
+    &.wrap {
+      margin-top: 24rpx;
+      margin-bottom: 24rpx;
+    }
   }
   // 解决slot宽度没有占满100%的问题
-  /deep/ .input-wrap {
+  /deep/ .content-wrap {
     & > pi-input {
       width: 100%;
     }
+    .pi-input-wrap {
+      width: 100%;
+    }
     &.left {
       .pi-input-wrap {
         text-align: left;

diff --git a/components/pi-form/index.vue b/components/pi-form/index.vue
@@ -29,6 +29,8 @@ export default {
       'labelAlign',
       'labelStyle',
       'inputAlign',
+      'wrap',
+      'labelWrapBorder',
       'colon',
       'disabled',
       'border'
@@ -111,6 +113,16 @@ export default {
         return [null, 'left', 'center', 'right'].includes(value)
       }
     },
+    // 是否以换行样式显示表单
+    wrap: {
+      type: Boolean,
+      default: form.wrap
+    },
+    // wrap样式label是否显示边框
+    labelWrapBorder: {
+      type: Boolean,
+      default: form.labelWrapBorder
+    },
     // 是否在 label 后面添加冒号
     colon: {
       type: Boolean,

diff --git a/components/pi-input/index.vue b/components/pi-input/index.vue
@@ -1,27 +1,25 @@
 <template>
-  <view class="pi-input-wrap" :style="[customStyle]" :class="[customClass]">
-    <!-- <textarea
+  <view class="pi-input-wrap">
+    <textarea
       v-if="type === 'textarea'"
       class="pi-input-textarea"
-      :style="[getStyle]"
+      :style="[customStyle]"
+      :class="[customClass]"
       :value="val"
+      :password="password"
       :placeholder="placeholder"
       :placeholderStyle="placeholderStyle"
-      :disabled="disabled"
-      :maxlength="inputMaxlength"
-      :fixed="fixed"
+      :disabled="disabled || type === 'select'"
+      :maxlength="maxlength"
       :focus="focus"
-      :autoHeight="autoHeight"
-      :selection-end="uSelectionEnd"
-      :selection-start="uSelectionStart"
-      :cursor-spacing="getCursorSpacing"
+      :confirmType="confirmType"
+      :cursor-spacing="cursorSpacing"
+      :selection-end="selectionEnd"
+      :selection-start="selectionStart"
       :show-confirm-bar="showConfirmbar"
-      @input="handleInput"
-      @blur="handleBlur"
-      @focus="onFocus"
-      @confirm="onConfirm"
-    /> -->
+    />
     <input
+      v-else
       class="pi-input"
       :style="[customStyle]"
       :class="[customClass]"
@@ -103,7 +101,7 @@ export default {
     },
     maxlength: {
       type: [Number, String],
-      default: 140
+      default: -1
     },
     placeholderStyle: {
       type: String,
@@ -142,3 +140,11 @@ export default {
   computed: {}
 }
 </script>
+
+<style lang="scss" scoped>
+.pi-input-wrap {
+  .pi-input-textarea {
+    width: 100%;
+  }
+}
+</style>
diff --git a/config/form.js b/config/form.js
@@ -9,6 +9,8 @@ export default {
   labelAlign: null, // 表单项 label 对齐方式，可选值为 left center right
   labelStyle: {}, // 表单项 label样式
   inputAlign: null, // 表单输入区域 label 对齐方式，可选值为 left center right
+  wrap: null, // 是否以换行样式显示表单
+  labelWrapBorder: null, // wrap样式label是否显示边框
   colon: false, // 是否在 label 后面添加冒号
   disabled: false, // 是否禁用
   border: false // 是否显示边框

diff --git a/config/formItem.js b/config/formItem.js
@@ -3,12 +3,14 @@ export default {
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   required: false, // 是否必填
   requiredStyle: {}, // 必填标志自定义样式，对象形式（默认值：{}）
-  height: null, // 表格高度
+  height: 100, // 表单项高度
   padding: '0 32rpx', // padding
   labelWidth: null, // 表单项 label 宽度，默认单位为rpx
   labelAlign: 'left', // 表单项 label 对齐方式，可选值为 left center right
   labelStyle: {}, // 表单项 label样式
   inputAlign: 'right', // 表单输入区域 label 对齐方式，可选值为 left center right
+  wrap: false, // 是否以换行样式显示表单
+  labelWrapBorder: true, // wrap样式label是否显示边框
   colon: false, // 是否在 label 后面添加冒号
   disabled: false, // 是否禁用
   border: false // 是否显示边框