营销：适配商城装修组件【列表导航】
owen
2 years ago
parent
4253173a2a
commit
325e2e4ff2
@ -0,0 +1,39 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 列表导航属性 */
|
||||
export interface MenuListProperty {
|
||||
// 导航菜单列表
|
||||
list: MenuListItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 列表导航项目属性 */
|
||||
export interface MenuListItemProperty {
|
||||
// 图标链接
|
||||
iconUrl: string
|
||||
// 标题
|
||||
title: string
|
||||
// 标题颜色
|
||||
titleColor: string
|
||||
// 副标题
|
||||
subtitle: string
|
||||
// 副标题颜色
|
||||
subtitleColor: string
|
||||
// 链接
|
||||
url: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'MenuList',
|
||||
name: '列表导航',
|
||||
icon: 'fa-solid:list',
|
||||
property: {
|
||||
list: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<MenuListProperty>
|
||||
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="min-h-42px flex flex-col">
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
|
||||
>
|
||||
<div class="flex flex-1 flex-row items-center gap-8px">
|
||||
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
|
||||
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="item-center flex flex-row justify-center gap-4px">
|
||||
<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
|
||||
<Icon icon="ep-arrow-right" color="#000" :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MenuListProperty } from './config'
|
||||
/** 列表导航 */
|
||||
defineOptions({ name: 'MenuList' })
|
||||
defineProps<{ property: MenuListProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item + .item {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<el-input v-model="valueRef" v-bind="$attrs">
|
||||
<template #append>
|
||||
<el-color-picker v-model="colorRef" :predefine="COLORS" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
/**
|
||||
* 带颜色选择器输入框
|
||||
*/
|
||||
defineOptions({ name: 'InputWithColor' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.string.def('').isRequired,
|
||||
color: propTypes.string.def('').isRequired
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: string) => {
|
||||
if (val === unref(valueRef)) return
|
||||
valueRef.value = val
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'update:color'])
|
||||
|
||||
// 输入框的值
|
||||
const valueRef = ref(props.modelValue)
|
||||
watch(
|
||||
() => valueRef.value,
|
||||
(val: string) => {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
)
|
||||
// 颜色
|
||||
const colorRef = ref(props.color)
|
||||
watch(
|
||||
() => colorRef.value,
|
||||
(val: string) => {
|
||||
emit('update:color', val)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0;
|
||||
.el-color-picker__trigger {
|
||||
padding: 0;
|
||||
border-left: none;
|
||||
border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue