code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-13 20:38:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(manager): 装修编辑器共享控件库 ColorField/SliderField/SegmentField

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-10-12 10:05:11 +08:00
parent 870bacdd8c
commit 5df1ab6993
4 changed files with 169 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
manager/src/views/page-decoration/wap/controls/ColorField.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="ctrl-row">
<div class="ctrl-label">{{ label }}</div>
<div class="ctrl-body">
<el-color-picker
:model-value="modelValue"
@update:model-value="onInput"
/>
<el-input
:model-value="modelValue"
class="ctrl-color-input"
placeholder="#FFFFFF"
@update:model-value="onInput"
/>
<el-button link type="primary" @click="onReset">重置</el-button>
</div>
</div>
</template>
<script>
export default {
name: "ColorField",
props: {
modelValue: { type: String, default: "" },
defaultValue: { type: String, default: "" },
label: { type: String, default: "" },
},
emits: ["update:modelValue"],
methods: {
onInput(val) {
this.$emit("update:modelValue", val);
},
onReset() {
this.$emit("update:modelValue", this.defaultValue);
},
},
};
</script>
<style scoped lang="scss">
@import "./field-common.scss";
</style>

42
manager/src/views/page-decoration/wap/controls/SegmentField.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="ctrl-row">
<div class="ctrl-label">{{ label }}</div>
<div class="ctrl-body">
<el-radio-group
:model-value="modelValue"
@update:model-value="onInput"
>
<el-radio-button
v-for="opt in options"
:key="opt.value"
:value="opt.value"
>{{ opt.label }}</el-radio-button
>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
name: "SegmentField",
props: {
modelValue: { type: String, default: "" },
options: {
type: Array,
default: () => [],
},
label: { type: String, default: "" },
},
emits: ["update:modelValue"],
methods: {
onInput(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>
<style scoped lang="scss">
@import "./field-common.scss";
</style>

58
manager/src/views/page-decoration/wap/controls/SliderField.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div class="ctrl-row">
<div class="ctrl-label">{{ label }}</div>
<div class="ctrl-body">
<el-slider
class="ctrl-slider"
:model-value="modelValue"
:min="min"
:max="max"
@update:model-value="onInput"
/>
<el-input-number
class="ctrl-number"
:model-value="modelValue"
:min="min"
:max="max"
size="small"
@update:model-value="onInput"
/>
</div>
</div>
</template>
<script>
export default {
name: "SliderField",
props: {
modelValue: { type: Number, default: 0 },
min: { type: Number, default: 0 },
max: { type: Number, default: 100 },
label: { type: String, default: "" },
},
emits: ["update:modelValue"],
methods: {
onInput(val) {
this.$emit("update:modelValue", val);
},
},
};
</script>
<style scoped lang="scss">
@import "./field-common.scss";
.ctrl-body {
flex-wrap: nowrap;
}
.ctrl-slider {
flex: 1;
min-width: 0;
}
.ctrl-number {
width: 110px;
flex-shrink: 0;
}
</style>

27
manager/src/views/page-decoration/wap/controls/field-common.scss Normal file
View File

@@ -0,0 +1,27 @@
.ctrl-row {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
}
.ctrl-label {
width: 72px;
flex-shrink: 0;
line-height: 32px;
color: #606266;
font-size: 13px;
}
.ctrl-body {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ctrl-color-input {
width: 110px;
}