打印/下载
使用
案例

Img 图片

import wmImg from '@/components/form/img'
<wm-img width="80px" height="80px" radius="50%" :url="form.img"></wm-img>
  • url: (String) //图片地址
  • size: (String) //背景大小
  • width: (String) //宽
  • height: (String) //高
  • radius: (String) //圆角
  • title: (String) //提示
  • icoSize: (String) //图标大小

Upload 图片上传

import wmImgUpload from '@/components/form/upload'
<wm-img-upload :url="upload.url" :param="upload.param" @upload="upImg"></wm-img-upload>
  • url: (String) //上传地址
  • param: (String) //请求参数: {}
  • upload: (Fun) //上传回调

View 图片预览

import wmImgView from '@/components/img/view'
<wm-img-view ref="imgShow" :show="imgView.show" @update:show="imgView.show=$event"></wm-img-view>
  • 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 wmImgView from '@/components/img/view'

Html

<wm-img-view ref="imgShow" :show="imgView.show" @update:show="imgView.show=$event"></wm-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}}