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