feat: 设置页初始化

This commit is contained in:
ZiuChen 2022-09-18 09:03:30 +08:00
parent 5ee1e9ad8c
commit 162a136207
4 changed files with 23 additions and 29 deletions

View File

@ -1,9 +1,14 @@
<template>
<div class="app">
<Main></Main>
<Main @show-setting="settingShown = true" v-show="!settingShown"></Main>
<Setting v-show="settingShown"></Setting>
</div>
</template>
<script setup>
import { ref } from 'vue'
import Main from './views/Main.vue'
import Setting from './views/Setting.vue'
const settingShown = ref(false)
</script>

View File

@ -23,6 +23,7 @@
<span class="clip-switch-btn" @click="isMultiple = !isMultiple">{{
isMultiple ? '❌ 退出多选' : '👆'
}}</span>
<span class="clip-switch-btn" v-show="!isMultiple" @click="emit('showSetting')">🎨</span>
<span
class="clip-switch-btn clip-search-btn"
v-show="!isMultiple"
@ -57,6 +58,7 @@
<script setup>
import { ref, watch, onMounted, computed, nextTick } from 'vue'
import { ElMessageBox } from 'element-plus'
import ClipCard from '../cpns/ClipCard.vue'
import ClipItemList from '../cpns/ClipItemList.vue'
import ClipFullData from '../cpns/ClipFullData.vue'
@ -188,6 +190,8 @@ const handleDataRemove = () => {
updateShowList(ClipSwitchRef.value.activeTab)
}
const emit = defineEmits(['showSetting'])
const activeTab = ref('all')
onMounted(() => {

View File

@ -1,28 +0,0 @@
<template>
<div class="notify">
<ClipCard>
<template #header>
<div class="notify-header">
<div class="notify-header-title">通知</div>
</div>
</template>
<div class="notify-content">
<div class="notify-content-title">通知标题</div>
<div class="notify-content-text">通知内容</div>
</div>
<template #footer>
<div class="notify-footer">
<div class="notify-footer-btn">知道了</div>
</div>
</template>
</ClipCard>
</div>
</template>
<script setup>
import ClipCard from '../cpns/ClipCard.vue'
</script>
<style lang="less" scoped>
@import '../style';
</style>

13
src/views/Setting.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="setting">
<el-button>Setting</el-button>
</div>
</template>
<script setup>
import { ElButton } from 'element-plus'
</script>
<style lang="less" scoped>
@import '../style';
</style>