基于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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JS实现留言板功能
Jun 17 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 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代码
2010/08/08 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python的keyword模块用法实例分析
2015/06/30 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
求职简历中自我评价
2014/01/28 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
收款授权委托书
2014/10/02 职场文书
公司放假通知范文
2015/04/14 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
医院病假条范文
2015/08/17 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
Redis唯一ID生成器的实现
2022/07/07 Redis
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python