Commit 9b283601a5493d8b8ed3694bea2af0da74e5a158
1 parent
2141ddd6
perf: implement data board detail select widget list responsive layout
Showing
1 changed file
with
5 additions
and
12 deletions
| @@ -10,6 +10,8 @@ | @@ -10,6 +10,8 @@ | ||
| 10 | }>(); | 10 | }>(); |
| 11 | const emit = defineEmits(['update:value']); | 11 | const emit = defineEmits(['update:value']); |
| 12 | 12 | ||
| 13 | + const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }; | ||
| 14 | + | ||
| 13 | const handleCheck = (checked: string) => { | 15 | const handleCheck = (checked: string) => { |
| 14 | emit('update:value', checked); | 16 | emit('update:value', checked); |
| 15 | }; | 17 | }; |
| @@ -19,10 +21,7 @@ | @@ -19,10 +21,7 @@ | ||
| 19 | <section> | 21 | <section> |
| 20 | <Tabs> | 22 | <Tabs> |
| 21 | <Tabs.TabPane key="1" tab="文本组件"> | 23 | <Tabs.TabPane key="1" tab="文本组件"> |
| 22 | - <List | ||
| 23 | - :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }" | ||
| 24 | - :data-source="textComponentConfig" | ||
| 25 | - > | 24 | + <List :grid="grid" :data-source="textComponentConfig"> |
| 26 | <template #renderItem="{ item }"> | 25 | <template #renderItem="{ item }"> |
| 27 | <List.Item class="!flex !justify-center"> | 26 | <List.Item class="!flex !justify-center"> |
| 28 | <VisualWidgetSelect | 27 | <VisualWidgetSelect |
| @@ -37,10 +36,7 @@ | @@ -37,10 +36,7 @@ | ||
| 37 | </List> | 36 | </List> |
| 38 | </Tabs.TabPane> | 37 | </Tabs.TabPane> |
| 39 | <Tabs.TabPane key="2" tab="图片组件"> | 38 | <Tabs.TabPane key="2" tab="图片组件"> |
| 40 | - <List | ||
| 41 | - :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }" | ||
| 42 | - :data-source="pictureComponentList" | ||
| 43 | - > | 39 | + <List :grid="grid" :data-source="pictureComponentList"> |
| 44 | <template #renderItem="{ item }"> | 40 | <template #renderItem="{ item }"> |
| 45 | <List.Item class="!flex !justify-center"> | 41 | <List.Item class="!flex !justify-center"> |
| 46 | <VisualWidgetSelect | 42 | <VisualWidgetSelect |
| @@ -55,10 +51,7 @@ | @@ -55,10 +51,7 @@ | ||
| 55 | </List> | 51 | </List> |
| 56 | </Tabs.TabPane> | 52 | </Tabs.TabPane> |
| 57 | <Tabs.TabPane key="3" tab="仪表组件"> | 53 | <Tabs.TabPane key="3" tab="仪表组件"> |
| 58 | - <List | ||
| 59 | - :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }" | ||
| 60 | - :data-source="instrumentComponentConfig" | ||
| 61 | - > | 54 | + <List :grid="grid" :data-source="instrumentComponentConfig"> |
| 62 | <template #renderItem="{ item }"> | 55 | <template #renderItem="{ item }"> |
| 63 | <List.Item class="!flex !justify-center"> | 56 | <List.Item class="!flex !justify-center"> |
| 64 | <VisualWidgetSelect | 57 | <VisualWidgetSelect |