@nutui/nutui 3.2.6-beta.1 → 3.2.6-beta.2

package/dist/packages/_es/Image.js

@@ -1,44 +1,145 @@
 /*!
-* @nutui/nutui v3.2.6-beta.1 Mon Oct 31 2022 19:38:22 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.2.6-beta.2 Fri Nov 04 2022 17:24:29 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString } from "vue";
+import { reactive, useSlots, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
 import { c as createComponent } from "./component.js";
+import { p as pxCheck } from "./pxCheck.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
 const { componentName, create } = createComponent("image");
 const _sfc_main = create({
   props: {
-    name: {
+    src: String,
+    fit: {
+      type: String,
+      default: "fill"
+    },
+    position: {
+      type: String,
+      default: "center"
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: String,
+      default: "center"
+    },
+    height: {
       type: String,
       default: ""
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    radius: [String, Number],
+    showError: {
+      type: Boolean,
+      default: true
+    },
+    showLoading: {
+      type: Boolean,
+      default: true
     }
   },
-  emits: ["click"],
+  emits: ["click", "load", "error"],
   setup(props, { emit }) {
     const state = reactive({
-      data: "Welcome to developing components"
+      loading: true,
+      isError: false,
+      slotLoding: useSlots().loading,
+      slotError: useSlots().error
     });
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
-        [prefixCls]: true
+        [prefixCls]: true,
+        [`${prefixCls}-round`]: props.round
       };
     });
-    const handleClick = (event) => {
+    const stylebox = computed(() => {
+      let style = {};
+      if (props.width)
+        style.width = pxCheck(props.width);
+      if (props.height)
+        style.height = pxCheck(props.height);
+      if (props.radius !== void 0 && props.radius !== null) {
+        style.overflow = "hidden";
+        style.borderRadius = pxCheck(props.radius);
+      }
+      return style;
+    });
+    const styles = computed(() => {
+      let styless = {
+        objectFit: props.fit,
+        objectPosition: props.position
+      };
+      return styless;
+    });
+    watch(
+      () => props.src,
+      (val) => {
+        state.isError = false, state.loading = true;
+      }
+    );
+    const load = () => {
+      state.loading = false;
+      emit("load");
+    };
+    const error = () => {
+      state.isError = true;
+      state.loading = false;
+      emit("error");
+    };
+    const imageClick = (event) => {
       emit("click", event);
     };
-    return { ...toRefs(state), classes, handleClick };
+    return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load };
   }
 });
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-img-loading"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "nut-img-error"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    style: normalizeStyle(_ctx.stylebox),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
   }, [
-    createElementVNode("view", null, toDisplayString(_ctx.data), 1)
-  ], 2);
+    createElementVNode("img", {
+      class: "nut-img",
+      src: _ctx.src,
+      alt: _ctx.alt,
+      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args)),
+      onError: _cache[1] || (_cache[1] = (...args) => _ctx.error && _ctx.error(...args)),
+      style: normalizeStyle(_ctx.styles)
+    }, null, 44, _hoisted_1),
+    _ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_2, [
+      !_ctx.slotLoding ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 0,
+        name: "image"
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "loading")
+    ])) : createCommentVNode("", true),
+    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_3, [
+      !_ctx.slotError ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 0,
+        name: "image-error"
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "error")
+    ])) : createCommentVNode("", true)
+  ], 6);
 }
-var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index_taro as default };
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };