基于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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
javascript 函数速查表
Feb 07 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue配置接口域名方法总结
May 12 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js实现进度条的方法
2015/02/13 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
javascript设计模式之迭代器模式
2020/01/30 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python中yield的用法详解
2021/01/13 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
机械专业求职信范文
2014/07/15 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
小学教师个人总结
2015/02/05 职场文书
教师考核鉴定意见
2015/06/05 职场文书
开天辟地观后感
2015/06/09 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
详解python的异常捕获
2022/03/03 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL