QinUi

# Image 图片

统一封装

# 基础用法

<template>
  <qinui-image :src="src" width="280rpx" height="180rpx"></qinui-image>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# 圆形

设置 shape="circle"

<template>
  <qinui-image
    shape="circle"
    :src="src"
    width="80rpx"
    height="80rpx"
  ></qinui-image>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# 自定义圆角

设置 radius="12rpx"

<template>
  <qinui-image
    radius="12rpx"
    :src="src"
    width="80rpx"
    height="80rpx"
  ></qinui-image>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# 只设置 width

配合设置 ratio="1"

<template>
  <qinui-image
    :src="src"
    width="180rpx"
    ratio="1"
  ></qinui-image>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# 只设置按比例展示

配合设置 ratio="1:2"

<template>
  <div>
    <qinui-image :src="src" width="150px" ratio="1:2"></qinui-image>
    <qinui-image
      :src="src"
      :width="`${theWidth - 400}px`"
      ratio="4:3"
    ></qinui-image>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
        theWidth: qin.getSystemInfoSync?.()?.windowWidth || 0,
      };
    },
  }
</script>

# 不设宽度，按比例显示

配合设置 ratio="1:2" 自动撑满父级宽度

<template>
  <qinui-image :src="src" ratio="4:3" />
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# 动态显示懒加载

设置 :lazy="true"

<template>
  <qinui-image
    src="https://via.placeholder.com/200x200.png/2878ff"
    width="80rpx"
    height="80rpx"
    :lazy="true"
  >
    <template v-slot:loading>
      <qinui-iconfont
        iconName="icon-yuyue"
        iconFont="iconfont"
        style="font-size: 40rpx; line-height: 80rpx; color: red"
      ></qinui-iconfont>
    </template>
  </qinui-image>
</template>

# 自定义样式

<template>
  <qinui-image
    :src="src"
    width="80rpx"
    height="80rpx"
    diy-style="border: 4px solid rgba(0,255,255,1);border-radius: 60px;"
  ></qinui-image>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://test-oss.test.fanzhi.cn/images/41/af/b4b3ab68034ed2aee839a0466326.jpg',
      };
    },
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
src 图片地址 String - -
width 图片宽度 String - -
height 图片高度 String - -
shape 图片形状，circle-圆形，square-方形 String square circle | square
radius 圆角，带单位任意数值 String 0 -
lazy 是否开启observer懒加载 Boolean false -
ratio 按比例显示图片 String - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Events

事件名 说明 回调参数
@click 点击事件 -
@load 图片加载成功时触发 -
@error 图片加载失败时触发 -

← Modal 模态框 →