合肥做百度网站,网站建站 上海,网站建设空间是指什么,广告设计与制作的公司需求分析 展示切换动画搜索框输入文字#xff0c;自动发送请求搜索结果展示搜索状态维护历史搜索展示#xff0c;点击历史搜索后发送请求历史搜索更多切换动画效果 script setup langts
import OpSearch from /components/OpSearch.vue
import { ref } f…需求分析 展示切换动画搜索框输入文字自动发送请求搜索结果展示搜索状态维护历史搜索展示点击历史搜索后发送请求历史搜索更多切换动画效果 script setup langts
import OpSearch from /components/OpSearch.vue
import { ref } from vue
import { fetchSearchData } from /api/search
import type { ISearchResult } from /types
import { useToggle } from /use/useToggle
import { computed } from vue
import { watch } from vue
// 声明事件接口接口中属性值是一个函数函数名是cancel返回值是一个函数void
interface IEmits {(e: cancel): void
}const searchValue ref()
const searchResult ref([] as ISearchResult[])// 定义一个事件变量用defineEmits方法实现方法中引入声明的事件接口
const emits defineEmitsIEmits()const HISTORY_TAGS [披萨,标签2,标签3,标签4,标签5,标签6,标签7,
]
const [isHistoryTagShown, toggleHistoryTag] useToggle(false)
const historyTags computed(() (isHistoryTagShown.value ? HISTORY_TAGS : HISTORY_TAGS.slice(0, 5)))// 有三种状态搜索初始化、搜索完成、搜索中
const [INIT, DONE, DOING] [-1, 0, 1]
const searchState ref(INIT)const onSearch async (v?: string | number) {console.log(onSearch, v)// 防止搜索状态错误try {searchState.value DOINGconst { list } await fetchSearchData(v as string)searchResult.value list} finally {searchState.value DONE}
}
const onTagClick (v:string) {searchValue.value vonSearch(v)
}watch(searchValue, (new_v) {if(!new_v) {searchResult.value []return}onSearch(new_v)
})
/scripttemplate!-- 调用事件变量传入事件名cancel // 模板代码中引入定义的事件用来在父组件中使用对应的事件 --div classsearch-viewOpSearchshow-actionv-modelsearchValueshaperoundplaceholder请输入搜索关键词searchonSearchcancelemits(cancel)/div v-if!searchValue classsearch-view__historydiv classlabel历史搜索/divTransitionGroup namelistdiv classhistory-tag v-forv in historyTags :keyv clickonTagClick(v){{ v }}/divdiv classhistory-tag keyarrow clicktoggleHistoryTagVanIcon v-ifisHistoryTagShown namearrow-up/VanIconVanIcon v-else namearrow-down/VanIcon/div/TransitionGroup/divdiv v-else classsearch-view__resultdiv classsearching v-ifsearchState DOING~正在搜索/divtemplate v-ifsearchState DONEdiv classresult-item v-forv in searchResult :keyv.labelVanIcon namesearch/VanIcondiv classname{{ v.label }}/divdiv classcount约{{ v.resultCount }}个结果/div/div!-- 搜索结果状态维护 --div classno-result v-if!searchResult.length~暂无推荐/div/template/div/div
/templatestyle langscss
.search-view {position: absolute;top: 0;bottom: 0;right: 0;left: 0;background-color: white;z-index: 999;__history {padding: var(--van-padding-sm);.label {margin-bottom: var(--van-padding-xs);}.history-tag {display: inline-block;font-size: 12px;border-radius: 10px;color: var(--van-gray-6);background: var(--van-gray-1);padding: 4px 8px;margin-right: 10px;margin-bottom: var(--van-padding-xs);}}__result {.result-item {display: flex;align-items: center;font-size: 12px;padding: 10px;border-radius: 1px solid var(--van-gray-1);.name {// 撑满满足padding的一行flex: 1;padding-left: 6px;}.count {font-size: 12px;color: var(--van-gray-6);}}.no-result, .searching {font-size: 12px;padding: 100px 0;text-align: center;color: var(--van-gray-6)}}
}.list-enter-active,
.list-leave-active {transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {opacity: 0;transform: translateY(30px);
}
/style使用 transition和 transition-group 实现动画效果 使用 在transition组件中你可以使用name属性来指定动画的类名在CSS中定义类名并为其添加过渡效果 transition template!-- 动画组件使用方法 --Transition namefadeSearchView v-ifisSearchViewShown canceltoggleSearchView/SearchView/Transition/templatestyle langscss
// 动画执行效果消失效果
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease;
}
// 动画进行时状态效果
.fade-enter-from, .fade-leave-to {opacity: 0;
}
/styletransition-group templateTransitionGroup namelist// 组件里内容使用了v-for是数组形式div classhistory-tag v-forv in historyTags :keyv clickonTagClick(v){{ v }}/divdiv classhistory-tag keyarrow clicktoggleHistoryTagVanIcon v-ifisHistoryTagShown namearrow-up/VanIconVanIcon v-else namearrow-down/VanIcon/div/TransitionGroup/templatestyle langscss
// 定义动画css样式
.list-enter-active,
.list-leave-active {transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {opacity: 0;transform: translateY(30px);
}/style Search 组件复用 将之前章节写好的OpSearch组件复用到SearchView组件中 script setup langts
//引入组件
import OpSearch from /components/OpSearch.vue
import { ref } from vueconst onSearch async (v?: string | number) {console.log(onSearch, v)
}// 定义搜索输入框里的参数变量
const searchValue ref()// 声明事件接口接口中属性值是一个函数函数名是cancel返回值是一个函数void
interface IEmits {(e: cancel): void
}
// 定义一个事件变量用defineEmits方法实现方法中引入声明的事件接口
const emits defineEmitsIEmits()/scripttemplate
// 使用组件OpSearchshow-action
//对变量searchValue值进行双向绑定v-modelsearchValueshaperoundplaceholder请输入搜索关键词
// 创建onSearch方法searchonSearch
//定义cancel事件cancelemits(cancel)//template computed 计算属性 理解 方便地计算和监听数据的变化。 script setup langts
import { useToggle } from /use/useToggle
import { computed } from vueconst HISTORY_TAGS [披萨,标签2,标签3,标签4,标签5,标签6,标签7,
]
const [isHistoryTagShown, toggleHistoryTag] useToggle(false)const historyTags computed(() (isHistoryTagShown.value ? HISTORY_TAGS : HISTORY_TAGS.slice(0, 5)))templatediv classhistory-tag keyarrow clicktoggleHistoryTagVanIcon v-ifisHistoryTagShown namearrow-up/VanIconVanIcon v-else namearrow-down/VanIcon/div/templatewatch 监听属性 理解 watch函数接受两个参数一个是要监听的参数以及一个回调函数。回调函数触发的前提是当被监听的参数发生变化时回调函数将被执行。 script setup langts
// 引入watch函数
import { watch } from vue// watch监听函数的使用方法监听searchValue参数又叫属性值的变化有变动时就会触发回调函数中的代码。
watch(searchValue, (new_v) {if(!new_v) {searchResult.value []return}onSearch(new_v)
})/script 使用axios实例发送业务请求 开发环境配置反向代理使用服务接口设置请求响应拦截创建具体功能请求函数调用功能请求函数 mock 请求
看这篇文章 使用apifox创建一个Mock Server Api 接口-CSDN博客
