ERP 组件库

Appearance

图片 Image ​

展示和预览图片。 ​

基本用法 ​

需要查看图片的时候，简单的设置 src 属性，就能获得一个有预览图片功能的组件。

代码事例
vue
<template>
  <fk-image
    width="200"
    src="https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=1"
  />
</template>

显示 Caption ​

通过设置 title 和 description 可以将图片的标题和描述显示在图片内部或者底部，显示的位置通过 footerPosition 控制。

代码事例
vue
<template>
  <fk-image
    width="200px"
    :src="src"
    :title="title"
    :description="description"
  />
  <fk-image
    width="200px"
    :src="src"
    :title="title"
    :description="description"
    footer-position="outer"
    style="margin-left: 67px; vertical-align: top;"
  />
</template>

<script>
export default {
  setup() {
    return {
      src: 'https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=2',
      title: 'A user’s avatar',
      description: 'Present by Aaaa Design',
    }
  }
}
</script>

单独使用多图预览组件 ​

<fk-image-preview-group> 可单独使用，需控制 visible 。在图片的展示上分为两种场景，一是通过 defaultCurrent 指定第一张展示的图片；二是控制 current 来决定当前显示的是第几张图片。

代码事例
vue
<template>
  <fk-button type="primary" @click="onClick">Click me to preview multiple image</fk-button>
  <fk-image-preview-group
    v-model:visible="visible"
    v-model:current="current"
    infinite
    :src-list="[
      'https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg',
      'https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg',
      'https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg',
      'https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg',
    ]"
  />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const visible = ref(false)
    const current = ref(3);
    const onClick = () => {
      visible.value = true;
    };

    return {
      visible,
      current,
      onClick,
    };
  },
}
</script>

单独使用预览组件 ​

fk-image-preview 可单独使用，需要手动控制 visible。

代码事例
vue
<template>
  <fk-button type="primary" @click="onClick">Click me to preview image</fk-button>
  <fk-image-preview
    v-model:visible="visible"
    src="https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=21"
  />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const visible = ref(false)
    const onClick = () => {
      visible.value = true;
    };

    return {
      visible,
      onClick,
    };
  },
};
</script>

自定义预览操作栏 ​

通过设置 actionsLayout 可以调整预览操作栏中功能按钮的顺序，同时可以过滤功能按钮，只有在 actionsLayout 中的按钮才会出现。 此外从 0.0.1 开始，预览组件 fk-image-preview 提供了 actions 插槽，支持自定义额外的操作项，同时还提供了操作项组件 fk-image-preview-action。

代码事例
vue
<template>
  <fk-image
    width="200"
    src="https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=31"
    :preview-props="{
      actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
    }"
  >
    <template #preview-actions>
      <fk-image-preview-action name="下载" @click="download"><icon-download /></fk-image-preview-action>
    </template>
  </fk-image>
</template>

<script>
export default {
  setup() {
    const download = () => {
      console.log('点击下载图片')
    };

    return {
      download
    }
  },
}
</script>

错误状态 ​

当加载图片失败的时候显示的内容。

代码事例
vue
<template>
  <fk-space :size="20">
    <fk-image
      width="300"
      height="200"
      src="some-error.png"
    />
    <fk-image
      width="300"
      height="200"
      src="some-error.png"
      alt="This is a picture of humans eating ice cream. The humans on the screen are very happy just now. The ice cream is green, it seems to be flavored with matcha. The gender of the human is unknown. It has very long hair and the human hair is brown."
    />
  </fk-space>
</template>

额外操作 ​

组件提供了具名插槽 extra 供用户在页脚定制额外的内容。

代码事例
vue
<template>
  <fk-image
    src='https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=41'
    title='A user’s avatar'
    description='Present by Aaaa Design'
    width="260"
    style="margin-right: 67px; vertical-align: top;"
    :preview-visible="visible1"
    @preview-visible-change="() => { visible1= false }"
  >
    <template #extra>
      <div class="actions">
        <span class="action" @click="() => { visible1 = true }"><icon-eye /></span>
        <span class="action" @click="onDownLoad"><icon-download /></span>
        <fk-tooltip content="A user’s avatar">
          <span class="action"><icon-info-circle /></span>
        </fk-tooltip>
      </div>
    </template>
  </fk-image>
  <fk-image
    src='https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=42'
    title='A user’s avatar'
    description='Present by Aaaa Design'
    width="260"
    footer-position="outer"
    :preview-visible="visible2"
    @preview-visible-change="() => { visible2 = false }"
  >
    <template #extra>
      <div class="actions actions-outer">
        <span class="action" @click="() => { visible2 = true }"><icon-eye /></span>
        <span class="action" @click="onDownLoad"><icon-download /></span>
        <fk-tooltip content="A user’s avatar">
          <span class="action"><icon-info-circle /></span>
        </fk-tooltip>
      </div>
    </template>
  </fk-image>
