From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
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 閫氳繃鎶樺彔闈㈡澘鏀剁撼鍐呭鍖哄煙锛堟惌閰島-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,
+ // 鐖剁粍浠秛-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蹇呴』瑕佹惌閰島-collapse缁勪欢浣跨敤')
+ }
+ const {
+ value,
+ accordion,
+ children = []
+ } = this.parent
+
+ if (accordion) {
+ if (uni.$u.test.array(value)) {
+ return uni.$u.error('鎵嬮鐞存ā寮忎笅锛寀-collapse缁勪欢鐨剉alue鍙傛暟涓嶈兘涓烘暟缁�')
+ }
+ this.expanded = this.name == value
+ } else {
+ if (!uni.$u.test.array(value) && value !== null) {
+ return uni.$u.error('闈炴墜椋庣惔妯″紡涓嬶紝u-collapse缁勪欢鐨剉alue鍙傛暟蹇呴』涓烘暟缁�')
+ }
+ 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,
+ // 蹇呴』璁剧疆涓簍rue锛屽惁鍒欎細鍒伴潰鏉挎敹璧锋垨灞曞紑鏃讹紝椤甸潰鍏朵粬鍏冪礌涓嶄細闅忎箣璋冩暣瀹冧滑鐨勫竷灞�
+ 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涓簎View鑷甫鐨勮妭鐐规煡璇㈢畝鍖栨柟娉曪紝璇﹁鏂囨。浠嬬粛锛歨ttps://www.uviewui.com/js/getRect.html
+ // 缁勪欢鍐呴儴涓�鑸敤this.$uGetRect锛屽澶栫殑涓簎ni.$u.getRect锛屼簩鑰呭姛鑳戒竴鑷达紝鍚嶇О涓嶅悓
+ return new Promise(resolve => {
+ this.$uGetRect(`#${this.elId}`).then(size => {
+ resolve(size)
+ })
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ // nvue涓嬶紝浣跨敤dom妯″潡鏌ヨ鍏冪礌楂樺害
+ // 杩斿洖涓�涓猵romise锛岃璋冪敤姝ゆ柟娉曠殑涓讳綋鑳戒娇鐢╰hen鍥炶皟
+ 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.9.3