综合案例 - 商品列表

文章目录

    • 需求说明
      • 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.rhkb.cn/news/248434.html

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

相关文章

工业交换机的详细介绍

工业交换机的详细介绍

工业交换机是一种用于工业领域的网络通信设备&#xff0c;其设计专注于满足工业环境下的高可靠性、高带宽和低延迟的要求。与传统的家用交换机相比&#xff0c;工业交换机具有更强的耐高温、抗震动、抗干扰等特性&#xff0c;能够适应恶劣的工业环境。同时&#xff0c;工业交换…
阅读更多...
宠物处方单子怎么开，宠物门诊处方管理软件教程

宠物处方单子怎么开，宠物门诊处方管理软件教程

宠物处方单子怎么开&#xff0c;宠物门诊处方管理软件教程 一、前言 宠物店电子处方软件操作教程以 佳易王宠物店电子处方管理系统V16.0为例说明。 如图&#xff0c;在开处方的时候&#xff0c;点击导航栏菜单&#xff0c;兽医处方按钮 点击 增加新单&#xff0c;填写宠物及…
阅读更多...
大模型重塑车载语音交互：赛道巨头如何引领新周期？

大模型重塑车载语音交互：赛道巨头如何引领新周期？

车载语音交互赛道正进入新一轮竞争周期。 高工智能汽车注意到&#xff0c;传统车载语音交互赛道当前基本已进入成熟期&#xff0c;主要为任务型助手&#xff0c;包括从单轮对话到多轮对话&#xff0c;单音区到多音区&#xff0c;从单一的导航、多媒体娱乐等座舱功能扩展智能驾…
阅读更多...
正则表达式（RE）

正则表达式（RE）

什么是正则表达式 正则表达式&#xff0c;又称规则表达式&#xff08;Regular Expression&#xff09;。正则表达式通常被用来检索、替换那些符合某个规则的文本 正则表达式的作用 验证数据的有效性替换文本内容从字符串中提取子字符串 匹配单个字符 字符功能.匹配任意1个…
阅读更多...
在centos 7 中 安装 配置 并 远程连接 MySQL5.7

在centos 7 中 安装 配置 并 远程连接 MySQL5.7

目录 安装MySQL 1.卸载CentOS7系统自带的mariadb 2.安装依赖库 3.上传MySQL并解压 4.安装MySQL 配置MySQL 1.修改登录密码 2.修改字符集 3.配置远程连接 前言&#xff1a; 安装MySQL版本&#xff1a;mysql-5.7.30-1.el7.x86_64.rpm-bundle 文件需求后台私信 以下7条为…
阅读更多...
（蓝桥杯每日一题）求最长回文串

（蓝桥杯每日一题）求最长回文串

问题描述 给出一个长度为 n 的小写字符串&#xff0c;求一个最长的子串 S&#xff0c;满足SXY,X&#xff0c;Y>1&#xff0c;且X,Y 均为回文串。 输入格式 输入包括一行: 第一行是一个长度为 n 的小写字符串。 输出格式 输出包括一行&#xff1a; 一行一个整数&#xff0c;表…
阅读更多...
STM32连接阿里云物联网平台

STM32连接阿里云物联网平台

文章目录 引言一、STM32连接阿里云物联网平台思路二、ESP8266烧录固件三、使用AT指令连接阿里云物联网平台四、STM32环形串口缓冲区驱动程序五、STM32连接阿里云驱动程序 引言 连续写了两篇关于阿里云连接的文章&#xff0c;都是使用Arduino ESP8266 & Arduino ESP32的方式…
阅读更多...
关于如何将Win幻兽帕鲁服务端存档转化为单人本地存档的一种方法(无损转移)

关于如何将Win幻兽帕鲁服务端存档转化为单人本地存档的一种方法(无损转移)

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 **起因&#xff1a;**最近大火的开放世界缝合体游戏幻兽帕鲁的大火也是引起了博主的注意&#xff0c;然后博主和周边小伙伴纷纷入手&#xff0c;博主也是利…
阅读更多...
安装好IntelliJ IDEA点击无反应,如何解决配置文件不一致导致的启动问题

安装好IntelliJ IDEA点击无反应,如何解决配置文件不一致导致的启动问题

在我们的开发生涯中&#xff0c;遇到IDE工具出现问题是在所难免的。最令人头疼的莫过于&#xff0c;你的IDEA(IntelliJ IDEA)无法启动&#xff0c;而且没有任何错误提示。这篇文章将详细讲解如何解决IntelliJ IDEA 2023.3.3版本启动失败的问题&#xff0c;这个问题可能也适用于…
阅读更多...
LeetCode.2808. 使循环数组所有元素相等的最少秒数

LeetCode.2808. 使循环数组所有元素相等的最少秒数

