fix/input

修复自定义事件层级
新增hideLabel属性，可隐藏左侧label
小程序中新增input隐藏label示例

Author: zhc525349965

dist/input/index.js

@@ -16,6 +16,11 @@ Component({
       type: String,
       value: ''
     },
+    // 是否隐藏label
+    hideLabel:{
+      type: Boolean,
+      value: false
+    },
     // 是否自定义label部分
     labelCustom: {
       type: Boolean,
@@ -119,18 +124,18 @@ Component({
         value
       });
 
-      this.triggerEvent('linchange', event);
+      this.triggerEvent('linchange', event.detail);
     },
 
     handleInputFocus(event) {
-      this.triggerEvent('linfocus', event);
+      this.triggerEvent('linfocus', event.detail);
     },
 
     handleInputBlur(event) {
       this.validatorData({
         value: event.detail.value
       });
-      this.triggerEvent('linblur', event);
+      this.triggerEvent('linblur', event.detail);
     },
     handleInputConfirm(event) {
       const {
@@ -144,13 +149,13 @@ Component({
         value
       });
 
-      this.triggerEvent('linconfirm', event);
+      this.triggerEvent('linconfirm', event.detail);
     },
     onClearTap(event) {
       this.setData({
         value: ''
       })
-      this.triggerEvent('linclear', event);
+      this.triggerEvent('linclear', event.detail);
     },
   }
 })

dist/input/index.wxml

@@ -4,16 +4,16 @@
   style="width:{{width}}rpx">
   <view class='mask' wx:if="{{disabled}}"></view>
   <view class='row' hidden="{{ showRow ? '' : 'hidden' }}" style="width:{{width}}rpx;"></view>
-  <view wx:if="{{label && !labelCustom}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:if="{{label && !labelCustom}}" hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <text><text class='text-require' wx:if="{{required}}">* </text>{{label}}<text wx:if="{{colon}}">：</text>
     </text>
   </view>
-  <view wx:else class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:else hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <slot name="left" />
   </view>
   <!-- 小程序表单组件 -->
   <input
-    class="input"
+    class="input {{hideLabel?'hideLabel':''}}"
     value="{{ value }}"
     type="{{type}}"
     password="{{type==='password'}}"

dist/input/index.wxss

@@ -1 +1 @@
-.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
+.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}.hideLabel{padding-left:25rpx}

examples/dist/input/index.js

@@ -16,6 +16,11 @@ Component({
       type: String,
       value: ''
     },
+    // 是否隐藏label
+    hideLabel:{
+      type: Boolean,
+      value: false
+    },
     // 是否自定义label部分
     labelCustom: {
       type: Boolean,
@@ -119,18 +124,18 @@ Component({
         value
       });
 
-      this.triggerEvent('linchange', event);
+      this.triggerEvent('linchange', event.detail);
     },
 
     handleInputFocus(event) {
-      this.triggerEvent('linfocus', event);
+      this.triggerEvent('linfocus', event.detail);
     },
 
     handleInputBlur(event) {
       this.validatorData({
         value: event.detail.value
       });
-      this.triggerEvent('linblur', event);
+      this.triggerEvent('linblur', event.detail);
     },
     handleInputConfirm(event) {
       const {
@@ -144,13 +149,13 @@ Component({
         value
       });
 
-      this.triggerEvent('linconfirm', event);
+      this.triggerEvent('linconfirm', event.detail);
     },
     onClearTap(event) {
       this.setData({
         value: ''
       })
-      this.triggerEvent('linclear', event);
+      this.triggerEvent('linclear', event.detail);
     },
   }
 })

examples/dist/input/index.wxml

@@ -4,16 +4,16 @@
   style="width:{{width}}rpx">
   <view class='mask' wx:if="{{disabled}}"></view>
   <view class='row' hidden="{{ showRow ? '' : 'hidden' }}" style="width:{{width}}rpx;"></view>
-  <view wx:if="{{label && !labelCustom}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:if="{{label && !labelCustom}}" hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <text><text class='text-require' wx:if="{{required}}">* </text>{{label}}<text wx:if="{{colon}}">：</text>
     </text>
   </view>
