inl-card-v2 v0.0.6-rc.45
inl-card 使用文档
编辑引用
用户自定义卡片
main.ts
import { createApp } from "vue";
// 引入inl-cards
import cards from "inl-card-v2/cards";
import "inl-card-v2/style.css";
import "inl-card-v2/iconfont.js";
// 项目主页
import main from "./index";
// 用户自定义卡片
import customCards from "./customCards";
import "./index.css";
const app = createApp(main);
// 把自带卡片和自定义卡片同时注册进去
app.use(customCards).use(cards).mount("#inl-card");
customCards(文件夹)
index.ts
import { App } from "vue"; import { cardCompInfo } from "inl-card-v2"; import cc from "./customCard";
const comp = cc; const components: Record<string, cardCompInfo> = {}; for (let i of comp) { componentsi.linkName = { comp: i.comp, cname: i.cname, linkName: i.linkName, tags: i.tags, }; } export default { install(app: App) { for (let i of comp) { app.component(i.linkName, i.comp); } }, cards: components, version: "0.0.1", };
> >
> > `customCard.tsx`
> >
``` ts
import { defineComponent } from "vue";
// 引入相关类型和默认组件
import {
cardBox,
createCardProps,
cardDefComponent,
cardTags,
cardHead,
cardBody,
} from "inl-card-v2";
const linkName = "inl-card-cdc";
const componentDetail = {
cname: "用户自定义卡片一",
linkName,
tags: [cardTags.anquan],
};
const props = createCardProps({});
const customCard = defineComponent({
props,
components: {
cardBox,
cardHead,
cardBody,
},
setup(props, ctx) {
return () => (
<cardBox
vSlots={{
// 卡片身体部分
cardBody: () => (
<cardBody
vSlots={{
customCardBody: () => <>asd</>,
}}
/>
),
// 卡片头部
cardHead: () => <cardHead title={componentDetail.cname} />,
}}
/>
);
},
});
export default cardDefComponent(customCard, componentDetail);
index.tsx
import { defineComponent } from "vue";
import { cardEditor } from "inl-card-v2";
import customCards from "./customCards";
const components: Record<string, any> = {
cardEditor,
};
export default defineComponent({
components,
setup() {
const save = () => {
console.info("保存回调");
};
return () => (
<>
<cardEditor
onSaveCallback={save}
customCards={customCards.cards}
currentRecord={{
id: "479278807188275200",
createUser: "2",
createDt: "2023-04-03T05:22:52.000+00:00",
updateUser: "2",
updateDt: "2023-04-03T05:53:34.000+00:00",
pageName: "页面名称77",
pageDetail: 'pagejson'
}}
/>
</>
);
},
});
预览引用
import {productionComponent, cardEditor, PageInfo} from 'inl-card-v2';
import {defineComponent} from 'vue';
// componentProps
const props = {
pageInfo: {
type: Object as PropType<pageInfo>,
},
customCards: {
type: Object as PropType<Record<string, cardCompInfo>>,
default: {},
},
}
// use
export default defineComponent({
components: {
defineComponent
},
setup() {
const pageInfo: PageInfo;
return <>
<defineComponent customCards={} pageInfo={pageInfo} />
</>
}
})
通过IU+PC查询点地址和点数据(接口一)
用于应用中心的动态表格和状态属性首次查询。
export const getPointData = async (params: { instanceIdList: string[]; propertyCodeList: string[]; thingCode?: string; // 只查询同一类物模型 }): Promise< Array<{ instanceId: string; propertyIdAndPointInfo: Record< string, { pointCode: string | null; value: string | boolean } ; }> => { return await instance.post( "/mtip/thing/v2/thingInstAdapter/getPrePointCodeAndValueByIuPC", params ); };
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago