完工页面select组件

src/components/createCom/XhInput.vue

@@ -42,7 +42,8 @@
 					'border-radius': '12rpx',
 					'color': '#333333',
 					'padding-left': '20rpx',
-					'width': this.width
+					'width': this.width,
+					'font-size':'26rpx'
 				}
 			}
 		},

src/components/createCom/XhSelect.vue

 <!-- *******************  单个下拉选择  *******************  -->
 <template>
-	<view>
-		<u-input :value="text" readOnly @click="show=true" type="select" />
-		<u-action-sheet :list="settings" v-model="show" @click="actionSheetCallback"></u-action-sheet>
+	<view class="xh-select">
+		<u-input :value="text" readOnly @click="show=true" :placeholder="placeholder" :placeholder-style="placeholderStyle"
+		:custom-style="customStyle" :clearable="false"></u-input>
+		<u-action-sheet :list="settings" v-model="show" @click="actionSheetCallback" safe-area-inset-bottom></u-action-sheet>
+		<u-icon class="input-icon" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
+		
 	</view>
 </template>
 
@@ -12,7 +15,16 @@
 		name: 'XhSelect',
 		components: {},
 		mixins: [stringMixin],
-		props: {},
+		props: {
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			width: { // 例如：454rpx
+				type: String,
+				default: '100%'
+			}
+		},
 		data() {
 			return {
 				show: false
@@ -32,7 +44,9 @@
 				result = settings.map(item => {
 					return {
 						text: item.label,
-						id: item.key
+						id: item.key,
+						color: '#333333',
+						fontSize: 26
 					}
 				})
 				return result
@@ -40,6 +54,20 @@
 			text(){
 				let option = this.item.fieldsOptions.find(a=>{return a.key === this.dataValue}) 
 				return option?option.label:''
+			},
+			placeholderStyle() {
+				return 'color:#999999;font-size:26rpx'
+			},
+			customStyle() {
+				return {
+					'background-color': '#F4F5F7',
+					'border-radius': '12rpx',
+					'color': '#333333',
+					'padding-left': '20rpx',
+					'padding-right': '60rpx',
+					'width': this.width,
+					'font-size':'26rpx'
+				}
 			}
 		},
 		watch: {},
@@ -54,5 +82,15 @@
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.xh-select {
+		position: relative;
+		.input-icon {
+			position: absolute;
+			right: 20rpx;
+			top: 20rpx;
+			color: #2272FF;
+		}
+	}
+
 </style>