@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/page/page-footer.vue

@@ -1,56 +1,54 @@
 <template>
-	<view :class="componentClassNames" :style="styleStr" @touchmove.stop.prevent="doNothing">
+	<view :class="[...classNames, $style['PageFooter']]" :style="inlineStyle" @touchmove.stop.prevent="doNothing">
 		<view :class="$style['PageFooter--content']">
 			<slot></slot>
 		</view>
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
 /**
  * 页面页脚部分容器组件，不单独使用，通过 page 组件间接引入
  */
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
+import { safeAreaInsetBottom } from '../../utils/windowInfo';
 
-import componentName from '../../mixins/componentName';
-import windowInfoMixin from '../../mixins/windowInfo';
-
-export default {
-	name: 'PageFooter',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName, windowInfoMixin],
-	props: {
-		/** 是否是 tab 页 */
-		isTabPage: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		styleStr() {
-			return `--safe-area-bottom: ${(this.isTabPage ? 0 : this.safeAreaInsetBottom) + 'px'};`;
-		},
-	},
-	methods: {
-		doNothing() {},
-	},
+});
+
+const classNames = useClassNames('page-footer');
+
+type _Props = {
+	/** 是否是 tab 页 */
+	isTabPage?: boolean;
 };
+
+withDefaults(defineProps<_Props>(), {
+	isTabPage: false,
+});
+
+const inlineStyle = computed(() => {
+	return [
+		// 底部安全区高度
+		`--safe-area-bottom: ${safeAreaInsetBottom}px;`,
+	].join('');
+});
+
+const doNothing = () => {};
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './page-footer' as *;
 
 // 定义外部变量
-$component-name: 'page-footer';
-$component-vars: $page-footer;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($page-footer, 'page-footer');
 }
 
 .PageFooter {
@@ -62,7 +60,7 @@ $component-vars: $page-footer;
 	background: UTILS__LOCAL_VAR(background);
 	padding-bottom: var(--safe-area-bottom);
 	box-sizing: border-box;
-	z-index: UTILS__z-index();
+	z-index: UTILS__z-index('page-footer');
 	box-shadow: 0 -4rpx 4rpx 4rpx #ccc;
 }
 

package/components/page/page-header.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+// 可配置的变量
+$page-header: () !default;
+$page-header-default: (
+	// 背景色
+	background: #fff,
+	// 字体大小
+	font-size: 28rpx,
+	// 标题栏下的额外内容高度，有内容时需设置次值
+	extra-height: 0px,
+	// 亮色主题下的文本颜色
+	color-light: #000,
+	// 暗色主题下的文本颜色
+	color-dark: #fff
+);
+$page-header: map.merge($page-header-default, $page-header);

package/components/page/page-header.vue

@@ -1,7 +1,11 @@
 <template>
 	<view
-		:class="[componentClassNames, theme === 'dark' ? $style['PageHeader--dark'] : $style['PageHeader--light']]"
-		:style="styleStr"
+		:class="[
+			...classNames,
+			$style['PageHeader'],
+			theme === 'dark' ? $style['PageHeader--dark'] : $style['PageHeader--light'],
+		]"
+		:style="inlineCssVar"
 	>
 		<!-- 标题栏 -->
 		<view
@@ -24,7 +28,7 @@
 				</navigator>
 				<navigator
 					v-if="hasHome"
-					:url="homePageUrl"
+					:url="homePath"
 					open-type="reLaunch"
 					:class="$style['PageHeader--home-icon']"
 					hover-class="none"
@@ -36,7 +40,7 @@
 				:class="[
 					$style['PageHeader--title'],
 					$style['PageHeader--title-ellipsis'],
-					{ 'PageHeader--title-center': center },
+					{ [$style['PageHeader--title-center']]: center },
 				]"
 			>
 				<slot>{{ title }}</slot>
@@ -49,103 +53,94 @@
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
 /**
  * 页面头部部分容器组件，不单独使用，通过 page 组件间接引入
  */