题目 题目链接 分析 我们最终形成的数组一定是当前数组nums 中的一个数字。 所以我们的想法就是枚举数组 nums 中的所有数字&#xff0c;取最小值。 题目告诉我们每一秒都可以向左右扩散一位&#xff0c;那么多个相同的 x 同时扩散&#xff0c;扩散完整个数组耗时就取决于两…
阅读更多...
使用.NET6 Avalonia开发跨平台三维应用

使用.NET6 Avalonia开发跨平台三维应用

本文介绍在Vistual Studio 2022中使用Avalonia和集成AnyCAD Rapid AvaloniaUI三维控件的过程。 0 初始化环境 安装Avalonia.Templates dotnet new install Avalonia.Templates若之前安装过可忽略此步骤。 1 创建项目 选择创建AvaloniaUI项目 选一下.NET6版本和Avalonia版…
阅读更多...
文件上传之大文件分块上传进度控制处理

文件上传之大文件分块上传进度控制处理

在分块上传内容结束以后的事件监听&#xff0c;我们会实现 unlinkSync 删除临时文件操作&#xff0c;那么试想一下&#xff0c;在这个事件监听中&#xff0c;我们是否可以通过totalChunks以及currentChunk获取当前上传的进度情况呢&#xff1f; 后端 upload上传接口&#xff…
阅读更多...
学习嵌入式的第十二天-------二维数组函数的调用和指针的运算

学习嵌入式的第十二天-------二维数组函数的调用和指针的运算

二维数组函数调用 输入设备-------cpu------输出设备 | V 存储器 总线&#xff1a; 总线宽度&#xff1a;32位或64位 &#xff08;1.数据总线2.控制总线3.地址总线&#xff09; 练习&#xff1a; 定义一个二维整型数组&#xff0c;实现一个函数…
阅读更多...
KAFKA高可用架构涉及常用功能整理

KAFKA高可用架构涉及常用功能整理

KAFKA高可用架构涉及常用功能整理 1. kafka的高可用系统架构和相关组件2. kafka的核心参数2.1 常规配置2.2 特殊优化配置 3. kafka常用命令3.1 常用基础命令3.1.1 创建topic3.1.2 获取集群的topic列表3.1.3 获取集群的topic详情3.1.4 删除集群的topic3.1.5 获取集群的消费组列表…
阅读更多...
尝试搭建域

尝试搭建域

使用window 7 作为dmz 主机 server_2008 作为 预控 前提两台主机都在同一个LAN 下&#xff08;设置一个LAN 区域&#xff09;&#xff0c;同样防火墙关闭状态 首先搞定server 2008 中的域 1. 在计算机属性中选择更改设置中将主机名修改一下&#xff1a; 2. 在server 2008 中…
阅读更多...
代码随想录 Leetcode222.完全二叉树的节点个数

代码随想录 Leetcode222.完全二叉树的节点个数

题目&#xff1a; 代码&#xff08;首刷自解 2024年1月30日&#xff09;&#xff1a; class Solution { public:int countNodes(TreeNode* root) {int res 0;if (root nullptr) return res;queue<TreeNode*> deque;TreeNode* cur root;deque.push(cur);int size 0;w…
阅读更多...
编译opencv4.6问题汇总，第三方软件包见我发的资源

编译opencv4.6问题汇总，第三方软件包见我发的资源

win10系统 python3.8.2&#xff0c;cmake-3.15.5-win64-x64&#xff0c;opencv4.6 编译方式见&#xff1a;OpenCV的编译 - 知乎 本文主要总结问题。赠人玫瑰手留余香。 问题1 Problem with installing OpenCV using Visual Studio and CMake (error code: MSB3073) 解决方法…
阅读更多...
Java 字符串 07 练习-手机号屏蔽、身份证号信息查看，游戏骂人敏感词替换

Java 字符串 07 练习-手机号屏蔽、身份证号信息查看，游戏骂人敏感词替换

注意点&#xff1a;只有返回值才是被截取的小串&#xff0c;所以需要有一个变量去承接它&#xff1b; 自己写的代码&#xff1a; import java.util.Scanner; public class practice {public static void main(String[] args) {Scanner input new Scanner(System.in);String …
阅读更多...
Walrus 实用教程｜Walrus + Gitlab，打通CI/CD 自动化交付！

Walrus 实用教程｜Walrus + Gitlab，打通CI/CD 自动化交付！

Walrus file 是 Walrus 0.5 版本推出的新功能&#xff0c;用户可以通过一个非常简洁的 YAML 描述应用或基础设施资源的部署配置&#xff0c;然后通过 Walrus CLI 执行 walrus apply或在 Walrus UI 上进行import&#xff0c;将 Walrus file 提交给 Walrus server&#xff0c;由 …
阅读更多...
【Python笔记-设计模式】单例模式

【Python笔记-设计模式】单例模式

一、说明 单例是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。 (一) 解决问题 维护共享资源&#xff08;数据库或文件&#xff09;的访问权限&#xff0c;避免多个实例覆盖同一变量&#xff0c;引发程序崩溃。 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023