前端iview排列图片 下面加 名称

最新推荐文章于 2024-01-15 19:19:03 发布
最新推荐文章于 2024-01-15 19:19:03 发布
阅读量456 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue+iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34158117/article/details/90518000
博客展示了一段代码实现的效果，使用Vue的v-for指令遍历appNameList数组，展示应用列表。通过img标签显示应用图标，点击图标可触发openAppDetail方法，同时显示应用名称，整体实现了应用列表的展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果:

<Row v-for="item in appNameList" :key="item.appName" justify="center" style="display: inline-block;width:110px">

<Col style="display: inline-block;">

<img class="preview-img" :title="item.alt" :alt="item.alt" :src="item.appLogo" :h="item.h" :w="item.w" width="100" height="100" @click="openAppDetail(item.appCode,item.appName)" style="margin: 10px;box-shadow: 0 0 8px"/>

<h5 style="text-align: center"> {{item.appName}}</h5>

</Col>

</Row>

vue实现带图片的标题栏
tjzc1352640的博客
10-25 5362
一般的标题中需要一个图片和文字标题如下，m-header中包含两个元素，一个是图片icon，另外一个是文字text <div class="m-header"> <div class="icon"></div> <h1 class="text">Chicken Music</h1> </div> 这种情况下在css中首先需要给父元素m-header设置position属性，方
wxss:图片和文字一行显示，文字上下显示
weixin_46265813的博客
03-12 1208
wxtml: <view class="con"> <view class="pic"> <image src="/images/7.jpg"></image> </view> <view class="top"> <view class="txt">这是简介</view> <view class="btn"> <button style=.
iview.test测试demo包含拖拽排序 mock测试 iview模板
04-16
iview.test测试demo包含拖拽排序 mock测试 iview模板...
vue上传图片并显示图片的名称(包含:上传pdf，自定义缩略图)
m0_68428581的博客
07-04 2154
vue上传图片并显示图片的名称1.效果图2.代码3.注释的代码意思为，上传pdf文件，缩略图显示自定义图片。
【物以类聚】给el-image预览多张图片增加提示文字，让每张图片有所分类
最新发布
追寻上飞的博客
01-15 2135
第二想法，继承复用该组件，不属于包含关系，无法修改内部的元素，需求和这个想法不一致，遂改变。点击地图上的一张图片，弹出所有相关的图片资源，图片资源上显示每个图片的所属类型。第一想法是修改依赖包中的文件，复用该组件，发现修改无效，原因是。和同事交流后，得出第三个想法，直接COPY框架的。组件大体适用，唯一不足的是缺少照片名称元素。是编译前的包，如果要改动，就需要重新编译。组件文件到自己的项目中，在项目中直接引用。可以看到居中显示的图片类型文字。将图片组件整体的文件导进来。
Vue.js iview实现树形权限表（可扩展表）
热门推荐
月想容的博客
04-12 3万+
问题： 需要一个可折叠的权限管理系统，用表格展示。 主要用的iView组件库，有Table（表格），Tree（树形控件），Collapse（折叠面板）看起来比较符合意思 深入查看Table相关范例，发现有个通过给columns数据设置一项，指定type: 'expand'，即可开启扩展功能 可以考虑 但也只是展开详细...
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 2099
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
前端开发技术点总结（二）：常用技术点记录
jimson_zhu的博客
08-27 1594
1）一列图标的大小调整和对齐 这种情况经常发生在UI所给图标大小不一，需要手动调整的情况。 1）宽高使用作用是限定图标在一个box里面； 2）position和transform的使用是使图标随着中间点放大缩小； 3）left和top这些方位属性用于调整图标竖排或横排的对齐位置。 width: 22px; height: 22px; position: absolu...
【Vue+iview动态菜单源码深度解析】：组件内部逻辑完全理解
本文从Vue与iview框架出发，深入探讨了动态菜单的基础知识、实现原理、源码剖析、实际应用案例以及性能优化与维护。通过介绍Vue组件的概念、iview组件库、动态菜单的数据结构设计和菜单组件的事件处理，本文为开发者...
VUE实现竖直的显示表头的表格
ZJLOVE的博客
07-26 4856
今天遇到一个问题，实现这样一个竖直的显示表头的表格，如下图。 vue实现代码如下： 构建tableComponent.vue组件： <template> <table class="mailTable" :style="styleObject" v-if="s_showByRow"> <tr v-for="index in rowCount"> <td class="column">{{tableData
Vue图片与文字混输的实现方法
10-15
主要给大家介绍了关于Vue图片与文字混输的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
CSS之垂直对齐
qq670471201的博客
11-19 463
CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...
vue 图片写入文字,图片注入文字,图片添加文字
qq_16920371的博客
08-30 7722
【代码】vue 图片写入文字,图片注入文字,图片添加文字。
Vue模板语法
说故事的五公子
07-16 518
1.插值操作 1.1Mustache 如何将data中的文本数据，插入到HTML中呢？ 我们已经学习过了，可以通过Mustache语法(也就是双大括号)。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> &
多个view横向排列的便捷方法
MarryLinDa的博客
03-13 2209
多个view横向排列的便捷方法 在写自适应div( web端 )或view（微信端）的布局时，可以用以下俩种方法进行便捷布局 ： 利用外层div或外层view的display : flex ; flex-flow : row; 利用外层div或外层view的white-space：nowrap;属性 white-space属性值 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 wxml中的标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
底部组件实现，上面是文字下面是图片
qq_41206597的博客
01-17 2255
话不多说直接代码 HTML部分 **注意点：1，里面的图片我是引用的因为././image.png这种图片不显示所以采用这种方法，2，这个页面是一个底部组件，引用的时候，底部按钮要对应每个页面，如下图：这是第三个按钮，0，1，2分别对应三个底部按钮也对应三个页面，一定要写不然出不来 ** JS部分 CSS部分 ...
Vue实现图片与文字混输
爱折腾的程序员
12-05 3957
知识在于积累，踩坑越多，你越强???? 前言 用多了JQuery，习惯了使用JQuery的API操作DOM，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用textarea实现，结果发现实现不了图片输入，然后想着找个富文本编辑器的插件实现，深思熟虑之后，我的需求好像也没那么复杂，不至于引用个插件，看了掘金的发布沸点功能，然后就模仿了其作法，于是就有了这篇文...
iView前端组件库：文档详解与实战应用
iView作为一款强大的前端UI框架，不仅提供了丰富的组件，还注重用户体验和开发者友好性，是构建现代化前端应用的理想选择。通过深入学习和实践iView，开发者可以提升开发效率，快速构建出具有良好界面效果和用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值