43556292d2
refactor(component): 重构组件模板结构，移除重复代码 feat(component): 添加可选props支持外部数据传入 style(css): 优化样式布局和响应式设计 fix(js): 修复URL路径处理逻辑和滚动加载问题 feat(search): 新增搜索页推荐内容和空状态处理 chore: 添加新图标资源文件
27 lines
823 B
JavaScript
27 lines
823 B
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||
const { defineComponent, ref, onMounted, onUnmounted } = Vue;
|
||
|
||
// 定义组件（直接使用模板）
|
||
export const loadBox = defineComponent({
|
||
name: "load-box",
|
||
props: {
|
||
loading: {
|
||
type: Boolean,
|
||
default: "",
|
||
},
|
||
},
|
||
setup(props) {
|
||
let valueUrl = ref("");
|
||
|
||
onMounted(() => {
|
||
const valueA = document.querySelector(".valueA");
|
||
valueUrl.value = valueA.innerText;
|
||
});
|
||
|
||
return { valueUrl };
|
||
},
|
||
|
||
template: `<div class="list-load-box flexcenter" :class="{'show': loading}"><img class="list-load-icon" :src="valueUrl + '/img/load-icon.svg'" /><div class="list-load-text">加载中</div></div>`,
|
||
});
|