-
-import componentName from '../../mixins/componentName';
-import windowInfoMixin from '../../mixins/windowInfo';
-import IconCpn from '../icon/icon.vue';
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { homePath } from '../../configs';
+import { navBarHeight, navBarTopOffset, menuButtonWidthInCss } from '../../utils/windowInfo';
+import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'PageHeader',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { IconCpn },
-	mixins: [componentName, windowInfoMixin],
-	props: {
-		/** 导航栏标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 导航栏标题是否居中显示 */
-		center: {
-			type: Boolean,
-			default: false,
-		},
-		/** 主题，只能是 'light' 和 'dark' 中的一个 */
-		theme: {
-			type: String,
-			default: 'light',
-		},
-		/** 导航按钮类型: 0 = 不显示，1 = 返回，2 = 首页，3 = 返回|首页 */
-		navType: {
-			type: [Number, null],
-			default: null,
-		},
-	},
-	computed: {
-		/** 首页路径 */
-		homePageUrl() {
-			return homePath;
-		},
-		/** 是否显示返回按钮 */
-		hasBack() {
-			// 如果指定了导航按钮类型，则根据类型判断
-			if (this.navType !== null) return !!(this.navType & 1);
-			const pages = getCurrentPages();
-			// 在首页不显示返回按钮
-			if (this.homePageUrl === '/' + pages[0].route) return false;
-			// 页面栈只有一个时不显示返回按钮
-			if (pages.length === 1) return false;
-			// 其他情况均显示返回按钮
-			return true;
-		},
-		/** 是否显示首页按钮 */
-		hasHome() {
-			// 如果指定了导航按钮类型，则根据类型判断
-			if (this.navType !== null) return !!(this.navType & 2);
-			const pages = getCurrentPages();
-			// 在首页不显示返回首页按钮
-			if (this.homePageUrl === '/' + pages[0].route) return false;
-			// 页面栈只有一个时显示返回按钮
-			if (pages.length === 1) return true;
-			// 其他情况均不显示返回按钮
-			return false;
-		},
-		/** 导航按钮个数 */
-		iconCount() {
-			return (this.hasBack ? 1 : 0) + (this.hasHome ? 1 : 0);
-		},
-		styleStr() {
-			return [
-				`--title-bar-top: ${this.navBarTopOffset}px;`,
-				`--title-bar-height: ${this.navBarHeight}px;`,
-				`--title-bar-bottom: ${this.navBarBottomOffset}px;`,
-				`--menu-button-width: ${this.menuButtonWidth};`,
-			].join(' ');
-		},
-	},
+});
+
+const classNames = useClassNames('page-header');
+
+type _Props = {
+	/** 图标名 */
+	title?: string;
+	/** 图标名 */
+	center?: boolean;
+	/** 图标名 */
+	theme?: string;
+	/** 图标名 */
+	navType?: 0 | 1 | 2 | 3;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	title: '',
+	center: false,
+	theme: '',
+	navType: undefined,
+});
+
+defineEmits<{
+	(event: 'click'): void;
+}>();
+
+/** 是否显示返回按钮 */
+const hasBack = computed(() => {
+	// 如果指定了导航按钮类型，则根据类型判断
+	if (props.navType !== undefined) return !!(props.navType & 1);
+	const pages = getCurrentPages();
+	// 在首页不显示返回按钮
+	if (homePath === '/' + pages[0]!.route) return false;
+	// 页面栈只有一个时不显示返回按钮
+	if (pages.length === 1) return false;
+	// 其他情况均显示返回按钮
+	return true;
+});
+/** 是否显示首页按钮 */
+const hasHome = computed(() => {
+	// 如果指定了导航按钮类型，则根据类型判断
+	if (props.navType !== undefined) return !!(props.navType & 2);
+	const pages = getCurrentPages();
+	// 在首页不显示返回首页按钮
+	if (homePath === '/' + pages[0]!.route) return false;
+	// 页面栈只有一个时显示返回按钮
+	if (pages.length === 1) return true;
+	// 其他情况均不显示返回按钮
+	return false;
+});
+/** 导航按钮个数 */
+const iconCount = computed(() => {
+	return (hasBack.value ? 1 : 0) + (hasHome.value ? 1 : 0);
+});
+const inlineCssVar = computed(() => {
+	return [
+		// 页面头部上边缘相较于顶部的距离
+		`--page-header-top: ${navBarTopOffset}px;`,
+		// 页面头部高度
+		`--page-header-height: ${navBarHeight}px;`,
+		// 小程序胶囊按钮宽度（实际为胶囊按钮最左侧到页面右边的距离）
+		`--menu-button-width: ${menuButtonWidthInCss};`,
+	].join(' ');
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './page-header' as *;
 
 // 定义外部变量
-$component-name: 'page-header';
-$component-vars: $page-header;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($page-header, 'page-header');
 }
 
 .PageHeader {
@@ -156,7 +151,7 @@ $component-vars: $page-header;
 	width: 100%;
 	overflow: hidden; // BFC
 	background: UTILS__LOCAL_VAR(background);
-	z-index: UTILS__z-index();
+	z-index: UTILS__z-index('page-header');
 }
 
 // 亮色主题对应样式
@@ -173,10 +168,10 @@ $component-vars: $page-header;
 	position: relative;
 	font-size: UTILS__LOCAL_VAR(font-size);
 	font-weight: 600;
-	margin-top: var(--title-bar-top);
+	margin-top: var(--page-header-top);
 	width: 100%;
-	height: var(--title-bar-height);
-	line-height: var(--title-bar-height);
+	height: var(--page-header-height);
+	line-height: var(--page-header-height);
 	overflow: hidden;
 }
 // 标题栏中的返回按钮
