基于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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
利用python求积分的实例
2019/07/03 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python类型转换的魔术方法详解
2020/12/23 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
财务出纳岗位职责
2014/02/03 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
营销团队口号
2014/06/06 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang