refactor(component): 重构组件模板与样式结构
将公共样式提取至public.css,优化组件模板结构 添加图片资源与组件模板同步脚本 调整组件样式与布局,统一风格
This commit is contained in:
22
component/item-head/item-head.js
Normal file
22
component/item-head/item-head.js
Normal file
@@ -0,0 +1,22 @@
|
||||
// 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> `,
|
||||
});
|
||||
Reference in New Issue
Block a user