mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-10-31 18:28:43 +08:00
多模块重构 12：修改项目名字，按照新的规则
This commit is contained in:
YunaiV
@@ -0,0 +1,84 @@
|
||||
export default {
|
||||
props: {
|
||||
// 图片地址
|
||||
src: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.src
|
||||
},
|
||||
// 裁剪模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.mode
|
||||
},
|
||||
// 宽度，单位任意
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.width
|
||||
},
|
||||
// 高度，单位任意
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.height
|
||||
},
|
||||
// 图片形状，circle-圆形，square-方形
|
||||
shape: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.shape
|
||||
},
|
||||
// 圆角，单位任意
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.radius
|
||||
},
|
||||
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
|
||||
lazyLoad: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.lazyLoad
|
||||
},
|
||||
// 开启长按图片显示识别微信小程序码菜单
|
||||
showMenuByLongpress: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showMenuByLongpress
|
||||
},
|
||||
// 加载中的图标，或者小图片
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.loadingIcon
|
||||
},
|
||||
// 加载失败的图标，或者小图片
|
||||
errorIcon: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.errorIcon
|
||||
},
|
||||
// 是否显示加载中的图标或者自定义的slot
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showLoading
|
||||
},
|
||||
// 是否显示加载错误的图标或者自定义的slot
|
||||
showError: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.showError
|
||||
},
|
||||
// 是否需要淡入效果
|
||||
fade: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.fade
|
||||
},
|
||||
// 只支持网络资源，只对微信小程序有效
|
||||
webp: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.image.webp
|
||||
},
|
||||
// 过渡时间，单位ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.image.duration
|
||||
},
|
||||
// 背景颜色，用于深色页面加载图片时，为了和背景色融合
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.image.bgColor
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<u-transition
|
||||
mode="fade"
|
||||
:show="show"
|
||||
:duration="fade ? 1000 : 0"
|
||||
>
|
||||
<view
|
||||
class="u-image"
|
||||
@tap="onClick"
|
||||
:style="[wrapStyle, backgroundStyle]"
|
||||
>
|
||||
<image
|
||||
v-if="!isError"
|
||||
:src="src"
|
||||
:mode="mode"
|
||||
@error="onErrorHandler"
|
||||
@load="onLoadHandler"
|
||||
:show-menu-by-longpress="showMenuByLongpress"
|
||||
:lazy-load="lazyLoad"
|
||||
class="u-image__image"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius),
|
||||
width: $u.addUnit(width),
|
||||
height: $u.addUnit(height)
|
||||
}"
|
||||
></image>
|
||||
<view
|
||||
v-if="showLoading && loading"
|
||||
class="u-image__loading"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
|
||||
backgroundColor: this.bgColor
|
||||
}"
|
||||
>
|
||||
<slot name="loading">
|
||||
<u-icon
|
||||
:name="loadingIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="showError && isError && !loading"
|
||||
class="u-image__error"
|
||||
:style="{
|
||||
borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
|
||||
}"
|
||||
>
|
||||
<slot name="error">
|
||||
<u-icon
|
||||
:name="errorIcon"
|
||||
:width="width"
|
||||
:height="height"
|
||||
></u-icon>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './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, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
// 图片是否加载错误，如果是，则显示错误占位图
|
||||
isError: false,
|
||||
// 初始化组件时，默认为加载中状态
|
||||
loading: true,
|
||||
// 不透明度，为了实现淡入淡出的效果
|
||||
opacity: 1,
|
||||
// 过渡时间，因为props的值无法修改，故需要一个中间值
|
||||
durationTime: this.duration,
|
||||
// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
|
||||
backgroundStyle: {},
|
||||
// 用于fade模式的控制组件显示与否
|
||||
show: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
src: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
if (!n) {
|
||||
// 如果传入null或者''，或者false，或者undefined，标记为错误状态
|
||||
this.isError = true
|
||||
this.loading = false
|
||||
} else {
|
||||
this.isError = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
let style = {};
|
||||
// 如果是显示圆形，设置一个很多的半径值即可
|
||||
style.borderRadius = this.shape == 'circle' ? '10000px' : this.$u.addUnit(this.radius)
|
||||
// 如果设置圆角，必须要有hidden，否则可能圆角无效
|
||||
style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
|
||||
// if (this.fade) {
|
||||
// style.opacity = this.opacity
|
||||
// // nvue下，这几个属性必须要分开写
|
||||
// style.transitionDuration = `${this.durationTime}ms`
|
||||
// style.transitionTimingFunction = 'ease-in-out'
|
||||
// style.transitionProperty = 'opacity'
|
||||
// }
|
||||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.show = true
|
||||
},
|
||||
methods: {
|
||||
// 点击图片
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
// 图片加载失败
|
||||
onErrorHandler(err) {
|
||||
this.loading = false
|
||||
this.isError = true
|
||||
this.$emit('error', err)
|
||||
},
|
||||
// 图片加载完成，标记loading结束
|
||||
onLoadHandler() {
|
||||
this.loading = false
|
||||
this.isError = false
|
||||
this.$emit('load')
|
||||
this.removeBgColor()
|
||||
// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
|
||||
// 否则无需fade效果时，png图片依然能看到下方的背景色
|
||||
// if (!this.fade) return this.removeBgColor();
|
||||
// // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
|
||||
// this.opacity = 0;
|
||||
// // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
|
||||
// // 到图片展示的过程中的淡入效果
|
||||
// this.durationTime = 0;
|
||||
// // 延时50ms，否则在浏览器H5，过渡效果无效
|
||||
// setTimeout(() => {
|
||||
// this.durationTime = this.duration;
|
||||
// this.opacity = 1;
|
||||
// setTimeout(() => {
|
||||
// this.removeBgColor();
|
||||
// }, this.durationTime);
|
||||
// }, 50);
|
||||
},
|
||||
// 移除图片的背景色
|
||||
removeBgColor() {
|
||||
// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
|
||||
this.backgroundStyle = {
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
|
||||
$u-image-error-top:0px !default;
|
||||
$u-image-error-left:0px !default;
|
||||
$u-image-error-width:100% !default;
|
||||
$u-image-error-hight:100% !default;
|
||||
$u-image-error-background-color:$u-bg-color !default;
|
||||
$u-image-error-color:$u-tips-color !default;
|
||||
$u-image-error-font-size: 46rpx !default;
|
||||
|
||||
.u-image {
|
||||
position: relative;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
&__loading,
|
||||
&__error {
|
||||
position: absolute;
|
||||
top: $u-image-error-top;
|
||||
left: $u-image-error-left;
|
||||
width: $u-image-error-width;
|
||||
height: $u-image-error-hight;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $u-image-error-background-color;
|
||||
color: $u-image-error-color;
|
||||
font-size: $u-image-error-font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user