打印/下载
参数
案例

参数

  • v-model: (Boolean) 显示&隐藏, 默认: false
  • opacity: (Number) 背景透明度, 默认: 0.7
  • color: (String) 加载图标颜色, 默认: "#6FB737"
  • iconLoading: (String) 加载图标, 默认: "ui ui_loading"
  • iconLeft: (String) 上一张, 默认: "ui ui_left"
  • iconRight: (String) 下一张, 默认: "ui ui_right"
  • iconFull: (String) 全屏, 默认: "ui ui_full"
  • iconClose: (String) 关闭, 默认: "ui ui_close"

引入

import ImgView from '@/components/img-view'

Html

<img-view v-model="imgView.show" ref="imgShow"></img-view>

JavaScript

export default {
  components: {ImgView},
  data(){
    return {
      imgView:{show: false, imgs:[], index: 0},
    }
  },
  methods:{
    /* 提交 */
    openShow(){
      let index=0;
      let imgs = [
        {
          "src":"https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/big/h4534361265816576.jpg",
          "name":"机械手臂与人工智能",
          "size":"41.38KB"
        },
        {
          "src":"https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/small/h4534360637162497.jpg",
          "name":"咖啡豆写真",
          "size":"49.52KB"
        },
        {
          "src":"https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/big/h4534360448533504.jpg",
          "name":"西红柿和蔬菜",
          "size":""
        },
      ];
      this.imgView.show = true;
      this.$refs.imgShow.open(imgs,index);
    },
  },
}
{{copy}}