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

最新推荐文章于 2024-08-16 18:15:23 发布
最新推荐文章于 2024-08-16 18:15:23 发布
阅读量84 收藏
点赞数 1
文章标签： vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69858813/article/details/129635000
版权
该示例展示了如何利用Vue.js创建一个自定义组件，实现弹性布局下的图片展示。每个图片块可以通过点击事件切换显示状态，通过v-show控制图片的隐藏和显示。布局部分使用了CSS的flexbox，Vue实例中定义了图片数组并进行循环渲染。
摘要由CSDN通过智能技术生成

全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: green
            }

            .content {
                width: 1920px;
                border: 1px solid red;
                margin: 0 auto;
                /*弹性布局*/
                display: flex;
                /*在住轴上的对齐方式*/
                justify-content: space-around;
                /*是否换行*/
                flex-wrap: wrap;
            }

            .item {
                width: 189px;
                height: 142px;
                margin: 3px 1px;
                background-color: #FF0000
            }
            img{
                width: 189px;
                height: 142px;
            }
        </style>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">

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

            </div>

        </div>
        <template id="fu-temp">
            <div class="item" @click="change">
                <img :src="im" v-show="show" />
            </div>
        </template>
        <script>
            Vue.component("test-div", {
                template: '#fu-temp',
                props: ["im"],
                data: function() {
                    return {
                        show: true,
                        img: "img/12346_01.gif"
                    }
                },
                methods: {
                    change: function() {
                        this.show = !this.show
                    }
                }
            });
            var vm = new Vue({
                el: "#app",
                data: {
                    imgs: ["img/12346_01.gif", "img/12346_02.gif", "img/12346_03.gif", "img/12346_04.gif", "img/12346_05.gif",
                        "img/12346_06.gif", "img/12346_07.gif", "img/12346_08.gif", "img/12346_09.gif",
                        "img/12346_10.gif", "img/12346_11.gif", "img/12346_12.gif", "img/12346_13.gif",
                        "img/12346_14.gif", "img/12346_15.gif", "img/12346_16.gif", "img/12346_17.gif",
                        "img/12346_18.gif", "img/12346_19.gif", "img/12346_20.gif", "img/12346_21.gif",
                        "img/12346_22.gif", "img/12346_23.gif", "img/12346_24.gif", "img/12346_25.gif",
                        "img/12346_26.gif", "img/12346_27.gif", "img/12346_28.gif", "img/12346_29.gif",
                        "img/12346_30.gif", "img/12346_31.gif", "img/12346_32.gif", "img/12346_33.gif",
                        "img/12346_34.gif", "img/12346_35.gif", "img/12346_36.gif", "img/12346_37.gif",
                        "img/12346_38.gif", "img/12346_39.gif", "img/12346_40.gif", "img/12346_41.gif",
                        "img/12346_42.gif", "img/12346_43.gif", "img/12346_44.gif", "img/12346_45.gif",
                        "img/12346_46.gif", "img/12346_47.gif", "img/12346_48.gif", "img/12346_49.gif",
                        "img/12346_50.gif", "img/12346_51.gif", "img/12346_52.gif", "img/12346_53.gif",
                        "img/12346_54.gif", "img/12346_55.gif", "img/12346_56.gif", "img/12346_57.gif",
                        "img/12346_58.gif", "img/12346_59.gif", "img/12346_60.gif", "img/12346_61.gif",
                        "img/12346_62.gif", "img/12346_63.gif", "img/12346_64.gif", "img/12346_65.gif",
                        "img/12346_66.gif", "img/12346_67.gif", "img/12346_68.gif", "img/12346_69.gif",
                        "img/12346_70.gif", "img/12346_71.gif", "img/12346_72.gif", "img/12346_73.gif",
                        "img/12346_74.gif", "img/12346_75.gif", "img/12346_76.gif", "img/12346_77.gif",
                        "img/12346_78.gif", "img/12346_79.gif", "img/12346_80.gif", "img/12346_81.gif",
                        "img/12346_82.gif", "img/12346_83.gif", "img/12346_84.gif", "img/12346_85.gif",
                        "img/12346_86.gif", "img/12346_87.gif", "img/12346_88.gif", "img/12346_89.gif",
                        "img/12346_90.gif", "img/12346_91.gif", "img/12346_92.gif", "img/12346_93.gif",
                        "img/12346_94.gif", "img/12346_95.gif", "img/12346_96.gif", "img/12346_97.gif",
                        "img/12346_98.gif", "img/12346_99.gif", "img/12346_100.gif"
                    ]

                }
            })
        </script>

    </body>
</html>

效果图

未点击状态

点击状态

  • 找出你想用的图片，将它切成任意等分，我这里切成了10*10等分（切图建议使用ps工具）

  • 也可以使用文章中的图片点我

首先我们引入Vue.js

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

布局部分

布局方面我们创建两个div，和一个自定义组件

imgs代表循环次数后面我们

<div id="app">

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

            </div>

        </div>

css部分，布局方面我们使用弹性布局，并设置换行

