74 lines
3.3 KiB
Vue
74 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<uvImage
|
|||
|
|
:src="src"
|
|||
|
|
:mode="mode"
|
|||
|
|
:width="width"
|
|||
|
|
:height="height"
|
|||
|
|
:shape="shape"
|
|||
|
|
:radius="radius"
|
|||
|
|
:lazyLoad="lazyLoad"
|
|||
|
|
:showMenuByLongpress="showMenuByLongpress"
|
|||
|
|
:loadingIcon="loadingIcon"
|
|||
|
|
:errorIcon="errorIcon"
|
|||
|
|
:showLoading="showLoading"
|
|||
|
|
:showError="showError"
|
|||
|
|
:fade="fade"
|
|||
|
|
:webp="webp"
|
|||
|
|
:duration="duration"
|
|||
|
|
:bgColor="bgColor"
|
|||
|
|
:customStyle="customStyle"
|
|||
|
|
@click="$emit('click')"
|
|||
|
|
@error="$emit('error')"
|
|||
|
|
@load="$emit('load')"
|
|||
|
|
>
|
|||
|
|
<template v-slot:loading>
|
|||
|
|
<slot name="loading"></slot>
|
|||
|
|
</template>
|
|||
|
|
<template v-slot:error>
|
|||
|
|
<slot name="error"></slot>
|
|||
|
|
</template>
|
|||
|
|
</uvImage>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 此组件存在的理由是，在nvue下，u-image被uni-app官方占用了，u-image在nvue中相当于image组件
|
|||
|
|
* 所以在nvue下，取名为u--image，内部其实还是u-iamge.vue，只不过做一层中转
|
|||
|
|
*/
|
|||
|
|
import uvImage from '../u-image/u-image.vue';
|
|||
|
|
import props from '../u-image/props.js';
|
|||
|
|
/**
|
|||
|
|
* Image 图片
|
|||
|
|
* @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
|
|||
|
|
* @tutorial https://uviewui.com/components/image.html
|
|||
|
|
* @property {String} src 图片地址
|
|||
|
|
* @property {String} mode 裁剪模式，见官网说明 （默认 'aspectFill' ）
|
|||
|
|
* @property {String | Number} width 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
|
|||
|
|
* @property {String | Number} height 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
|
|||
|
|
* @property {String} shape 图片形状，circle-圆形，square-方形 （默认 'square' ）
|
|||
|
|
* @property {String | Number} radius 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
|
|||
|
|
* @property {Boolean} lazyLoad 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
|
|||
|
|
* @property {Boolean} showMenuByLongpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
|
|||
|
|
* @property {String} loadingIcon 加载中的图标，或者小图片 （默认 'photo' ）
|
|||
|
|
* @property {String} errorIcon 加载失败的图标，或者小图片 （默认 'error-circle' ）
|
|||
|
|
* @property {Boolean} showLoading 是否显示加载中的图标或者自定义的slot （默认 true ）
|
|||
|
|
* @property {Boolean} showError 是否显示加载错误的图标或者自定义的slot （默认 true ）
|
|||
|
|
* @property {Boolean} fade 是否需要淡入效果 （默认 true ）
|
|||
|
|
* @property {Boolean} webp 只支持网络资源，只对微信小程序有效 （默认 false ）
|
|||
|
|
* @property {String | Number} duration 搭配fade参数的过渡时间，单位ms （默认 500 ）
|
|||
|
|
* @property {String} bgColor 背景颜色，用于深色页面加载图片时，为了和背景色融合 (默认 '#f3f4f6' )
|
|||
|
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|||
|
|
* @event {Function} click 点击图片时触发
|
|||
|
|
* @event {Function} error 图片加载失败时触发
|
|||
|
|
* @event {Function} load 图片加载成功时触发
|
|||
|
|
* @example <u--image width="100%" height="300px" :src="src"></u--image>
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'u--image',
|
|||
|
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
|
|||
|
|
components: {
|
|||
|
|
uvImage
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|