|
@@ -22,7 +22,7 @@
|
|
|
/>
|
|
/>
|
|
|
<view v-if="showFailed && isErrorState" class="inner-view error">
|
|
<view v-if="showFailed && isErrorState" class="inner-view error">
|
|
|
<!-- todo: failed -->
|
|
<!-- todo: failed -->
|
|
|
- <Text color="second">加载失败</Text>
|
|
|
|
|
|
|
+ <Text color="second" :text="src ? '暂无图片' : '加载失败'" />
|
|
|
</view>
|
|
</view>
|
|
|
<view v-if="showLoading && isLoadState" class="inner-view loading">
|
|
<view v-if="showLoading && isLoadState" class="inner-view loading">
|
|
|
<ActivityIndicator
|
|
<ActivityIndicator
|
|
@@ -34,7 +34,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { computed, ref, watch } from 'vue';
|
|
|
|
|
|
|
+import { computed, onMounted, ref, watch } from 'vue';
|
|
|
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
|
|
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
|
|
|
import ActivityIndicator from './ActivityIndicator.vue';
|
|
import ActivityIndicator from './ActivityIndicator.vue';
|
|
|
import Text from './Text.vue';
|
|
import Text from './Text.vue';
|
|
@@ -145,9 +145,26 @@ function handleClick() {
|
|
|
}
|
|
}
|
|
|
emit('click');
|
|
emit('click');
|
|
|
}
|
|
}
|
|
|
|
|
+function loadSrcState() {
|
|
|
|
|
+ if (props.src) {
|
|
|
|
|
+ isErrorState.value = false;
|
|
|
|
|
+ isLoadState.value = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ isErrorState.value = true;
|
|
|
|
|
+ isLoadState.value = false;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
watch(() => props.src, (newVal, oldVal) => {
|
|
watch(() => props.src, (newVal, oldVal) => {
|
|
|
- isErrorState.value = false;
|
|
|
|
|
|
|
+ if (newVal) {
|
|
|
|
|
+ isErrorState.value = true;
|
|
|
|
|
+ isLoadState.value = false;
|
|
|
|
|
+ } else
|
|
|
|
|
+ isErrorState.value = false;
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ loadSrcState();
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|