chore: button、input-data.vue

components/input-data/input-data.vue

 <script lang="uts">
-	export default {
-		name: "input-data",
-		props: {
-			title: {
-				type: String,
-				required: true
-			},
-			type: {
-				type: String,
-				required: true
-			},
-			defaultValue: {
-				type: String,
-				required: true,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				inputClearValue: '' as any,
-				showClearIcon: false,
-				inputType: 'text'
-			}
-		},
-		created() {
-			switch (this.type) {
-				case 'number':
-					this.inputType = 'number'
-					break;
-			}
-			this.inputClearValue = this.getValue(this.defaultValue)
-		},
-		methods: {
-			input: function (event : InputEvent) {
-				// @ts-ignore
-				this.inputClearValue = event.detail.value
-				if ((this.inputClearValue as string).length > 0) {
-					this.showClearIcon = true
-				} else {
-					this.showClearIcon = false
-				}
+  export default {
+    name: "input-data",
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      type: {
+        type: String,
+        required: true
+      },
+      defaultValue: {
+        type: String,
+        required: true,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        inputClearValue: '' as any,
+        showClearIcon: false,
+        inputType: 'text'
+      }
+    },
+    created() {
+      switch (this.type) {
+        case 'number':
+          this.inputType = 'number'
+          break;
+      }
+      this.inputClearValue = this.getValue(this.defaultValue)
+    },
+    methods: {
+      input: function (event : InputEvent) {
+        // @ts-ignore
+        this.inputClearValue = event.detail.value
+        if ((this.inputClearValue as string).length > 0) {
+          this.showClearIcon = true
+        } else {
+          this.showClearIcon = false
+        }
 
-				this.$emit('confirm', this.getValue(this.inputClearValue))
-			},
-			clearIcon: function () {
-				this.inputClearValue = ''
-				this.showClearIcon = false
-			},
-			// @ts-ignore
-			confirm(e : InputConfirmEvent) {
-				// this.$emit('confirm', this.getValue(e.detail.value))
-			},
-			blur() {
-				this.showClearIcon = false
-			},
-			focus() {
-				let inputValue = this.inputClearValue
-				if (typeof inputValue !== 'string') {
-					inputValue = inputValue.toString()
-				}
-				if ((inputValue as string).length > 0) {
-					this.showClearIcon = true
-				} else {
-					this.showClearIcon = false
-				}
-			},
-			getValue(value : any) : any {
-				switch (this.type) {
-					case 'number':
-						return parseFloat(value as string)
-				}
+        this.$emit('confirm', this.getValue(this.inputClearValue))
+      },
+      clearIcon: function () {
+        this.inputClearValue = ''
+        this.showClearIcon = false
+        this.$emit('confirm', this.getValue(this.inputClearValue))
+      },
+      // @ts-ignore
+      confirm(e : InputConfirmEvent) {
+        // this.$emit('confirm', this.getValue(e.detail.value))
+      },
+      blur() {
+        this.showClearIcon = false
+      },
+      focus() {
+        let inputValue = this.inputClearValue
+        if (typeof inputValue !== 'string') {
+          inputValue = inputValue.toString()
+        }
+        if ((inputValue as string).length > 0) {
+          this.showClearIcon = true
+        } else {
+          this.showClearIcon = false
+        }
+      },
+      getValue(value : any) : any {
+        switch (this.type) {
+          case 'number':
+            return parseFloat(value as string)
+        }
 
-				return value
-			}
-		}
-	}
+        return value
+      }
+    }
+  }
 </script>
 
 <template>
-	<view class="uni-padding-wrap">
-		<view class="uni-title uni-common-mt">
-			<text class="uni-title-text"> {{title}} </text>
-		</view>
-	</view>
-	<view class="uni-input-wrapper input-wrapper">
-		<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input"
-			@confirm="confirm" @blur="blur" @focus="focus"/>
-		<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
-		</image>
-	</view>
+  <view class="uni-padding-wrap">
+    <view class="uni-title uni-common-mt">
+      <text class="uni-title-text"> {{title}} </text>
+    </view>
+  </view>
+  <view class="uni-input-wrapper input-wrapper">
+    <input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input"
+      @confirm="confirm" @blur="blur" @focus="focus" />
+    <image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
+    </image>
+  </view>
 </template>
 
 
 <style>
-	.input-wrapper {
-		border: 1px solid rgba(0, 0, 0, .08);
-		justify-content: center;
-		padding: 0;
-		margin: 0 20rpx;
-		background-color: #FFF;
-	}
+  .uni-input-wrapper {
+    padding: 8px 13px;
+    margin: 10rpx 0;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    background-color: #ffffff;
+  }
 
-	.input-wrapper_image {
-		width: 22px;
-		height: 22px;
-		align-self: center;
-		margin-right: 10rpx;
-	}
+  .input-wrapper {
+    border: 1px solid rgba(0, 0, 0, .08);
+    flex-direction: row;
+    justify-content: center;
+    padding: 0;
+    margin: 0 20rpx;
+  }
+
+  .input-wrapper_image {
+    width: 22px;
+    height: 22px;
+    align-self: center;
+    margin-right: 10rpx;
+  }
 </style>

pages/component/button/button.uvue

@@ -37,18 +37,18 @@
 </script>
 
 <template>
+  <view class="main">
+    <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
+      :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
+      @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
+      @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
+      :style="default_style ? style : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
+      {{ text }}
+    </button>
+  </view>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
     <!-- #endif -->
-    <view class="main">
-      <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
-        :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
-        @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
-        @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
-        :style="default_style ? style : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
-        {{ text }}
-      </button>
-    </view>
     <view class="content">
       <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
       <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>