github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 18:40:22 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(demo): transition and account use setup (#3298)

Browse Source 
Co-authored-by: jackhoo_98 <jackhoo_98@foxmail.com>
This commit is contained in:
胡彪 2023-11-20 15:46:40 +08:00 committed by GitHub
parent bab28af986
commit 6c0b857d7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/demo/comp/transition/index.vue
View File

@ -9,15 +9,15 @@
/> />
<a-button type="primary" class="ml-4" @click="start"> start </a-button> <a-button type="primary" class="ml-4" @click="start"> start </a-button>
</div> </div>
<component :is="`${value}Transition`"> <component :is="TransitionItem[value]">
<div class="box" v-show="show"></div> <div class="box" v-show="show"></div>
</component> </component>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Select } from 'ant-design-vue'; import { Select } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { import {
FadeTransition, FadeTransition,
ScaleTransition, ScaleTransition,
@ -32,59 +32,41 @@
ScaleRotateTransition, ScaleRotateTransition,
ExpandXTransition, ExpandXTransition,
ExpandTransition, ExpandTransition,
} from '/@/components/Transition'; } from '@/components/Transition';
const transitionList = [ const TransitionItem = {
'Fade', FadeTransition,
'Scale', ScaleTransition,
'SlideY', SlideYTransition,
'ScrollY', ScrollYTransition,
'SlideYReverse', SlideYReverseTransition,
'ScrollYReverse', ScrollYReverseTransition,
'SlideX', SlideXTransition,
'ScrollX', ScrollXTransition,
'SlideXReverse', SlideXReverseTransition,
'ScrollXReverse', ScrollXReverseTransition,
'ScaleRotate', ScaleRotateTransition,
'ExpandX', ExpandXTransition,
'Expand', ExpandTransition,
]; };
const options = transitionList.map((item) => ({
label: item,
value: item,
key: item,
}));
export default defineComponent({ const options = Object.keys(TransitionItem).map((item) => {
components: { const label = item.replace('Transition', '');
Select, return {
PageWrapper, label,
FadeTransition, value: item,
ScaleTransition, key: item,
SlideYTransition, };
ScrollYTransition,
SlideYReverseTransition,
ScrollYReverseTransition,
SlideXTransition,
ScrollXTransition,
SlideXReverseTransition,
ScrollXReverseTransition,
ScaleRotateTransition,
ExpandXTransition,
ExpandTransition,
},
setup() {
const value = ref('Fade');
const show = ref(true);
function start() {
show.value = false;
setTimeout(() => {
show.value = true;
}, 300);
}
return { options, value, start, show };
},
}); });
const value = ref('FadeTransition');
const show = ref(true);
function start() {
show.value = false;
setTimeout(() => {
show.value = true;
}, 300);
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.box { .box {

69
src/views/demo/page/account/center/index.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div :class="prefixCls"> <div :class="prefixCls">
<a-row :class="`${prefixCls}-top`"> <Row :class="`${prefixCls}-top`">
<a-col :span="9" :class="`${prefixCls}-col`"> <Col :span="9" :class="`${prefixCls}-col`">
<a-row> <Row>
<a-col :span="8"> <Col :span="8">
<div :class="`${prefixCls}-top__avatar`"> <div :class="`${prefixCls}-top__avatar`">
<img width="70" :src="avatar" /> <img width="70" :src="avatar" />
<span>Vben</span> <span>Vben</span>
<div>海纳百川，有容乃大</div> <div>海纳百川，有容乃大</div>
</div> </div>
</a-col> </Col>
<a-col :span="16"> <Col :span="16">
<div :class="`${prefixCls}-top__detail`"> <div :class="`${prefixCls}-top__detail`">
<template v-for="detail in details" :key="detail.title"> <template v-for="detail in details" :key="detail.title">
<p> <p>
@ -19,10 +19,10 @@
</p> </p>
</template> </template>
</div> </div>
</a-col> </Col>
</a-row> </Row>
</a-col> </Col>
<a-col :span="7" :class="`${prefixCls}-col`"> <Col :span="7" :class="`${prefixCls}-col`">
<CollapseContainer title="标签" :canExpan="false"> <CollapseContainer title="标签" :canExpan="false">
<template v-for="tag in tags" :key="tag"> <template v-for="tag in tags" :key="tag">
<Tag class="mb-2"> <Tag class="mb-2">
@ -30,21 +30,21 @@
</Tag> </Tag>
</template> </template>
</CollapseContainer> </CollapseContainer>
</a-col> </Col>
<a-col :span="8" :class="`${prefixCls}-col`"> <Col :span="8" :class="`${prefixCls}-col`">
<CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false"> <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false">
<div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`"> <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
<Icon :icon="team.icon" :color="team.color" /> <Icon :icon="team.icon" :color="team.color" />
<span>{{ team.title }}</span> <span>{{ team.title }}</span>
</div> </div>
</CollapseContainer> </CollapseContainer>
</a-col> </Col>
</a-row> </Row>
<div :class="`${prefixCls}-bottom`"> <div :class="`${prefixCls}-bottom`">
<Tabs> <Tabs>
<template v-for="item in achieveList" :key="item.key"> <template v-for="item in achieveList" :key="item.key">
<TabPane :tab="item.name"> <TabPane :tab="item.name">
<component :is="item.component" /> <component :is="tabs[item.component]" />
</TabPane> </TabPane>
</template> </template>
</Tabs> </Tabs>
@ -52,9 +52,9 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { Tag, Tabs, Row, Col } from 'ant-design-vue'; import { Tag, Tabs, Row, Col } from 'ant-design-vue';
import { defineComponent, computed } from 'vue'; import { computed } from 'vue';
import { CollapseContainer } from '@/components/Container'; import { CollapseContainer } from '@/components/Container';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import Article from './Article.vue'; import Article from './Article.vue';
@ -65,32 +65,15 @@
import { tags, teams, details, achieveList } from './data'; import { tags, teams, details, achieveList } from './data';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
export default defineComponent({ const userStore = useUserStore();
components: { const TabPane = Tabs.TabPane;
CollapseContainer, const tabs = {
Icon, Article,
Tag, Application,
Tabs, Project,
TabPane: Tabs.TabPane, };
Article, const prefixCls = 'account-center';
Application, const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
Project,
[Row.name]: Row,
[Col.name]: Col,
},
setup() {
const userStore = useUserStore();
const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
return {
prefixCls: 'account-center',
avatar,
tags,
teams,
details,
achieveList,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.account-center { .account-center {

39
src/views/demo/page/account/setting/index.vue
View File

@ -4,7 +4,7 @@
<Tabs tab-position="left" :tabBarStyle="tabBarStyle"> <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
<template v-for="item in settingList" :key="item.key"> <template v-for="item in settingList" :key="item.key">
<TabPane :tab="item.name"> <TabPane :tab="item.name">
<component :is="item.component" /> <component :is="tabs[item.component]" />
</TabPane> </TabPane>
</template> </template>
</Tabs> </Tabs>
@ -12,38 +12,27 @@
</ScrollContainer> </ScrollContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Tabs } from 'ant-design-vue'; import { Tabs } from 'ant-design-vue';
import { ScrollContainer } from '@/components/Container'; import { ScrollContainer } from '@/components/Container';
import { settingList } from './data'; import { settingList } from './data';
import BaseSetting from './BaseSetting.vue'; import BaseSetting from './BaseSetting.vue';
import SecureSetting from './SecureSetting.vue'; import SecureSetting from './SecureSetting.vue';
import AccountBind from './AccountBind.vue'; import AccountBind from './AccountBind.vue';
import MsgNotify from './MsgNotify.vue'; import MsgNotify from './MsgNotify.vue';
export default defineComponent({ const TabPane = Tabs.TabPane;
components: { const tabs = {
ScrollContainer, BaseSetting,
Tabs, SecureSetting,
TabPane: Tabs.TabPane, AccountBind,
BaseSetting, MsgNotify,
SecureSetting, };
AccountBind,
MsgNotify, const prefixCls = 'account-setting';
}, const tabBarStyle = {
setup() { width: '220px',
return { };
prefixCls: 'account-setting',
settingList,
tabBarStyle: {
width: '220px',
},
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
.account-setting { .account-setting {