使用Vue及自定义组件完成10×10图片表格的点击效果

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量73 收藏
点赞数
文章标签： vue.js javascript 前端 html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyxiao_/article/details/129672069
版权
该代码示例展示了如何使用Vue.js创建一个布局，将图片切割后以10x10的方式展示，并实现点击图片后图片的显示和隐藏功能。通过弹性布局对图片进行等分排列，利用v-for指令和v-show指令处理数据绑定和动态显示。
摘要由CSDN通过智能技术生成

  1. 将图片切割成10×10的图片，保存在img文件中。（可使用PS切割为自己所需的个数）

  1. 导入并连接Vue.js文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

  1. 写两个盒子：一个id为app,在id=“app”的盒子里再写一个class=“content”的盒子。

        <div id="app">
            <div class="content">
                <test-div v-for="i in imgs" :im="i"></test-div>
            </div>
        </div>

  1. 为div设置样式。

         <style type="text/css">
            .content {
                width: 850px;
                border: 1px solid pink;
                margin: 0 auto;
                /* 使用弹性布局 */
                display: flex;
                /* 等分每个内部盒子的间距 */
                justify-content: space-around;
                /* wrap为弹性布局的自动换行,no-warp为不自动换行(默认为否) */
                flex-wrap: wrap;
            }

            .item {
                width: 80px;
                height: 45px;
                margin: 2px 0px;
                background-color: #ccc;
            }

            img {
                width: 80px;
                height: 45px;
            }
        </style>

5.保存图片，实现图片点击时的显示和隐藏。

<body>
        <div id="app">
            <div class="content">
                <!-- v-for是Vue的循环指令 -->
                <test-div v-for="i in imgs" :im="i"></test-div>
            </div>
        </div>
        <template id="temp">
            <!-- 为每个图片绑定click点击事件 -->
            <div class="item" @click="change">
                <!-- v-show作用是根据表达式的真假来显示元素和隐藏，是响应式的 -->
                <img :src="im" v-show="show" />
            </div>
        </template>
        <script>
            // 注册一个全局组件
            Vue.component("test-div", {
                template: '#temp',
                
                props: ["im"],
                data: function() {
                    return {
                        // show属性为true时显示图片,为false时隐藏不显示图片
                        show: true,
                        img:"img/03087bf40ad162d90818719514dfa9ec8b13cd41_01.jpg"
                    }
                },
                // 定义方法调用，实现图片点击时的显示和隐藏
                methods: {
                    change: function() {
                        //    !为取反，把每次调用的数据取反，实现图片的显示和隐藏
                        this.show = !this.show
                    }
                }
            });
            // 创建Vue实例对象
            var vm = new Vue({
                el: "#app",
                // 存储图片,调用输出
                data: {
                    imgs: ["img/03087bf40ad162d90818719514dfa9ec8b13cd41_01.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_02.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_03.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_04.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_05.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_06.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_07.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_08.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_09.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_10.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_11.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_12.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_13.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_14.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_15.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_16.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_17.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_18.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_19.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_20.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_21.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_22.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_23.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_24.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_25.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_26.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_27.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_28.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_29.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_30.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_31.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_32.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_33.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_34.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_35.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_36.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_37.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_38.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_39.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_40.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_41.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_42.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_43.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_44.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_45.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_46.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_47.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_48.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_49.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_50.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_51.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_52.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_53.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_54.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_55.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_56.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_57.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_58.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_59.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_60.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_61.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_62.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_63.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_64.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_65.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_66.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_67.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_68.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_69.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_70.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_71.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_72.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_73.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_74.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_75.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_76.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_77.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_78.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_79.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_80.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_81.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_82.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_83.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_84.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_85.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_86.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_87.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_88.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_89.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_90.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_91.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_92.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_93.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_94.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_95.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_96.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_97.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_98.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_99.jpg",
                            "img/03087bf40ad162d90818719514dfa9ec8b13cd41_100.jpg"
                    
                    ]

                }
            })
        </script>

    </body>

最后运行看看效果吧！

