首页 > 其他分享 >jeecgboot-vue3,内嵌搜索引擎,输入框含有提示符

jeecgboot-vue3,内嵌搜索引擎,输入框含有提示符

时间:2024-08-23 17:51:36浏览次数:8  
标签:效果图 jeecgboot label 输入框 item vue3

1.效果图

2.代码实现

<template>
  <a-card style="margin: 15px;">
      <div>
          <br />
          <div class="position-top-right">
              <a-switch v-model:checked="openNetwork" size="small" style="margin-right: 15px;" @change="onSwitchChange" />
              <span @click="showSelect = !showSelect">设置引擎 </span>
              <a-select 
                  v-model:value="selectedValue"
                  class="custom-select" 
                  allowClear
                  v-show="showSelect"
                  @change="handleSelectChange"
                  >
                  <template v-for="item in browserList" :key="`${item.value}`">
                      <a-select-option :value="item.value">{
  { item.label }}</a-select-option>
                  </template>
              </a-select>
          </div>
          <div class="input-container">
            <a-input 
                placeholder="请输入搜索词" 
                v-model:value="inputVal" 
                style="width: 40%;" 
                @keyup="debounceOnKeyup"
                maxlength="50"
                allowClear />
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="search()" >搜索</a-button>
          </div>
          <div class="input-container">
            <ul id="list" v-show="showList">
                &l

标签:效果图,jeecgboot,label,输入框,item,vue3
From: https://blog.csdn.net/blns_yxl/article/details/141471420

相关文章

  • Vue3的学习---7
    7.动画与过渡动画与过渡的区别:过渡:主要用于简单的属性变化,从一个状态平滑过渡到另一个状态。动画:可以定义复杂的关键帧序列,实现更为复杂和多变的动画效果。7.1动画7.1.1回顾CSS动画<head><metacharset="UTF-8"><metaname="viewport"content="width=device......
  • 一文带你读懂vue3中directive指令的那些事
    概述vue3中内置了很多丰富实用的指令,如v-show、v-if/v-else或v-model等,但是实际开发中可能我们还需要某些统一的处理,比如交互按钮的防抖,输入框的自动focus等,这时我们就可以通过vue3的directive注册自定义指令。指令指令钩子vue3的自定义指令通常情况下是由一个包含类似......
  • vue3实现拖拽效果 (vuedraggable)
    效果图使用vuedraggable实现拖拽真的是特别丝滑和简单!!下载这里是vue3版本的对应vuedraggable版本4.1.0不要下错了!!!npminstallvuedraggable@4pnpmaddvuedraggable@4官网https://github.com/SortableJS/Vue.Draggable中文网https://www.itxst.com/vue-dragg......
  • 048、Vue3+TypeScript基础,页面通讯之子页面调用父页面的事件
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'constapp=createApp(App);//App.vue的根元素id为appapp.mount('#app')02、App.vue代码如下:<template><......
  • 047、Vue3+TypeScript基础,pinia库store的组合式写法
    01、main.js代码如下:<template><divclass="app"><h2class="title">App.Vue</h2><!--<Page1/>--><br><Page2/></div></template><scriptlang="ts......
  • 045、Vue3+TypeScript基础,pinia库中使用$subscribe订阅数据变动
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • uni-app Vue3项目引入Tailwind CSS
    前情TailwindCSS是一个原子类CSS框架,它将基础的CSS全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名,然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、......
  • vue2和vue3生命周期钩子函数对比图
    vue2->vue3触发条件beforeCreate->使用setup()创建时运行created->使用setup()创建时运行beforeMount->onBeforeMount挂载DOM运行mounted->onMounted挂载DOM运行beforeUpdate->onBeforeUpdate响应数据修改时运行......
  • 详细讲述 Vue3 的 <script setup>
    <scriptsetup>是Vue3引入的一种新的 <script> 标记的用法,其本质是一个语法糖。它极大简化了单文件组件(SFC)的开发体验,目的是让代码更简洁、易读,同时减少模板和逻辑之间的重复。1.基本用法<!--使用<scriptsetup>--><template><div><p>message:{{message......
  • 044、Vue3+TypeScript基础,pinia库中getters的用法
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......