Files
PC-Light-Forum/component/item-head/item-head.js
DESKTOP-RQ919RC\Pc 6bb48ff86d refactor(component): 重构组件模板与样式结构
将公共样式提取至public.css,优化组件模板结构
添加图片资源与组件模板同步脚本
调整组件样式与布局,统一风格
2025-10-22 18:31:16 +08:00

23 lines
2.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// my-component.js
// 引入全局 Vue 对象(因在 HTML 中通过 script 引入Vue 已挂载到 window
const { defineComponent } = Vue;
// 定义组件(直接使用模板)
export const itemHead = defineComponent({
name: "item-head",
props: {
title: {
type: String,
default: "默认标题",
},
},
// 方法
methods: {
handleClick() {
alert("组件按钮被点击");
},
},
template: `<div class="item-head flexacenter"> <img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" /> <div class="name">小P学姐</div> <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" /> <div class="time">2025-8-11 01:30</div> <div class="flex1"></div> <div class="view flexacenter"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" /> <div class="text">3016</div> </div> <div class="btn flexcenter" @click="cutShow"> <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" /> </div> <!-- <template v-if="show"> <div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div> <div class="operate" catch:tap="true"> <div class="item" bind:tap="report">举报</div> <template v-if="ismanager"> <div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div> <div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div> <div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div> </template> </div> </template> --></div> `,
});