</template>
<script>
  import { ref } from 'vue';
  import { IconDownload, IconEye, IconInfoCircle } from '@erp/common';

  export default {
    components: {
      IconEye, IconDownload, IconInfoCircle
    },
    setup() {
      const visible1 = ref(false);
      const visible2 = ref(false);

      return {
        visible1,
        visible2,
        onDownLoad() {
          console.log('download');
        },
      }
    }
  }
</script>
<style scoped>
  .actions {
    display: flex;
    align-items: center;
  }
  .action {
    padding: 5px 4px;
    font-size: 14px;
    margin-left: 12px;
    border-radius: 2px;
    line-height: 1;
    cursor: pointer;
  }
  .action:first-child {
    margin-left: 0;
  }

  .action:hover {
    background: rgba(0,0,0,.5);
  }
  .actions-outer {
    .action {
      &:hover {
        color: #ffffff;
      }
    }
  }
</style>

加载状态 ​

默认情况下，加载效果是不显示的，可通过设置 showLoader 为 true 显示默认加载效果。如果默认加载效果不符合需求, 还可以通过 具名插槽 loader 自行设置加载样式。

代码事例
vue
<template>
  <div>
    <fk-button
      type="primary"
      style="margin-bottom: 20px;"
      @click="() => {timestamp = Date.now()}"
    >
      reload
    </fk-button>
  </div>
  <fk-image
    width="200"
    height="200"
    :src="`https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?timestamp=${timestamp}&_=51`"
    show-loader
  />
  <fk-image
    width="200"
    height="200"
    :src="`https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?timestamp=${timestamp}&_=52`"
    style="marginLeft: 67px"
  >
    <template #loader>
      <div class="loader-animate"/>
    </template>
  </fk-image>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const timestamp = ref('');
      return {
        timestamp,
      }
    }
  }
</script>
<style scoped>
  .loader-animate {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      -60deg,
      var(--color-fill-2) 25%,
      var(--color-neutral-3) 40%,
      var(--color-fill-3) 55%
    );
    background-size: 400% 100%;
    animation: loop-circle 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
  }

  @keyframes loop-circle {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }
</style>

多图预览 ​

用 <fk-image-preview-group> 包裹 <fk-image> 组件即可进行多图预览。

代码事例
vue
<template>
  <fk-image-preview-group infinite>
    <fk-space>
      <fk-image src="https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg" width="160" />
      <fk-image src="https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg" width="160" />
      <fk-image src="https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg" width="160" />
      <fk-image src="https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg" width="160" />
    </fk-space>
  </fk-image-preview-group>
</template>

挂载节点 ​

可以通过 popupContainer 指定预览挂载的父级节点。

代码事例
vue
<template>
  <div
    id="image-demo-preview-popup-container"
    :style="{
      width: '100%',
      height: '400px',
      backgroundColor: 'var(--color-fill-2)',
      position: 'relative',
      overflow: 'hidden',
      lineHeight: '400px',
      textAlign: 'center',
    }"
  >
    <fk-image
      width="200"
      src="https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=71"
      :preview-props="{
        popupContainer: '#image-demo-preview-popup-container',
        closable: false,
      }"
    />
  </div>
</template>

渐进加载 ​

大图可通过给 loader 传递一个小一些的图片，让其在原图未被加载成功时显示，以此来模拟渐进加载。

代码事例
vue
<template>
  <div>
    <fk-button
      type="primary"
      style="margin-bottom: 20px;"
      @click="() => {timestamp = Date.now()}"
    >
      reload
    </fk-button>
  </div>
  <fk-image
    width="200"
    height="200"
    :src="`https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?timestamp=${timestamp}?_=81`"
  >
    <template #loader>
      <img
        width="200"
        src="https://test.img.fukerp.com/default/FLIrNHVfnvjvOXN40Rm1l5dugEwsjUDsxEDW3kIP.jpg?_=82"
        style="filter: blur(5px);"
      />
    </template>
  </fk-image>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const timestamp = ref('');
    return {
      timestamp,
    }
  }
}
</script>

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team