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

最新推荐文章于 2024-07-13 11:25:08 发布
最新推荐文章于 2024-07-13 11:25:08 发布
阅读量240 收藏
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68749650/article/details/129655813
版权

步骤：先切割图片，导入图片数据到img文件，导入并连接vue.js，写div标签放图片，用弹性布局快速定位图片，使用组件实现点击效果

1.将图片分割成需要的大小和个数（可以使用ps的切片工具，在存储图片的时候注意图片的命名）

2.导入并连接vue.js文件，将图片导入img文件

b479647bad974708a70dc937e99d2e2c.png

3.我们先写一个div标签，给一个id为app,然后再id为app的div标签中再写一个div标签，然后class为content，content里边为放置的图片

510dc685a8da488ca5584c46d5b4bf84.png

4.为div设置样式的时候可以采用弹性布局，可以快速很方便的将图片排列整齐

1f63519e724048e188ac46a83077688f.png

5.可以通过给每一个图片所放置的div设置一个@click事件和v-show指令来实现图片点击后隐藏和显示的效果，但当我们有很多图片的时候就要写很多重复的代码，页面不整洁还很麻烦.我们可以通过使用组件来解决代码的繁琐

1a2acfb3b3f4444b891e260e4c12dce0.png

a9de7e6510f24a5ab3823d1c43d95aa4.png

6.用v-for指令将父组件中imgs属性中的图片数据遍历并传送给子组件im，然后子组件用props属性来接收

cad32939f8474a669cbc50f60297d2c0.png

7.在template标签中就为每一个图片添加了click事件和v-show指令，使用组件后我们把代码变简洁了

54abe3b3b5e34425a6e4578d0e087fed.png

注：重点难点（图片的切割，图片的样式布局，如何实现图片点击后显示和隐藏效果，组件的使用）

图片点击后显示和隐藏主要通过这个表达式

eefdcf3048f54b69a8bb2890c5c827f2.png

让我们来看看运行效果吧！

fb0836be513240e68280338117056b8d.gif

 

 