@@ -187,8 +182,8 @@ $component-vars: $page-header;
 }
 .PageHeader--back-icon,
 .PageHeader--home-icon {
-	width: var(--title-bar-height);
-	height: var(--title-bar-height);
+	width: var(--page-header-height);
+	height: var(--page-header-height);
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -219,10 +214,10 @@ $component-vars: $page-header;
 		text-overflow: ellipsis;
 	}
 	.PageHeader--title-icon-1 & {
-		--title-bar-left-padding: calc(var(--title-bar-height) + 20rpx);
+		--title-bar-left-padding: calc(var(--page-header-height) + 20rpx);
 	}
 	.PageHeader--title-icon-2 & {
-		--title-bar-left-padding: calc(var(--title-bar-height) * 2 + 20rpx);
+		--title-bar-left-padding: calc(var(--page-header-height) * 2 + 20rpx);
 	}
 	&.PageHeader--title-center {
 		text-align: center;

package/components/page/page.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+// 可配置的变量
+$page: () !default;
+$page-default: (
+	// 页面背景
+	background: transparent
+);
+$page: map.merge($page-default, $page);

package/components/page/page.vue

@@ -1,15 +1,17 @@
 <template>
-	<view :class="componentClassNames">
-		<page-header-cpn v-if="custom" :theme="theme" :title="title">
-			<template #extra>
-				<slot name="header-extra"></slot>
-			</template>
-		</page-header-cpn>
+	<view :class="[...classNames, $style['Page']]" :style="inlineStyle">
+		<slot name="header">
+			<page-header-cpn v-if="hasHeader" :theme="theme" :title="title">
+				<template #extra>
+					<slot name="header-extra"></slot>
+				</template>
+			</page-header-cpn>
+		</slot>
 
 		<page-body-cpn
 			ref="body"
-			:has-custom-nav="custom"
-			:has-footer="hasFooter && $slots.footer"
+			:has-header="hasHeader"
+			:has-footer="hasFooter && !!$slots.footer"
 			:use-scroll="useScroll"
 			:is-tab-page="tabbar"
 			:enable-refresh="enableRefresh"
@@ -29,93 +31,115 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 import LoadingCpn from '../loading/loading.vue';
 import PageBodyCpn from './page-body.vue';
 import PageFooterCpn from './page-footer.vue';
 import PageHeaderCpn from './page-header.vue';
+import {
+	menuButtonWidthInCss,
+	navBarBottomOffset,
+	navBarHeight,
+	navBarTopOffset,
+	safeAreaInsetBottom,
+} from '../../utils/windowInfo';
 
-export default {
-	name: 'Page',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { LoadingCpn, PageBodyCpn, PageFooterCpn, PageHeaderCpn },
-	mixins: [componentName],
-	props: {
-		/** 页面标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 是否使用自定义导航栏 */
-		custom: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否使用底部操作栏 */
-		hasFooter: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否使用scroll-view */
-		useScroll: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
-		enableRefresh: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
-		refreshing: {
-			type: [Boolean, null],
-			default: null,
-		},
-		/** 页面加载 */
-		loading: {
-			type: [Boolean, String],
-			default: false,
-		},
-		/** 分页大小 */
-		pageSize: {
-			type: [Number, String],
-			default: 0,
-		},
-		/** 是否显示加载更多 */
-		showLoadMore: {
-			type: Boolean,
-			default: true,
-		},
-		/** 页面头部样式，主要用于控制导航栏字体颜色 */
-		theme: {
-			type: String,
-			default: 'light',
-		},
-		/** 是否是 tabbar 页面，且 tabbar 未隐藏 */
-		tabbar: {
-			type: Boolean,
-			default: false,
-		},
-	},
+});
+
+const classNames = useClassNames('page');
+
+type _Props = {
+	/** 页面标题 */
+	title?: string;
+	/** 页面是否有导航栏，当为 true 时，页面主体部分会为导航栏留出空间；否则内容部分会显示在屏幕顶部 */
+	hasHeader?: boolean;
+	/**
+	 * 是否显示底部操作栏，通常情况下使用 footer 插槽时就会显示，未使用时则没有。
+	 *
+	 * 但因 uniapp 的一些限制，动态的控制插槽的显隐存在一些问题，故使用此属性来进行动态控制。
+	 */
+	hasFooter?: boolean;
+	/** 是否使用scroll-view */
+	useScroll?: boolean;
+	/** 是否启用下拉刷新，仅 useScroll 为 true 时有效 */
+	enableRefresh?: boolean;
+	/** 是否触发下拉刷新，仅 useScroll 为 true 时有效 */
+	refreshing?: boolean;
+	/** 页面加载 */
+	loading?: boolean | string;
+	/** 分页大小 */
+	pageSize?: number;
+	/** 是否显示加载更多 */
+	showLoadMore?: boolean;
+	/** 页面头部样式，主要用于控制导航栏字体颜色 */
+	theme?: 'light' | 'dark';
+	/** 是否是 tabbar 页面，且 tabbar 未隐藏 */
+	tabbar?: boolean;
+};
+
+withDefaults(defineProps<_Props>(), {
+	title: '',
+	hasHeader: true,
+	hasFooter: true,
+	useScroll: true,
+	enableRefresh: false,
+	refreshing: undefined,
+	loading: false,
+	pageSize: 0,
+	showLoadMore: true,
+	theme: 'light',
+	tabbar: false,
+});
+
+type ScrollEvent = {
+	detail: {
+		scrollLeft: number;
+		scrollTop: number;
+		scrollHeight: number;
+		scrollWidth: number;
+		deltaX: number;
+		deltaY: number;
+	};
 };
