BIN-UI-DESIGN

Appearance

On this page

图片组件 Image ​

可预览的图片容器，并支持懒加载，自定义占位、加载失败等

基础用法 ​

可通过 fit 来设置图片在容器的样式，同原生 object-fit。

fill

contain

cover

none

scale-down

<template>
  <div flex>
    <div v-for="fit in fitList" :key="fit" style="flex: 1; padding: 10px">
      <div style="width: 100px; height: 80px; border: 1px solid #eee">
        <b-image :src="url" :fit="fit" width="100px" height="80px" :alt="fit"></b-image>
      </div>
      <p>{{ fit }}</p>
    </div>
  </div>
</template>

<script setup>
const url = 'https://file.iviewui.com/images/image-demo-3.jpg'
const fitList = ['fill', 'contain', 'cover', 'none', 'scale-down']
</script>
<template>
  <div flex>
    <div v-for="fit in fitList" :key="fit" style="flex: 1; padding: 10px">
      <div style="width: 100px; height: 80px; border: 1px solid #eee">
        <b-image :src="url" :fit="fit" width="100px" height="80px" :alt="fit"></b-image>
      </div>
      <p>{{ fit }}</p>
    </div>
  </div>
</template>

<script setup>
const url = 'https://file.iviewui.com/images/image-demo-3.jpg'
const fitList = ['fill', 'contain', 'cover', 'none', 'scale-down']
</script>

加载中 ​

可以设置加载中的文字或者占位内容

默认

插槽

<template>
  <b-row gutter="20">
    <b-col span="12">
      <b-image src="https://wangbin3162.github.io/bin-files/bg/bg2.jpg" />
      <p class="t-center">默认</p>
    </b-col>
    <b-col span="12">
      <b-image src="https://wangbin3162.github.io/bin-files/bg/bg3.jpg">
        <template #placeholder>
          <b-loading fix />
        </template>
      </b-image>
      <p class="t-center">插槽</p>
    </b-col>
  </b-row>
</template>
<template>
  <b-row gutter="20">
    <b-col span="12">
      <b-image src="https://wangbin3162.github.io/bin-files/bg/bg2.jpg" />
      <p class="t-center">默认</p>
    </b-col>
    <b-col span="12">
      <b-image src="https://wangbin3162.github.io/bin-files/bg/bg3.jpg">
        <template #placeholder>
          <b-loading fix />
        </template>
      </b-image>
      <p class="t-center">插槽</p>
    </b-col>
  </b-row>
</template>

加载失败 ​

可以设置加载失败占位内容。

默认

插槽

<template>
  <b-row gutter="20">
    <b-col span="12">
      <div flex="main:center">
        <b-image width="200px" height="100px" />
      </div>
      <p class="t-center">默认</p>
    </b-col>
    <b-col span="12">
      <div flex="main:center">
        <b-image width="200px" height="100px">
          <template #error>
            <b-icon name="image" size="28" color="var(--bin-fill-color-4)" />
          </template>
        </b-image>
      </div>
      <p class="t-center">插槽</p>
    </b-col>
  </b-row>
</template>
<template>
  <b-row gutter="20">
    <b-col span="12">
      <div flex="main:center">
        <b-image width="200px" height="100px" />
      </div>
      <p class="t-center">默认</p>
    </b-col>
    <b-col span="12">
      <div flex="main:center">
        <b-image width="200px" height="100px">
          <template #error>
            <b-icon name="image" size="28" color="var(--bin-fill-color-4)" />
          </template>
        </b-image>
      </div>
      <p class="t-center">插槽</p>
    </b-col>
  </b-row>
</template>

懒加载 ​

设置属性 lazy 可以开启图片懒加载功能，当图片可视时才会加载。

设置属性 scroll-container 可以指定滚动容器，如未设置，会自动寻找最近一个 overflow 值为 auto 或 scroll 的父元素。

纵向

横向

<template>
  <b-row gutter="20">
    <b-col span="12">
      <div class="demo-image-lazy-vertical">
        <b-image v-for="url in vUrlList" :key="url" :src="url" lazy />
      </div>
      <p class="t-center">纵向</p>
    </b-col>
    <b-col span="12">
      <div flex="main:center">
        <div class="demo-image-lazy">
          <div class="demo-image-lazy-inner">
            <b-image v-for="url in hUrlList" :key="url" :src="url" lazy />
          </div>
        </div>
      </div>
      <p class="t-center">横向</p>
    </b-col>
  </b-row>
</template>

<script setup>
const vUrlList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
const hUrlList = [
  'https://file.iviewui.com/images/image-demo-1.jpg',
  'https://file.iviewui.com/images/image-demo-2.jpg',
  'https://file.iviewui.com/images/image-demo-3.jpg',
  'https://file.iviewui.com/images/image-demo-4.jpg',
  'https://file.iviewui.com/images/image-demo-5.jpg',
  'https://file.iviewui.com/images/image-demo-6.jpg'
]
</script>

<style scoped>
.demo-image-lazy-vertical {
  height: 300px;
  overflow-y: auto;
  .bin-image {
    display: block;
    min-height: 200px;
  }
}

.demo-image-lazy {
  width: 400px;
  height: 200px;
  overflow: hidden;
  overflow-x: scroll;
  .demo-image-lazy-inner {
    width: 3000px;
    height: 200px;
  }
  .bin-image {
    float: left;
    width: 400px;
    height: 200px;
  }
}
</style>
<template>
  <b-row gutter="20">
    <b-col span="12">
      <div class="demo-image-lazy-vertical">
        <b-image v-for="url in vUrlList" :key="url" :src="url" lazy />
      </div>
      <p class="t-center">纵向</p>
    </b-col>
    <b-col span="12">
      <div flex="main:center">
        <div class="demo-image-lazy">
          <div class="demo-image-lazy-inner">
            <b-image v-for="url in hUrlList" :key="url" :src="url" lazy />
          </div>
        </div>
      </div>
      <p class="t-center">横向</p>
    </b-col>
  </b-row>
</template>

<script setup>
const vUrlList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
const hUrlList = [
  'https://file.iviewui.com/images/image-demo-1.jpg',
  'https://file.iviewui.com/images/image-demo-2.jpg',
  'https://file.iviewui.com/images/image-demo-3.jpg',
  'https://file.iviewui.com/images/image-demo-4.jpg',
  'https://file.iviewui.com/images/image-demo-5.jpg',
  'https://file.iviewui.com/images/image-demo-6.jpg'
]
</script>

<style scoped>
.demo-image-lazy-vertical {
  height: 300px;
  overflow-y: auto;
  .bin-image {
    display: block;
    min-height: 200px;
  }
}

.demo-image-lazy {
  width: 400px;
  height: 200px;
  overflow: hidden;
  overflow-x: scroll;
  .demo-image-lazy-inner {
    width: 3000px;
    height: 200px;
  }
  .bin-image {
    float: left;
    width: 400px;
    height: 200px;
  }
}
</style>

预览 ​

设置属性 preview 可以开启图片预览模式，通过属性 preview-list 来设置图片列表，initial-index 属性设置打开预览时显示图片的索引。

预览时，可以使用 ←、→ 切换图片，↑、↓ 缩放图片，Space 显示 1:1 图片，ESC 退出预览。

<template>
  <b-space>
    <template v-for="(url, index) in urlList" :key="url">
      <b-image
        :src="url"
        fit="contain"
        width="120px"
        height="80px"
        preview
        :preview-list="urlList"
        :initial-index="index"
      />
    </template>
  </b-space>
</template>

