Monk组件动态创建-动态搜索框实现

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .project
 unpackage/
-.DS_Store.
+.DS_Store.
+/config/dev.js

manifest.json

@@ -51,7 +51,7 @@
     /* 小程序特有相关 */
     "mp-weixin" : {
         "libVersion" : "latest",
-        "appid" : "wx3914d4d7441fb438",
+        "appid" : "wx58ed81cb59afda38",
         "setting" : {
             "urlCheck" : false
         },
@@ -73,5 +73,5 @@
         "enable" : false
     },
     "vueVersion" : "2",
-    "sassImplementationName": "node-sass"
+    "sassImplementationName" : "node-sass"
 }

pages/Monk/Monk.vue

@@ -7,8 +7,15 @@
 			<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
 			<view class='searchBox'>
 				<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
-				<text class="search-text">张姗姗</text>
-				<view class="search-btn">搜索</view>
+				<input
+					class="search-input"
+					v-model="searchName"
+					placeholder="请输入高僧姓名"
+					placeholder-class="search-placeholder"
+					@confirm="onSearch"
+					confirm-type="search"
+				/>
+				<view class="search-btn" @click="onSearch">搜索</view>
 			</view>
 			<view class="monk-list">
 				<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
@@ -44,7 +51,8 @@
 				},
 				CommonEnum,
 				MonkEnum,
-				monkList: []
+				monkList: [],
+				searchName: ''
 			}
 		},
 		onLoad() {
@@ -53,7 +61,7 @@
 		methods: {
 			async fetchMonkList() {
 				try {
-					const res = await getMonkList()
+					const res = await getMonkList({ name: this.searchName })
 					if (res.code === 200 && Array.isArray(res.rows)) {
 						this.monkList = res.rows
 					} else {
@@ -69,6 +77,9 @@
 					})
 				}
 			},
+			onSearch() {
+				this.fetchMonkList()
+			},
 			// 去除 HTML 标签，返回纯文本
 			stripHtmlTags(html) {
 				if (!html) return ''; // 处理空值
@@ -129,13 +140,22 @@
 	.search-icon {
 		width: 32rpx;
 		height: 32rpx;
-		margin: 0 16rpx 0 0;
+		margin: 0 28rpx;
 	}
 
-	.search-text {
+	.search-input {
 		flex: 1;
 		font-size: 28rpx;
+		color: #333;
+		background: transparent;
+		border: none;
+		outline: none;
+		height: 100%;
+	}
+
+	.search-placeholder {
 		color: #bfa16b;
+		font-size: 28rpx;
 	}
 
 	.search-btn {