Skip to content

Commit bb374c4

Browse files
YeXingKeYeXingKe
committed
feat: add dropdown
1 parent b903e27 commit bb374c4

7 files changed

Lines changed: 95 additions & 20 deletions

File tree

‎components.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ declare module 'vue' {
1717
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
1818
ElContainer: typeof import('element-plus/es')['ElContainer']
1919
ElDialog: typeof import('element-plus/es')['ElDialog']
20+
ElDropdown: typeof import('element-plus/es')['ElDropdown']
21+
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
22+
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
2023
ElHeader: typeof import('element-plus/es')['ElHeader']
2124
ElIcon: typeof import('element-plus/es')['ElIcon']
2225
ElMain: typeof import('element-plus/es')['ElMain']
@@ -32,6 +35,7 @@ declare module 'vue' {
3235
HeaderButtonArea: typeof import('./src/components/header-button-area/index.vue')['default']
3336
IconExport: typeof import('./src/components/icons/IconExport.vue')['default']
3437
IconGithub: typeof import('./src/components/icons/IconGithub.vue')['default']
38+
IconImport: typeof import('./src/components/icons/IconImport.vue')['default']
3539
IconMason: typeof import('./src/components/icons/IconMason.vue')['default']
3640
IconMobile: typeof import('./src/components/icons/IconMobile.vue')['default']
3741
IconNext: typeof import('./src/components/icons/IconNext.vue')['default']

‎src/components/common/draggable-transition/index.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,6 @@ const attrs = useAttrs() // 等同于$attr
4949
5050
const layoutTypeStore = useLayoutTypeStore()
5151
52-
console.log('改了吗456',layoutTypeStore.layoutType)
53-
5452
const dragOptions = computed(() => ({
5553
animation: 200,
5654
disabled: false, // 定义是否此sortable对象是否可用

‎src/components/header-button-area/index.vue‎

Lines changed: 52 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,45 @@
1818
<template #icon>
1919
<IconReturn class="cursor-pointer" />
2020
</template>
21-
</el-button>
21+
</el-button>
2222
</TextTip>
2323
<span class="w-1"></span>
2424
<TextTip content="恢复">
2525
<el-button :color="primaryColor" title="恢复">
2626
<template #icon>
2727
<IconNext class="cursor-pointer" />
2828
</template>
29-
</el-button>
29+
</el-button>
3030
</TextTip>
3131
<span class="w-1"></span>
32-
<TextTip content="导出">
33-
<el-button :color="primaryColor" title="导出">
32+
<TextTip content="导入JSON">
33+
<el-button :color="primaryColor" title="导入">
3434
<template #icon>
35-
<IconExport class="cursor-pointer" />
35+
<IconImport class="cursor-pointer" />
3636
</template>
37-
</el-button>
37+
</el-button>
3838
</TextTip>
3939
<span class="w-1"></span>
40+
<el-dropdown trigger="hover" @command="handleCommand">
41+
<el-button :color="primaryColor">
42+
<template #icon>
43+
<IconExport class="cursor-pointer" />
44+
</template>
45+
</el-button>
46+
<template #dropdown>
47+
<el-dropdown-menu>
48+
<el-dropdown-item command="code">导出代码</el-dropdown-item>
49+
<el-dropdown-item command="json">导出JSON</el-dropdown-item>
50+
</el-dropdown-menu>
51+
</template>
52+
</el-dropdown>
53+
<span class="w-1"></span>
4054
<TextTip content="H5预览">
41-
<el-button :color="primaryColor" :icon="View" style="color: #fff;" title="预览" @click="clickH5Preview"/>
55+
<el-button :color="primaryColor" :icon="View" style="color: #fff;" title="预览" @click="clickH5Preview" />
4256
</TextTip>
4357
<span class="w-1"></span>
44-
<el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" title="清空的操作不可恢复，确认清空当前编辑页面?" @confirm="clearPageElement">
58+
<el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" title="清空的操作不可恢复，确认清空当前编辑页面?"
59+
@confirm="clearPageElement">
4560
<template #reference>
4661
<TextTip content="清空页面元素">
4762
<el-button type="danger" :icon="Delete" title="清空页面元素" />
@@ -50,28 +65,27 @@
5065
</el-popconfirm>
5166
</div>
5267
</div>
53-
<H5Preview v-model:visible="isShowH5Preview"/>
68+
<H5Preview v-model:visible="isShowH5Preview" />
5469
</template>
5570

56-
<script lang="ts" setup>
71+
<script lang="tsx" setup>
5772
import { onMounted, onUnmounted, ref } from 'vue';
5873
import { Delete, View } from '@element-plus/icons-vue';
59-
import IconReturn from '../icons/IconReturn.vue';
60-
import IconNext from '../icons/IconNext.vue';
6174
import H5Preview from '@/components/preview/h5Preview.vue'
6275
import { getCssVariable, setTheme, watchThemeChange } from '@/utils/theme';
6376
import IconExport from '../icons/IconExport.vue';
6477
import { useGlobalProperties } from '@/hooks/useGlobalProperties';
6578
import { localKey, useVisualData } from '@/hooks/useVisualData';
6679
import { useLayoutTypeStore } from '@/stores/layoutType';
6780
import { LayoutTypeEnum } from '@/enums';
81+
import { useModal } from '@/hooks/useModal';
6882
6983
defineOptions({
7084
name: 'HeaderButtonArea',
7185
})
7286
7387
const compLayoutType = ref(LayoutTypeEnum.Single)
74-
const { updatePageBlock,jsonData } = useVisualData()
88+
const { updatePageBlock, jsonData } = useVisualData()
7589
const primaryColor = ref(getCssVariable('--primary-color'))
7690
const { globalProperties } = useGlobalProperties()
7791
// const router = useRouter();
@@ -98,11 +112,27 @@ const clickH5Preview = () => {
98112
};
99113
100114
const layoutTypeStore = useLayoutTypeStore()
101-
const changeCompLayoutType = (value)=>{
102-
console.log('没有触发吗',value)
115+
const changeCompLayoutType = (value) => {
103116
layoutTypeStore.changeLayoutType(value)
104117
}
105118
119+
const handleCommand = (command: string) => {
120+
let title = command === 'code'?'导出代码':'导出JSON';
121+
122+
useModal({
123+
title: title,
124+
props: {
125+
width: 750,
126+
},
127+
footer: null,
128+
content: () => (
129+
<div class= { 'flex justify-center'} >
130+
131+
</div>
132+
),
133+
});
134+
}
135+
106136
// 初始化主题
107137
onMounted(() => {
108138
// 启动监听
@@ -118,6 +148,12 @@ const screenType = ref('mobile')
118148

119149
<style lang="scss" scoped>
120150
:deep(.el-button) {
121-
padding: 5px;
151+
padding: 10px;
152+
font-size: 16px;
153+
}
154+
:deep(.el-button:focus-visible) {
155+
outline: none;
156+
// outline-offset: 1px;
157+
// transition: outline-offset 0s,outline 0s;
122158
}
123159
</style>

‎src/components/icons/IconImport.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<svg t="1754452763701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
4+
p-id="1198" :width="props.width" :height="props.height">
5+
<path d="M693.96 135.71h235.26v62.04H693.96v-62.04z" p-id="1199" :fill="props.fill"></path>
6+
<path
7+
d="M870.86 192.26h58.36v700.36h-58.36V192.26z m-758.73 642h758.72v58.36H112.13v-58.36z m0-291.82h58.36v291.82h-58.36V542.44z"
8+
p-id="1200" :fill="props.fill"></path>
9+
<path d="M463.53 701.41l256.05-291.99h-512.1z" p-id="1201" :fill="props.fill"></path>
10+
<path
11+
d="M365.58 410.85h234.03c-45.29-158.39-200.75-275.14-385.65-275.14-40.7 0-79.96 5.69-116.96 16.2 131.04 37.24 233.25 135.44 268.58 258.94z"
12+
p-id="1202" :fill="props.fill"></path>
13+
</svg>
14+
</div>
15+
</template>
16+
17+
<script lang="ts" setup>
18+
defineOptions({
19+
name: 'IconImport',
20+
})
21+
const props = withDefaults(
22+
defineProps<{
23+
width?: number
24+
height?: number
25+
fill?: string
26+
}>(),
27+
{ width: 32, height: 32,fill:'#fff'},
28+
)
29+
30+
</script>
31+
32+
<style lang="scss" scoped></style>

‎src/stores/layoutType.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const useLayoutTypeStore = defineStore('layoutTypeStore', () => {
99

1010

1111
function changeLayoutType(value:LayoutType){
12-
console.log('改了吗123',value)
1312
layoutType.value = value
1413
}
1514
return { layoutType, changeLayoutType }

‎src/styles/index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,10 @@
2828
--el-radio-button-checked-border-color: var(--primary-color);
2929
--el-radio-button-disabled-checked-fill: var(--el-border-color-extra-light);
3030
}
31+
.el-dropdown,
32+
.el-dropdown__popper
33+
{
34+
--el-dropdown-menuItem-hover-fill: var(--secondary-color);
35+
--el-dropdown-menuItem-hover-color: var(--primary-color);
36+
}
3137
}

‎src/views/container/page-header/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ changeTheme(localStorage.getItem('theme') || 'default');
6969
7070
const clickRun = () => {
7171
const qrcode = useQRCode(`${location.origin}/preview`);
72-
console.log('qrcode===',qrcode)
72+
7373
useModal({
7474
title: '预览二维码',
7575
props: {

0 commit comments

Comments
 (0)