uview-ultra 4.5.46

package/components/up-index-anchor/up-index-anchor.uvue

@@ -0,0 +1,146 @@
+<template>
+	<view
+	    class="up-index-anchor up-border-bottom"
+		:class="{ 'up-index-anchor--sticky': parentSticky }"
+		:ref="`up-index-anchor-${textName}`"
+	    :style="{
+			height: addUnit(height),
+			backgroundColor: bgColor
+		}"
+	>
+		<text
+		    class="up-index-anchor__text"
+		    :style="{
+				fontSize: addUnit(size),
+				color: color
+			}"
+		>{{ textName }}</text>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, onMounted, getCurrentInstance} from 'vue'
+	import { addUnit, error, getParentFunc } from '../../libs/function/index'
+	import { useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParent } = useUltraUI()
+	import defProps from './indexAnchor.uts'
+
+	const instance = getCurrentInstance()!.proxy!
+	
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-index-anchor'
+	})
+	
+	// 定义 props
+	const props = defineProps({
+	    customStyle: {
+	        type: [Object, String],
+	        default: () => ({})
+	    },
+	    customClass: {
+	        type: String,
+	        default: ''
+	    },
+	    url: {
+	        type: String,
+	        default: ''
+	    },
+	    linkType: {
+	        type: String,
+	        default: 'navigateTo'
+	    },
+		text: {
+			type: [String, Number],
+			default: defProps.getString('indexAnchor.text')
+		},
+		color: {
+			type: String,
+			default: defProps.getString('indexAnchor.color')
+		},
+		size: {
+			type: [String, Number],
+			default: defProps.getNumber('indexAnchor.size')
+		},
+		bgColor: {
+			type: String,
+			default: defProps.getString('indexAnchor.bgColor')
+		},
+		height: {
+			type: [String, Number],
+			default: defProps.getNumber('indexAnchor.height')
+		}
+	})
+	
+	const emit = defineEmits([])
+	
+	const textName = computed((): string => {
+		return props.text.toString()
+	})
+	
+	const parentSticky = computed((): boolean => {
+		const indexList = getParent("up-index-list", instance)
+		if (parentData.value['sticky'] != null) {
+			return indexList != null ? parentData.value['sticky'] as boolean : true
+		} else {
+			return false
+		}
+	})
+	
+	const init = function() {
+		// 此处会活动父组件实例，并赋值给实例的parent属性
+		const indexList = getParent('up-index-list', instance)
+		if (indexList == null) { 
+			return error('up-index-anchor必须要搭配up-index-list组件使用')
+		}
+		// 将当前实例放入到up-index-list中
+		if (parent.value != null) {
+			parent.value.$callMethod('addAnchors', instance)
+		}
+		const indexListItem = getParentFunc('up-index-item', instance)
+		// // #ifndef APP-NVUE
+		// // 只有在非nvue下，up-index-anchor才是嵌套在u-index-item中的
+		if (indexListItem == null) {
+			return error('up-index-anchor必须要搭配up-index-item组件使用')
+		}
+		// 设置up-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特定
+		// if (typeof this.text == 'string') {
+			// 元素id不能包含特殊字符会导致H5下点击索引滚动失效
+			if (props.text.toString().charCodeAt(0) != null) {
+				indexListItem.$callMethod('setId', props.text.toString().charCodeAt(0).toString())
+			}
+		// } else {
+			// indexListItem.$callMethod('setId', props.text['name'].toString().charCodeAt(0).toString())
+		// }
+		// #endif
+	}
+	
+	onMounted(() => {
+		init()
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-index-anchor {
+		// wait
+		position: relative;
+		top: 0;
+		@include flex;
+		align-items: center;
+		padding-left: 15px;
+		z-index: 1;
+
+		&--sticky {
+			// wait
+			position: relative;
+			top: 0;
+		}
+
+		&__text {
+			// @include flex;
+			// align-items: center;
+		}
+	}
+</style>

package/components/up-index-anchor/up-index-anchor.vue

@@ -0,0 +1,124 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<header>
+	<!-- #endif -->
+	<view
+	    class="up-index-anchor up-border-bottom"
+		:class="{ 'up-index-anchor--sticky': parentSticky }"
+		:ref="`up-index-anchor-${text}`"
+	    :style="{
+			height: addUnit(height),
+			backgroundColor: bgColor
+		}"
+	>
+		<text
+		    class="up-index-anchor__text"
+		    :style="{
+				fontSize: addUnit(size),
+				color: color
+			}"
+		>{{ text.name || text }}</text>
+	</view>
+	<!-- #ifdef APP-NVUE -->
+	</header>
+	<!-- #endif -->
+</template>
+
+<script setup>
+	import { computed, getCurrentInstance, onMounted, toRef } from 'vue'
+	import { props as anchorProps } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+	import { addUnit, $parent, error } from '../../libs/function/index.js'
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * IndexAnchor 列表锚点
+	 * @description 
+	 * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html
+	 * @property {String | Number}	text	列表锚点文本内容
+	 * @property {String}			color	列表锚点文字颜色 ( 默认 '#606266' )
+	 * @property {String | Number}	size	列表锚点文字大小，单位默认px ( 默认 14 )
+	 * @property {String}			bgColor	列表锚点背景颜色 ( 默认 '#dedede' )
+	 * @property {String | Number}	height	列表锚点高度，单位默认px ( 默认 32 )
+	 * @example <up-index-anchor :text="indexList[index]"></up-index-anchor>
+	 */
+	defineOptions({
+		name: 'up-index-anchor',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...anchorProps.props
+	})
+	const instance = getCurrentInstance()
+	const proxy = instance?.proxy
+	const text = toRef(props, 'text')
+	const height = toRef(props, 'height')
+
+	function init() {
+		// 此处会活动父组件实例，并赋值给实例的parent属性
+		const indexList = $parent.call(proxy, 'up-index-list')
+		if (!indexList) {
+			return error('up-index-anchor必须要搭配up-index-list组件使用')
+		}
+		// 将当前实例放入到u-index-list中
+		indexList.anchors.push(proxy)
+		const indexListItem = $parent.call(proxy, 'up-index-item')
+		// #ifndef APP-NVUE
+		// 只有在非nvue下，up-index-anchor才是嵌套在u-index-item中的
+		if (!indexListItem) {
+			return error('up-index-anchor必须要搭配up-index-item组件使用')
+		}
+		// 设置up-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
+		if (typeof props.text == 'string') {
+			indexListItem.id = props.text.charCodeAt(0)
+		} else {
+			indexListItem.id = props.text.name.charCodeAt(0)
+		}
+		// #endif
+	}
+
+	const parentSticky = computed(() => {
+		const indexList = $parent.call(proxy, "up-index-list")
+		return indexList ? indexList.sticky : true
+	})
+
+	onMounted(() => {
+		init()
+	})
+
+	defineExpose({
+		text,
+		height,
+		parentSticky,
+		init
+	})
+</script>
+
+<style lang="scss" scoped>
+
+	.up-index-anchor {
+		position: sticky;
+		top: 0;
+		@include flex;
+		align-items: center;
+		padding-left: 15px;
+		z-index: 1;
+
+		&--sticky {
+        position: sticky;
+        top: 0;
+    	}
+
+		&__text {
+			@include flex;
+			align-items: center;
+		}
+	}
+</style>

