vue+element实现鼠标移入出现按钮,并点击图片可跳转页面

实现效果

点击图片后跳转页面

实现代码

html

<template><div class="course-container"><el-row :gutter="20"><el-colv-for="(item, index) in list":key="index":xs="24":sm="8":md="8":lg="8":xl="4"><el-card shadow="hover"><divstyle="width: 100%; height: 240px"@mouseenter="enter(index)"@mouseleave="leave()"><el-row><el-col><el-buttonv-if="seen && index == current"type="info"icon="el-icon-goods"@click="endCourse(item.id, index)"></el-button><el-buttonv-if="seen && index == current"type="info"icon="el-icon-edit"@click="editCourse(item, index)"></el-button><el-buttonv-if="seen && index == current"type="info"icon="el-icon-delete"@click="deleteCourse(item.id)"></el-button></el-col><el-col><el-imagestyle="width: 100%; height: 200px":src="item.img"@click="clickImg(item)"></el-image></el-col></el-row></div><div class="footer"><el-row><el-col><span calss="list-title" style="margin-right:30px;">{{ item.class }}</span><span class="list-name" >{{ item.teacher }}</span></el-col></el-row></div></el-card></el-col></el-row></div>
</template>

 import { getList } from '@/api/table'export default {name: 'Course',data() {return {value: true,list: null,height: 0,btDisplay: false,seen: false,dialogVisible: false,}},created() {this.fetchData()this.height = this.$baseTableHeight(1)},mounted() {},methods: {clickImg(item) {this.$router.push({ path: '/detail', query: { id: item.id } })console.log('点击了图片', item.id)},async fetchData() {this.listLoading = trueconst { data, totalCount } = await getList(this.queryForm)this.list = dataconst imageList = []data.forEach((item) => {imageList.push(item.img)})this.imageList = imageListthis.total = totalCountsetTimeout(() => {this.listLoading = false}, 500)},//鼠标移入移出enter(index) {this.seen = truethis.current = indexthis.btDisplay === true},leave() {this.seen = falsethis.current = nullthis.btDisplay === false},endCourse(i, j) {const id = iconsole.log('需要结课的课程id是：' + id + '数组下标是：' + j)},editCourse(i, j) {console.log('需要编辑的课程是：', i)},deleteCourse(index) {console.log('需要删除的课程是：', index)},},}

css

 .avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409eff;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}.list-title {margin: 8px 0;font-size: 14px;font-weight: bold;}.list-name {font-size: 14px;color: #808695;}

vue+element实现鼠标移入出现按钮,并点击图片可跳转页面相关推荐

Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
li的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式...
li.jsp(需要提前导入jquery.min.js 地址:http://www.cnblogs.com/zhouerba/p/7358069.html ) 鼠标移入:当前li变色,其他li恢复原 ...
vue绑定div鼠标移入移出事件
1.两种绑定方式 <div v-on:mouseover="handleOver($event)" v-on:mouseout="handleOut($event) ...
vue遇到的小白问题之三——按钮的点击效果的实现
问题是,需要对一个按钮进行的点击判断.其实就是disabled的使用遇到的问题是disabled只要写在vue的按钮上就不能点击,不能进行判断.无论disabled=true还是disabled=f ...
vue element 框架自定义轮播图，点击上下翻图，并让图片居中
1.素材展示窗口,左侧预览滚动区域按分辨率做一屏最大预览数量做均分(超过最大预览数量是滚动条滑动) 2.左侧预览滚动区域增加浅灰色底色要求与滚动条颜色区分 3.预览滚动区域单个区域高度固定,素材图 ...
2020/09/29 鼠标移入显示二维码或图片移出隐藏
要模仿的效果代码 -js -css -js函数 -最终效果代码块 js let showImg = function (e) {// console.log("show")e. ...
web前端-vue element UI el-table，el-table-column表格添加行点击事件
el-table如下数据一.el-table 整行都可以点击事件定义点击事件 @row-click="openDetails":openDetails为方法名 <!-- ...
VUE 点击图片直接进行页面跳转
<imgsrc="../assets/person.png"@click="docs"style="float: right; padding- ...

vue+element实现鼠标移入出现按钮,并点击图片可跳转页面

实现效果

实现代码

vue+element实现鼠标移入出现按钮,并点击图片可跳转页面相关推荐

最新文章

热门文章