vue+Element ui实现照片墙效果

2024-10-19 18:12:14

本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码，供大家参考，具体内容如下

上面是我要实现的效果。直接上代码，简洁明了

1.前端视图代码

<div>
  <el-upload
    :file-list="fileList"
    :headers="upload.headers"
    :action="upload.url"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" height="500px" :src="dialogImageUrl" alt="">
  </el-dialog>
</div>

2.前端script部分代码

<script>
import { listNetSecurityImg, delNetSecurityImg } from '@/api/websitemanage/netsecurityimg'
import { getToken } from '@/utils/auth'

export default {
  name: 'NetSecurityImg',
  components: {},
  data() {
    return {
      titleName: '图片管理',
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      // 照片墙
      upload: {
        // 设置上传的请求头部
        headers: { token: getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 网安时情图片列表 */
    getList() {
      this.fileList = []
      listNetSecurityImg().then(response => {
        const imgList = response.data
        for (let i = 0; i < imgList.length; i++) {
          this.fileList.push({
            'uid': imgList[i].id,
            'url': imgList[i].imgUrl
          })
        }
      })
    },
    handleRemove(file, fileList) {
      const id = file.uid
      this.$confirm('是否确认删除此图片?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delNetSecurityImg(id)
      }).then(response => {
        if (response.success) {
          this.getList()
          this.msgSuccess('删除成功')
        }
      }).catch(() => {
        this.getList()
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

3.api接口js

import request from '@/utils/request'

// 查询图片列表
export function listNetSecurityImg(query) {
  return request({
    url: 'netSecurityImg/getList',
    method: 'post',
    data: query
  })
}

// 删除图片
export function delNetSecurityImg(id) {
  return request({
    url: 'netSecurityImg/delete?id=' + id,
    method: 'post'
  })
}

4.表的设计

注意，后台接口上传图片文件是上传到文件服务器的，文件服务器返回的图片url进入到数据库

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

js实现超酷的照片墙展示效果图附源码下载

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
js实现3D照片墙效果

聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦效果: 1.点击Start View进入照片墙 2.只有一张图片是在中间显示,其他图片在中间的图片两侧随机排序,并且随机旋转一定的角度,层级也是随机的哦 3.点击上面的导航条,可以让对应的图片在中间显示 4.点击中间的图片该照片翻转,显示背面(照片的描述信息) 实现过程: 1.用数据生成结构(模拟的数据,此处不再提供) 2.对
原生JS实现拖拽照片墙

本文实例为大家分享了一个用原生JS实现的可拖拽照片墙,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽照片墙,实现照片互换位置</title> <style> * { marg
js实现照片墙功能实例

本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
javascript实现了照片拖拽点击置顶的照片墙代码

演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
原生js实现照片墙效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
javascript制作照片墙及制作过程中出现的问题

本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
vue+Element ui实现照片墙效果

本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码,供大家参考,具体内容如下上面是我要实现的效果.直接上代码,简洁明了 1.前端视图代码 <div> <el-upload :file-list="fileList" :headers="upload.headers" :action="upload.url" list-type="picture-card&qu
vue+Element ui实现照片墙效果

本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码,供大家参考,具体内容如下上面是我要实现的效果.直接上代码,简洁明了 1.前端视图代码 <div> <el-upload :file-list="fileList" :headers="upload.headers" :action="upload.url" list-type="picture-card&qu
Vue + Element UI图片上传控件使用详解

上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示效果如图: 图示1:悬浮在树节点状态图示2:点击三个点图标状态
vue element ui validate 主动触发错误提示操作

elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题如果你设置了关闭弹出页就resetFields
Vue+Element UI实现概要小弹窗的全过程

场景:一个巡检单据有n个巡检明细,一个巡检明细有n个巡检项目. 实现效果:当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗,移出弹窗时关闭弹窗巡检单据详情鼠标移到项目概要图标效果实现 data里面声明的变量 // 概要弹窗 outlineDialog: false, // 当前行标准概要 standSummary: [], // 概要弹窗位置控制 outlineCard: { pageY: null, pageX: null, display: "none" } 1.弹窗
Vue + Element UI 实现权限管理系统之菜单功能实现代码

目录菜单功能实现菜单接口封装菜单管理界面测试效果源码下载菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m
vue Element UI扩展内容过长使用tooltip显示示

目录 1. 介绍 2. element-ui(vue2版本) 2.1 注册指令 1) akTooltipAutoShow.js 2.2 使用 3. element-plus(vue3版本) 3.1 注册指令 1) akTooltipAutoShow.js 2) 进行局部或全局注册 3.2 使用 1. 介绍 Tooltip常用于展示鼠标 hover 时的提示信息. 而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容. 本文章的思路是通过一个自定义指令
使用vue+element ui实现走马灯切换预览表格数据

目录 1. 需求分析 2. 效果演示 3. 代码实现 3.1 table.json 3.2 HTML 代码 3.3 Script 代码总结 1. 需求分析有这样一个 json 文件(table.json),里面包含有多组需要展示的表格数据,需求就是需要将这些数据进行展示,并且能快速查看不同的数据,由于数据过多,不能一个表格一个表格的进行展示,所以找了一个比较合适的方法,就是通过走马灯将所有数据进行渲染,当切换走马灯时,再展示对应的数据. 2. 效果演示 3. 代码实现 3.1 table.j

vue+Element ui实现照片墙效果

相关推荐

随机推荐