<style type="text/css">
            body {
                background-color: green
            }

            .content {
                width: 1920px;
                border: 1px solid red;
                margin: 0 auto;
                /*弹性布局*/
                display: flex;
                /*在住轴上的对齐方式*/
                justify-content: space-around;
                /*是否换行*/
                flex-wrap: wrap;
            }

            .item {
                width: 189px;
                height: 142px;
                margin: 3px 1px;
                background-color: #FF0000
            }
            img{
                width: 189px;
                height: 142px;
            }
        </style>

自定义组件的使用

1.@click：完成盒子点击事件的效果

2.v-show：实现点击盒子进行show的取反

<template id="fu-temp">
            <div class="item" @click="change">
                <img :src="im" v-show="show" />
            </div>
        </template>

Vue部分

自定义组件

1.props：自定义属性

2.data：图片的地址和显示

3.methods：此方法为点击盒子进行show的取反，实现隐藏图片的效果

4.template：定义组件长什么样子

Vue.component("test-div", {
                template: '#fu-temp',
                props: ["im"],
                data: function() {
                    return {
                        show: true,
                        img: "img/12346_01.gif"
                    }
                },
                methods: {
                    change: function() {
                        this.show = !this.show
                    }
                }
            });

Vue实例化

1.el：作用范围

2.data:定义一个储存路径的数组

3.imgs里面放几张图就循环几次

var vm = new Vue({
                el: "#app",
                data: {
                    imgs: ["img/12346_01.gif", "img/12346_02.gif", "img/12346_03.gif", "img/12346_04.gif", "img/12346_05.gif",
                        "img/12346_06.gif", "img/12346_07.gif", "img/12346_08.gif", "img/12346_09.gif",
                        "img/12346_10.gif", "img/12346_11.gif", "img/12346_12.gif", "img/12346_13.gif",
                        "img/12346_14.gif", "img/12346_15.gif", "img/12346_16.gif", "img/12346_17.gif",
                        "img/12346_18.gif", "img/12346_19.gif", "img/12346_20.gif", "img/12346_21.gif",
                        "img/12346_22.gif", "img/12346_23.gif", "img/12346_24.gif", "img/12346_25.gif",
                        "img/12346_26.gif", "img/12346_27.gif", "img/12346_28.gif", "img/12346_29.gif",
                        "img/12346_30.gif", "img/12346_31.gif", "img/12346_32.gif", "img/12346_33.gif",
                        "img/12346_34.gif", "img/12346_35.gif", "img/12346_36.gif", "img/12346_37.gif",
                        "img/12346_38.gif", "img/12346_39.gif", "img/12346_40.gif", "img/12346_41.gif",
                        "img/12346_42.gif", "img/12346_43.gif", "img/12346_44.gif", "img/12346_45.gif",
                        "img/12346_46.gif", "img/12346_47.gif", "img/12346_48.gif", "img/12346_49.gif",
                        "img/12346_50.gif", "img/12346_51.gif", "img/12346_52.gif", "img/12346_53.gif",
                        "img/12346_54.gif", "img/12346_55.gif", "img/12346_56.gif", "img/12346_57.gif",
                        "img/12346_58.gif", "img/12346_59.gif", "img/12346_60.gif", "img/12346_61.gif",
                        "img/12346_62.gif", "img/12346_63.gif", "img/12346_64.gif", "img/12346_65.gif",
                        "img/12346_66.gif", "img/12346_67.gif", "img/12346_68.gif", "img/12346_69.gif",
                        "img/12346_70.gif", "img/12346_71.gif", "img/12346_72.gif", "img/12346_73.gif",
                        "img/12346_74.gif", "img/12346_75.gif", "img/12346_76.gif", "img/12346_77.gif",
                        "img/12346_78.gif", "img/12346_79.gif", "img/12346_80.gif", "img/12346_81.gif",
                        "img/12346_82.gif", "img/12346_83.gif", "img/12346_84.gif", "img/12346_85.gif",
                        "img/12346_86.gif", "img/12346_87.gif", "img/12346_88.gif", "img/12346_89.gif",
                        "img/12346_90.gif", "img/12346_91.gif", "img/12346_92.gif", "img/12346_93.gif",
                        "img/12346_94.gif", "img/12346_95.gif", "img/12346_96.gif", "img/12346_97.gif",
                        "img/12346_98.gif", "img/12346_99.gif", "img/12346_100.gif"
                    ]

                }
            })

好的到这里我们的项目算是完成了，祝大家生活愉快！！！

