Skip to content

Commit

Permalink
feat: 部分组件重构完成
Browse files Browse the repository at this point in the history
  • Loading branch information
kailong321200875 committed Oct 17, 2021
1 parent 0f5c55c commit 3d96229
Show file tree
Hide file tree
Showing 27 changed files with 1,790 additions and 78 deletions.
17 changes: 16 additions & 1 deletion components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,49 @@ declare module 'vue' {
export interface GlobalComponents {
404: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Error/404.vue')['default']
CountTo: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/CountTo/index.vue')['default']
Dialog: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Dialog/index.vue')['default']
Echart: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Echart/index.vue')['default']
Editor: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Editor/index.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
HelloWorld: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/HelloWorld.vue')['default']
ParentView: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/ParentView/index.vue')['default']
Preview: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Preview/index.vue')['default']
Qrcode: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Qrcode/index.vue')['default']
Redirect: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Redirect/index.vue')['default']
Search: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/Search/index.vue')['default']
SvgIcon: typeof import('C:/Users/Saber/Documents/HBuilderProjects/vue-element-plus-admin/src/components/SvgIcon/index.vue')['default']
}
}

export {}
export { }
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vue-element-plus-admin",
"version": "1.0.0",
"description": "一套基于vue3、element-plus、typesScript、vite的后台集成方案",
"description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案",
"author": "Archer <502431556@qq.com>",
"private": false,
"scripts": {
Expand All @@ -26,19 +26,23 @@
"@element-plus/icons": "^0.0.11",
"@vueuse/core": "^6.5.3",
"axios": "^0.22.0",
"clipboard": "^2.0.8",
"echarts": "^5.2.1",
"echarts-wordcloud": "^2.0.0",
"element-plus": "1.1.0-beta.20",
"highlight.js": "^11.2.0",
"intro.js": "^4.2.2",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.0",
"pinia": "^2.0.0-rc.13",
"qrcode": "^1.4.4",
"qs": "^6.10.1",
"vue": "^3.2.16",
"vue-router": "^4.0.11",
"wangeditor": "^4.7.9",
"web-storage-cache": "^1.1.1"
},
"devDependencies": {
Expand Down
5 changes: 4 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<router-view class="app" :class="{ grey__mode: greyMode }" />
<el-config-provider :locale="zhCn">
<router-view class="app" :class="{ grey__mode: greyMode }" />
</el-config-provider>
</template>

<script setup lang="ts" name="App">
import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const greyMode = computed(() => appStore.getGreyMode)
</script>
Expand Down
Binary file added src/assets/img/avatar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/components/CountTo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ const emit = defineEmits(['mounted', 'callback'])
defineExpose({
pauseResume,
reset
reset,
start,
pause
})
const state = reactive<{
Expand Down
193 changes: 193 additions & 0 deletions src/components/Dialog/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<template>
<el-dialog
ref="dialogRef"
v-bind="getBindValue"
:fullscreen="fullscreen"
destroy-on-close
lock-scroll
:close-on-click-modal="false"
top="10vh"
>
<template #title>
<slot name="title">
{{ title }}
</slot>
<svg-icon
v-if="showFullscreen"
:icon-class="fullscreen ? 'exit-fullscreen' : 'fullscreen'"
class-name="dialog__icon"
@click="toggleFull"
/>
</template>

<!-- 弹窗内容 -->
<el-scrollbar
:class="
fullscreen && slots.footer
? 'com-dialog__content--footer'
: fullscreen && !slots.footer
? 'com-dialog__content--fullscreen'
: 'com-dialog__content'
"
>
<div class="content__wrap">
<slot></slot>
</div>
</el-scrollbar>

<template v-if="slots.footer" #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</template>

<script setup lang="ts" name="Dialog">
import { ref, computed, PropType, nextTick, unref, useAttrs, useSlots } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
const slots = useSlots()
const props = defineProps({
title: {
type: String as PropType<string>,
default: ''
},
// 是否显示全屏按钮
showFullscreen: {
type: Boolean as PropType<boolean>,
default: true
},
// 是否可以拖拽
draggable: {
type: Boolean as PropType<boolean>,
default: true
}
})
const dialogRef = ref<HTMLElement | null>(null)
const fullscreen = ref<boolean>(false)
const getBindValue = computed((): any => {
const delArr: string[] = ['showFullscreen', 'draggable']
const attrs = useAttrs()
const obj = { ...attrs, ...props }
for (const key in obj) {
if (delArr.indexOf(key) !== -1) {
delete obj[key]
}
}
return obj
})
function toggleFull(): void {
fullscreen.value = !fullscreen.value
// 全屏的时候需要重新定义left top
if (fullscreen.value && props.draggable) {
const dragDom = unref(dialogRef as any).$refs.dialogRef
dragDom.style.cssText += `;left:0px;top:0px;`
}
}
function initDraggable() {
nextTick(() => {
const dragDom = unref(dialogRef as any).$refs.dialogRef
const dialogHeaderEl = dragDom.querySelector('.el-dialog__header') as HTMLElement
dragDom.style.cssText += ';top:0px;'
dialogHeaderEl.style.cssText += ';cursor:move;user-select:none;'
dialogHeaderEl.onmousedown = (e) => {
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
const dragDomWidth = dragDom.offsetWidth
const dragDomHeight = dragDom.offsetHeight
const screenWidth = document.body.clientWidth
const screenHeight = document.body.clientHeight
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
const styleLeftStr = getComputedStyle(dragDom).left
const styleTopStr = getComputedStyle(dragDom).top
if (!styleLeftStr || !styleTopStr) return
let styleLeft: number
let styleTop: number
// Format may be "##%" or "##px"
if (styleLeftStr.includes('%')) {
styleLeft = +document.body.clientWidth * (+styleLeftStr.replace(/%/g, '') / 100)
styleTop = +document.body.clientHeight * (+styleTopStr.replace(/%/g, '') / 100)
} else {
styleLeft = +styleLeftStr.replace(/px/g, '')
styleTop = +styleTopStr.replace(/px/g, '')
}
document.onmousemove = (e) => {
let left = e.clientX - disX
let top = e.clientY - disY
// Handle edge cases
if (-left > minDragDomLeft) {
left = -minDragDomLeft
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
if (-top > minDragDomTop) {
top = -minDragDomTop
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
// Move current element
dragDom.style.cssText += `;left:${left + styleLeft}px;top:${top + styleTop}px;`
}
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
}
}
})
}
if (props.draggable) {
initDraggable()
}
</script>

<style lang="less" scoped>
.dialog__icon {
position: absolute;
top: 22px;
right: 45px;
font-size: 12px;
color: #909399;
cursor: pointer;
transition: color 0.2s;
&:hover {
color: #409eff;
}
}
.com-dialog__content {
.content__wrap {
padding-right: 10px;
}
:deep(.el-scrollbar__wrap) {
max-height: 600px; // 最大高度
overflow-x: hidden; // 隐藏横向滚动栏
}
}
.com-dialog__content--fullscreen {
:deep(.el-scrollbar__wrap) {
height: calc(~'100vh - 46px - 60px'); // 最大高度
}
}
.com-dialog__content--footer {
:deep(.el-scrollbar__wrap) {
max-height: calc(~'100vh - 46px - 60px - 70px'); // 最大高度
}
}
</style>
Loading

0 comments on commit 3d96229

Please sign in to comment.