first commit

unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/image/image.js

@@ -0,0 +1,190 @@
+"use strict";
+const uni_modules_tdesignUniapp_components_common_src_instantiationDecorator = require("../common/src/instantiationDecorator.js");
+const uni_modules_tdesignUniapp_components_image_props = require("./props.js");
+const uni_modules_tdesignUniapp_components_common_config = require("../common/config.js");
+const uni_modules_tdesignUniapp_components_common_utils = require("../common/utils.js");
+const uni_modules_tdesignUniapp_components_common_version = require("../common/version.js");
+const uni_modules_tdesignUniapp_components_common_utils_wxs = require("../common/utils.wxs.js");
+const common_vendor = require("../../../../common/vendor.js");
+const TLoading = () => "../loading/loading.js";
+const TIcon = () => "../icon/icon.js";
+const name = `${uni_modules_tdesignUniapp_components_common_config.prefix}-image`;
+const _sfc_main = uni_modules_tdesignUniapp_components_common_src_instantiationDecorator.uniComponent({
+  name,
+  options: {
+    styleIsolation: "shared"
+  },
+  externalClasses: [
+    `${uni_modules_tdesignUniapp_components_common_config.prefix}-class`,
+    `${uni_modules_tdesignUniapp_components_common_config.prefix}-class-load`,
+    `${uni_modules_tdesignUniapp_components_common_config.prefix}-class-image`,
+    `${uni_modules_tdesignUniapp_components_common_config.prefix}-class-error`
+  ],
+  components: {
+    TLoading,
+    TIcon
+  },
+  props: {
+    ...uni_modules_tdesignUniapp_components_image_props.ImageProps
+  },
+  emits: [
+    "click"
+  ],
+  data() {
+    return {
+      prefix: uni_modules_tdesignUniapp_components_common_config.prefix,
+      isLoading: true,
+      isFailed: false,
+      innerStyle: "",
+      classPrefix: name,
+      tools: uni_modules_tdesignUniapp_components_common_utils_wxs.tools,
+      preSrc: ""
+    };
+  },
+  watch: {
+    src() {
+      if (this.preSrc !== this.src) {
+        this.update();
+      }
+    },
+    width: "calcSize",
+    height: "calcSize"
+  },
+  mounted() {
+    this.calcSize(this.width, this.height);
+  },
+  methods: {
+    onLoaded(e) {
+      const version = uni_modules_tdesignUniapp_components_common_utils.appBaseInfo.SDKVersion;
+      const {
+        mode,
+        tId
+      } = this;
+      const lower = uni_modules_tdesignUniapp_components_common_version.compareVersion(version, "2.10.3") < 0;
+      if ("heightFix" === mode && lower) {
+        uni_modules_tdesignUniapp_components_common_utils.getRect(this, `#${tId || "image"}`).then((e2) => {
+          const {
+            height,
+            width
+          } = e2;
+          this.innerStyle = `height: ${uni_modules_tdesignUniapp_components_common_utils.addUnit(height)}; width: ${width}px;`;
+        }).catch(() => {
+        });
+      }
+      this.isLoading = false;
+      this.isFailed = false;
+      this.$emit("load", { e });
+    },
+    onLoadError(e) {
+      this.isLoading = false;
+      this.isFailed = true;
+      this.$emit("error", { e });
+    },
+    calcSize(width = this.width, height = this.height) {
+      let innerStyle = "";
+      if (width) {
+        innerStyle += `width: ${uni_modules_tdesignUniapp_components_common_utils.addUnit(width)};`;
+      }
+      if (height) {
+        innerStyle += `height: ${uni_modules_tdesignUniapp_components_common_utils.addUnit(height)};`;
+      }
+      this.innerStyle = innerStyle;
+    },
+    update() {
+      const {
+        src
+      } = this;
+      this.preSrc = src;
+      if (src) {
+        this.isLoading = true;
+        this.isFailed = false;
+      } else {
+        this.onLoadError({
+          errMsg: "图片链接为空"
+        });
+      }
+    },
+    onClick(e) {
+      this.$emit("click", e);
+    }
+  }
+});
+if (!Array) {
+  const _easycom_t_loading2 = common_vendor.resolveComponent("t-loading");
+  const _easycom_t_icon2 = common_vendor.resolveComponent("t-icon");
+  (_easycom_t_loading2 + _easycom_t_icon2)();
+}
+const _easycom_t_loading = () => "../loading/loading.js";
+const _easycom_t_icon = () => "../icon/icon.js";
+if (!Math) {
+  (_easycom_t_loading + _easycom_t_icon)();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: _ctx.isLoading
+  }, _ctx.isLoading ? common_vendor.e({
+    b: _ctx.loading === "default"
+  }, _ctx.loading === "default" ? {
+    c: common_vendor.p({
+      theme: "dots",
+      size: "44rpx",
+      loading: true,
+      ["inherit-color"]: true,
+      ["t-class"]: _ctx.tClassLoad,
+      ["t-class-text"]: _ctx.classPrefix + "--loading-text"
+    })
+  } : _ctx.loading !== "" && _ctx.loading !== "slot" ? {
+    e: common_vendor.t(_ctx.loading),
+    f: common_vendor.n(_ctx.classPrefix + "__common " + _ctx.tClassLoad)
+  } : {}, {
+    d: _ctx.loading !== "" && _ctx.loading !== "slot",
+    g: common_vendor.s(_ctx.tools._style([_ctx.innerStyle])),
+    h: common_vendor.n(_ctx.classPrefix + "__mask " + _ctx.classPrefix + "--loading " + _ctx.classPrefix + "--shape-" + _ctx.shape),
+    i: _ctx.ariaHidden
+  }) : _ctx.isFailed ? common_vendor.e({
+    k: _ctx.error === "default"
+  }, _ctx.error === "default" ? {
+    l: common_vendor.p({
+      name: "close",
+      ["aria-role"]: "img",
+      ["aria-label"]: "加载失败"
+    }),
+    m: common_vendor.n(_ctx.tClassLoad)
+  } : _ctx.error && _ctx.error !== "slot" ? {
+    o: common_vendor.t(_ctx.error),
+    p: common_vendor.n(_ctx.classPrefix + "__common "),
+    q: common_vendor.n(_ctx.tClassLoad)
+  } : {}, {
+    n: _ctx.error && _ctx.error !== "slot",
+    r: common_vendor.s(_ctx.tools._style([_ctx.innerStyle])),
+    s: common_vendor.n(_ctx.classPrefix + "__mask " + _ctx.classPrefix + "--failed " + _ctx.classPrefix + "--shape-" + _ctx.shape),
+    t: common_vendor.n(_ctx.tClassError),
+    v: _ctx.ariaHidden
+  }) : {}, {
+    j: _ctx.isFailed,
+    w: !_ctx.isFailed
+  }, !_ctx.isFailed ? {
+    x: _ctx.tId || "image",
+    y: common_vendor.s(_ctx.tools._style([_ctx.innerStyle])),
+    z: common_vendor.n(_ctx.classPrefix + "__img " + _ctx.classPrefix + "--shape-" + _ctx.shape + " "),
+    A: common_vendor.n((_ctx.isLoading ? _ctx.classPrefix + "--lazy" : "") + " "),
+    B: common_vendor.n(_ctx.tClassImage),
+    C: _ctx.src,
+    D: _ctx.mode,
+    E: _ctx.webp,
+    F: _ctx.lazy,
+    G: _ctx.showMenuByLongpress,
+    H: _ctx.ariaHidden || _ctx.isLoading || _ctx.isFailed,
+    I: _ctx.ariaLabel,
+    J: common_vendor.o((...args) => _ctx.onClick && _ctx.onClick(...args)),
+    K: common_vendor.o((...args) => _ctx.onLoaded && _ctx.onLoaded(...args)),
+    L: common_vendor.o((...args) => _ctx.onLoadError && _ctx.onLoadError(...args))
+  } : {}, {
+    M: common_vendor.s(_ctx.tools._style([_ctx.customStyle])),
+    N: common_vendor.n(_ctx.tClass),
+    O: common_vendor.n(_ctx.classPrefix)
+  });
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ea3c0982"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/image/image.js.map

unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/image/image.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-loading": "../loading/loading",
+    "t-icon": "../icon/icon"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/image/image.wxml

@@ -0,0 +1 @@
+<view style="{{M}}" class="{{['data-v-ea3c0982', N, O]}}"><view wx:if="{{a}}" style="{{g}}" class="{{['data-v-ea3c0982', h]}}" aria-hidden="{{i}}"><t-loading wx:if="{{b}}" class="data-v-ea3c0982" u-i="ea3c0982-0" bind:__l="__l" u-p="{{c}}"/><view wx:elif="{{d}}" class="{{['data-v-ea3c0982', f]}}">{{e}}</view><slot wx:else name="loading"/></view><view wx:elif="{{j}}" style="{{r}}" class="{{['data-v-ea3c0982', s, t]}}" aria-hidden="{{v}}"><view wx:if="{{k}}" style="font-size:44rpx" class="{{['data-v-ea3c0982', m]}}"><t-icon wx:if="{{l}}" class="data-v-ea3c0982" u-i="ea3c0982-1" bind:__l="__l" u-p="{{l}}"/></view><view wx:elif="{{n}}" class="{{['data-v-ea3c0982', p, q]}}">{{o}}</view><slot wx:else name="error"/></view><image wx:if="{{w}}" id="{{x}}" style="{{y}}" class="{{['data-v-ea3c0982', z, A, B]}}" src="{{C}}" mode="{{D}}" webp="{{E}}" lazy-load="{{F}}" show-menu-by-longpress="{{G}}" aria-hidden="{{H}}" aria-label="{{I}}" bindtap="{{J}}" bindload="{{K}}" binderror="{{L}}"/></view>

unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/image/image.wxss

@@ -0,0 +1,44 @@
+.t-image.data-v-ea3c0982 {
+  position: relative;
+  display: inline-block;
+}
+.t-image__mask.data-v-ea3c0982,
+.t-image__img.data-v-ea3c0982 {
+  color: var(--td-image-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  vertical-align: top;
+  width: inherit;
+  height: inherit;
+}
+.t-image__mask.data-v-ea3c0982 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--td-image-loading-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+  color: var(--td-image-loading-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-image--loading-text.data-v-ea3c0982 {
+  width: 0;
+  height: 0;
+}
+.t-image__common.data-v-ea3c0982 {
+  width: 100%;
+  height: 100%;
+}
+.t-image--lazy.data-v-ea3c0982 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.t-image--shape-circle.data-v-ea3c0982 {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.t-image--shape-round.data-v-ea3c0982 {
+  border-radius: var(--td-image-round-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-image--shape-square.data-v-ea3c0982 {
+  border-radius: 0;
+  overflow: hidden;
+}

unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/image/props.js

@@ -0,0 +1,69 @@
+"use strict";
+const ImageProps = {
+  /** 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” */
+  error: {
+    type: String,
+    default: "default"
+  },
+  /** 高度，默认单位为`px` */
+  height: {
+    type: [String, Number]
+  },
+  /** 是否开启图片懒加载 */
+  lazy: Boolean,
+  /** 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” */
+  loading: {
+    type: String,
+    default: "default"
+  },
+  /** 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html) */
+  mode: {
+    type: String,
+    default: "scaleToFill",
+    validator(val) {
+      if (!val)
+        return true;
+      return ["scaleToFill", "aspectFit", "aspectFill", "widthFix", "heightFix", "top", "bottom", "center", "left", "right", "top left", "top right", "bottom left", "bottom right"].includes(val);
+    }
+  },
+  /** 图片圆角类型 */
+  shape: {
+    type: String,
+    default: "square",
+    validator(val) {
+      if (!val)
+        return true;
+      return ["circle", "round", "square"].includes(val);
+    }
+  },
+  /** 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单 */
+  showMenuByLongpress: Boolean,
+  /** 图片链接 */
+  src: {
+    type: String,
+    default: ""
+  },
+  /** 图片标签id */
+  tId: {
+    type: String,
+    default: ""
+  },
+  /** 默认不解析 webP 格式，只支持网络资源 */
+  webp: Boolean,
+  /** 宽度，默认单位为`px` */
+  width: {
+    type: [String, Number]
+  },
+  /** 图片加载失败时触发 */
+  onError: {
+    type: Function,
+    default: () => ({})
+  },
+  /** 图片加载完成时触发 */
+  onLoad: {
+    type: Function,
+    default: () => ({})
+  }
+};
+exports.ImageProps = ImageProps;
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/image/props.js.map