vue实现长图垂直居上 vue实现短图垂直居中

2024-09-27 11:55:49

大致效果如下图，只考虑垂直方向。长图可以通过滚动条看，短图居中效果，布局合理

html代码(vue作用域内)：

<div class="box" v-for="item in previewImg">
  <img :src="item" alt="" @load="checkHeight($event)">
</div>

css代码：

.box{
 height: 100%;//如高度等于网页高度
 overflow: auto;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
}
.swiper-slide.long{
 justify-content: flex-start;
}

js代码(vue作用域内，使用jquery)：

methods: {
checkHeight:function (event) {
  var el=$(event.currentTarget);
  el.parent().removeClass('long');
　　//this.CH 为网页高度
  if(el.height()>this.CH){
    el.parent().addClass('long');
  }

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js实现网格列表布局转换方法

实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&quo
vue实现长图垂直居上 vue实现短图垂直居中

大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class="box" v-for="item in previewImg"> <img :src="item" alt="" @load="checkHeight($event)"> </div> css代码: .box{ height: 100%;
vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

话不多说了,先上一张Demo图,实现的功能有:左侧图例.右侧瀑布图.鼠标移入弹出当前坐标对应的数据信息(有优化的空间,大家自由发挥). 图例使用到的插件这里推荐使用安装npm插件colormap 瀑布图主体内容这里不多做解释了,都是一些原生标签还有vue绑定的事件,可以根据实际项目情况自己封装成组件,我这里是写在一起的. <template> <div> <div class="content"> <div class="neir
vue项目中应用ueditor自定义上传按钮功能

由于上传地址问题,需要自定义上传按钮,效果如图由于在页里面没有操作dom,所以想到了用vue的自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件还是在ueditor.all.js文件内找到commands指令给刚才定义的按钮扩展事件,
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作

我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看以下文章 https://www.jb51.net/article/192983.htm 1.安装maptalks.three包 npm install maptalks.three 2.安装three包 npm install
vue+vux实现移动端文件上传样式

样式使用的是vux的cell组件如下图的官方demo样子上图的样式需要修改一下,把保护中修改成一个图片并且内嵌一个input type='file' 就可以拥有好看的样式的文件上传了  import { Cell } from 'vux'  <group> <cell title="title" value="value"></cell>
vue.js整合vux中的上拉加载下拉刷新实例教程

前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图创建项目使用vue-cli 创建一个vue项目安装vux
VUE + UEditor 单图片跨域上传功能的实现方法

UEditor官网说不提供单图片的跨域,所以只能自己解决.查了网上的很多方案,但是没看到和vue一起用的,不过倒是获得了一些思路.本着不想改太多源代码的基础上尝试着...一不小心就可以用了解决方案:上传单图片的时后端不直接返回JSON,而是重定向到前端页面前端:VUE 后端:WAMP + ThinkPHP5.0 前端 http://localhost:8888 1.去官网下载UEditor到vue中,打开ueditor.config.js配置服务器路径(本地域名可以去hosts文件中添加),
vue todo-list组件发布到npm上的方法

前言最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用.想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例.案例源码:https://github.com/wuwhs/todoList 建立npm项目 1. 初始化npm项目建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm i
vue中实现图片和文件上传的示例代码

html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');
Vue.extend实现挂载到实例上的方法

本文实例讲述了Vue.extend实现挂载到实例上的方法.分享给大家供大家参考,具体如下: 这里主要是做个笔记根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 官网的用法是: <div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{

vue实现长图垂直居上 vue实现短图垂直居中

相关推荐

随机推荐