芋道源码
2 years ago
committed by
Gitee
commit
6160c2fa8a
@ -0,0 +1,78 @@
|
|||||||
|
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
/** 宫格导航属性 */
|
||||||
|
export interface MenuGridProperty {
|
||||||
|
// 列数
|
||||||
|
column: number
|
||||||
|
// 导航菜单列表
|
||||||
|
list: MenuGridItemProperty[]
|
||||||
|
// 组件样式
|
||||||
|
style: ComponentStyle
|
||||||
|
}
|
||||||
|
/** 宫格导航项目属性 */
|
||||||
|
export interface MenuGridItemProperty {
|
||||||
|
// 图标链接
|
||||||
|
iconUrl: string
|
||||||
|
// 标题
|
||||||
|
title: string
|
||||||
|
// 标题颜色
|
||||||
|
titleColor: string
|
||||||
|
// 副标题
|
||||||
|
subtitle: string
|
||||||
|
// 副标题颜色
|
||||||
|
subtitleColor: string
|
||||||
|
// 链接
|
||||||
|
url: string
|
||||||
|
// 角标
|
||||||
|
badge: {
|
||||||
|
// 是否显示
|
||||||
|
show: boolean
|
||||||
|
// 角标文字
|
||||||
|
text: string
|
||||||
|
// 角标文字颜色
|
||||||
|
textColor: string
|
||||||
|
// 角标背景颜色
|
||||||
|
bgColor: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
|
||||||
|
title: '标题',
|
||||||
|
titleColor: '#333',
|
||||||
|
subtitle: '副标题',
|
||||||
|
subtitleColor: '#bbb',
|
||||||
|
badge: {
|
||||||
|
show: false,
|
||||||
|
textColor: '#fff',
|
||||||
|
bgColor: '#FF6000'
|
||||||
|
}
|
||||||
|
} as MenuGridItemProperty
|
||||||
|
|
||||||
|
// 定义组件
|
||||||
|
export const component = {
|
||||||
|
id: 'MenuGrid',
|
||||||
|
name: '宫格导航',
|
||||||
|
icon: 'bi:grid-3x3-gap',
|
||||||
|
property: {
|
||||||
|
column: 3,
|
||||||
|
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
|
||||||
|
style: {
|
||||||
|
bgType: 'color',
|
||||||
|
bgColor: '#fff',
|
||||||
|
marginBottom: 8,
|
||||||
|
marginLeft: 8,
|
||||||
|
marginRight: 8,
|
||||||
|
padding: 8,
|
||||||
|
paddingTop: 8,
|
||||||
|
paddingRight: 8,
|
||||||
|
paddingBottom: 8,
|
||||||
|
paddingLeft: 8,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderTopLeftRadius: 8,
|
||||||
|
borderTopRightRadius: 8,
|
||||||
|
borderBottomRightRadius: 8,
|
||||||
|
borderBottomLeftRadius: 8
|
||||||
|
} as ComponentStyle
|
||||||
|
}
|
||||||
|
} as DiyComponent<MenuGridProperty>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-row flex-wrap">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in property.list"
|
||||||
|
:key="index"
|
||||||
|
class="relative flex flex-col items-center p-b-14px p-t-20px"
|
||||||
|
:style="{ width: `${100 * (1 / property.column)}%` }"
|
||||||
|
>
|
||||||
|
<!-- 右上角角标 -->
|
||||||
|
<span
|
||||||
|
v-if="item.badge?.show"
|
||||||
|
class="absolute left-50% top-10px z-1 h-20px rounded-50% p-x-6px text-center text-12px leading-20px"
|
||||||
|
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
|
||||||
|
>
|
||||||
|
{{ item.badge.text }}
|
||||||
|
</span>
|
||||||
|
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
|
||||||
|
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
|
||||||
|
{{ item.title }}
|
||||||
|
</span>
|
||||||
|
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
|
||||||
|
{{ item.subtitle }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { MenuGridProperty } from './config'
|
||||||
|
/** 宫格导航 */
|
||||||
|
defineOptions({ name: 'MenuGrid' })
|
||||||
|
defineProps<{ property: MenuGridProperty }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
/** 列表导航属性 */
|
||||||
|
export interface MenuListProperty {
|
||||||
|
// 导航菜单列表
|
||||||
|
list: MenuListItemProperty[]
|
||||||
|
// 组件样式
|
||||||
|
style: ComponentStyle
|
||||||
|
}
|
||||||
|
/** 列表导航项目属性 */
|
||||||
|
export interface MenuListItemProperty {
|
||||||
|
// 图标链接
|
||||||
|
iconUrl: string
|
||||||
|
// 标题
|
||||||
|
title: string
|
||||||
|
// 标题颜色
|
||||||
|
titleColor: string
|
||||||
|
// 副标题
|
||||||
|
subtitle: string
|
||||||
|
// 副标题颜色
|
||||||
|
subtitleColor: string
|
||||||
|
// 链接
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
|
||||||
|
title: '标题',
|
||||||
|
titleColor: '#333',
|
||||||
|
subtitle: '副标题',
|
||||||
|
subtitleColor: '#bbb'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义组件
|
||||||
|
export const component = {
|
||||||
|
id: 'MenuList',
|
||||||
|
name: '列表导航',
|
||||||
|
icon: 'fa-solid:list',
|
||||||
|
property: {
|
||||||
|
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
|
||||||
|
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,66 @@
|
|||||||
|
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
/** 菜单导航属性 */
|
||||||
|
export interface MenuSwiperProperty {
|
||||||
|
// 布局： 图标+文字 | 图标
|
||||||
|
layout: 'iconText' | 'icon'
|
||||||
|
// 行数
|
||||||
|
row: number
|
||||||
|
// 列数
|
||||||
|
column: number
|
||||||
|
// 导航菜单列表
|
||||||
|
list: MenuSwiperItemProperty[]
|
||||||
|
// 组件样式
|
||||||
|
style: ComponentStyle
|
||||||
|
}
|
||||||
|
/** 菜单导航项目属性 */
|
||||||
|
export interface MenuSwiperItemProperty {
|
||||||
|
// 图标链接
|
||||||
|
iconUrl: string
|
||||||
|
// 标题
|
||||||
|
title: string
|
||||||
|
// 标题颜色
|
||||||
|
titleColor: string
|
||||||
|
// 链接
|
||||||
|
url: string
|
||||||
|
// 角标
|
||||||
|
badge: {
|
||||||
|
// 是否显示
|
||||||
|
show: boolean
|
||||||
|
// 角标文字
|
||||||
|
text: string
|
||||||
|
// 角标文字颜色
|
||||||
|
textColor: string
|
||||||
|
// 角标背景颜色
|
||||||
|
bgColor: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
|
||||||
|
title: '标题',
|
||||||
|
titleColor: '#333',
|
||||||
|
badge: {
|
||||||
|
show: false,
|
||||||
|
textColor: '#fff',
|
||||||
|
bgColor: '#FF6000'
|
||||||
|
}
|
||||||
|
} as MenuSwiperItemProperty
|
||||||
|
|
||||||
|
// 定义组件
|
||||||
|
export const component = {
|
||||||
|
id: 'MenuSwiper',
|
||||||
|
name: '菜单导航',
|
||||||
|
icon: 'bi:grid-3x2-gap',
|
||||||
|
property: {
|
||||||
|
layout: 'iconText',
|
||||||
|
row: 1,
|
||||||
|
column: 3,
|
||||||
|
list: [cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)],
|
||||||
|
style: {
|
||||||
|
bgType: 'color',
|
||||||
|
bgColor: '#fff',
|
||||||
|
marginBottom: 8
|
||||||
|
} as ComponentStyle
|
||||||
|
}
|
||||||
|
} as DiyComponent<MenuSwiperProperty>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<el-input v-model="valueRef" v-bind="$attrs">
|
||||||
|
<template #append>
|
||||||
|
<el-color-picker v-model="colorRef" :predefine="PREDEFINE_COLORS" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
import { PREDEFINE_COLORS } from '@/utils/color'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带颜色选择器输入框
|
||||||
|
*/
|
||||||
|
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