mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-04-06 03:57:55 +08:00
fix: 功能组件,业务组件分离
This commit is contained in:
parent
b50125d6f3
commit
d9a5e06c89
@ -1,61 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default{
|
|
||||||
name: 'CustomHeader'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
|
|
||||||
interface topTitleProps {
|
|
||||||
title?: string,
|
|
||||||
leftIcon?: string,
|
|
||||||
leftText?: string,
|
|
||||||
rightText?: string,
|
|
||||||
color?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// 携带默认值的props
|
|
||||||
withDefaults(defineProps<topTitleProps>(), {
|
|
||||||
title: '',
|
|
||||||
leftIcon: 'arrow-left',
|
|
||||||
leftText: '',
|
|
||||||
rightText: '',
|
|
||||||
color: '#333'
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['clickLeft', 'clickRight'])
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const active = ref(0)
|
|
||||||
|
|
||||||
const clickLeft = () => {
|
|
||||||
if (window.history.length > 1) {
|
|
||||||
router.back();
|
|
||||||
} else {
|
|
||||||
router.push("/");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const clickRight = () => {
|
|
||||||
emit("clickRight")
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<van-sticky>
|
|
||||||
<van-nav-bar :title="title" @click-left="clickLeft" @click-right="clickRight" left-arrow>
|
|
||||||
<template #left> <van-icon :color="color" size="20" :name="leftIcon" /><span :style="color">{{ leftText }}</span> </template>
|
|
||||||
<template @click-right="onClickRight" #right>
|
|
||||||
<span :style="color">{{ rightText }}</span>
|
|
||||||
</template>
|
|
||||||
</van-nav-bar>
|
|
||||||
</van-sticky>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
70
src/components/mainPat/CustomHeader.vue
Normal file
70
src/components/mainPat/CustomHeader.vue
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "CustomHeader",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
interface topTitleProps {
|
||||||
|
title?: string;
|
||||||
|
leftIcon?: string;
|
||||||
|
leftText?: string;
|
||||||
|
rightText?: string;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 携带默认值的props
|
||||||
|
withDefaults(defineProps<topTitleProps>(), {
|
||||||
|
title: "",
|
||||||
|
leftIcon: "arrow-left",
|
||||||
|
leftText: "",
|
||||||
|
rightText: "",
|
||||||
|
color: "#333",
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(["clickLeft", "clickRight"]);
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const active = ref(0);
|
||||||
|
|
||||||
|
const clickLeft = () => {
|
||||||
|
if (window.history.length > 1) {
|
||||||
|
router.back();
|
||||||
|
} else {
|
||||||
|
router.push("/");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const clickRight = () => {
|
||||||
|
emit("clickRight");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<van-sticky>
|
||||||
|
<van-nav-bar
|
||||||
|
:title="title"
|
||||||
|
@click-left="clickLeft"
|
||||||
|
@click-right="clickRight"
|
||||||
|
left-arrow
|
||||||
|
>
|
||||||
|
<template #left>
|
||||||
|
<van-icon :color="color" size="20" :name="leftIcon" /><span
|
||||||
|
:style="color"
|
||||||
|
>{{ leftText }}</span
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template @click-right="onClickRight" #right>
|
||||||
|
<span :style="color">{{ rightText }}</span>
|
||||||
|
</template>
|
||||||
|
</van-nav-bar>
|
||||||
|
</van-sticky>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
Loading…
x
Reference in New Issue
Block a user