基于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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQuery的三种$()
Dec 30 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
vue递归实现树形组件
Jul 15 Vue.js
微信小程序访问豆瓣电影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函数
2010/01/11 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php5.3 注意事项说明
2013/07/01 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
详解Python爬虫的基本写法
2016/01/08 Python
Python制作Windows系统服务
2017/03/25 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
小学生打架检讨书
2014/01/26 职场文书
企业员工集体活动方案
2014/08/17 职场文书