refactor: 重构 management/components 目录下组件, 使用 Vue3 组合式 API 写法 (#151)
This commit is contained in:
parent
734e33edbb
commit
57918272ac
@ -5,19 +5,19 @@
|
|||||||
<div class="desc" v-html="data.desc"></div>
|
<div class="desc" v-html="data.desc"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
<script>
|
type DataType = {
|
||||||
export default {
|
img: string
|
||||||
name: 'EmptyModule',
|
title: string
|
||||||
props: {
|
desc: string
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: DataType
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.default-empty-root {
|
.default-empty-root {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<LogoIcon />
|
<LogoIcon />
|
||||||
<RouterLink v-for="(tab, index) in tabList" :key="index" class="tab-btn" :to="tab.to" replace>
|
<RouterLink v-for="(tab, index) in tabs" :key="index" class="tab-btn" :to="tab.to" replace>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i class="iconfont" :class="tab.icon"></i>
|
<i class="iconfont" :class="tab.icon"></i>
|
||||||
</div>
|
</div>
|
||||||
@ -10,17 +10,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import LogoIcon from './LogoIcon.vue'
|
import LogoIcon from './LogoIcon.vue'
|
||||||
|
|
||||||
export default {
|
const tabs = [
|
||||||
name: 'LeftMenu',
|
|
||||||
components: {
|
|
||||||
LogoIcon
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tabList: [
|
|
||||||
{
|
{
|
||||||
text: '编辑问卷',
|
text: '编辑问卷',
|
||||||
icon: 'icon-bianji',
|
icon: 'icon-bianji',
|
||||||
@ -42,12 +35,8 @@ export default {
|
|||||||
name: 'analysisPage'
|
name: 'analysisPage'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.nav {
|
.nav {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
@ -69,7 +58,6 @@ export default {
|
|||||||
&:hover {
|
&:hover {
|
||||||
color: $normal-color;
|
color: $normal-color;
|
||||||
|
|
||||||
// background-color: $background-color-light;
|
|
||||||
.icon {
|
.icon {
|
||||||
background-color: $disable-color;
|
background-color: $disable-color;
|
||||||
}
|
}
|
||||||
|
@ -1,22 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar-main-logo" @click="toHomePage">
|
<div class="navbar-main-logo" @click="handleNavigate">
|
||||||
<img src="/imgs/s-logo.webp" />
|
<img src="/imgs/s-logo.webp" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
<script>
|
const router = useRouter()
|
||||||
export default {
|
|
||||||
name: 'LogoIcon',
|
const handleNavigate = () => {
|
||||||
methods: {
|
router.push({ name: 'survey' })
|
||||||
toHomePage() {
|
|
||||||
this.$router.push({
|
|
||||||
name: 'survey'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.navbar-main-logo {
|
.navbar-main-logo {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
Loading…
Reference in New Issue
Block a user