Compare commits
2 Commits
ea9d06a5ad
...
f56f7e97ed
Author | SHA1 | Date |
---|---|---|
Strange | f56f7e97ed | |
Strange | b91409dcd3 |
|
@ -1,11 +1,11 @@
|
|||
import http from "@/utils/http";
|
||||
//获取标签名
|
||||
export const getTags= (tagName)=>{
|
||||
|
||||
export const getTagList =(tagName)=>{
|
||||
return http({
|
||||
url:"/tag/getTags",
|
||||
method:"get",
|
||||
params:{
|
||||
tagName
|
||||
data:{
|
||||
tagName:tagName
|
||||
},
|
||||
})
|
||||
}
|
|
@ -3,55 +3,29 @@
|
|||
<!-- {{ props.type }}{{ props }} -->
|
||||
<div
|
||||
v-for="word in words"
|
||||
:key="word"
|
||||
:key="word.id"
|
||||
class="word-item"
|
||||
@click="handleWordClick(word)"
|
||||
>
|
||||
{{ word }}
|
||||
{{ word.name }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref ,watch} from 'vue';
|
||||
import { getTags } from "@/api/tag/tag";
|
||||
import { ref,onMounted,computed } from 'vue';
|
||||
const emit=defineEmits(['select'])
|
||||
const props=defineProps({
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
const getWords=async(type)=>{
|
||||
let res=await getTags(type);
|
||||
if(res.code==200){
|
||||
words.value=res.data.map(itme=>itme.name);
|
||||
if(words.value.length==0){
|
||||
words.value=['暂无数据']
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(() => props.type,(newValue)=>{
|
||||
getWords(newValue);
|
||||
console.log("props",newValue);
|
||||
},{
|
||||
//深度监听
|
||||
deep: true, // 启用深度监听
|
||||
})
|
||||
import {useTagStore } from '@/store/tagStore'
|
||||
const tagStore=useTagStore()
|
||||
// 包含所有可点击词的数组
|
||||
const words = ref([
|
||||
'高数上', '高数下', '线性代数', '数学分析', '解析几何',
|
||||
'概率论与数理统计', '复变函数', '实变函数', '常微分方程',
|
||||
'近世代数', '数据结构', 'C语言', '软件工程类', '大学物理(简明)',
|
||||
'物理实验', '力学', '热学', '光学', '电磁学', '原子物理学',
|
||||
'物理专业', '高中物理', '初中物理', '高中化学', '初中化学',
|
||||
'高中数学', '初中数学', '小学数学', '高中生物', '初中生物',
|
||||
'有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
|
||||
'高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
|
||||
'遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
|
||||
'法学', '经济学', '其他'
|
||||
]);
|
||||
const words = computed(()=>{
|
||||
return tagStore.tagList
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
tagStore.getData()
|
||||
})
|
||||
const handleWordClick = (word) => {
|
||||
console.log(`Clicked word: ${word}`);
|
||||
emit('select',word);
|
||||
|
@ -76,4 +50,4 @@
|
|||
.word-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</style>@/store/tagStore
|
|
@ -2,23 +2,31 @@
|
|||
<div class="nav">
|
||||
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
||||
<div>
|
||||
|
||||
<el-popover :width="700" trigger="click">
|
||||
<template #reference>
|
||||
<div class="search-box">
|
||||
<div class="selectInput">
|
||||
<el-popover class="search-box" :width="700" trigger="click">
|
||||
<template #reference>
|
||||
<!-- <div class="selectInput">
|
||||
<div @click="selectClick">
|
||||
<el-icon :size="size" :color="color">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
<input type="text" placeholder="搜索关键词" v-model="type" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-input
|
||||
v-model="searchVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="搜索关键词"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
<TypeSelect @select="selectInput" :type="type"></TypeSelect>
|
||||
</el-input>
|
||||
</template>
|
||||
<TypeSelect @select="selectInput"></TypeSelect>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="router.push('/user')" class="user-avatar">
|
||||
<el-avatar :size="40" :src="circleUrl" />用户名
|
||||
</div>
|
||||
|
@ -27,28 +35,15 @@
|
|||
<script setup>
|
||||
// import {defineProps} from "vue"
|
||||
import TypeSelect from "@/components/TypeSelect.vue";
|
||||
import { debounceRef } from "@/utils/debounceRef";
|
||||
import { ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
const type = debounceRef('', 500);
|
||||
import { ref,computed } from "vue";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import {useTagStore } from '@/store/tagStore'
|
||||
const tagStore=useTagStore()
|
||||
|
||||
|
||||
let searchVal = computed(()=> useTagStore().$state.Val)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.selectInput {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 2px #000000 solid;
|
||||
border-radius: 30px;
|
||||
input {
|
||||
background-color: #00000000; /* 透明背景 */
|
||||
border: none; /* 无边框 */
|
||||
outline: none; /* 去除聚焦时的轮廓 */
|
||||
padding: 0; /* 无内边距 */
|
||||
margin: 0; /* 无外边距 */
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
.nav {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
@ -61,7 +56,7 @@ const type = debounceRef('', 500);
|
|||
margin-left: 52px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.input-with-select{
|
||||
.input-with-select {
|
||||
border-radius: 30px;
|
||||
}
|
||||
.search-box {
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { getTagList } from "@/api/tag/tag";
|
||||
|
||||
export const useTagStore = defineStore("useTagStore", {
|
||||
state: () => ({
|
||||
count: 0,
|
||||
tagList: [],
|
||||
Val: "测试"
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async getData(name = null) {
|
||||
const res = await getTagList(name);
|
||||
console.log(res);
|
||||
this.tagList = res.data; // 假设 res.data 是你要更新的标签列表
|
||||
}
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue