封装组件之使用vue3封装input框并显示联想数据功能

news2024/11/14 15:04:39

新建Input.vue

定义input框及相关事件

 <input
      type="text"
      v-model="query"
      @input="onInput"
      @blur="hideSuggestions"
      @focus="onInput"
 />

@input输入事件、@blur失去焦点、@focus获取焦点

//当输入内容时才显示ul内容
const onInput = () => {
  showSuggestions.value = query.value.trim() !== '';
};
const hideSuggestions = () => {
  setTimeout(() => {
    showSuggestions.value = false;
  }, 200); // 延迟隐藏以允许选择建议
};

 

定义组件属性

const props = defineProps<{
  suggestions: string[];
}>();

ul标签是否显示

const showSuggestions = ref(false);
 <ul
      v-if="showSuggestions && filteredSuggestions.length"
      class="suggestions"
    >
      <li
        v-for="(suggestion, index) in filteredSuggestions"
        :key="index"
        @mousedown="selectSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
    </ul>

进行筛选

const filteredSuggestions = computed(() => {
  if (query.value.trim() === '') {
    return [];
  }
  return props.suggestions.filter((suggestion) =>
    suggestion.toLowerCase().includes(query.value.toLowerCase())
  );
});

选中内容

//选中内容
const selectSuggestion = (suggestion: string) => {
  query.value = suggestion;
  showSuggestions.value = false;
};

其他组件使用

引入

import AutoInput from './components/Input.vue';

使用

const suggestionsList = [
  'apple',
  'banana',
  'orange',
  'grape',
  'pineapple',
  'mango',
  'strawberry',
];
 <div>
    <AutoInput :suggestions="suggestionsList"></AutoInput>
  </div>

效果

完整代码

Input.vue

<template>
  <div class="autocomplete">
    <input
      type="text"
      v-model="query"
      @input="onInput"
      @blur="hideSuggestions"
      @focus="onInput"
    />
    <ul
      v-if="showSuggestions && filteredSuggestions.length"
      class="suggestions"
    >
      <li
        v-for="(suggestion, index) in filteredSuggestions"
        :key="index"
        @mousedown="selectSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

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

const props = defineProps<{
  suggestions: string[];
}>();

const query = ref('');
const showSuggestions = ref(false);

const filteredSuggestions = computed(() => {
  if (query.value.trim() === '') {
    return [];
  }
  return props.suggestions.filter((suggestion) =>
    suggestion.toLowerCase().includes(query.value.toLowerCase())
  );
});

//当输入内容时才显示ul内容
const onInput = () => {
  showSuggestions.value = query.value.trim() !== '';
};

const hideSuggestions = () => {
  setTimeout(() => {
    showSuggestions.value = false;
  }, 200); // 延迟隐藏以允许选择建议
};

//选中内容
const selectSuggestion = (suggestion: string) => {
  query.value = suggestion;
  showSuggestions.value = false;
};
</script>

