<template>
<div>
<InfoPanel :schema="Schema" :data="data" />
</div>
</template>
<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
<template>
<div>
<InfoPanel :schema="Schema" :data="data" >
<template #itemName="{name, value}">
{{name}}: {{value}}
</template>
</InfoPanel>
</div>
</template>
<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';
export default {
components: {
InfoPanel,
},
data() {
return {
Schema,
data: {},
};
},
}
</script>
{
"type": "input",
"label": "名称1",
"name": "key1",
"effect": "set('activated', scenario !== 'infoPanel');"
}
<SchemaFormRender class="enn-form-info-panel" />
<template>
<div>
<BooleanResult :value="value"/>
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: true,
};
},
}
</script>
<template>
<div>
<BooleanResult :value="value" :config="config" />
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: true,
config: {
activeText: '启用',
inactiveText: '停用',
activeIcon: 'el-icon-video-play',
inactiveIcon: 'el-icon-video-pause',
},
};
},
}
</script>
<template>
<div>
<BooleanResult :value="value" :status="status" />
</div>
</template>
<script>
import { BooleanResult } from 'enn-info-panel';
export default {
components: {
BooleanResult,
},
data() {
return {
value: 1,
status: [
{
value: 1,
label: '1',
icon: 'el-icon-user-solid',
color: 'red',
minColor: 'pink',
},
{
value: 2,
label: '2',
icon: 'el-icon-star-on',
color: 'green',
minColor: 'lightgreen',
},
{
value: 3,
label: '3',
icon: 'el-icon-s-goods',
color: 'blue',
minColor: 'lightblue',
},
],
};
},
}
</script>