From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:58:45 +0800
Subject: [PATCH] fix:手持设备
---
uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 225 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue b/uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
new file mode 100644
index 0000000..0e1b703
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
@@ -0,0 +1,225 @@
+<template>
+ <view class="u-collapse-item">
+ <u-cell
+ :title="title"
+ :value="value"
+ :label="label"
+ :icon="icon"
+ :isLink="isLink"
+ :clickable="clickable"
+ :border="parentData.border && showBorder"
+ @click="clickHandler"
+ :arrowDirection="expanded ? 'up' : 'down'"
+ :disabled="disabled"
+ >
+ <!-- #ifndef MP-WEIXIN -->
+ <!-- ��������������������������������������������������� <slot name="title" slot="title" />��������� -->
+ <template slot="title">
+ <slot name="title"></slot>
+ </template>
+ <template slot="icon">
+ <slot name="icon"></slot>
+ </template>
+ <template slot="value">
+ <slot name="value"></slot>
+ </template>
+ <template slot="right-icon">
+ <slot name="right-icon"></slot>
+ </template>
+ <!-- #endif -->
+ </u-cell>
+ <view
+ class="u-collapse-item__content"
+ :animation="animationData"
+ ref="animation"
+ >
+ <view
+ class="u-collapse-item__content__text content-class"
+ :id="elId"
+ :ref="elId"
+ ><slot /></view>
+ </view>
+ <u-line v-if="parentData.border"></u-line>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const animation = uni.requireNativePlugin('animation')
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ /**
+ * collapseItem ������������Item
+ * @description ���������������������������������������������u-collapse���������
+ * @tutorial https://www.uviewui.com/components/collapse.html
+ * @property {String} title ������
+ * @property {String} value ������������������
+ * @property {String} label ���������������������������
+ * @property {Boolean} disbled ������������������������ ( ������ false )
+ * @property {Boolean} isLink ��������������������������������������������� ( ������ true )
+ * @property {Boolean} clickable ������������������������ ( ������ true )
+ * @property {Boolean} border ��������������������� ( ������ true )
+ * @property {String} align ��������������������� ( ������ 'left' )
+ * @property {String | Number} name ���������������
+ * @property {String} icon ���������������������������������������������������������������
+ * @event {Function} change ������item������������������������������
+ * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+ */
+ export default {
+ name: "u-collapse-item",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ elId: uni.$u.guid(),
+ // uni.createAnimation���������������
+ animationData: {},
+ // ������������������
+ expanded: false,
+ // ������expanded������������������border���������������������������cell���������������������������������������������������������������
+ showBorder: false,
+ // ���������������������������������������������������������
+ animating: false,
+ // ���������u-collapse���������
+ parentData: {
+ accordion: false,
+ border: false
+ }
+ };
+ },
+ watch: {
+ expanded(n) {
+ clearTimeout(this.timer)
+ this.timer = null
+ // ������������expanded������������������������������������������cell���������������������������������
+ this.timer = setTimeout(() => {
+ this.showBorder = n
+ }, n ? 10 : 290)
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ // ���������������������������������������������������������������������������
+ init() {
+ // ���������������
+ this.updateParentData()
+ if (!this.parent) {
+ return uni.$u.error('u-collapse-item���������������u-collapse������������')
+ }
+ const {
+ value,
+ accordion,
+ children = []
+ } = this.parent
+
+ if (accordion) {
+ if (uni.$u.test.array(value)) {
+ return uni.$u.error('���������������������u-collapse���������value���������������������')
+ }
+ this.expanded = this.name == value
+ } else {
+ if (!uni.$u.test.array(value) && value !== null) {
+ return uni.$u.error('������������������������u-collapse���������value���������������������')
+ }
+ this.expanded = (value || []).some(item => item == this.name)
+ }
+ // ������������������������������������
+ this.$nextTick(function() {
+ this.setContentAnimate()
+ })
+ },
+ updateParentData() {
+ // ������������mixin���
+ this.getParentData('u-collapse')
+ },
+ async setContentAnimate() {
+ // ���������������������������������������������������������
+ // ���������������������������������������������������������������������������������������������������
+ const rect = await this.queryRect()
+ const height = this.expanded ? rect.height : 0
+ this.animating = true
+ // #ifdef APP-NVUE
+ const ref = this.$refs['animation'].ref
+ animation.transition(ref, {
+ styles: {
+ height: height + 'px'
+ },
+ duration: this.duration,
+ // ���������������true���������������������������������������������������������������������������������������������
+ needLayout: true,
+ timingFunction: 'ease-in-out',
+ }, () => {
+ this.animating = false
+ })
+ // #endif
+
+ // #ifndef APP-NVUE
+ const animation = uni.createAnimation({
+ timingFunction: 'ease-in-out',
+ });
+ animation
+ .height(height)
+ .step({
+ duration: this.duration,
+ })
+ .step()
+ // ������������������������������animationData���
+ this.animationData = animation.export()
+ // ������������������
+ uni.$u.sleep(this.duration).then(() => {
+ this.animating = false
+ })
+ // #endif
+ },
+ // ������collapsehead������
+ clickHandler() {
+ if (this.disabled && this.animating) return
+ // ���������������������������������
+ this.parent && this.parent.onChange(this)
+ },
+ // ������������������
+ queryRect() {
+ // #ifndef APP-NVUE
+ // $uGetRect���uView���������������������������������������������������������https://www.uviewui.com/js/getRect.html
+ // ���������������������this.$uGetRect���������������uni.$u.getRect������������������������������������
+ return new Promise(resolve => {
+ this.$uGetRect(`#${this.elId}`).then(size => {
+ resolve(size)
+ })
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ // nvue������������dom������������������������
+ // ������������promise���������������������������������������then������
+ return new Promise(resolve => {
+ dom.getComponentRect(this.$refs[this.elId], res => {
+ resolve(res.size)
+ })
+ })
+ // #endif
+ }
+ },
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-collapse-item {
+
+ &__content {
+ overflow: hidden;
+ height: 0;
+
+ &__text {
+ padding: 12px 15px;
+ color: $u-content-color;
+ font-size: 14px;
+ line-height: 18px;
+ }
+ }
+ }
+</style>
--
Gitblit v1.8.0