+
+defineEmits<{
+	(event: 'scroll', value: ScrollEvent): void;
+	(event: 'refresh'): void;
+	(event: 'reach-bottom'): void;
+}>();
+
+const inlineStyle = computed(() => {
+	return [
+		// 顶部安全区高度
+		`--safe-area-top: ${navBarTopOffset}px;`,
+		// 底部安全区高度
+		`--safe-area-bottom: ${safeAreaInsetBottom}px;`,
+		// 页面头部上边缘相较于顶部的距离，原则上等于 `--safe-area-top`
+		`--page-header-top: ${navBarTopOffset}px;`,
+		// 页面头部高度
+		`--page-header-height: ${navBarHeight}px;`,
+		// 页面头部下边缘相较于顶部的距离
+		`--page-header-bottom: ${navBarBottomOffset}px;`,
+		// 小程序胶囊按钮宽度（实际为胶囊按钮最左侧到页面右边的距离）
+		`--menu-button-width: ${menuButtonWidthInCss};`,
+	].join('');
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './page' as *;
 
 // 定义外部变量
-$component-name: 'page';
-$component-vars: $page;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($page, 'page');
 }
 
 .Page {
@@ -123,6 +147,6 @@ $component-vars: $page;
 
 	width: 100vw;
 	position: relative;
-	background: var(--background);
+	background: UTILS__LOCAL_VAR(background);
 }
 </style>