43556292d2
refactor(component): 重构组件模板结构，移除重复代码 feat(component): 添加可选props支持外部数据传入 style(css): 优化样式布局和响应式设计 fix(js): 修复URL路径处理逻辑和滚动加载问题 feat(search): 新增搜索页推荐内容和空状态处理 chore: 添加新图标资源文件
53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||
const { defineComponent, ref, onMounted, watch } = Vue;
|
||
// 定义组件（直接使用模板）
|
||
export const hotSearch = defineComponent({
|
||
name: "hot-search",
|
||
props: {
|
||
isnorequestdata: {
|
||
type: Boolean,
|
||
},
|
||
|
||
searchlist: {
|
||
type: Array,
|
||
},
|
||
},
|
||
|
||
setup(props) {
|
||
let valueUrl = ref("");
|
||
|
||
onMounted(() => {
|
||
if (!props.isnorequestdata) init();
|
||
const valueA = document.querySelector(".valueA");
|
||
valueUrl.value = valueA.innerText;
|
||
});
|
||
|
||
const list = ref([]);
|
||
|
||
watch(
|
||
() => props.searchlist,
|
||
(newVal) => {
|
||
if (newVal) list.value = newVal;
|
||
},
|
||
{
|
||
deep: true, // 核心：开启深度监听（监听对象/数组内部属性变化）
|
||
immediate: true, // 可选：组件挂载时立即执行一次回调（根据需求决定）
|
||
}
|
||
);
|
||
|
||
const init = () => {
|
||
ajaxGet("/v2/api/forum/getHotSearchWords?limit=20").then((res) => {
|
||
const data = res.data;
|
||
list.value = data || [];
|
||
});
|
||
};
|
||
|
||
return { valueUrl, list };
|
||
},
|
||
|
||
components: {},
|
||
|
||
template: `<div class="hot-tag" v-if="list?.length > 0"> <div class="hot-tag-title"> <img class="icon" :src="valueUrl + '/img/triangle-violet.svg'" /> 热门搜索 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/search/' + item.keyword" target="_blank">{{ item.keyword }}</a> </div></div>`,
|
||
});
|