epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
49 lines (48 loc) • 1.29 kB
JavaScript
import { defineComponent as o, computed as r, h as i } from "vue";
import "element-plus";
const p = o({
props: {
componentSchema: {
type: Object,
required: !0,
default: () => ({})
},
modelValue: {
type: String,
default: () => ""
}
},
setup(n, { attrs: l, slots: a }) {
return () => {
const e = {
...n.componentSchema
// header: props.componentSchema?.label ?? "",
};
delete e.children;
const t = r(() => n.modelValue || e.componentProps.url);
return i(
t.value ? "iframe" : "div",
{
src: t.value,
style: {
textAlign: e.position,
width: "100%",
minHeight: "80px",
fontSize: e.fontSize + "px",
display: "flex",
"align-items": "center",
"justify-content": "center",
border: t.value ? "none" : "1px dashed #333",
color: t.value ? "" : "#999"
}
},
// 如果使用动态文字的话,就根据field显示对应文字,否则就是直接显示文本
// componentSchema?.componentProps?.dynamic ? props.modelValue : componentSchema.label
"内嵌页面"
);
};
}
});
export {
p as default
};