<script setup>
const urlList = [
  'https://file.iviewui.com/images/image-demo-1.jpg',
  'https://file.iviewui.com/images/image-demo-2.jpg',
  'https://file.iviewui.com/images/image-demo-3.jpg',
  'https://file.iviewui.com/images/image-demo-4.jpg',
  'https://file.iviewui.com/images/image-demo-5.jpg',
  'https://file.iviewui.com/images/image-demo-6.jpg'
]
</script>
<template>
  <b-space>
    <template v-for="(url, index) in urlList" :key="url">
      <b-image
        :src="url"
        fit="contain"
        width="120px"
        height="80px"
        preview
        :preview-list="urlList"
        :initial-index="index"
      />
    </template>
  </b-space>
</template>

<script setup>
const urlList = [
  'https://file.iviewui.com/images/image-demo-1.jpg',
  'https://file.iviewui.com/images/image-demo-2.jpg',
  'https://file.iviewui.com/images/image-demo-3.jpg',
  'https://file.iviewui.com/images/image-demo-4.jpg',
  'https://file.iviewui.com/images/image-demo-5.jpg',
  'https://file.iviewui.com/images/image-demo-6.jpg'
]
</script>

单独预览组件 ​

图片预览组件 ImagePreview 也可以单独使用。

<template>
  <div>
    <b-button @click="handleShowPreview">打开图片预览</b-button>
    <b-image-preview v-model="preview" :preview-list="urlList" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const urlList = [
  'https://wangbin3162.github.io/bin-files/animals/00.jpg',
  'https://wangbin3162.github.io/bin-files/animals/01.jpg',
  'https://wangbin3162.github.io/bin-files/animals/02.jpg',
  'https://wangbin3162.github.io/bin-files/animals/03.jpg',
  'https://wangbin3162.github.io/bin-files/animals/04.jpg',
  'https://wangbin3162.github.io/bin-files/animals/05.jpg',
  'https://wangbin3162.github.io/bin-files/animals/06.jpg',
  'https://wangbin3162.github.io/bin-files/animals/07.jpg'
]

const preview = ref(false)

function handleShowPreview() {
  preview.value = true
}
</script>
<template>
  <div>
    <b-button @click="handleShowPreview">打开图片预览</b-button>
    <b-image-preview v-model="preview" :preview-list="urlList" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const urlList = [
  'https://wangbin3162.github.io/bin-files/animals/00.jpg',
  'https://wangbin3162.github.io/bin-files/animals/01.jpg',
  'https://wangbin3162.github.io/bin-files/animals/02.jpg',
  'https://wangbin3162.github.io/bin-files/animals/03.jpg',
  'https://wangbin3162.github.io/bin-files/animals/04.jpg',
  'https://wangbin3162.github.io/bin-files/animals/05.jpg',
  'https://wangbin3162.github.io/bin-files/animals/06.jpg',
  'https://wangbin3162.github.io/bin-files/animals/07.jpg'
]

const preview = ref(false)

function handleShowPreview() {
  preview.value = true
}
</script>

Props ​

参数说明类型可选值默认值
src图片地址String——
alt图片描述String——
referrer-policy原生属性String——
width宽度String Number——
height高度String Number——
fit图片适配容器模式包含 fill，contain，cover，none，scale-downString—
lazy是否懒加载Boolean—false
scroll-container加载容器String , HTMLElement—false
append-to-body是否将弹层放置于 body 内Boolean—false
mask-closable是否允许点击遮罩层关闭Boolean—true
preview-tip是否显示预览提示和遮罩Boolean—true
preview是否图片预览Boolean—false
preview-list图片预览列表Array—[]
infinite是否循环切换Boolean—true
initial-index打开预览的第一项Number—0
toolbar图片预览操作栏选项，按数组顺序排序Array—['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight', 'download']
initial-index打开预览的第一项Number—0
failText失败文字String—失败
loadingText加载文字String—加载中
previewText预览文字String—预览

Events ​

事件名称说明返回值
load图片加载成功-
error图片加载失败-
switch图片预览切换-
close图片预览关闭Object
click图片点击initialIndex

Slots ​

名称说明
placeholder自定义图片加载中
error自定义图片加载失败
preview自定义图片预览

MIT Licensed | Copyright © 2023-present bin-ui-design