使用Vue及自定义插件实现10×10图片的点击效果

最新推荐文章于 2024-05-16 21:14:02 发布

少喝可乐.158

最新推荐文章于 2024-05-16 21:14:02 发布

阅读量169

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_68402956/article/details/129689597

版权

本文介绍了如何使用Vue和自定义插件创建一个10×10的图片网格，并实现点击效果。首先通过Photoshop将图片切片，然后在Vue组件中利用v-for遍历图片，结合@click和v-show处理点击事件。最后，通过样式调整完成整体布局。

摘要由CSDN通过智能技术生成

文章目录

教程

源代码

所需工具

HBuilder

vue.js插件

一.大体思路

1.用ps软件将照片进行切片

2.使用容器来装入变量，使用vue组件来对图片进行点击效果和变量的引入两者的实现（dom节点）

3.用style标签来规整图片的规格

二.

第一步：

用ps软件对照片进行10×10的切片

第二步：

将vue.js插件引出js文件夹中并在html中引用

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

少喝可乐.158

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用Vue及自定义插件实现10×10图片的点击效果

使用vue及自定义插件对照片10×10的点击效果
复制链接

扫一扫

Vue2Leaflet（基于vue的leafLet）封装的图片打点功能移动端与pc端同样适用【自用】

qq_37899792的博客

04-20

757

安装leaflet cnpm i leaflet -S 安装vue2-leaflet cnpm i vue2-leaflet -S main.js中引入 Vue.config.productionTip=false import'leaflet/dist/leaflet.css'; <comment> 平面图标记传参说明 ...

vue 项目引入 v-viewer ，图片点击预览以及移动等功能

weixin_42197834的博客

05-22

2044

1 条评论您还未登录，请先登录后发表或查看评论

Vue中使用图片编辑器 tui-image-editor 实现在线编辑保存

最新发布

重生之我不会写代码

05-16

2775

Vue中使用图片编辑器 tui-image-editor 实现在线编辑保存提交

vue点击图片查看大图图片查看大图查看大图插件 vue-photo-preview

fj_ut的博客

07-24

2865

转载（blog.csdn.net/qq_27721169/article/details/82735013）vue点击图片查看大图使用插件 vue-photo-preview 转载（blog.csdn.net/qq_27721169/article/details/82735013）版权声明： https://blog.csdn.net/qq_27721169/article/detail...

vue2 在图片上打点 自定义图标、大小、颜色，可拖动放大缩小

m0_47126632的博客

06-09

2749

只用到img标签的平面图和svg标签的点位，我项目用的是拖动事件打点，vue的@dragstart 和@drop="ondrop"事件配合，点击的话你们自己修改接收事件的方式即可。鼠标悬浮图标显示弹出层。

vue使用画图插件v-charts

wyk760629476的专栏

05-19

1683

安装 npm i v-charts echarts -S 引用 import VeLine from 'v-charts/lib/line.common' import VeGauge from 'v-charts/lib/gauge.common' import VeHeatmap from 'v-charts/lib/heatmap.common' import Histogram from 'v-charts/lib/histogram.common' import VePie .

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

01-21

　自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在 .vue文件。 1、实现toast插件封装（类似简易版的elementUi的message）　先书写一个toast组件 ...

vue自定义指令实现v-tap插件

11-28

顺着自定义指令和插件文档，昨晚实现了一个v-tap指令，丢出这篇干货。指令与插件介绍 自定义指令和插件官方文档中也介绍比较简单详细，就不过多介绍。我先说下本插件就用了三个API，如果大家不了解最好先事先看下...

Vue实现一个图片懒加载插件

12-12

这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。 Vue.use() 就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实...

Vue.js图片预览插件使用详解

10-18

总结来说，Vue.js 图片预览插件 "vue-picture-preview-extend" 提供了一种便捷的方式来实现图片预览，允许开发者通过配置各种选项来自定义预览效果，从而提升用户体验。通过理解和应用这些知识点，可以有效地在Vue...

使用vue及自定义组件完成10×10图片点击效果

weixin_64047160的博客

03-20

216

步骤：先切割图片，导入图片到img文件，引入vue.js，写div盒子放入图片，用弹性布局快速定位图片，使用组件实现点击效果。

通过vue-amap插件以手动输入和鼠标点击的方式动态添加单个多边形到地图中

郭宝的博客

10-12

1683

核心代码： <template> <div> ============================14、高德地图--创建多边形的使用案例============================ <el-form :inline="true" :model="form" class="demo-form-inline"> &...

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

2301_76828893的博客

03-22

192

6.可以通过给每一个图片所放置的div设置一个@click事件和v-show指令来实现图片的点击后隐藏和显示的效果，当我们页面不简洁的时候还可以通过组件来解决代码的繁琐。4.我们先写一个div标签，id为app，然后再写一个div标签class,content里边放置img图片。5.在template标签中添加了click事件和v-show指令，使用组件可以简洁代码。1.将图片分割成需要的大小(可以使用ps里面的切片工具）2.导入并连接vue.js文件，将图片导入img文件。

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

hu15137376135的博客

03-21

在id为"app"的div中再创建一个div标签添加一个class"content"并且加一个自己定义的lr-img，并且给他设置一个V-for循环。然后添加组件，将父组件给子组件传值，并且再data里边导入数组，并添加所有图片的路径，运行即可。，在style标签里面为app ，content两个div设置布局。然后在body标签中创建一个div标签并设置id为“app”工具 vscode或HBulider。js插件：Vue.js。首先引入vue.js。

通过Vue写一个简单的图片点击的小案例。

weixin_64411066的博客

03-20

298

这个项目很简单，使用了一个组件化的形式，使代码更简洁效率更高。对于初学者提前了解组件，知道组件带来的便捷，希望对你们有帮助。

vue2.0做移动端开发用到的相关插件和经验总结(2)

大灰狼的小绵羊哥哥的博客

09-18

4463

最近一直在做移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。经过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添加自定义标注，对地图进行缩放，拖拽等)的相关使用，开阔了自己的知识眼界；现将我开发过程中积累的相关经验与大家进行分...

vue 图片自适应排列插件_vue+heatmap.js实现自定义图片热力图并且自适应

weixin_34352565的博客

02-05

678

heatmap.png基本实现如图就是最终效果，由于做的项目数据可视化选择的是Echarts，所以一开始是打算想用Echarts直接实现对任意图片的热力图，但本人水平有限，用Echarts没做出来，所以找到了用heatmap.js来做。-语法都很简单，去网站documents看一下一会就会了。 $("canvas,heatmap").remove();_this.heatmapIns...

在vue中使用图片编辑插件ToastUI Image Editor