uniProject/pages/admin/Kecheng/components/search.vue

<template>
	<uni-popup ref="searchPopup" type="top" :animation="false" :is-mask-click="true"
	 mask-background-color="rgba(0, 0, 0, 0.4)">
	   <view class="select-search-row">
		   <view class="select-search-body">
			  <input type="text" class="search-input" v-model="searchInput" placeholder="请输入课程名称" />
			  <view class="search-icon" @click="handleSearch">
			  	<uni-icons type="search" size="24" color="#fff"></uni-icons>
			  </view>	
			</view>
		</view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
const $emit = defineEmits(['search-btn'])
const searchPopup = ref(null); // 索引

const searchInput= ref('');
 
// 打开弹窗
function handleShow() {
	searchPopup.value.open();
}
// 取消
function handleClose() {
	searchInput.value = '';
	searchPopup.value.close();
}
// 确认
function handleSearch(){
	$emit('search-btn',searchInput);
	searchPopup.value.close();
}

defineExpose({
	handleShow,
	handleClose
})
</script>