综合案例 - 商品列表

文章目录

    • 需求说明
      • 1.my-tag组件封装(完成初始化)
      • 2.may-tag封装(控制显示隐藏)
      • 3.my-tag组件封装(v-model处理:信息修改)
      • 4.my-table组件封装(整个表格)
        • ①数据不能写死,动态传递表格渲染的数据
        • ②结构不能写死 - 多处结构自定义【具名插槽】
    • 案例完整代码:
      • 1.App.vue
      • 2.MyTag.vue
      • 3.MyTable.vue
      • 4.Main.js

需求说明

在这里插入图片描述

  1. my-tag标签封装组件
  • 双击显示输入框,输入框获取焦点
  • 失去焦点,隐藏输入框
  • 回显标签信息
  • 修改内容,回车 → 修改标签信息
  1. my-table表格组件封装
  • 动态传递数据渲染
  • 表头支持用户自定义
  • 主题支持用户自定义

1.my-tag组件封装(完成初始化)

App/vue
<template><div class="table-case"><table class="my-table"><thead><tr><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></tr></thead><tbody><tr><td>1</td><td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td><td><img src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" /></td><td><!-- 标签组件 --><MyTag></MyTag></td></tr><tr><td>1</td><td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td><td><img src="https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg" /></td><td><!-- 标签组件 --></td></tr></tbody></table></div>
</template><script>
// may-tag 标签组件的封装
//1.创建组件 - 初始化
//2.实现功能
import MyTag from './components/MyTag.vue'export default {name: 'TableCase',components: {MyTag},data() {return {goods: [{id: 101,picture:'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',tag: '茶具',},{id: 102,picture:'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',tag: '男鞋',},{id: 103,picture:'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',name: '毛茸茸小熊出没,儿童羊羔绒背心73-90cm',tag: '儿童服饰',},{id: 104,picture:'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',name: '基础百搭,儿童套头针织毛衣1-9岁',tag: '儿童服饰',},],}},
}
</script>
MyTag.vue(标签组件)
<template><div class="my-tag"><!-- <input class="input"type="text"placeholder="输入标签"/> --><div class="text">茶具</div></div>
</template>

在这里插入图片描述

2.may-tag封装(控制显示隐藏)

在这里插入图片描述

上面这两个不能同时显示,用到v-if 和 v-else
双击事件:@dblclick=""
自动聚焦:
法①$nextTick => $refs 获取到dom,进行focus获取焦点
法②封装v-focus指令
失去焦点,隐藏输入框:@blur操作isEdit = false