-  <view wx:else class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:else hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <slot name="left" />
   </view>
   <!-- 小程序表单组件 -->
   <input
-    class="input"
+    class="input {{hideLabel?'hideLabel':''}}"
     value="{{ value }}"
     type="{{type}}"
     password="{{type==='password'}}"

examples/dist/input/index.wxss

@@ -1 +1 @@
-.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
+.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}.hideLabel{padding-left:25rpx}

examples/pages/components/form/pages/input/index.wxml

@@ -95,6 +95,24 @@
       </view>
     </content-card>
 
+    <content-card
+      class="content"
+      name="隐藏左侧label"
+    >
+      <view class='buttun-wrapper'>
+        <l-input
+          label="标题" 
+          placeholder="这里没有隐藏标题"     
+          label-width="170"/>
+        <l-input
+          label="清除按钮" 
+          clear="{{true}}"
+          label-width="170"
+          hideLabel="{{true}}"
+          placeholder="这里隐藏了标题" />
+      </view>
+    </content-card>
+
     <content-card
       class="content"
       name="经典案例"

src/input/index.js

@@ -16,6 +16,11 @@ Component({
       type: String,
       value: ''
     },
+    // 是否隐藏label
+    hideLabel:{
+      type: Boolean,
+      value: false
+    },
     // 是否自定义label部分
     labelCustom: {
       type: Boolean,
@@ -119,18 +124,18 @@ Component({
         value
       });
 
-      this.triggerEvent('linchange', event);
+      this.triggerEvent('linchange', event.detail);
     },
 
     handleInputFocus(event) {
-      this.triggerEvent('linfocus', event);
+      this.triggerEvent('linfocus', event.detail);
     },
 
     handleInputBlur(event) {
       this.validatorData({
         value: event.detail.value
       });
-      this.triggerEvent('linblur', event);
+      this.triggerEvent('linblur', event.detail);
     },
     handleInputConfirm(event) {
       const {
@@ -144,13 +149,13 @@ Component({
         value
       });
 
-      this.triggerEvent('linconfirm', event);
+      this.triggerEvent('linconfirm', event.detail);
     },
     onClearTap(event) {
       this.setData({
         value: ''
       })
-      this.triggerEvent('linclear', event);
+      this.triggerEvent('linclear', event.detail);
     },
   }
 })

src/input/index.less

@@ -1,6 +1,5 @@
 /* input/input.wxss */
 
-
 .form-item{
   position: relative;
   font-size: 28rpx;
@@ -51,10 +50,10 @@
 }
 
 /* labelLayout */
-.form-item-top{
+// .form-item-top{
   // display: flex;
   // flex-direction: column;
-}
+// }
 
 // .form-item-left{
 //   display: flex;
@@ -77,7 +76,6 @@
   justify-content: flex-start
 }
 
-
 .input{
   height: 100%;
   line-height: 100%;
@@ -96,7 +94,10 @@
   margin-right: 20rpx;
 }
 
-
 .pls-class{
   color: #9a9a9a
+}
+
+.hideLabel{
+  padding-left: 25rpx;
 }

src/input/index.wxml

@@ -4,16 +4,16 @@
   style="width:{{width}}rpx">
   <view class='mask' wx:if="{{disabled}}"></view>
   <view class='row' hidden="{{ showRow ? '' : 'hidden' }}" style="width:{{width}}rpx;"></view>
-  <view wx:if="{{label && !labelCustom}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:if="{{label && !labelCustom}}" hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <text><text class='text-require' wx:if="{{required}}">* </text>{{label}}<text wx:if="{{colon}}">：</text>
     </text>
   </view>
-  <view wx:else class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
+  <view wx:else hidden="{{hideLabel}}" class='form-label l-label-class form-label-{{labelLayout}}' style='{{labelLayout !== "top" ? "width:"+ labelWidth+ "rpx;" : "" }} height:{{labelLayout== "top" ? labelWidth + "rpx" : "" }}'>
     <slot name="left" />
   </view>
   <!-- 小程序表单组件 -->
   <input
-    class="input"
+    class="input {{hideLabel?'hideLabel':''}}"
     value="{{ value }}"
     type="{{type}}"
     password="{{type==='password'}}"