parent
f9b032a194
commit
b7d451b5fb
@ -0,0 +1,62 @@ |
||||
<script lang="ts" setup> |
||||
import { computed } from "vue"; |
||||
import { useSource } from "../context" |
||||
defineOptions({ |
||||
name: "DddBackgroundConfig" |
||||
}) |
||||
const props = defineProps<{ |
||||
field: string |
||||
help?: string |
||||
features: string[] |
||||
label?: string |
||||
}>() |
||||
|
||||
const tempString = useSource(props.field) |
||||
const typeList = computed(() => { |
||||
return props.features.map((item: any)=> { |
||||
return { |
||||
value: item, |
||||
label: formart(item) |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
function formart(str: string) { |
||||
const temp: Record<string, any> = { |
||||
color: '纯色', |
||||
gradient: '渐变', |
||||
} |
||||
return temp[str] |
||||
} |
||||
</script> |
||||
<template> |
||||
<div class="box"> |
||||
<label>{{ label }}</label> |
||||
<div class="box-typeList"> |
||||
<div v-for="(item,index) in typeList" :key="index" class="box-typeList-box"> |
||||
<span>{{ item.label }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.box{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
&-typeList{ |
||||
display: flex; |
||||
&-box{ |
||||
display: flex; |
||||
color:#fff; |
||||
background-color: aqua; |
||||
width:50px; |
||||
height:20px; |
||||
font-size: 12px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@ |
||||
<script lang="ts" setup> |
||||
import { useSource } from '../context' |
||||
|
||||
defineOptions({ |
||||
name: "DddBooleanConfig" |
||||
}) |
||||
|
||||
const props = defineProps<{ |
||||
field: string |
||||
label?: string |
||||
values?: any |
||||
}>() |
||||
|
||||
const tempString = useSource<boolean>(props.field) |
||||
|
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<label> |
||||
{{ label }} |
||||
</label> |
||||
<div> |
||||
<label>是</label> |
||||
<input type="radio" :value="true" v-model="tempString"><br> |
||||
<label>否</label> |
||||
<input type="radio" :value="false" v-model="tempString"><br> |
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
@ -0,0 +1,34 @@ |
||||
<script lang="ts" setup> |
||||
import { useSource } from '../context' |
||||
defineOptions({ |
||||
name: "DddMarkConfig" |
||||
}) |
||||
|
||||
const props = defineProps<{ |
||||
field: string |
||||
label?: string |
||||
string?: string |
||||
values?: any |
||||
}>() |
||||
|
||||
|
||||
const tempString = useSource<string>(props.field) |
||||
|
||||
function selectChange(e: any){ |
||||
console.log(e.target.value) |
||||
} |
||||
</script> |
||||
<template> |
||||
<div> |
||||
<label> |
||||
{{ label }} |
||||
</label> |
||||
<div> |
||||
<select v-model="tempString" @change="selectChange"> |
||||
<option value="none">不设置</option> |
||||
<option v-for="(opt,idx) in values" :key="idx" :value="opt.value">{{ opt.label }}</option> |
||||
</select> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,35 @@ |
||||
<script lang="ts" setup> |
||||
import { ModuleConfig } from ".."; |
||||
import { useSource } from "../context" |
||||
import { RenderConfig } from './render'; |
||||
|
||||
defineOptions({ |
||||
name: "DddObjectConfig" |
||||
}) |
||||
|
||||
defineProps<{ |
||||
field: string |
||||
label?: string |
||||
help?: string |
||||
required?: boolean |
||||
configs: ModuleConfig[] |
||||
}>() |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<label> |
||||
<span>{{ label }}设置</span> |
||||
</label> |
||||
<div v-for="(cfg, idx) in configs" :key="idx"> |
||||
<RenderConfig |
||||
:type="cfg.type" |
||||
:props="{ |
||||
...cfg, |
||||
field: `${field}.${cfg.field}`, |
||||
}" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
Loading…
Reference in new issue