基于elementUI实现图片预览组件的示例代码


Posted in Javascript onMarch 31, 2019

这是一个简单的点击图片预览的组件

顺便记录一下写组件期间踩的vue中scope的坑~

基于elementUI实现图片预览组件的示例代码

从注册全局组件开始叭!

项目目录:

基于elementUI实现图片预览组件的示例代码

模仿elementUI目录结构,目录名是组件名,src中是组件源文件(或者js服务文件),文件目录下还有一个index.js用于同一管理src中的所有文件,导出并注册,这个组件我们只有一个vue文件件

先看index.js文件里有什么:

//引入了src下的vue组件文件
import starPicList from './src/star-pic-list';

/* istanbul ignore next */
starPicList.install = function(Vue) {
  //starPicList.name这就是后面可以使用的组件的名字(star-pic-list.vue文件里面定义的name),install是默认的一个方法
  Vue.component(starPicList.name, starPicList);
};

export default starPicList;

接下来介绍一下install方法:

Vue.use( plugin ):安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

导出starPicList组件后在管理组件js文件中引用,然后由这个统一管理js文件导出注册到全局即可:

基于elementUI实现图片预览组件的示例代码

基于elementUI实现图片预览组件的示例代码

好了,这些是废话!

组件的使用:

<!--图片列表形式,点击查看图片列表,点击显示上(下)一张-->
<template v-slot="scope">
  <star-pic-list :data="scope.row.pic" :max-show="2"/>
</template>

参数
data: 传入图片数组;
max-show: 一次最多显示几张图片

效果如下:

基于elementUI实现图片预览组件的示例代码

基于elementUI实现图片预览组件的示例代码

补充:vue组件开发中 style 添加scoped后,修改第三方组件样式没有效果问题:

在vue的开发中,我们通常和element-UI配合开发,就会遇到,在组件style中添加scoped后,element-ui中使用的子组件样式无法改变。

不用scoped,去掉这个属性,但是会污染全局样式,(可配合less 或者 scss(推荐scss),所有样式写在当前组件id或class下面)

组件源码:

<template>
  <div id="star-pic-vue">
    <template v-if="data">
      <img v-for="item in images"
         :src="item"
         id="contract_url"
         @click="enlargePic"/>
      <template v-if="isDialogShow">
    </template>
      <el-dialog
        :visible.sync="centerDialogVisible"
        modal
        close-on-click-modal
        custom-class="dialog"
        >
        <el-carousel :autoplay="false" arrow="always">
          <el-carousel-item v-for="item in data" :key="item">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  export default {
    name: "star-pic-list",
    props: ["data","maxShow"],
    data(){
      return{
        centerDialogVisible: false,
        showPic: '',
        isDialogShow: false,
        index: 0,
      }
    },
    computed: {
     images() {
       if (this.data instanceof Array && this.data.length > 2) {
         return this.data.splice(0,this.maxShow)
       } else {
         return this.data
       }
     }
    },
    methods: {
      // 放大图片
      enlargePic(e){
        this.isDialogShow = true;
        this.centerDialogVisible = true;
        this.showPic = this.data[0];
        console.log(this.images)
      },
    }
  }
</script>

<style lang="less">
#star-pic-vue{
  width: 200px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  img{
    width: 80px;
    height: 80px;
    margin: 4px;
  }
  .dialog {
    img{
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body {
    padding: 0 !important;
    margin: 0 !important;
    height: 600px;
  }
  .el-carousel{
    height: 100%;
  }
  .el-carousel__container {
    height: 100%;
  }
}
</style>

更多组件点击这儿 --> link : github>components>star-pic-list

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 #Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 #Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 #Javascript
使用post方法实现json往返传输数据的方法
Mar 30 #Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 #Javascript
微信公众平台获取access_token的方法步骤
Mar 29 #Javascript
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php类
2006/11/27 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python生成器的使用方法
2013/11/21 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
简单了解python的内存管理机制
2019/07/08 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
django框架模板语言使用方法详解
2019/07/18 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python mysql断开重连的实现方法
2019/07/26 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
教师一帮一活动总结
2014/07/08 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