wyxiao_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【分页表格】Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
06-11 1357
自定义分页表格组件，是基于vue2.6.14、前端组件是element-ui、jQuery3.2.1的基础之上实现的，其中由于使用了slot具名插槽，slot具名插槽是vue2.6.x版本之后才支持的功能，所以需要保证vue.js的版本在2.6.x之上，这篇文章使用的【vue.js版本是vue2.6.14】。到此，自定义分页表格就完成啦。
CSS3圆角（border-radius）的用法
热门推荐
集结号
07-22 1万+
前缀例1例2：无边框书写顺序其它支持性 值：半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox-webkit(例如：-webkit-border-radius)用于Safari和Chrome。 例1 #round { padding:10px; width:300px; height:50px; bor
Vue3自定义组件（一）
weixin_48288941的博客
09-01 875
错误写法：（这样写会导致页面加载时就自动调用editData(row)，然后button的onclick方法失效）,部分组件达不到自己的预期，但是又是通用的，所以这时候就想整个自定义组件了；这样一个简单的自定义组件就完成了，先整个简单的，后面再慢慢加其他功能吧。自己用vite创建了一个前端项目，UI使用的是。CommonTable.vue 是自定义组件的主体内容。props.ts是用于自定义组件参数。index.ts是用于组件批量导出。
Vue组件解析：自定义表格组件ByTable详解
weixin_48723799的博客
06-19 3378
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 9359
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
使用vue等组件完成图片点击
qq_65771833的博客
03-21 1217
项目分成两个部分，一部分样式一部分内容。里面使用了组件，布局等。
Vue中的可自定义表格组件
cuk5239的博客
07-28 3616
表 (prot-table) A customizable table component in vue. Intended to be used as a web-component or as a component in vue projects. vue中的可定制表组件。 旨在用作Web组件或vue项目中的组件。 View Demo 查看演示 Download Source 下载源...
vue自定义组件click点击事件无效处理办法
sinat_29243257的博客
07-09 4264
在Vue项目中，通常需要用到封装组件，但是在给组件添加click事件时却发现无法执行，以下是常用的两种解决方案： 1、最简单的做法，添加 .native修饰，对于组件要求不高的情况下，使用此方法最为直接方便； 2、如果要求比较高，那么就试试添加 listeners： 首先给自定义组件绑定监听事件 <div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div> 在自定义组件内添加 computed: { clickL
vue 自定义表格
YUlangML的博客
11-26 2697
数据部分 没用的地方我没挑出来。js部分没用的地方没调出来。dom部分 主要用的是。
自定义vue组件--实现多图片上传
Instanceztt的博客
07-07 1859
文件上传在日常的开发中是一项基本的操作,在前端中得以广泛的使用,因此将其封装成一个组件显得极为重要,本文主要是基于vue实现的自定义多图片上传组件. 三 后端代码实现 根据自己的后端代码具体实现,这里不做过多阐述 注意事项:具体实现逻辑如下: 查看转换结果......
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
08-29
在Vue.js框架中，封装自定义组件是提高代码复用性和项目可维护性的重要手段。本实例中，我们探讨的是一个名为“tabal列表编辑单元格”的组件，它允许用户在表格的单元格中进行编辑操作。下面将详细介绍这个组件的...
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
01-07
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道…，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。 官网：...
vue3 表格组件封装复用
02-27
我们可以创建自定义的逻辑函数，然后在多个组件中导入和使用，以实现表格的可编辑功能。 3. **表格组件设计**：首先，我们需要设计表格的基本结构，包括列定义、数据模型、操作列等。可以定义一个表格组件，接收...
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 269
【代码】基于vue3和audio封装的简易音频播放器。
vue ref和reactive区别
最新发布
灰海
08-25 240
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1143
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
实现el-table 两列多选框且不可同时勾选，可单选，可多选
weixin_52740695的博客
08-21 305
审核通过可批量处理，可单选；审核不通过，单选，但两者不可同时勾选☑️。
vue自定义组件表格
05-30
你可以在父组件中使用这个组件来渲染一个自定义表格： ```vue <my-table :headers="headers" :rows="rows"></my-table> import MyTable from './MyTable.vue' export default { components: { MyTable ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值