| 提交 | 用户 | 时间 | ||
| 820397 | 1 | import { DiyComponent } from '@/components/DiyEditor/util' |
| H | 2 | |
| 3 | /** 底部导航菜单属性 */ | |
| 4 | export interface TabBarProperty { | |
| 5 | // 选项列表 | |
| 6 | items: TabBarItemProperty[] | |
| 7 | // 主题 | |
| 8 | theme: string | |
| 9 | // 样式 | |
| 10 | style: TabBarStyle | |
| 11 | } | |
| 12 | ||
| 13 | // 选项属性 | |
| 14 | export interface TabBarItemProperty { | |
| 15 | // 标签文字 | |
| 16 | text: string | |
| 17 | // 链接 | |
| 18 | url: string | |
| 19 | // 默认图标链接 | |
| 20 | iconUrl: string | |
| 21 | // 选中的图标链接 | |
| 22 | activeIconUrl: string | |
| 23 | } | |
| 24 | ||
| 25 | // 样式 | |
| 26 | export interface TabBarStyle { | |
| 27 | // 背景类型 | |
| 28 | bgType: 'color' | 'img' | |
| 29 | // 背景颜色 | |
| 30 | bgColor: string | |
| 31 | // 图片链接 | |
| 32 | bgImg: string | |
| 33 | // 默认颜色 | |
| 34 | color: string | |
| 35 | // 选中的颜色 | |
| 36 | activeColor: string | |
| 37 | } | |
| 38 | ||
| 39 | // 定义组件 | |
| 40 | export const component = { | |
| 41 | id: 'TabBar', | |
| 42 | name: '底部导航', | |
| 43 | icon: 'fluent:table-bottom-row-16-filled', | |
| 44 | property: { | |
| 45 | theme: 'red', | |
| 46 | style: { | |
| 47 | bgType: 'color', | |
| 48 | bgColor: '#fff', | |
| 49 | color: '#282828', | |
| 50 | activeColor: '#fc4141' | |
| 51 | }, | |
| 52 | items: [ | |
| 53 | { | |
| 54 | text: '首页', | |
| 55 | url: '/pages/index/index', | |
| 9259c2 | 56 | iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png', |
| H | 57 | activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png' |
| 820397 | 58 | }, |
| H | 59 | { |
| 60 | text: '分类', | |
| 61 | url: '/pages/index/category?id=3', | |
| 9259c2 | 62 | iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png', |
| H | 63 | activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png' |
| 820397 | 64 | }, |
| H | 65 | { |
| 66 | text: '购物车', | |
| 67 | url: '/pages/index/cart', | |
| 9259c2 | 68 | iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png', |
| H | 69 | activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png' |
| 820397 | 70 | }, |
| H | 71 | { |
| 72 | text: '我的', | |
| 73 | url: '/pages/index/user', | |
| 9259c2 | 74 | iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png', |
| H | 75 | activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png' |
| 820397 | 76 | } |
| H | 77 | ] |
| 78 | } | |
| 79 | } as DiyComponent<TabBarProperty> | |
| 80 | ||
| 81 | export const THEME_LIST = [ | |
| 82 | { id: 'red', name: '中国红', icon: 'icon-park-twotone:theme', color: '#d10019' }, | |
| 83 | { id: 'orange', name: '桔橙', icon: 'icon-park-twotone:theme', color: '#f37b1d' }, | |
| 84 | { id: 'gold', name: '明黄', icon: 'icon-park-twotone:theme', color: '#fbbd08' }, | |
| 85 | { id: 'green', name: '橄榄绿', icon: 'icon-park-twotone:theme', color: '#8dc63f' }, | |
| 86 | { id: 'cyan', name: '天青', icon: 'icon-park-twotone:theme', color: '#1cbbb4' }, | |
| 87 | { id: 'blue', name: '海蓝', icon: 'icon-park-twotone:theme', color: '#0081ff' }, | |
| 88 | { id: 'purple', name: '姹紫', icon: 'icon-park-twotone:theme', color: '#6739b6' }, | |
| 89 | { id: 'brightRed', name: '嫣红', icon: 'icon-park-twotone:theme', color: '#e54d42' }, | |
| 90 | { id: 'forestGreen', name: '森绿', icon: 'icon-park-twotone:theme', color: '#39b54a' }, | |
| 91 | { id: 'mauve', name: '木槿', icon: 'icon-park-twotone:theme', color: '#9c26b0' }, | |
| 92 | { id: 'pink', name: '桃粉', icon: 'icon-park-twotone:theme', color: '#e03997' }, | |
| 93 | { id: 'brown', name: '棕褐', icon: 'icon-park-twotone:theme', color: '#a5673f' }, | |
| 94 | { id: 'grey', name: '玄灰', icon: 'icon-park-twotone:theme', color: '#8799a3' }, | |
| 95 | { id: 'gray', name: '草灰', icon: 'icon-park-twotone:theme', color: '#aaaaaa' }, | |
| 96 | { id: 'black', name: '墨黑', icon: 'icon-park-twotone:theme', color: '#333333' } | |
| 97 | ] | |
