基于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 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
Jquery $when done then的用法详解
May 20 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 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代码包装修正版
2008/03/15 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
angular4自定义组件详解
2017/09/28 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python with用法实例
2015/04/14 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python colormap库的安装和使用详情
2020/10/06 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
行政人员工作职责
2013/12/05 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
建设工程授权委托书
2014/09/22 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js