123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- "use strict";
- const common_vendor = require("../../../../common/vendor.js");
- const _sfc_main = {
- name: "u-image",
- mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$13],
- 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) {
- this.isError = true;
- } else {
- this.isError = false;
- this.loading = true;
- }
- }
- }
- },
- computed: {
- wrapStyle() {
- let style = {};
- style.width = this.$u.addUnit(this.width);
- style.height = this.$u.addUnit(this.height);
- style.borderRadius = this.shape == "circle" ? "10000px" : common_vendor.index.$u.addUnit(this.radius);
- style.overflow = this.radius > 0 ? "hidden" : "visible";
- return common_vendor.index.$u.deepMerge(style, common_vendor.index.$u.addStyle(this.customStyle));
- }
- },
- mounted() {
- this.show = true;
- },
- emits: ["click", "error", "load"],
- 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();
- },
- // 移除图片的背景色
- removeBgColor() {
- this.backgroundStyle = {
- backgroundColor: "transparent"
- };
- }
- }
- };
- if (!Array) {
- const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
- const _easycom_u_transition2 = common_vendor.resolveComponent("u-transition");
- (_easycom_u_icon2 + _easycom_u_transition2)();
- }
- const _easycom_u_icon = () => "../u-icon/u-icon.js";
- const _easycom_u_transition = () => "../u-transition/u-transition.js";
- if (!Math) {
- (_easycom_u_icon + _easycom_u_transition)();
- }
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
- return common_vendor.e({
- a: !$data.isError
- }, !$data.isError ? {
- b: _ctx.src,
- c: _ctx.mode,
- d: common_vendor.o((...args) => $options.onErrorHandler && $options.onErrorHandler(...args)),
- e: common_vendor.o((...args) => $options.onLoadHandler && $options.onLoadHandler(...args)),
- f: _ctx.showMenuByLongpress,
- g: _ctx.lazyLoad,
- h: _ctx.shape == "circle" ? "10000px" : _ctx.$u.addUnit(_ctx.radius),
- i: _ctx.$u.addUnit(_ctx.width),
- j: _ctx.$u.addUnit(_ctx.height)
- } : {}, {
- k: _ctx.showLoading && $data.loading
- }, _ctx.showLoading && $data.loading ? {
- l: common_vendor.p({
- name: _ctx.loadingIcon,
- width: _ctx.width,
- height: _ctx.height
- }),
- m: _ctx.shape == "circle" ? "50%" : _ctx.$u.addUnit(_ctx.radius),
- n: this.bgColor,
- o: _ctx.$u.addUnit(_ctx.width),
- p: _ctx.$u.addUnit(_ctx.height)
- } : {}, {
- q: _ctx.showError && $data.isError && !$data.loading
- }, _ctx.showError && $data.isError && !$data.loading ? {
- r: common_vendor.p({
- name: _ctx.errorIcon,
- width: _ctx.width,
- height: _ctx.height
- }),
- s: _ctx.shape == "circle" ? "50%" : _ctx.$u.addUnit(_ctx.radius),
- t: _ctx.$u.addUnit(_ctx.width),
- v: _ctx.$u.addUnit(_ctx.height)
- } : {}, {
- w: common_vendor.o((...args) => $options.onClick && $options.onClick(...args)),
- x: common_vendor.s($options.wrapStyle),
- y: common_vendor.s($data.backgroundStyle),
- z: common_vendor.p({
- mode: "fade",
- show: $data.show,
- duration: _ctx.fade ? 1e3 : 0
- })
- });
- }
- const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9d58ba7c"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/node_modules/uview-plus/components/u-image/u-image.vue"]]);
- wx.createComponent(Component);
|