<style scoped>
.autocomplete {
  position: relative;
  display: inline-block;
  width: 100%;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
//设置垂直滚动条
.suggestions {
  position: absolute;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  max-height: 150px;
  overflow-y: auto;
}
.suggestions li {
  padding: 8px;
  cursor: pointer;
}
//鼠标悬停改变背景颜色
.suggestions li:hover {
  background-color: #f0f0f0;
}
li {
  list-style-type: none;
}
</style>

 其他组件

<script setup lang="ts">
import AutoInput from './components/Input.vue';
const suggestionsList = [
  'apple',
  'banana',
  'orange',
  'grape',
  'pineapple',
  'mango',
  'strawberry',
];
</script>

<template>
  <div>
    <AutoInput :suggestions="suggestionsList"></AutoInput>
  </div>
</template>

<style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1983837.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

优化if-else的11种方案

优雅永不过时&#xff01; 1. 使用早返回&#xff08;Early Return&#xff09;&#xff1a;尽可能早地返回&#xff0c;避免嵌套的if-else。 优化前&#xff1a; public class NoEarlyReturnExample {public boolean hasPositiveNumber(int[] numbers) {boolean foundPositi…

自然语言常见面试题及答案(21~40)

Reply&#xff1a;面试题 获取资料下载 文章目录 21. 介绍一下信息抽取在自然语言处理中的重要性和实现方式。22. 谈谈你对预训练语言模型&#xff08;如 BERT、GPT 等&#xff09;的认识和应用经验。23. 简述一下情感分析的流程和方法。24. 对于机器翻译任务&#xff0c;你了…

自旋锁(Spinlock):轻量级锁机制

自旋锁&#xff08;Spinlock&#xff09;&#xff1a;轻量级锁机制 1、什么是自旋锁&#xff1f;2、优势3、局限4、实现与应用 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java并发编程中&#xff0c;自旋锁以其独特的非阻塞特性脱颖而…

WordPress原创插件:Category-id-list分类ID显示查看

WordPress原创插件&#xff1a;Category-id-list分类ID显示查看 插件设置位置在工具栏

STL | string C++底层实现

目录 前言 总代码 string结构框架搭建 三个成员 构造 析构 拷贝构造、赋值重载 和 swap size、c_str、operator[ ] string迭代器的简单实现 扩容 reserve insert&#xff08;插入字符和字符串&#xff09; 单字符 字符串 push_back、append、 erase 删除 find查找 …

C++计算字符串中大写、小写、数字、空格、其他字符的个数

#include <iostream> #include <array> using namespace std;int main() {cout << "请输入一个字符串:";string str;getline(cin,str);int daxie0,xiaoxie0,num0,space0,other0;int lenstr.size();for(int i0;i<len;i){if(str[i]>A&&…

Oracle认证1Z0-071线上考试注意事项

目录 一、前言二、回顾过往战绩第一次 裸考&#x1f412;第二次 背题库硬考&#xff01;&#x1f412;第三次 软件卡住&#xff0c;寄&#xff01;&#x1f648;第四次 汇总纠错&#xff0c;通过&#xff01;&#x1f31a; 三、考试流程四、考试注意事项1. 是否需要科学上网2. …

vue(vue2和vue3)项目打包去除console.log

1.Vue2去除 module.exports { configureWebpack: (config) > {// 取消console打印config.optimization.minimizer[0].options.terserOptions.compress.drop_console truereturn {name: "项目名称",resolve: {alias: {"": resolve("src")}}…

【八股文】MySQL

1.char 和 varchar的区别 char是定长的&#xff0c;varchar是可变的字符串char适合存长度差不多的或者较短的&#xff0c;例如手机号&#xff0c;身份证&#xff0c;MD4加密算法。varchar用来存备注信息&#xff0c;用户昵称等不确定长度的信息。 2.Decimal、double和float的区…

Mybatis学习-day18

Mybatis学习-day18 数据持久化是将内存中的数据模型转换为存储模型&#xff0c;以及将存储模型转换为内存中数据模型的统称。例如&#xff0c;文件的存储、数据的读取以及对数据表的增删改查等都是数据持久化操作。 MyBatis 支持定制化 SQL、存储过程以及高级映射&#xff0c…

Java | Leetcode Java题解之第324题摆动排序II

题目&#xff1a; 题解&#xff1a; class Solution {Random random new Random();public void wiggleSort(int[] nums) {int n nums.length;int x (n 1) / 2;int mid x - 1;int target findKthLargest(nums, n - mid);for (int k 0, i 0, j n - 1; k < j; k) {if…

4章3节:缺失值的处理(上)

在医学科研中&#xff0c;由于失访、无应答或记录不清等各种原因&#xff0c;经常会遇到数据缺失的问题。本文将深入探讨医学科研中数据缺失的成因、分类、影响以及应对方法&#xff0c;结合R语言的实际应用&#xff0c;为医学研究人员提供全面的解决方案。 一、认识缺失数据 …

一款开源且免费的系统清理工具,绿色免安装

BleachBit是一款开源且免费的系统清理工具&#xff0c;最初设计用于Linux系统&#xff0c;但现在已经支持Windows。该工具的主要功能包括清理缓存、删除临时文件、清除浏览器历史记录、删除cookies和日志文件等。此外&#xff0c;它还能够安全地擦除文件内容&#xff0c;确保数…

【Java数据结构】---泛型

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 包装类装箱和拆箱泛型泛型…

HarmonyOS应用开发知识地图

HarmonyOS 应用开发旅程 HarmonyOS 应用开发旅程 PS&#xff1a;Xmind原文件可以直接跳转官方具体文档地址&#xff0c;如需要原文件请联系&#xff1a;DYZZ198 01.准备与学习 学习 HarmonyOS 的基本概念和架构,搭建好所需的开发工具和环境,了解开发规范和最佳实践 了解 H…

C语言菜鸟入门·数据结构·链表超详细解析

目录 1. 单链表 1.1 什么是单链表 1.1.1 不带头节点的单链表 1.1.2 带头结点的单链表 1.2 单链表的插入 1.2.1 按位序插入 &#xff08;1&#xff09;带头结点 &#xff08;2&#xff09;不带头结点 1.2.2 指定结点的后插操作 1.2.3 指定结点的前插操作 1.3 …

【HarmonyOS NEXT星河版开发学习】小型测试案例04-个人中心顶部导航

个人主页→VON 收录专栏→鸿蒙开发小型案例总结​​​​​ 基础语法部分会发布于github 和 gitee上面&#xff08;暂未发布&#xff09; 前言 主轴对齐方式在鸿蒙开发中非常重要&#xff0c;通过合理选择 justifyContent 和 alignItems 属性&#xff0c;开发者可以精确控制 Fle…

度言软件介绍

度言软件管理员操作后台 https://www.duyansoft.com企业后台为公司管理员操作后台&#xff0c;共计有七个功能版块 控制台 成员管理——员工管理 成员管理——员工管理&#xff08;添加员工&#xff09; 成员管理——团队管理 公司管理员可以新建/编辑/删除团队&#xff0c…

【Web开发手礼】探索Web开发的秘密(十五)-Vue2(2)AJAX、前后端分离、前端工程化

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装&#xff01;&#xff01;&#xff01; 目录 前言 AJAX ​原生Ajax Axios Axios入门 案例 前后端分离开发 YApi ​前端工程化 环境准备 总结 前言 主要介绍了AJAX、前后端分离所需的YApi、前端工…

26集 ESP32 AIchat启动代码分析-《MCU嵌入式AI开发笔记》

26集 ESP32 AIchat启动代码分析-《MCU嵌入式AI开发笔记》 这集我们分析代码如何组织起来&#xff0c;如何编译 先用sourceinsight把代码加进工程。 新建一个sourceinsight工程&#xff0c;把AI-CHAT代码加进来&#xff0c;之后把ESP IDF代码加进来&#xff0c;之后把ESP-ADF加…