<template>
<view class="app" :class="[cusClass]" :style="[cusStyle]">
<slot name="header"></slot>
<slot></slot>
<button @click="hClick">点击</button>
</view>
</template>
<script lang="ts">
export default {
name: 'app-page',
options: { virtualHost: true }
};
</script>
<script lang="ts" setup>
import { onMounted } from 'vue';
const emits = defineEmits<{
(e: 'click'): void;
}>();
defineProps({
/** 宽度 */
width: { type: String, default: undefined },
/**高度 */
height: { type: String, default: undefined },
/** 是否需要登录 */
login: { type: Boolean, default: true },
/** 是否为自定义导航栏 */
customNav: { type: Boolean, default: false },
/** 自定义的样式属性 */
cusStyle: { type: Object, default: () => ({}) }, // eslint-disable-line vue/prop-name-casing
/** 自定义类名 */
cusClass: { type: String, default: '' } // eslint-disable-line vue/prop-name-casing
});
onMounted(() => {
console.log('问问');
});
function hClick() {
emits('click');
}
</script>
<style scoped lang="scss">
.app {
display: flex;
flex-direction: column;
.loading-view {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
<template>
<view class="content">
<app-page @click="onClick">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">c爱情恰恰es</text>
</view>
</app-page>
</view>
</template>
<script lang="ts" setup>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('43434534ere543435');
});
function onClick(){
console.log('点击');
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
