43556292d2
refactor(component): 重构组件模板结构，移除重复代码 feat(component): 添加可选props支持外部数据传入 style(css): 优化样式布局和响应式设计 fix(js): 修复URL路径处理逻辑和滚动加载问题 feat(search): 新增搜索页推荐内容和空状态处理 chore: 添加新图标资源文件
31 lines
1.9 KiB
JavaScript
31 lines
1.9 KiB
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
|
||
const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue;
|
||
|
||
// 定义组件（直接使用模板）
|
||
export const helperPop = defineComponent({
|
||
name: "helper-pop",
|
||
props: {},
|
||
|
||
setup(props) {
|
||
let isMobile = ref(false);
|
||
|
||
let state = ref(false);
|
||
|
||
onMounted(() => {
|
||
isMobile.value = window.isMobile;
|
||
});
|
||
|
||
const open = () => (state.value = true);
|
||
const closeGroup = () => (state.value = false);
|
||
|
||
const holdback = () => {};
|
||
|
||
return { state, isMobile, holdback, closeGroup, open };
|
||
},
|
||
|
||
components: {},
|
||
|
||
template: `<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent> <div class="helper-box flexacenter" @click.stop="holdback"> <img class="cross-grey" @click.stop="closeGroup" src="../../img/cross-grey.png" alt=""> <img class="helper-text helper-text1" src="../../img/apply-for-name.png" alt=""> <div class="helper-box-box flexflex"> <div class="helper-QRcode-box flexcenter"> <img class="left-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="left-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="right-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="right-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt=""> <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt=""> </div> <span class="helper-box-text">长按识别二维码</span> </div> <img class="helper-bottom" src="../../img/helper-bottom-yellow.svg" alt=""> <img class="helper-bottom" src="../../img/helper-bottom-blue.svg" alt=""> </div></div>`,
|
||
});
|