package/components/up-index-item/indexItem.uts

@@ -0,0 +1,15 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ * @FilePath     : /uview-ultra/components/up-index-item/index-item.uts
+ */
+export default {
+    // indexItem 组件
+    indexItem: {
+        text: ''
+    }
+}

package/components/up-index-item/props.js

@@ -0,0 +1,8 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+
+    }
+})

package/components/up-index-item/props.uts

@@ -0,0 +1,15 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+
+export const propsIndexItem = defineMixin({
+    props: {
+        // 暂无任何参数
+    }
+})

package/components/up-index-item/up-index-item.uvue

@@ -0,0 +1,109 @@
+<template>
+    <view
+        class="up-index-item"
+		:id="'up-index-item-' + itemId"
+		:class="['up-index-item-' + itemId]"
+    >
+        <slot />
+    </view>
+</template>
+
+<script setup lang="uts">
+	import { ref, onMounted, getCurrentInstance } from 'vue'
+	import { sleep, error, upGetRect } from '../../libs/function/index'
+	import defProps from './indexItem.uts'
+	import { useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, getParent, getParentData } = useUltraUI()
+	
+	const instance = getCurrentInstance()!.proxy!
+
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-index-item'
+	})
+	
+	// 定义 props
+	const props = defineProps({
+	    customStyle: {
+	        type: [Object, String],
+	        default: () => ({})
+	    },
+	    customClass: {
+	        type: String,
+	        default: ''
+	    },
+	    url: {
+	        type: String,
+	        default: ''
+	    },
+	    linkType: {
+	        type: String,
+	        default: 'navigateTo'
+	    },
+		text: {
+			type: [String, Number],
+			default: defProps.getString('indexItem.text')
+		}
+	})
+	
+	const emit = defineEmits([])
+	
+	const top = ref(0)
+	const height = ref(0)
+	const itemId = ref('')
+	const anchor = ref({})
+	
+	const getIndexItemRect = function(): Promise<NodeInfo> {
+		return new Promise((resolve) => {
+			// @ts-ignore
+			upGetRect('.up-index-item', false, instance).then((size: any) => {
+				resolve(size as NodeInfo)
+			})
+		}) 
+	}
+	
+	const init = function() {
+		// 此处会获取父组件实例，并赋值给实例的parent属性
+		// @ts-ignore
+		getParentData('up-index-list', instance, false)
+		if (parent.value == null) {
+			return error('up-index-item必须要搭配up-index-list组件使用')
+		}
+		sleep().then(() => {
+			getIndexItemRect().then((size: NodeInfo) => {
+				// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
+				top.value = Math.ceil(size.top ?? 0)
+				height.value = Math.ceil(size.height ?? 0)
+			})
+		})
+	}
+	
+	onMounted(() => {
+		// 设置id，使用charCodeAt获取字符的ASCII码作为id，避免H5下特殊字符导致id选择器失效
+		if (props.text != '') {
+			itemId.value = props.text.toString().charCodeAt(0).toString()
+		}
+		init()
+	})
+
+	const setId = function(idPam: string) {
+		console.log(idPam)
+		itemId.value = idPam
+	}
+	
+	const getRefs = function() {
+		return {
+			height: height.value
+		}
+	}
+
+	defineExpose({
+		setId,
+		getRefs
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	
+</style>

package/components/up-index-item/up-index-item.vue

@@ -0,0 +1,105 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell ref="up-index-item">
+		<!-- #endif -->
+		<view
+			class="up-index-item"
+			:id="`up-index-item-${id}`"
+			:class="[`up-index-item-${id}`]"
+		>
+			<slot />
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script setup>
+	import { getCurrentInstance, onMounted, ref } from 'vue'
+	import { props as itemProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { sleep, error } from '../../libs/function/index.js'
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * IndexItem 
+	 * @description 
+	 * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html
+	 * @property {String}
+	 * @event {Function}
+	 * @example
+	 */
+	defineOptions({
+		name: 'up-index-item',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...itemProps.props
+	})
+	const instance = getCurrentInstance()
+	const proxy = instance?.proxy
+	const { parent, getParentData, $uGetRect } = useUltraUI(props)
+	// 本组件到滚动条顶部的距离
+	const top = ref(0)
+	const height = ref(0)
+	const id = ref('')
+	// 子组件u-index-anchor的实例
+	const anchor = ref({})
+
+	function init() {
+		// 此处会活动父组件实例，并赋值给实例的parent属性
+		getParentData('up-index-list')
+		if (!parent.value) {
+			return error('up-index-item必须要搭配up-index-list组件使用')
+		}
+		sleep().then(() =>{
+			getIndexItemRect().then(size => {
+				// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
+				top.value = Math.ceil(size.top)
+				height.value = Math.ceil(size.height)
+			})
+		})
+	}
+
+	function getIndexItemRect() {
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			$uGetRect('.up-index-item').then(size => {
+				resolve(size)
+			})
+			// #endif
+
+			// #ifdef APP-NVUE
+			const ref = proxy.$refs['up-index-item']
+			dom.getComponentRect(ref, res => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	}
+
+	onMounted(() => {
+		init()
+	})
+
+	defineExpose({
+		top,
+		height,
+		id,
+		anchor,
+		init,
+		getIndexItemRect
+	})
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

package/components/up-index-list/indexList.js

@@ -0,0 +1,21 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:13:35
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/indexList.js
+ */
+export default {
+    // indexList 组件
+    indexList: {
+        inactiveColor: '#606266',
+        activeColor: '#5677fc',
+        indexList: [],
+        sticky: true,
+        customNavHeight: 0,
+        safeBottomFix: false,
+        itemMargin: '0rpx'
+    }
+}

package/components/up-index-list/indexList.uts

@@ -0,0 +1,21 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ * @FilePath     : /uview-ultra/libs/config/props/indexList.js
+ */
+export default {
+    // indexList 组件
+    indexList: {
+        inactiveColor: '#606266',
+        activeColor: '#5677fc',
+        indexList:[] as String[],
+        sticky: true,
+        customNavHeight: 0,
+		safeBottomFix: false,
+		itemMargin: '0rpx'
+    }
+}

package/components/up-index-list/props.js

@@ -0,0 +1,41 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 右边锚点非激活的颜色
+        inactiveColor: {
+            type: String,
+            default: () => defProps.indexList.inactiveColor
+        },
+        // 右边锚点激活的颜色
+        activeColor: {
+            type: String,
+            default: () => defProps.indexList.activeColor
+        },
+        // 索引字符列表，数组形式
+        indexList: {
+            type: Array,
+            default: () => defProps.indexList.indexList
+        },
+        // 是否开启锚点自动吸顶
+        sticky: {
+            type: Boolean,
+            default: () => defProps.indexList.sticky
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            default: () => defProps.indexList.customNavHeight
+        },
+        // 是否开启底部安全距离适配
+        safeBottomFix: {
+            type: Boolean,
+            default: () => defProps.indexList.safeBottomFix
+        },
+        // 自定义下边距
+        itemMargin: {
+            type: String,
+            default: () => defProps.indexList.itemMargin
+        },
+    }
+})

package/components/up-index-list/props.uts

@@ -0,0 +1,51 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './indexList.uts'
+let indexListDef = defProps['indexList'] as UTSJSONObject
+
+export const propsIndexList = defineMixin({
+    props: {
+        // 右边锚点非激活的颜色
+        inactiveColor: {
+            type: String,
+            default: indexListDef['inactiveColor']
+        },
+        // 右边锚点激活的颜色
+        activeColor: {
+            type: String,
+            default: indexListDef['activeColor']
+        },
+        // 索引字符列表，数组形式
+        indexList: {
+            type: Array,
+            default: indexListDef['indexList']
+        },
+        // 是否开启锚点自动吸顶
+        sticky: {
+            type: Boolean,
+            default: indexListDef['sticky']
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            default: indexListDef['customNavHeight']
+        },
+		// 是否开启底部安全距离适配
+		safeBottomFix: {
+		    type: Boolean,
+		    default: indexListDef['safeBottomFix']
+		},
+		//自定义下边距
+        itemMargin: {
+            type: String,
+            default: indexListDef['itemMargin']
+        },
+    }
+})