第三十章 章节练习商品列表组件封装
目录
一、需求说明
二、技术要点
三、完整代码
3.1. main.js
3.2. App.vue
3.3. MyTable.vue
3.4. MyTag.vue
一、需求说明
1. my-tag 标签组件封装
(1) 双击显示输入框,输入框获取焦点
(2) 失去焦点,隐藏输入框
(3) 回显标签信息
(4) 内容修改,回车 → 修改标签信息
2. my-table 表格组件封装
(1) 动态传递表格数据渲染
(2) 表头支持用户自定义
(3) 主体支持用户自定义

二、技术要点
商品列表的实现封装了2个组件(标签组件和表格组件)
封装用到的核心技术:
(1)props父传子 $emit子传父 v-model
(2)$nextTick 自定义指令
(3)插槽:具名插槽,作用域插槽
三、完整代码
3.1. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 封装全局指令 focus
Vue.directive('focus', {// 指令所在的dom元素,被插入到页面中时触发inserted (el) {el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')
3.2. App.vue
<template><div class="table-case"><!-- 封装的表格组件 --><MyTable :data="goods"><!-- 传入模板 具名插槽表头 作为参数 --><template #head><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></template><!-- 传入模版给具名插槽表体 作为参数 --><template #body="{ item, index }"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td><img:src="item.picture"/></td><td><!-- 封装的标签组件 --><!-- v-model简化父子组件通信代码,对应的是子组件的value属性 --><MyTag v-model="item.tag"></MyTag></td></template></MyTable></div>
</template><script>
// my-tag 标签组件的封装
// 1. 创建组件 - 初始化
// 2. 实现功能
// (1) 双击显示,并且自动聚焦
// v-if v-else @dbclick 操作 isEdit
// 自动聚焦:
// 1. $nextTick => $refs 获取到dom,进行focus获取焦点
// 2. 封装v-focus指令// (2) 失去焦点,隐藏输入框
// @blur 操作 isEdit 即可// (3) 回显标签信息
// 回显的标签信息是父组件传递过来的
// v-model实现功能 (简化代码) v-model => :value 和 @input
// 组件内部通过props接收, :value设置给输入框// (4) 内容修改了,回车 => 修改标签信息
// @keyup.enter, 触发事件 $emit('input', e.target.value)// ---------------------------------------------------------------------// my-table 表格组件的封装
// 1. 数据不能写死,动态传递表格渲染的数据 props
// 2. 结构不能写死 - 多处结构自定义 【具名插槽】
// (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 lang="less" scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}
}</style>
3.3. MyTable.vue
<template><table class="my-table"><thead><tr><!-- 具名插槽定义表头 --><slot name="head"></slot></tr></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 lang="less" scoped>.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 .5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}</style>
3.4. MyTag.vue
<template><!-- 标签组件 --><div class="my-tag"><!-- isEdit的值作为语句v-if/v-else的条件控制输入框和<div>的隐藏显示 --><!-- 通过自定义指令v-focus实现输入框显示就获取焦点 --><!-- @blur 失去焦点隐藏输入框,显示<div> --><!-- @keyup.enter 回车键调用handleEnter方法修改值并隐藏输入框,显示<div> --><inputv-if="isEdit"v-focusref="inp"class="input"type="text"placeholder="输入标签":value="value"@blur="isEdit = false"@keyup.enter="handleEnter"/><!-- @dblclick 双击显示输入框,隐藏<div> --><div v-else@dblclick="handleClick"class="text">{{ value }}</div></div>
</template><script>
export default {props: {value: String},data () {return {isEdit: false}},methods: {handleClick () {// 双击后,切换到显示状态 (Vue是异步dom更新)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 lang="less" 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.1. main.js 3.2. App.vue 3.3. MyTable.vue 3.4. MyTag.vue 一、需求说明 1. my-tag 标签组件封装 (1) 双击显示输入框,输入框获取焦点 (2) 失去焦点,隐藏输入框 (3) 回显标签信息 (4) 内…...
NumPy 高级索引
NumPy 高级索引 NumPy 是 Python 中用于科学计算的核心库之一,它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。在 NumPy 中,除了基本的索引和切片操作外,还提供了高级索引功能,这使得您可以以更加灵活和高效的方式访问和操作数组中的数据。本文将详细介绍 N…...
C/C++常用编译工具链:GCC,Clang
目录 GNU Compiler Collection GCC的优势 编译产生的中间文件 Clang Clang的特点 什么是LLVM? Clang编译过程中产生的中间表示文件 关于Clang的调试 C 编译工具链中有几个主要的编译工具,包括: GNU Compiler Collection (GCC…...
let和war的区别
let和war的区别 看不懂图片,可以看视频教程...
[CUDA] stream使用笔记
文章目录 1. stream一般用法2. stream与event:3. stream异常的排查4. stream的异步与同步行为 1. stream一般用法 cudaStream_t stream_; cudaStreamCreate(&stream_); // create stream // some operators running on this stream_ cudaStreamSynchronize(str…...
第二课:开发工具
在本课中,我们将介绍一些常用的C开发工具,并附上下载链接,帮助你选择合适的工具进行开发。 1. DEVC DEVC 是一个轻量级的C开发工具,适合初学者使用。它提供了基本的代码编辑、编译和调试功能。 下载链接: DEVC 下载 2. Visual…...
Vue 学习随笔系列十三 -- ElementUI 表格合并单元格
ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果 一、表头合并 参考: https://www.jianshu.com/p/2befeb356a31 二、单元格合并 1、示例代码 <template><div><el-…...
对于一个含有直流和交流分量的信号,如何使用示波器正确显示并测出直流电压值和交流电压峰峰值?
对于一个含有直流(DC)和交流(AC)分量的混合信号,使用示波器来正确显示和测量其直流电压值和交流电压峰峰值需要选择适当的设置和方法。以下是详细的步骤: 所需设备 示波器电压探头 步骤一:连…...
移动混合开发面试题及参考答案
目录 什么是混合开发(Hybrid App)? 混合开发(Hybrid App)与原生开发相比有什么优缺点? 优点 缺点 混合开发(Hybrid App)的兴起原因是什么? 市场竞争和成本控制需求 技术发展和资源整合 人才资源的考量 Web App、Native App 和混合开发(Hybrid App)的区别是…...
命令行工具开发秘籍:从零开始创建实用Python脚本(如何创建Python命令行工具)
文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 创建命令行工具的基础🔖 在非模块化的环境中🔖 在模块化环境中📝 打包和安装模块📝 使用命令行工具⚓️ 相关链接 ⚓️📖 介绍 📖 如何将自己的Python模块打包成一个可在命令行中直接执行的工具?…...
Python - PDF 分割成单页、PDF 转图片(PNG)
文章目录 PDF 分割成一页页的 PDFPDF 转 PNGPDF 分割成一页页的 PDF import fitz def split_pdf(pdf_path, save_dir):source_pdf = fitz.open(pdf_path)# 遍历source_pdf中的每一页,page_number从0开始计数 for idx...
【网络】套接字编程——TCP通信
> 作者:დ旧言~ > 座右铭:松树千年终是朽,槿花一日自为荣。 > 目标:TCP网络服务器简单模拟实现。 > 毒鸡汤:有些事情,总是不明白,所以我不会坚持。早安! > 专栏选自:…...
PyTorch实践-CNN-验证码识别
1 需求 GitHub - xhh890921/cnn-captcha-pytorch: 小黑黑讲AI,AI实战项目《验证码识别》 2 接口 含义 在optim.Adam接口中,lr参数代表学习率(Learning Rate)。学习率是优化算法中的一个关键超参数,它决定了在每次迭代…...
json和pb的比较
1.介绍 在数据序列化和通信领域,schema 指的是用于定义数据结构的模式或结构描述。它描述了数据的字段、类型、嵌套结构和约束,并在数据验证和解释上发挥重要作用。常见的 schema 格式包括 Protocol Buffers (proto)、JSON Schema、XML Schema 等。 Pr…...
Redis-基本了解
一、Redis 初识 Redis 是⼀种基于键值对(key-value)的NoSQL数据库,与很多键值对数据库不同的是,Redis 中的值可以是由string(字符串)、hash(哈希)、list(列表)…...
HarmonyOS第一课 06 构建更加丰富的页面-习题解析
判断题 1. Tabs组件可以通过接口传入一个TabsController,该TabsController可以控制Tabs组件进行页签切换。T 正确(True) 错误(False) 使用 this.tabsController.changeIndex(this.currentIndex); 可以切换页签 WebviewController提供了变更Web组件显示内容的接口…...
计算机的错误计算(一百四十三)
摘要 探讨 MATLAB 中 附近数的余弦函数的计算精度问题。 例1. 已知 计算 与 直接贴图吧: 另外,16位的正确值分别为 -0.3012758451921695e-7 与 -0.3765996542384011e-10(ISRealsoft 提供)。 容易看出,MATLAB的输…...
大数据之——Window电脑本地配置hadoop系统(100%包避坑!!方便日常测试,不用再去虚拟机那么麻烦)
之前我们的hadoop不管是伪分布式还是分布式,都是配置在虚拟机上,我们有的时候想要运行一些mapreduce、hdfs的操作,又要把文件移到虚拟机,又要上传hdfs,麻烦得要死,那么有的时候我们写的一些java、python的h…...
汽车固态电池深度报告
固态电池符合未来大容量二次电池发展方向,半固态电池已装车,高端长续航车型、e-VTOL 等方向对固态电池需求明确。固态电池理论上具备更高的能量密度、更好的热稳定性、更长的循环寿命等优点,是未来大容量二次电池发展方向。根据中国汽车动力…...
HTB-Cicada 靶机笔记
Cicada 靶机笔记 概述 HTB 的靶机 Cicada 靶机 靶机地址:https://app.hackthebox.com/machines/Cicada 很有意思且简单的 windows 靶机,这台靶机多次利用了信息枚举,利用不同的信息一步一步获得 root 权限 一、nmap 扫描 1)…...
Hearthstone-Script:3大核心功能带你轻松玩转炉石传说自动化![特殊字符]
Hearthstone-Script:3大核心功能带你轻松玩转炉石传说自动化!🔥 【免费下载链接】Hearthstone-Script Hearthstone script(炉石传说脚本)(2024.01.25停更至国服回归) 项目地址: https://gitco…...
2条普通程序员的靠谱出路:AI开发与出海SEO,让AI成为你的助力而非威胁
文章分析了适合普通程序员的两种新出路:转型AI开发和出海做SEO。这两种路径均满足三大条件:市场空间大、AI能赋能工作、有标准执行路径。AI开发是配合业务团队开发AI工作流,可通过前端专精→涉猎AI应用开发→魔改开源项目逐步转型。出海SEO则…...
如何在树莓派上搭建Spotify Connect客户端:Raspotify完整安装配置指南
如何在树莓派上搭建Spotify Connect客户端:Raspotify完整安装配置指南 【免费下载链接】raspotify A Spotify Connect client that mostly Just Works™ 项目地址: https://gitcode.com/gh_mirrors/ra/raspotify 想要将你的树莓派变成专业的Spotify Connect音…...
Spring Boot 与 Prometheus 监控实战
Spring Boot 与 Prometheus 监控实战 引言 大家好,今天想和大家聊聊 Spring Boot 与 Prometheus 的监控实践。作为一名 Java 架构师,我深知监控对于生产环境的重要性。Prometheus 作为云原生监控的事实标准,与 Spring Boot 的集成非常顺畅。让…...
OpenClaw+Qwen3-VL:30B:低成本智能助手方案
OpenClawQwen3-VL:30B:低成本智能助手方案 1. 为什么选择本地部署的智能助手 去年我在团队内部推动了一个小实验:用公有云的对话API搭建了一个智能助手。三个月后收到账单时,那个数字让我意识到——对于长期运行的自动化任务,按…...
AtlasOS系统性能优化指南:从诊断到维护的全方位解决方案
AtlasOS系统性能优化指南:从诊断到维护的全方位解决方案 【免费下载链接】Atlas 🚀 An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atl…...
探秘含齿根裂纹的超高自由度斜齿 - 轴承复合故障特性
含齿根裂纹——轴承内圈,外圈,滚动体的超高自由度斜齿–轴承复合故障特性分析!才用残差法突出故障时域响应,采用包络谱对故障特征频率进行分析,模型难度巨大在机械系统的复杂世界里,含齿根裂纹以及轴承内圈、外圈、滚动…...
深入解析C++菱形继承:虚基表的内存布局与优化策略
1. 菱形继承的本质问题 我第一次遇到菱形继承问题时,正在开发一个教育管理系统。当时需要设计Assistant类继承Student和Teacher,结果发现这两个父类都有从Person继承的_age成员。这导致每个Assistant对象里存了两份_age——这就是典型的数据冗余问题。 …...
Vue3-DateTime-Picker:如何构建现代化的Vue 3日期时间选择器解决方案?
Vue3-DateTime-Picker:如何构建现代化的Vue 3日期时间选择器解决方案? 【免费下载链接】vue3-date-time-picker Datepicker component for Vue 3 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-date-time-picker Vue3-DateTime-Picker作为基…...
duilib应用部署实战:基于NSIS的轻量化安装包制作
1. 为什么选择NSIS打包duilib应用 当你用duilib完成了一个漂亮的Windows桌面应用,接下来最头疼的问题就是:怎么让用户能像安装QQ那样一键安装你的程序?这就是我们今天要解决的"最后一公里"问题。 我经历过用zip压缩包发给客户&am…...
