tdesign-pro-component
Version:
ProComponents tdesign-vue-next + Vue3 + TS
106 lines (105 loc) • 3.06 kB
JavaScript
import { defineComponent as k, useSlots as A, computed as g, openBlock as r, createElementBlock as V, createBlock as m, createCommentVNode as d, createElementVNode as i, createVNode as t, resolveComponent as u, createTextVNode as S } from "vue";
import { g as o, w as W } from "./utils-DU1amZow.js";
const B = {
class: "row-container"
}, N = {
class: "row-container-content"
}, H = {
class: "row-container-content-header"
}, I = {
class: "row-container-content-header-title"
}, T = {
class: "row-container-content-header-actions"
}, D = {
class: "row-container-content-description"
}, E = {
class: "row-container-content-footer"
}, F = /* @__PURE__ */ k({
name: "RowContainer",
__name: "RowContainer",
props: {
image: {},
title: {},
actions: {},
description: {},
footer: {},
imageAlign: {
default: "left"
},
imageStyle: {},
imageWidth: {
default: "260px"
},
imageView: {
type: Boolean
},
imageHeight: {
default: "100%"
}
},
setup(h) {
const e = h, n = A(), p = o(n, e, "image"), v = o(n, e, "title"), w = o(n, e, "actions"), _ = o(n, e, "description"), f = o(n, e, "footer"), a = g(() => (e.imageWidth + "").includes("px") ? e.imageWidth + "" : `${e.imageWidth}px`), s = g(() => e.imageAlign === "right" ? {
marginLeft: "12px"
} : {
marginRight: "12px"
}), c = () => typeof e.image == "string" ? e.imageView ? t("div", {
class: "row-container-image",
style: {
...s.value
}
}, [t(u("t-image-viewer"), {
images: [e.image]
}, {
trigger: ({
open: l
}) => t("div", {
class: "tdesign-demo-image-viewer__ui-image"
}, [t("img", {
alt: "test",
style: {
height: e.imageHeight,
width: a.value,
...e.imageStyle
},
src: e.image,
class: "tdesign-demo-image-viewer__ui-image--img"
}, null), t("div", {
class: "tdesign-demo-image-viewer__ui-image--hover",
onClick: () => l()
}, [t(u("t-icon"), {
name: "browse",
size: "1.1em",
style: {
marginRight: "4px"
}
}, null), t("span", null, [S("预览")])])])
})]) : t("div", {
class: "row-container-image",
style: {
width: a.value,
...s.value
}
}, [t("img", {
src: e.image,
style: {
width: a.value,
height: e.imageHeight,
...e.imageStyle
}
}, null)]) : t("div", {
class: "row-container-image",
style: {
width: a.value,
...s.value
}
}, [p]), y = () => v, R = () => _, x = () => w, C = () => f;
return (l, b) => (r(), V("div", B, [e.imageAlign === "left" ? (r(), m(c, {
key: 0
})) : d("", !0), i("div", N, [i("div", null, [i("div", H, [i("div", I, [t(y)]), i("div", T, [t(x)])]), i("div", D, [t(R)])]), i("div", E, [t(C)])]), e.imageAlign === "right" ? (r(), m(c, {
key: 1
})) : d("", !0)]));
}
}), M = W(F);
export {
M as R
};