parent
b7d451b5fb
commit
32a7696b66
@ -0,0 +1,124 @@ |
||||
<script lang="ts" setup> |
||||
import { computed, ref } from 'vue' |
||||
|
||||
defineOptions({ |
||||
name: 'Switch' |
||||
}) |
||||
|
||||
const props = withDefaults( |
||||
defineProps<{ |
||||
size?: 'small' | 'medium' | 'large' |
||||
value?: boolean |
||||
loading?: boolean |
||||
defaultValue?: boolean |
||||
disabled?: boolean |
||||
bgActiveColor?: string |
||||
}>(), |
||||
{ |
||||
size: 'medium', |
||||
defaultValue: false, |
||||
disabled: false, |
||||
bgActiveColor: '#0256FF' |
||||
} |
||||
) |
||||
|
||||
|
||||
const { _width } = formartSize(props.size) |
||||
const _bgActiveColor = computed(() => props.bgActiveColor) |
||||
const status = ref<boolean>() |
||||
status.value = props.value || props.defaultValue |
||||
|
||||
|
||||
|
||||
|
||||
const emits = defineEmits<{ |
||||
(event: 'change', status: boolean): void |
||||
}>() |
||||
|
||||
type tempObj = { |
||||
_width: string |
||||
_height: string |
||||
} |
||||
|
||||
function formartSize(str: string): tempObj { |
||||
let _width = "", _height = "" |
||||
if (str === 'small') { |
||||
_width = "40px" |
||||
_height = "20px" |
||||
} |
||||
if (str === 'medium') { |
||||
_width = "40px" |
||||
_height = "20px" |
||||
} |
||||
if (str === 'large') { |
||||
_width = "40px" |
||||
_height = "20px" |
||||
} |
||||
|
||||
return { _width, _height } |
||||
} |
||||
|
||||
|
||||
const handleClick = () => { |
||||
if (!props.disabled) { |
||||
status.value = !status.value |
||||
emits('change', status.value) |
||||
} |
||||
} |
||||
</script> |
||||
<template> |
||||
<div class="d-switch" :class="{ 'is-checked': status }"> |
||||
<input |
||||
class="d-switch__input" |
||||
ref="input" |
||||
type="checkbox" |
||||
:checked="status" |
||||
@change="handleClick" |
||||
/> |
||||
<span class="d-switch_action"></span> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
|
||||
<style lang="less" scoped> |
||||
.d-switch { |
||||
position: relative; |
||||
height: 18px; |
||||
transition: #0256FF 0.2s; |
||||
width: v-bind(_width); |
||||
background: rgb(117, 117, 117); |
||||
border-radius: 10px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
vertical-align: middle; |
||||
.d-switch__input { |
||||
position: relative; |
||||
z-index: 1; |
||||
margin: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: 0; |
||||
} |
||||
.d-switch_action { |
||||
position: absolute; |
||||
transition: 0.2s; |
||||
left: 2px; |
||||
top: 2px; |
||||
z-index: 0; |
||||
height: 14px; |
||||
width: 14px; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
} |
||||
&.is-checked { |
||||
background: v-bind(_bgActiveColor); |
||||
.d-switch_action { |
||||
left: 100%; |
||||
background: #fff; |
||||
margin-left: -18px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -1,62 +1,86 @@ |
||||
<script lang="ts" setup> |
||||
import { computed } from "vue"; |
||||
import { computed, ref } from "vue"; |
||||
import { useSource } from "../context" |
||||
defineOptions({ |
||||
defineOptions({ |
||||
name: "DddBackgroundConfig" |
||||
}) |
||||
const props = defineProps<{ |
||||
}) |
||||
const props = defineProps<{ |
||||
field: string |
||||
help?: string |
||||
features: string[] |
||||
label?: string |
||||
}>() |
||||
}>() |
||||
|
||||
const tempString = useSource<string>(props.field) |
||||
|
||||
const chooseType = ref<string>() |
||||
if(typeof tempString.value === 'string'){ |
||||
chooseType.value = 'color' |
||||
} |
||||
|
||||
const tempString = useSource(props.field) |
||||
const typeList = computed(() => { |
||||
return props.features.map((item: any)=> { |
||||
|
||||
const typeList = computed(() => { |
||||
return props.features.map((item: any) => { |
||||
return { |
||||
value: item, |
||||
label: formart(item) |
||||
} |
||||
}) |
||||
}) |
||||
}) |
||||
|
||||
function formart(str: string) { |
||||
function formart(str: string) { |
||||
const temp: Record<string, any> = { |
||||
color: '纯色', |
||||
gradient: '渐变', |
||||
} |
||||
return temp[str] |
||||
} |
||||
} |
||||
</script> |
||||
<template> |
||||
<div> |
||||
<div class="box"> |
||||
<label>{{ label }}</label> |
||||
<div class="box-typeList"> |
||||
<div v-for="(item,index) in typeList" :key="index" class="box-typeList-box"> |
||||
<div v-for="(item, index) in typeList" :key="index" :class="{ 'is-active': chooseType === item.value }" |
||||
class="box-typeList-box" @click="chooseType = item.value"> |
||||
<span>{{ item.label }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<template v-if="chooseType === 'color'"> |
||||
<label style="display: flex;justify-content: space-between;"> |
||||
<span>颜色</span> |
||||
<input v-model="tempString" type="color"> |
||||
</label> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.box{ |
||||
.box { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
&-typeList{ |
||||
|
||||
&-typeList { |
||||
display: flex; |
||||
&-box{ |
||||
|
||||
&-box { |
||||
display: flex; |
||||
color:#fff; |
||||
background-color: aqua; |
||||
width:50px; |
||||
height:20px; |
||||
color: #0256ff; |
||||
border: 1px solid #0256ff; |
||||
width: 50px; |
||||
height: 20px; |
||||
font-size: 12px; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
&.is-active { |
||||
background-color: #0256ff; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,19 @@ |
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue' |
||||
import { useSource } from "../context" |
||||
defineOptions({ |
||||
name: 'DddBaseConfig' |
||||
}) |
||||
const props = defineProps<{ |
||||
field: string |
||||
label?: string |
||||
help?:string |
||||
}>() |
||||
|
||||
const tempStr = useSource<string>(props.field) |
||||
</script> |
||||
<template> |
||||
<div> |
||||
|
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,21 @@ |
||||
<script lang="ts" setup> |
||||
import { useSource} from "../context" |
||||
|
||||
defineOptions({ |
||||
name: "DddColorConfig" |
||||
}) |
||||
const props = defineProps<{ |
||||
field: string |
||||
label?: string |
||||
help?: string |
||||
}>() |
||||
|
||||
const tempStr = useSource<string>(props.field) |
||||
</script> |
||||
|
||||
<template> |
||||
<label style="display: flex;justify-content: space-between;align-items: center;"> |
||||
<span>{{ label }}</span> |
||||
<input v-model="tempStr" type="color"> |
||||
</label> |
||||
</template> |
||||
@ -0,0 +1,69 @@ |
||||
<script lang="ts" setup> |
||||
import { computed } from 'vue'; |
||||
import { RenderConfig } from './render'; |
||||
import { useSource } from '../context' |
||||
defineOptions({ |
||||
name: "DddImageConfig" |
||||
}) |
||||
const props = defineProps<{ |
||||
field: string |
||||
label?: string |
||||
help?: string |
||||
required?: boolean |
||||
inlines?: any |
||||
}>() |
||||
|
||||
const inlineFieldPrefix = computed(() => { |
||||
const i = props.field.lastIndexOf('.') |
||||
return i > -1 ? `${props.field.slice(0, i)}.` : '' |
||||
}) |
||||
|
||||
const img = useSource<string>(props.field) |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<div class="container"> |
||||
<div class="container-imgbox"> |
||||
<span>{{ label }}<span v-if="required" style="color: brown;">*</span></span> |
||||
<!-- <input type="text" v-model="img"> --> |
||||
</div> |
||||
<div class="container-rightbox"> |
||||
<div v-for="(line, index) in props.inlines" :key="index"> |
||||
<!-- {{inlineFieldPrefix}}{{ line.field }} --> |
||||
<RenderConfig :type="line.type" :props="{ |
||||
...line, |
||||
field: `${inlineFieldPrefix}${line.field}`, |
||||
}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="less" scoped> |
||||
.container { |
||||
box-sizing: border-box; |
||||
border-radius: 2px; |
||||
padding: 2px; |
||||
display:flex; |
||||
gap:10px; |
||||
align-items:center; |
||||
background-color: #f5f5f5; |
||||
margin-bottom: 5px; |
||||
&-imgbox { |
||||
width: 55px; |
||||
height: 55px; |
||||
border-radius:5px; |
||||
border : 1px solid #ccc; |
||||
display:flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
&-rightbox{ |
||||
display: flex; |
||||
flex:1; |
||||
overflow: hidden; |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,27 @@ |
||||
import { error } from "console" |
||||
|
||||
export function clone<T>(v: T): T { |
||||
switch (typeof v) { |
||||
case "string": |
||||
case "boolean": |
||||
case "number": |
||||
case "undefined": |
||||
return v |
||||
case "symbol": |
||||
case "function": |
||||
case "bigint": |
||||
throw new Error("invalid type") |
||||
case "object": |
||||
if (v == null) { |
||||
return v |
||||
} |
||||
if (Array.isArray(v)) { |
||||
return v.map(clone) as T |
||||
} |
||||
const obj = Object.create(null) |
||||
for (const [key, value] of Object.entries(v)) { |
||||
obj[key] = clone(value) |
||||
} |
||||
return obj |
||||
} |
||||
} |
||||
Loading…
Reference in new issue