vue3 搜索框组件封装与功能实现

搜索框组件

核心代码

<script setup lang="ts">
import {  ref, watch } from 'vue'

let keyWords = ref('')

let emitFn = defineEmits(['handler'])


// 监听数据变化 传值给父组件
watch(keyWords, () => {
  emitFn('handler', keyWords)
  }
)


const fn = () => {
  // 第一个参数是 自定义事件名称  第二个参数是 传过去的值
  emitFn('handler', keyWords)
}

<template>
<input type="text"  placeholder="平面设计" v-model="keyWords">
</template>

完整代码

<script setup lang="ts">
import {  ref, watch } from 'vue'

const props = defineProps({

  width: {
    type: String,
    default: '400px'
  },
  height: {
    type: String,
    default: '40px'
  },

  backgroundColor: {
    type: String,
    default: '#EBEBEB'
  }
})


let keyWords = ref('')

let emitFn = defineEmits(['handler'])


// 监听数据变化 传值给父组件
watch(keyWords, () => {
  emitFn('handler', keyWords)
  }
)


const fn = () => {
  // 第一个参数是 自定义事件名称  第二个参数是 传过去的值
  emitFn('handler', keyWords)
}


let height = props.height
let width = props.width
let background = props.backgroundColor

</script>

<template>

  <div class="search">
    <input type="text" class="search__input" placeholder="平面设计" v-model="keyWords">
    <div class="search__icon">
      <el-icon>
        <Search />
      </el-icon>
    </div>
  </div>

</template>
    
<style scoped lang="scss">
/*  SEARCH  */
.search {
  // grid-column: 3/4;
  // grid-row: 2/3;
  position: relative;
  display: flex;
  align-items: center;
}

.search__input {
  width: v-bind(width);
  height: v-bind(height);
  border: none;
  border-radius: 10px;
  font-size: 20px;
  padding-left: 3.8rem;
  box-shadow: inset 3px 3px 4px #c8d0e7, inset -3px -3px 4px #fff;
  background: none;
  font-family: inherit;
  color: #9baacf;
}



.search__input::placeholder {
  color: #bec8e4;
}

.search__input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
}

.search__input:focus+.search__icon {
  color: $blue-color;
}

.search__icon {
  height: 2rem;
  position: absolute;
  font-size: 2rem;
  padding: 0 1rem;
  display: flex;
  color: #9baacf;
  transition: 0.3s ease;
}
</style>

父组件调用

核心代码

<script setup lang="ts">
import {  ref, watch } from 'vue'

const changefn = (e: any) => {
    courseList.value = courseList.value.filter(item => item.title.indexOf(e.value) !== -1)
}

<template>
       <SearchBar @handler="changefn"></SearchBar>
</template>

完整代码

<script setup lang="ts">


import { useRouter } from "vue-router";
import { reactive, ref, watch, computed } from 'vue'

const router = useRouter();


const courseList = ref([
    {
        id: 1,
        title: 'c语言程序设计',
        tag: '软件学院',
        img: '/courselist/c语言程序设计.webp',
        rate: 3.5,
        teacher: '罗永胜',
        people: 99,
        content: '本课程将用最典型的实例和通俗的讲解为你讲授程序设计的思想'

    },
    {
        id: 2,
        title: 'java核心技术概论',
        tag: '软件学院',
        img: '/courselist/java核心技术概论.webp',
        rate: 4,
        teacher: '江导',
        people: 100,
        content: 'java是一门程序设计语言，长期位居编程语言排行榜TIOBE的首位'

    }, {
        id: 3,
        title: 'python金融分析',
        tag: '软件学院',
        img: '/courselist/python金融分析.webp',
        rate: 4,
        teacher: '张凯',
        people: 120,
        content: '简洁却强大、简单却专业，它是当今世界最受欢迎的编程语言!'

    },
    {
        id: 4,
        title: '高等数学',
        tag: '人文学院',
        img: '/courselist/高等数学.webp',
        rate: 4,
        teacher: '岑苑君 康永强',
        people: 70,
        content: '高等数学是各高校本科生必修的一门重要基础课'

    }, {
        id: 5,
        title: '交际英语',
        tag: '人文学院',
        img: '/courselist/交际英语.webp',
        rate: 4,
        teacher: '吴晓燕',
        people: 100,
        content: '以职业需求为导向，着重培养你的实际英语运用能力！'

    },
    {
        id: 6,
        title: 'web前端开发技术',
        tag: '软件学院',
        img: '/courselist/web前端开发技术.webp',
        rate: 4,
        teacher: '罗永胜 何小民',
        people: 50,
        content: 'web前端开发是创建网页或APP界面呈现给用户的过程'

    }
])


const changefn = (e: any) => {
    courseList.value = courseList.value.filter(item => item.title.indexOf(e.value) !== -1)
}

</script>
    
<template>
    <div class="container">
        <div class="search">
            <SearchBar @handler="changefn"></SearchBar>
        </div>
        <div class="courseList">
            <div class="item" v-for="item in courseList" :key="item.id">
                <div class="item_header">
                    <img :src="item.img" alt="">
                    <div id="tag">{{ item.tag }}</div>
                </div>
                <div class="item_body">
                    <div class="title">{{ item.title }}</div>
                    <div class="teacher">{{ item.teacher }}</div>
                    <div style="font-size: 10px;">{{ item.people }}人已经参与</div>
                    <div class="content">{{ item.content }}</div>
                    <div class="btn">
                        <div class="box">
                            <div class="rate">
                                <el-rate v-model="item.rate" disabled show-score text-color="#ff9900"
                                    score-template="{value} 分" />
                            </div>
                        </div>
                        <router-link class="btn" :to="{ path: '/details/' + item.id, query: item }">加入课程</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<style scoped lang="scss">

</style>