tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: element-plus升级正式版本移除size为mini的值同步修改

Browse Source
This commit is contained in:
郝先瑞
2022-02-20 23:56:31 +08:00
parent e562386c6e
commit 6ff9269fa8
9 changed files with 228 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Pagination/index.vue
View File

@@ -17,7 +17,7 @@
import {computed} from "vue";
import {scrollTo} from '@/utils/scroll-to'
const props=defineProps({
const props = defineProps({
total: {
required: true,
type: Number,
@@ -70,18 +70,19 @@ const pageSize = computed({
get() {
return props.limit
},
set(val){
set(val) {
emit('update:limit', val)
}
})
function handleSizeChange(val){
function handleSizeChange(val) {
emit('pagination', {page: currentPage, limit: val})
if (props.autoScroll) {
scrollTo(0, 800)
}
}
function handleCurrentChange(val){
function handleCurrentChange(val) {
emit('pagination', {page: val, limit: props.pageSizes})
if (props.autoScroll) {
scrollTo(0, 800)

150
src/components/RightPanel/index.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
<div class="rightPanel-background"/>
<div class="rightPanel">
<!-- <div class="handle-button" :style="{'top':buttonTop+'px','background-color:blue'}" @click="show=!show">-->
<div class="handle-button" @click="show=!show">
<Close v-show="show"/>
<Setting v-show="!show"/>
</div>
<div class="rightPanel-items">
<slot/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {addClass, removeClass} from '@/utils/index'
import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from "vue";
import {useSettingStoreHook} from "@/store/modules/settings";
import {Close, Setting} from '@element-plus/icons'
const props = defineProps({
clickNotClose: {
default: false,
type: Boolean
},
buttonTop: {
default: 250,
type: Number
}
})
const theme = computed(() => {
useSettingStoreHook().theme
})
const show = ref(false)
watchEffect(() => {
if (show.value && !props.clickNotClose) {
addEventClick()
}
if (show.value) {
addClass(document.body, 'showRightPanel')
} else {
removeClass(document.body, 'showRightPanel')
}
})
function addEventClick() {
window.addEventListener('click', closeSidebar)
}
function closeSidebar(evt: any) {
const parent = evt.target.closest('.rightPanel')
if (!parent) {
show.value = false
window.removeEventListener('click', closeSidebar)
}
}
const rightPanel = ref(null)
function insertToBody() {
console.log('insertToBody', rightPanel)
const elx = rightPanel.value as any
const body = document.querySelector('body') as any
body.insertBefore(elx, body.firstChild)
}
onMounted(() => {
console.log('theme', useSettingStoreHook().theme)
insertToBody()
})
onBeforeUnmount(() => {
const elx = rightPanel.value as any
elx.remove()
})
</script>
<style>
.showRightPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
}
</style>
<style lang="scss" scoped>
.rightPanel-background {
position: fixed;
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
z-index: -1;
}
.rightPanel {
width: 100%;
max-width: 260px;
height: 100vh;
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
.rightPanel-background {
z-index: 20000;
opacity: 1;
width: 100%;
height: 100%;
}
.rightPanel {
transform: translate(0);
}
}
.handle-button {
width: 48px;
height: 48px;
position: absolute;
left: -48px;
text-align: center;
font-size: 24px;
border-radius: 6px 0 0 6px !important;
z-index: 0;
pointer-events: auto;
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;
}
}
</style>

4
src/components/SizeSelect/index.vue
View File

@@ -27,8 +27,6 @@ import {ElMessage} from 'element-plus'
import {useAppStoreHook} from '@/store/modules/app'
import SvgIcon from '@/components/SvgIcon/index.vue'
const route = useRoute()
const router = useRouter()
const size = computed(() => useAppStoreHook().size)
const sizeOptions = ref([
@@ -40,7 +38,7 @@ const sizeOptions = ref([
function handleSetSize(size: string) {
useAppStoreHook().setSize(size)
window.location.reload()
ElMessage.success('切换全局大小成功')
ElMessage.success('切换布局大小成功')
}
</script>

2
src/layout/components/Settings/index.vue
View File

@@ -29,12 +29,10 @@
<script>
import ThemePicker from '@/components/ThemePicker/index.vue'
import {defineComponent, reactive, toRefs, watch} from "vue"
// import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
export default defineComponent({
components: {ThemePicker},
setup() {
// const store = useStore()
const state = reactive({
fixedHeader:useSettingStoreHook().fixedHeader,
tagsView:useSettingStoreHook().tagsView,

12
src/layout/index.vue
View File

@@ -8,18 +8,19 @@
<tags-view v-if="needTagsView"/>
</div>
<app-main/>
<!-- <right-panel v-if="showSettings">
<right-panel v-if="showSettings">
<settings/>
</right-panel>-->
</right-panel>
</div>
</div>
</template>
<script setup lang="ts">
import {computed, watchEffect } from "vue"
import {computed, watchEffect} from "vue"
import {useWindowSize} from '@vueuse/core'
import {AppMain, Navbar, Settings,TagsView} from './components/index'
import {AppMain, Navbar, Settings, TagsView} from './components/index'
import Sidebar from './components/Sidebar/index.vue'
import RightPanel from '@/components/RightPanel/index.vue'
import {useAppStoreHook} from "@/store/modules/app"
import {useSettingStoreHook} from "@/store/modules/settings"
@@ -31,6 +32,7 @@ const sidebar = computed(() => useAppStoreHook().sidebar);
const device = computed(() => useAppStoreHook().device);
const needTagsView = computed(() => useSettingStoreHook().tagsView);
const fixedHeader = computed(() => useSettingStoreHook().fixedHeader);
const showSettings = computed(() => useSettingStoreHook().showSettings);
const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened,
@@ -39,9 +41,7 @@ const classObj = computed(() => ({
mobile: device.value === 'mobile'
}))
watchEffect(() => {
if (width.value < WIDTH) {
useAppStoreHook().toggleDevice("mobile")
useAppStoreHook().closeSideBar(true)

30
src/utils/index.ts Normal file
View File

@@ -0,0 +1,30 @@
/**
* Check if an element has a class
* @param {HTMLElement} elm
* @param {string} cls
* @returns {boolean}
*/
export function hasClass(ele: HTMLElement, cls: string) {
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
/**
* Add class to element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function addClass(ele: HTMLElement, cls: string) {
if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
/**
* Remove class from element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function removeClass(ele: HTMLElement, cls: string) {
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
}
}

2
src/views/dashboard/components/Team/index.vue
View File

@@ -22,7 +22,7 @@
<el-tag v-for="(position,i) in item.positions"
:type="colors[i%colors.length]"
:class="i!==0?'f-ml':''"
size="mini">
size="small">
{{ position }}
</el-tag>
</div>

47
src/views/dashboard/index.vue
View File

@@ -4,7 +4,7 @@
<!-- 数据 -->
<el-row :gutter="40" class="card-panel-col">
<el-col :xs="24" :lg="6" class="card-panel-col">
<!-- <el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper" style="margin-top: -10px">
<el-image style="width:200px; height: 100px"
@@ -20,7 +20,7 @@
</div>
</div>
</div>
</el-col>
</el-col>-->
<el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel">
@@ -29,9 +29,23 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
总访问量
访问数
</div>
<div class="card-panel-num">123456</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
消息数
</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
@@ -45,7 +59,7 @@
<div class="card-panel-text">
支付金额
</div>
<div class="card-panel-num">123456</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
@@ -58,7 +72,7 @@
<div class="card-panel-text">
订单数
</div>
<div class="card-panel-num">123456</div>
<div class="card-panel-num">1000</div>
</div>
</div>
</el-col>
@@ -202,6 +216,9 @@ const nickname = computed(() => useUserStoreHook().nickname);
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
@@ -216,8 +233,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
color: #40c9c6;
.svg-icon {
width: 3em !important;
height: 3em !important;
width: 4em !important;
height: 4em !important;
}
}
@@ -225,8 +242,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
color: #36a3f7;
.svg-icon {
width: 3.2em !important;
height: 3.2em !important;
width: 4em !important;
height: 4em !important;
}
}
@@ -234,8 +251,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
color: #f4516c;
.svg-icon {
width: 3.2em !important;
height: 3.2em !important;
width: 4em !important;
height: 4em !important;
}
}
@@ -243,14 +260,14 @@ const nickname = computed(() => useUserStoreHook().nickname);
color: #34bfa3;
.svg-icon {
width: 3.2em !important;
height: 3.2em !important;
width: 4em !important;
height: 4em !important;
}
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 6px;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;

7
src/views/ums/member/index.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="app-container">
<div class="component-container">
<el-form
size="mini"
ref="queryForm"
:model="queryParams"
:inline="true"
@@ -75,8 +74,8 @@
<el-table-column prop="birthday" label="出生日期"/>
<el-table-column prop="status" width="80" label="状态">
<template #default="scope">
<el-tag v-if="scope.row.status===1" type="success" size="mini">正常</el-tag>
<el-tag v-else type="info" size="mini">禁用</el-tag>
<el-tag v-if="scope.row.status===1" type="success" >正常</el-tag>
<el-tag v-else type="info" >禁用</el-tag>
</template>
</el-table-column>