fix: demo style in hello uniapp

dcloudio · Nov 19, 2021 · 1b90fc0 · 1b90fc0
1 parent 0e3da93
commit 1b90fc0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 27 deletions.
diff --git a/pages/vue/data-checkbox/data-checkbox.vue b/pages/vue/data-checkbox/data-checkbox.vue
@@ -213,5 +213,12 @@
 		font-size: 12px;
 		color: #666;
 		margin-top: 5px;
+	}
+	.uni-px-5 {
+	    padding-left: 10px;
+	    padding-right: 10px;
+	}
+	.uni-pb-5 {
+	    padding-bottom: 10px;
 	}
 </style>
diff --git a/pages/vue/easyinput/easyinput.vue b/pages/vue/easyinput/easyinput.vue
@@ -1,66 +1,48 @@
 <template>
 	<view>
-
 		<uni-card :is-shadow="false" is-full>
 			<text class="uni-h6">easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input
 				所有功能</text>
 		</uni-card>
-		<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line">
-			<view class="uni-mx-5 uni-pb-5">
+		<uni-section title="默认" subTitle="使用 focus 属性自动获取输入框焦点" type="line" padding>
 				<uni-easyinput errorMessage v-model="value" focus placeholder="请输入内容" @input="input"></uni-easyinput>
-			</view>
-
 		</uni-section>
 
-		<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="去除空格" subTitle="使用 trim 属性 ,可以控制返回内容的空格 " type="line" padding>
 				<text class="uni-subtitle">输入内容：{{ '"'+value+'"' }}</text>
 				<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
-			</view>
 		</uni-section>
 
 
-		<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="自定义样式" subTitle="使用 styles 属性 ,可以自定义输入框样式" type="line" padding>
 				<uni-easyinput v-model="value" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"
 					@input="input"></uni-easyinput>
-			</view>
 		</uni-section>
 
-		<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="图标" subTitle="使用 prefixIcon / suffixIcon 属性 ,可以自定义输入框左右侧图标" type="line" padding>
 				<uni-easyinput prefixIcon="search" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
 				</uni-easyinput>
 				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="右侧图标"
 					@iconClick="iconClick">
 				</uni-easyinput>
-			</view>
 		</uni-section>
 
 
-		<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="禁用" subTitle="使用 disabled 属性禁用输入框" type="line" padding>
 				<uni-easyinput disabled value="已禁用" placeholder="请输入内容"></uni-easyinput>
-			</view>
 		</uni-section>
 
-		<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="密码框" subTitle="指定属性 type=password 使用密码框,右侧会显示眼睛图标" type="line" padding>
 				<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
-			</view>
 		</uni-section>
 
-		<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
 				<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
-			</view>
 		</uni-section>
 
 
-		<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line">
-			<view class="uni-px-5 uni-pb-5">
+		<uni-section title="多行文本自动高度" subTitle="使用属性 autoHeight 使多行文本框自动增高" type="line" padding>
 				<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
-			</view>
 		</uni-section>
 
 
@@ -98,5 +80,7 @@
 </script>
 
 <style lang="scss">
-
+.uni-mt-5 {
+	margin-top: 5px;
+}
 </style>