From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 08 Jan 2024 16:16:12 +0800
Subject: [PATCH] fix:地图导航
---
uni_modules/uview-ui/components/u-image/u-image.vue | 232 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 232 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-image/u-image.vue b/uni_modules/uview-ui/components/u-image/u-image.vue
new file mode 100644
index 0000000..473e35b
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-image/u-image.vue
@@ -0,0 +1,232 @@
+<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,
+ width: $u.addUnit(width),
+ height: $u.addUnit(height)
+ }"
+ >
+ <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(radius),
+ width: $u.addUnit(width),
+ height: $u.addUnit(height)
+ }"
+ >
+ <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
+
+ } else {
+ this.isError = false;
+ this.loading = true;
+ }
+ }
+ }
+ },
+ computed: {
+ wrapStyle() {
+ let style = {};
+ // ������������addUnit()������������������������������������������px���������������������������������������������������������������rpx������
+ style.width = this.$u.addUnit(this.width);
+ style.height = this.$u.addUnit(this.height);
+ // ������������������������������������������������������������
+ style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$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(event) {
+ this.loading = false
+ this.isError = false
+ this.$emit('load', event)
+ 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;
+
+ &__image {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__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>
--
Gitblit v1.8.0