打代码的上分王
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【分页表格】Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
06-11 1351
自定义分页表格组件，是基于vue2.6.14、前端组件是element-ui、jQuery3.2.1的基础之上实现的，其中由于使用了slot具名插槽，slot具名插槽是vue2.6.x版本之后才支持的功能，所以需要保证vue.js的版本在2.6.x之上，这篇文章使用的【vue.js版本是vue2.6.14】。到此，自定义分页表格就完成啦。
使用vue等组件完成图片点击
qq_65771833的博客
03-21 1207
项目分成两个部分，一部分样式一部分内容。里面使用了组件，布局等。
Vue3自定义组件（一）
weixin_48288941的博客
09-01 853
错误写法：（这样写会导致页面加载时就自动调用editData(row)，然后button的onclick方法失效）,部分组件达不到自己的预期，但是又是通用的，所以这时候就想整个自定义组件了；这样一个简单的自定义组件就完成了，先整个简单的，后面再慢慢加其他功能吧。自己用vite创建了一个前端项目，UI使用的是。CommonTable.vue 是自定义组件的主体内容。props.ts是用于自定义组件参数。index.ts是用于组件批量导出。
Vue组件解析：自定义表格组件ByTable详解
weixin_48723799的博客
06-19 3357
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 9121
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
vue自定义组件click点击事件无效处理办法
sinat_29243257的博客
07-09 4250
在Vue项目中，通常需要用到封装组件，但是在给组件添加click事件时却发现无法执行，以下是常用的两种解决方案： 1、最简单的做法，添加 .native修饰，对于组件要求不高的情况下，使用此方法最为直接方便； 2、如果要求比较高，那么就试试添加 listeners： 首先给自定义组件绑定监听事件 <div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div> 在自定义组件内添加 computed: { clickL
Vue中的可自定义表格组件
cuk5239的博客
07-28 3614
表 (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 下载源...
vue3组件封装系列-表格及分页
sha虫剂的博客
04-23 987
第二弹来了，不知道有多少人是看过我的第一篇文章的，今天本来是没想更新的，但是现在项目正在验收期准备上线，闲着还不如来发发文。虽然这两天可能会高产，下一次高产就不知道是什么时候了。话不多说，先上图。上面就是效果图了，基于觉得还行的可以继续看下去。
vue 自定义表格
YUlangML的博客
11-26 2689
数据部分 没用的地方我没挑出来。js部分没用的地方没调出来。dom部分 主要用的是。
Vue实现自定义组件数据双向绑定
米斯特曹
09-22 3784
前言：使用Vue进行项目开发的时候，通常会用到Vue提供的组件化机制封装开发所需要的组件以达到开发项目的需求，大到项目中的一快筛选模块、数据表格，小到分页面板、级联面板、乃至一个小小的button按钮，之所以组件化也是为提高我们实际的开发效率，那到底什么是组件化呢？参考一张尤玉溪大大的图就会很快明白； 简单来讲一个完整项目会分为很多部分，每个部分都会有各自独立的功能，每个独立的功能组件又是由...
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
08-29
在Vue.js框架中，封装自定义组件是提高代码复用性和项目可维护性的重要手段。本实例中，我们探讨的是一个名为“tabal列表编辑单元格”的组件，它允许用户在表格的单元格中进行编辑操作。下面将详细介绍这个组件的...
vue3 表格组件封装复用
02-27
本项目专注于实现一个可编辑的表格组件，旨在帮助开发者更好地理解和应用Vue3的组件化思想，提升面试竞争力，并优化开发流程。以下是对这个表格组件封装过程的详细阐述： 1. **Vue3基础知识**：Vue3是Vue.js的最新...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
01-07
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道…，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。 官网：...
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 302
【代码】Vue项目-Table添加Form表单校验。
el-checkbox 状态不更新
bao
08-13 285
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
vue 实现上浮气泡效果
m0_68964998的博客
08-13 262
1.用 li 来做每个气泡。
Vue 生命周期详解含demo、面试常问问题案例
最新发布
qq_34419312的博客
08-16 820
Vue 生命周期详解、面试常问问题案例 含 demo
vue自定义组件表格
05-30
好的，下面是一个简单的示例代码，可以帮助你自定义一个表格组件： ```vue <template> <table> <thead> <tr> <th v-for="header in headers" :key="header">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index"> <td v-for="(item, key) in row" :key="key">{{ item }}</td> </tr> </tbody> </table> </template> <script> export default { props: { headers: { type: Array, required: true }, rows: { type: Array, required: true } } } </script> ``` 在这个组件中，我们使用了两个 props：headers 和 rows。headers 表示表格的表头，是一个字符串数组；rows 表示表格的数据行，是一个对象数组。在组件的模板中，我们使用了 v-for 指令来渲染表头和数据行。在表头中，我们使用了 v-for 和 :key 指令来循环渲染表头中的每一个单元格。在数据行中，我们使用了 v-for 和 :key 指令来循环渲染每一行中的每一个单元格。 你可以在父组件中使用这个组件来渲染一个自定义表格： ```vue <template> <div> <my-table :headers="headers" :rows="rows"></my-table> </div> </template> <script> import MyTable from './MyTable.vue' export default { components: { MyTable }, data () { return { headers: ['Name', 'Age', 'Gender'], rows: [ { name: 'Alice', age: 25, gender: 'Female' }, { name: 'Bob', age: 30, gender: 'Male' }, { name: 'Charlie', age: 20, gender: 'Male' } ] } } } </script> ``` 在这个父组件中，我们通过调用 MyTable 组件，并传入 headers 和 rows 两个 props 来渲染一个自定义表格。注意，父组件中的数据格式必须符合 MyTable 组件 props 的要求，即 headers 必须是一个字符串数组，rows 必须是一个对象数组。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值