MyTag.vue
<template><div class="my-tag"><input v-if="isEdit"v-focus ref="inp"class="input"type="text"placeholder="输入标签"@blur="isEdit=false"/><div v-else @dblclick="handleClick" class="text">茶具</div></div>
</template><script>
export default {data () {return {isEdit:false}},methods:{handleClick () {//双击后,切换到显示状态this.isEdit = true// //等dom更新完,再获取焦点// this.$nextTick(() => {//     this.$refs.inp.focus()// })  每次都需要获取焦点,所以可以把它封装(全局)}}
}</script>

全局注册

main.jsVue.config.productionTip = false
//封装全局指令 focus
Vue.directive('focus',{//inserted是指令所在的dom元素,被插入到页面中时触发inserted (el) {el.focus()}
})

3.my-tag组件封装(v-model处理:信息修改)

  1. 回显标签信息:回显的标签信息是父组件传过来的,用v-model实现功能(简化代码)
    v-model => :value@input
    组件内部通过props接收 "value设置给输入框
  2. 内容修改了,回车 => 修改标签信息
    ·@keyup.enter·,回车时触发input事件。
    $emit写了一个input,并且把输入框的值实时拿到并提交,用到e.target.value→$emit('input',e.target.value)

以下代码只与此部分有关,上节已展示过的代码不再加入

App.vue
<template><div class="table-case">//两个组件标签都放进去就可以了<td><!-- 标签组件 --><MyTag v-model="tempText"></MyTag></td><td><!-- 标签组件 --><MyTag v-model="tempText2"></MyTag></td></div>
</template>
<script>
// may-tag 标签组件的封装
//1.创建组件 - 初始化
//2.实现功能
import MyTag from './components/MyTag.vue'export default {name: 'TableCase',components: {MyTag},data() {return {//测试组件功能的临时数据tempText:'水杯',tempText2:'钢笔',}
}
</script>~.vue
<template><div class="my-tag"><input v-if="isEdit"v-focus ref="inp"class="input"type="text"placeholder="输入标签":value="value"@blur="isEdit=false"@keyup.enter="handleEnter"/><div v-else @dblclick="handleClick" class="text">{{ value }}</div></div>
</template><script>
export default {props:{value:String},data () {return {isEdit:false}},methods:{handleClick () {//双击后,切换到显示状态this.isEdit = true// //等dom更新完,再获取焦点// this.$nextTick(() => {//     this.$refs.inp.focus()// })  每次都需要获取焦点,所以可以把它封装(全局)},handleEnter (e) {if(e.target.value.trim() ==='') return alert('标签内容不能为空')//子传父,将回车时,输入框的内容交给父组件更新//由于父组件时 v-model ,所以触发事件时,需要触发 input 事件this.$emit('input',e.target.value)//提交完成,关闭输入框状态this.isEdit = false}}
}</script>

4.my-table组件封装(整个表格)

  1. 数据不能写死,动态传递表格渲染的数据
  2. 结构不能写死 - 多处结构自定义【具名插槽】
    (1). 表头支持自定义
    (2).主体支持自定义
①数据不能写死,动态传递表格渲染的数据
<template><table class="my-table"><thead><tr><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></tr></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td><img :src="item.picture" /></td><td>标签组件<!-- <MyTag v-model="tempText"></MyTag> --></td></tr></tbody></table>
</template><script>
export default {props:{data:{type:Array,required:true}}
}
</script>
②结构不能写死 - 多处结构自定义【具名插槽】
App.vue
<template><div class="table-case"><MyTable :data="goods"><template #head><tr><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></tr></template><template #body="{ item,index }"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td><img :src="item.picture" /></td><td><MyTag v-model="item.tag"></MyTag></td></template></MyTable></div>
</template>~.vue
<template><table class="my-table"><thead><slot name="head"></slot></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><slot name="body" :item="item" :index="index"></slot></tr></tbody></table>
</template>

在这里插入图片描述

案例完整代码:

1.App.vue

<template><div class="table-case"><MyTable :data="goods"><template #head><tr><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></tr></template><template #body="{ item,index }"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td><img :src="item.picture" /></td><td><MyTag v-model="item.tag"></MyTag></td></template></MyTable></div>
</template><script>
// may-tag 标签组件的封装
//1.创建组件 - 初始化
//2.实现功能
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue';export default {name: 'TableCase',components: {MyTag,MyTable},data() {return {//测试组件功能的临时数据tempText:'水杯',tempText2:'钢笔',goods: [{id: 101,picture:'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',tag: '茶具',},{id: 102,picture:'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',tag: '男鞋',},{id: 103,picture:'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',name: '毛茸茸小熊出没,儿童羊羔绒背心73-90cm',tag: '儿童服饰',},{id: 104,picture:'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',name: '基础百搭,儿童套头针织毛衣1-9岁',tag: '儿童服饰',},],}},
}
</script><style scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}
}
</style>

2.MyTag.vue

<template><div class="my-tag"><input v-if="isEdit"v-focus ref="inp"class="input"type="text"placeholder="输入标签":value="value"@blur="isEdit=false"@keyup.enter="handleEnter"/><div v-else @dblclick="handleClick" class="text">{{ value }}</div></div>
</template><script>
export default {props:{value:String},data () {return {isEdit:false}},methods:{handleClick () {//双击后,切换到显示状态this.isEdit = true// //等dom更新完,再获取焦点// this.$nextTick(() => {//     this.$refs.inp.focus()// })  每次都需要获取焦点,所以可以把它封装(全局)},handleEnter (e) {if(e.target.value.trim() ==='') return alert('标签内容不能为空')//子传父,将回车时,输入框的内容交给父组件更新//由于父组件时 v-model ,所以触发事件时,需要触发 input 事件this.$emit('input',e.target.value)//提交完成,关闭输入框状态this.isEdit = false}}
}</script><style scoped>.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}}
</style>

3.MyTable.vue

<template><table class="my-table"><thead><slot name="head"></slot></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><slot name="body" :item="item" :index="index"></slot></tr></tbody></table>
</template><script>
export default {props:{data:{type:Array,required:true}}
}
</script>
<style>
.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}}
</style>

4.Main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//封装全局指令 focus
Vue.directive('focus',{//inserted是指令所在的dom元素,被插入到页面中时触发inserted (el) {el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/653675.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)

文章目录 3.1 创建无序和有序列表&#xff08;&#x1f4dd;&#x1f31f;&#x1f44d; 信息的时尚搭配师&#xff09;3.1.1 基础示例&#xff1a;创建一个简单的购物清单3.1.2 案例扩展一&#xff1a;创建一个旅行计划清单3.1.3 案例扩展二&#xff1a;创建一个混合列表 3.2 …

【数据分享】1929-2023年全球站点的逐年平均气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01;本次我们为大家带来的就是具体到气象监…

win11 系统 WSL2 备份与还原

win11 系统想要使用 linu 开发环境&#xff0c;除了虚拟机&#xff0c;就是 wsl 好使了。 但是 wsl 如过用了一段时间里面环境工程配置迁移麻烦如果重装系统后能直接备份还原就方便了。 确定你的版本 使用 WinR 打开输入框 输入 cmd 命令 打开命令提示符界面 wsl -l -v查看…

【备战蓝桥杯】——循环结构

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-bFHV3Dz5xMe6d3NB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 文章目录 QT tcp与udp网络通信以及定时器的使用1、QT网络与通信简单介绍2、QT TCP通信1、 服务器的流程2、 客户端的流程3、服务器的编写4、客户端的编写 3、QT UDP通信1、客户端流程2、客户端编写3、UDP广播4、UDP组播 4、定时器的用法1、…

【ArcGIS微课1000例】0098:查询河流流经过的格网

本实验讲述,ArcGIS中查询河流流经过的格网,如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流(黄河)和格网数据,如下图所示: 接下来,将查询河流流经过的格网有哪些并…

SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

新建一个模块&#xff0c;做自动配置 config&#xff1a;需要准备两个类&#xff0c;一个自动配置类&#xff0c;一个配置类 CommonAutoConfig&#xff1a;此类用于做自动配置类它会去读取resoutces下的META-INF.spring下的org.springframework.boot.autoconfigure.AutoConfig…

LabVIEW探测器CAN总线系统

介绍了一个基于FPGA和LabVIEW的CAN总线通信系统&#xff0c;该系统专为与各单机进行系统联调测试而设计。通过设计FPGA的CAN总线功能模块和USB功能模块&#xff0c;以及利用LabVIEW开发的上位机程序&#xff0c;系统成功实现了CAN总线信息的收发、存储、解析及显示功能。测试结…

嘿嘿,vue之输出土味情话

有点好玩&#xff0c;记录一下。通过按钮调用网站接口&#xff0c;然后解构数据输出土味情话。 lovetalk.vue: <!--vue简单框架--> <template> <!-- 这是一个div容器&#xff0c;用于显示土味情话 --> <div class"talk"> <!-- 当点…

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSSVM【24年…

K个一组翻转链表---链表OJ

https://leetcode.cn/problems/reverse-nodes-in-k-group/?envType=study-plan-v2&envId=top-100-liked K个一组进行翻转,大体上是和前面两两翻转是类似的,区别就在于,这里需要自己判断是否需要翻转,如何翻转,怎么记录。这里我们用递归来实现。 是否需要翻转…

数据结构·单链表经典例题

1. 移除链表元素 OJ链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 本题是说给出一个链表的头节点head和一个整数val&#xff0c;如果发现节点中存的数据有val就删掉它&#xff0c;最后返回修改后的链表头节点地址 如果题目中没有明确…

第十八讲_HarmonyOS应用开发实战(实现电商首页)

HarmonyOS应用开发实战&#xff08;实现电商首页&#xff09; 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列 掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builde…

【Redis】关于它为什么快?使用场景?以及使用方式?为何引入多线程?

目录 1.既然redis那么快&#xff0c;为什么不用它做主数据库&#xff0c;只用它做缓存&#xff1f; 2.Redis 一般在什么场合下使用&#xff1f; 3.redis为什么这么快&#xff1f; 4.Redis为什么要引入了多线程&#xff1f; 1.既然redis那么快&#xff0c;为什么不用它做主数据…

Nginx 配置解析:从基础到高级应用指南

Nginx 配置解析&#xff1a;从基础到高级应用指南 Nginx 配置解析&#xff1a;从基础到高级应用指南1. 安装和基本配置安装 Nginx基本配置 2. 虚拟主机配置3. 反向代理配置4. 负载均衡配置5. SSL 配置6. 高级配置选项结语 Nginx 配置解析&#xff1a;从基础到高级应用指南 Ngi…

C#使用OpenCvSharp4库读取电脑摄像头数据并实时显示

一、OpenCvSharp4库 OpenCvSharp4库是一个基于.Net封装的OpenCV库&#xff0c;Github源代码地址为&#xff1a;https://github.com/shimat/opencvsharp&#xff0c;里面有关于Windows下安装OpenCvSharp4库的描述&#xff0c;如下图所示&#xff1a; 二、C#使用OpenCvSharp4库…

Python tkinter (8) ——Spinbox控件

Python的标准Tk GUI工具包的接口 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinter (5) 选项按钮与复选框 Pyt…

中间件安全

中间件安全 vulhub漏洞复现&#xff1a;https://vulhub.org/操作教程&#xff1a;https://www.freebuf.com/sectool/226207.html 一、Apache Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和…

RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

💡 RT-DETR改进有效系列目录 💡 前言 Hello,各位读者们好 Hello,各位读者,距离第一天发RT-DETR的博客已经过去了接近两个月,这段时间里我深入的研究了一下RT-DETR在ultralytics仓库的使用,旨在为大家解决为什么用v8的仓库训练的时候模型不收敛,精度差的离谱的问题,…