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 ); };
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago