Compare commits
2 Commits
ea9d06a5ad
...
f56f7e97ed
Author | SHA1 | Date |
---|---|---|
Strange | f56f7e97ed | |
Strange | b91409dcd3 |
|
@ -1,11 +1,11 @@
|
||||||
import http from "@/utils/http";
|
import http from "@/utils/http";
|
||||||
//获取标签名
|
|
||||||
export const getTags= (tagName)=>{
|
export const getTagList =(tagName)=>{
|
||||||
return http({
|
return http({
|
||||||
url:"/tag/getTags",
|
url:"/tag/getTags",
|
||||||
method:"get",
|
method:"get",
|
||||||
params:{
|
data:{
|
||||||
tagName
|
tagName:tagName
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
|
@ -3,55 +3,29 @@
|
||||||
<!-- {{ props.type }}{{ props }} -->
|
<!-- {{ props.type }}{{ props }} -->
|
||||||
<div
|
<div
|
||||||
v-for="word in words"
|
v-for="word in words"
|
||||||
:key="word"
|
:key="word.id"
|
||||||
class="word-item"
|
class="word-item"
|
||||||
@click="handleWordClick(word)"
|
@click="handleWordClick(word)"
|
||||||
>
|
>
|
||||||
{{ word }}
|
{{ word.name }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref ,watch} from 'vue';
|
import { ref,onMounted,computed } from 'vue';
|
||||||
import { getTags } from "@/api/tag/tag";
|
|
||||||
const emit=defineEmits(['select'])
|
const emit=defineEmits(['select'])
|
||||||
const props=defineProps({
|
import {useTagStore } from '@/store/tagStore'
|
||||||
type:{
|
const tagStore=useTagStore()
|
||||||
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, // 启用深度监听
|
|
||||||
})
|
|
||||||
// 包含所有可点击词的数组
|
// 包含所有可点击词的数组
|
||||||
const words = ref([
|
const words = computed(()=>{
|
||||||
'高数上', '高数下', '线性代数', '数学分析', '解析几何',
|
return tagStore.tagList
|
||||||
'概率论与数理统计', '复变函数', '实变函数', '常微分方程',
|
})
|
||||||
'近世代数', '数据结构', 'C语言', '软件工程类', '大学物理(简明)',
|
|
||||||
'物理实验', '力学', '热学', '光学', '电磁学', '原子物理学',
|
onMounted(()=>{
|
||||||
'物理专业', '高中物理', '初中物理', '高中化学', '初中化学',
|
tagStore.getData()
|
||||||
'高中数学', '初中数学', '小学数学', '高中生物', '初中生物',
|
})
|
||||||
'有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
|
|
||||||
'高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
|
|
||||||
'遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
|
|
||||||
'法学', '经济学', '其他'
|
|
||||||
]);
|
|
||||||
const handleWordClick = (word) => {
|
const handleWordClick = (word) => {
|
||||||
console.log(`Clicked word: ${word}`);
|
console.log(`Clicked word: ${word}`);
|
||||||
emit('select',word);
|
emit('select',word);
|
||||||
|
@ -76,4 +50,4 @@
|
||||||
.word-item:hover {
|
.word-item:hover {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>@/store/tagStore
|
|
@ -2,23 +2,31 @@
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<el-popover :width="700" trigger="click">
|
|
||||||
<template #reference>
|
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<div class="selectInput">
|
<el-popover class="search-box" :width="700" trigger="click">
|
||||||
|
<template #reference>
|
||||||
|
<!-- <div class="selectInput">
|
||||||
<div @click="selectClick">
|
<div @click="selectClick">
|
||||||
<el-icon :size="size" :color="color">
|
<el-icon :size="size" :color="color">
|
||||||
<Search />
|
<Search />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" placeholder="搜索关键词" v-model="type" />
|
</div> -->
|
||||||
</div>
|
<el-input
|
||||||
</div>
|
v-model="searchVal"
|
||||||
|
style="max-width: 600px"
|
||||||
|
placeholder="搜索关键词"
|
||||||
|
class="input-with-select"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<el-button :icon="Search" />
|
||||||
</template>
|
</template>
|
||||||
<TypeSelect @select="selectInput" :type="type"></TypeSelect>
|
</el-input>
|
||||||
|
</template>
|
||||||
|
<TypeSelect @select="selectInput"></TypeSelect>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div @click="router.push('/user')" class="user-avatar">
|
<div @click="router.push('/user')" class="user-avatar">
|
||||||
<el-avatar :size="40" :src="circleUrl" />用户名
|
<el-avatar :size="40" :src="circleUrl" />用户名
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,28 +35,15 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
// import {defineProps} from "vue"
|
// import {defineProps} from "vue"
|
||||||
import TypeSelect from "@/components/TypeSelect.vue";
|
import TypeSelect from "@/components/TypeSelect.vue";
|
||||||
import { debounceRef } from "@/utils/debounceRef";
|
import { ref,computed } from "vue";
|
||||||
import { ref } from 'vue'
|
import { Search } from "@element-plus/icons-vue";
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import {useTagStore } from '@/store/tagStore'
|
||||||
const type = debounceRef('', 500);
|
const tagStore=useTagStore()
|
||||||
|
|
||||||
|
|
||||||
|
let searchVal = computed(()=> useTagStore().$state.Val)
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
|
@ -61,7 +56,7 @@ const type = debounceRef('', 500);
|
||||||
margin-left: 52px;
|
margin-left: 52px;
|
||||||
margin-bottom: 11px;
|
margin-bottom: 11px;
|
||||||
}
|
}
|
||||||
.input-with-select{
|
.input-with-select {
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
.search-box {
|
.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