框架学习之VUE（八）搜索框组件。这一节写一下搜索组件的内容，尽量详细写出搭建的过程

本文链接：https://blog.youkuaiyun.com/weixin_43815680/article/details/108984522

本文档介绍了如何在Vue中创建一个搜索框组件，包括为何需要将其封装为组件、如何实现图标动态化、处理额外样式、转换为表单形式以及响应回车键搜索的功能。同时，讨论了文本框placeholder的处理和创建ChannelSearch.vue组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 搜索框组件

1-1
第一个问题点击展开的时候为啥不设置 height : auto ？
我直接展示不就好了吗？
有一个问题 0.3s 过渡动画会失效为什么？
因为如果最终的变化结果是 auto 浏览器渲染的时候不会进行过渡渲染完成后才想起需要过渡但是已经过去了

1-2
字体小图标我们怎么封装为一个组件 ？
为什么需要封装成一个组件？
1）添加新的小图标的时候不管是使用在线的还是本地的 都会多次更新内容
2）小图标的名称大多数是作者起名并不规范 对于后期维护存在问题

1、
新建一个Icon.vue组件

<template>
  <!-- 为啥名字是iconfont ? 因为使用的是阿里矢量 -->
  <!-- 默认名字就是这个 -->
  <i class="iconfont" :class="iconClass"></i>
</template>

<script>
// 写一个映射关系 里面可以写很多的内容
var map = {
   
  arrowUp: "icon-shangjiantou",
  arrowDown: "icon-iconfontarrows",
  search: "icon-sousuo",
};
export default {
   
  // 属性
  props: {
   
    type: {
   
      type: String,
      required: true,
    },
  },
  computed: {
   
    iconClass() {
   
      return map[this.type];
    },
  },
};
</script>

<style scoped>
@import "//at.alicdn.com/t/font_2118630_75xw63t1yj2.css";
</style>