好气哦.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
使用 Vue 及自定义组件完成 10x10 图片表格的点击效果
m0_46209138的博客
03-17 173
使用 Vue 及自定义组件完成 10x10 图片表格的点击效果
【使用 Vue 及自定义组件完成 10x10 图片表格的点击效果】
m0_74167439的博客
03-23 82
总体思路：先使用PS切割出10×10的图片并将其导入到img文件中，导入并连接vue.js，设定div的样式，写div标签放入图片并使用一些特殊布局来定位图片，使用方法更加简化的组件来实现图片点击效果。5.给每一个图片所放置的div设置一个@click事件和v-show指令来实现图片点击后隐藏和显示的效果，但由于10×10的图片过多，导致要写很多重复繁琐的代码，所以使用组件来简化代码。1.使用PS将图片分割成10×10的数量，并将切片好的文件导入img文件中。3.设置div的样式，使用弹性布局等排布图片。
自定义Vue组件打包、发布到npm及使用教程
10-16
主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
使用Vue自定义数字键盘组件(体验度极好)
08-28
"使用Vue自定义数字键盘组件，提高用户体验" 在 Vue 开发中，输入金额是一种常见的交互场景。然而，用原生的 input 进行金额输入体验很不好。为了提高用户体验，小编使用 Vue 自定义了数字键盘组件。本文将详细介绍...
Vue的自定义组件不能使用click方法的解决
10-15
在Vue.js中，自定义组件是构建复杂应用的关键部分，它们允许我们将UI的各个部分封装成可重用的模块。然而，在使用自定义组件时，可能会遇到无法直接使用`click`事件的问题。本文将深入探讨这个问题及其解决方案。 ...
通过 tomcat 让手机访问到电脑写的 html 网页
m0_75138009的博客
07-10 687
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1432
title>充电效果
HTML(29)——立体呈现
m0_74386799的博客
07-09 591
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。
HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
forevercui的博客
07-09 1267
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式align-items：flex-start | flex-end | center | baseline | stretch （单行）
初识HTML
Dxito_的博客
07-09 916
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
html（抽奖设计）
2301_81704123的博客
07-13 186
可以根据自己的喜好设计抽奖内容，或者修改颜色。
如何使用HTML和JavaScript读取文件夹中的所有图片并显示RGB范围
weixin_74075792的博客
07-09 794
我们将创建一个网页应用，允许用户选择一个包含图片的文件夹。然后，应用会读取该文件夹中的所有图片，显示每张图片，并计算和显示每张图片的RGB范围（最小值和最大值）。确保将HTML代码保存为index.html文件，将JavaScript代码保存为script.js文件，并确保它们在同一目录下。然后用浏览器打开index.html文件即可测试。如果你有任何问题或建议，请在评论区留言。祝你编码愉快！
Python爬虫教程第5篇-使用BeautifulSoup查找html元素几种常用方法
分享技术，记录思考和感悟
07-11 367
汇总介绍下查询html元素的一些方式，比如通过id查找、通过xpath查找、通过css查找等方式的最佳实践。
javaweb学习day5--《HTML篇》Springboot的模块创建、HTML的相关知识点详解
2302_80329073的博客
07-11 1038
从今天开始，就要启动后端的学习了，Springboot会贯穿到底，一定要跟着小编严谨的去搭建Springboot环境，依赖添加的过程可能需要2分钟左右，读者们要耐心等待一下，搭建好Springboot之后才算正式的开始web后端的学习，http相关的内容仅供了解。 如果大家准备好的话那就一起开启我们的后端之旅。
在HTML中使用JavaScript
zhugedali_的博客
07-13 415
两数之和为：<span id="sumResult"></span>
【Js】导出 HTML 为 Word 文档
最新发布
smart_dream
07-13 220
html-docx-js是一个 JavaScript 库，用于将 HTML 内容转换为 Word 文档的格式。它提供了简单的 API，使得在浏览器环境中可以轻松地生成并导出 Word 文档。1、先引入这两个库：可以通过 npm 安装，也可以直接使用 CDN 引入，还可以下载到本地项目引用。2、创建一个导出方法，该方法接受 HTML 内容作为参数，并将其导出为 Word 文档。3、在应用中调用上述导出方法，并传入想导出的 HTML 内容。
【VS2019】安装下载库HtmlAgilityPack，可解析 HTML （图文详情）
Wynne的博客
07-09 422
【WCF】安装下载库HtmlAgilityPack，可解析 HTML
vue3自定义组件使用
08-26
Vue 3 的自定义组件使用很简单。下面是一个简单的示例： 首先，在你的 Vue 项目中创建一个自定义组件的文件，例如 `MyComponent.vue`。 然后，在该文件中，你需要定义一个 Vue 组件。可以使用 `<template>` 标签来定义组件的 HTML 模板，使用 `<script>` 标签来定义组件的 JavaScript 代码，以及使用 `<style>` 标签来定义组件的 CSS 样式。 例如，`MyComponent.vue` 文件内容如下所示： ```vue <template> <div> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> </template> <script> export default { props: { title: String, content: String, }, } </script> <style scoped> h2 { color: blue; } p { font-size: 16px; } </style> ``` 接下来，在你要使用该自定义组件的地方，例如 `App.vue` 文件中，你需要在模板中引入该组件。使用 `<my-component>` 标签来引用该组件，并传递相应的属性值。 例如，`App.vue` 文件内容如下所示： ```vue <template> <div> <my-component title="Hello" content="Welcome to my custom component!"></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, } </script> <style> /* 可以在这里定义 App.vue 的样式 */ </style> ``` 现在，你就可以在你的 Vue 应用中使用自定义组件了。当你运行应用时，`MyComponent` 组件将会在页面上渲染出来，并显示相应的属性值。 希望以上内容对你有所帮助！如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值