From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-collapse-item/u-collapse-item.vue | 204 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 204 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-collapse-item/u-collapse-item.vue b/uview-ui/components/u-collapse-item/u-collapse-item.vue
new file mode 100644
index 0000000..3b66bfa
--- /dev/null
+++ b/uview-ui/components/u-collapse-item/u-collapse-item.vue
@@ -0,0 +1,204 @@
+<template>
+ <view class="u-collapse-item" :style="[itemStyle]">
+ <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
+ <block v-if="!$slots['title-all']">
+ <view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
+ isShow && activeStyle && !arrow ? activeStyle : '']">
+ {{ title }}
+ </view>
+ <slot v-else name="title" />
+ <view class="u-icon-wrap">
+ <u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
+ class="u-arrow-down-icon" name="arrow-down"></u-icon>
+ </view>
+ </block>
+ <slot v-else name="title-all" />
+ </view>
+ <view class="u-collapse-body" :style="[{
+ height: isShow ? height + 'px' : '0'
+ }]">
+ <view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
+ <slot></slot>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * collapseItem 鎵嬮鐞碔tem
+ * @description 閫氳繃鎶樺彔闈㈡澘鏀剁撼鍐呭鍖哄煙锛堟惌閰島-collapse浣跨敤锛�
+ * @tutorial https://www.uviewui.com/components/collapse.html
+ * @property {String} title 闈㈡澘鏍囬
+ * @property {String Number} index 涓昏鐢ㄤ簬浜嬩欢鐨勫洖璋冿紝鏍囪瘑閭ｄ釜Item琚偣鍑�
+ * @property {Boolean} disabled 闈㈡澘鏄惁鍙互鎵撳紑鎴栨敹璧凤紙榛樿false锛�
+ * @property {Boolean} open 璁剧疆鏌愪釜闈㈡澘鐨勫垵濮嬬姸鎬佹槸鍚︽墦寮�锛堥粯璁alse锛�
+ * @property {String Number} name 鍞竴鏍囪瘑绗︼紝濡備笉璁剧疆锛岄粯璁ょ敤褰撳墠collapse-item鐨勭储寮曞��
+ * @property {String} align 鏍囬鐨勫榻愭柟寮忥紙榛樿left锛�
+ * @property {Object} active-style 涓嶆樉绀虹澶存椂锛屽彲浠ユ坊鍔犲綋鍓嶉�夋嫨鐨刢ollapse-item娲诲姩鏍峰紡锛屽璞″舰寮�
+ * @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",
+ props: {
+ // 鏍囬
+ title: {
+ type: String,
+ default: ''
+ },
+ // 鏍囬鐨勫榻愭柟寮�
+ align: {
+ type: String,
+ default: 'left'
+ },
+ // 鏄惁鍙互鐐瑰嚮鏀惰捣
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // collapse鏄剧ず涓庡惁
+ open: {
+ type: Boolean,
+ default: false
+ },
+ // 鍞竴鏍囪瘑绗�
+ name: {
+ type: [Number, String],
+ default: ''
+ },
+ //娲诲姩鏍峰紡
+ activeStyle: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ // 鏍囪瘑褰撳墠涓虹鍑犱釜
+ index: {
+ type: [String, Number],
+ default: ''
+ }
+ },
+ data() {
+ return {
+ isShow: false,
+ elId: this.$u.guid(),
+ height: 0, // body鍐呭鐨勯珮搴�
+ headStyle: {}, // 澶撮儴鏍峰紡锛屽璞″舰寮�
+ bodyStyle: {}, // 涓讳綋閮ㄥ垎鏍峰紡
+ itemStyle: {}, // 姣忎釜item鐨勬暣浣撴牱寮�
+ arrowColor: '', // 绠ご鐨勯鑹�
+ hoverClass: '', // 澶撮儴鎸変笅鏃剁殑鏁堟灉鏍峰紡绫�
+ arrow: true, // 鏄惁鏄剧ず鍙充晶绠ご
+
+ };
+ },
+ watch: {
+ open(val) {
+ this.isShow = val;
+ }
+ },
+ created() {
+ this.parent = false;
+ // 鑾峰彇u-collapse鐨勪俊鎭紝鏀惧湪u-collapse鏄负浜嗘柟渚匡紝涓嶇敤姣忎釜u-collapse-item鍐欎竴閬�
+ this.isShow = this.open;
+ },
+ methods: {
+ // 寮傛鑾峰彇鍐呭锛屾垨鑰呭姩鎬佷慨鏀逛簡鍐呭鏃讹紝闇�瑕侀噸鏂板垵濮嬪寲
+ init() {
+ this.parent = this.$u.$parent.call(this, 'u-collapse');
+ if(this.parent) {
+ this.nameSync = this.name ? this.name : this.parent.childrens.length;
+ this.parent.childrens.push(this);
+ this.headStyle = this.parent.headStyle;
+ this.bodyStyle = this.parent.bodyStyle;
+ this.arrowColor = this.parent.arrowColor;
+ this.hoverClass = this.parent.hoverClass;
+ this.arrow = this.parent.arrow;
+ this.itemStyle = this.parent.itemStyle;
+ }
+ this.$nextTick(() => {
+ this.queryRect();
+ });
+ },
+ // 鐐瑰嚮collapsehead澶撮儴
+ headClick() {
+ if (this.disabled) return;
+ if (this.parent && this.parent.accordion == true) {
+ this.parent.childrens.map(val => {
+ // 鑷韩涓嶈缃负false锛屽洜涓哄悗闈㈡湁this.isShow = !this.isShow;澶勭悊浜�
+ if (this != val) {
+ val.isShow = false;
+ }
+ });
+ }
+
+ this.isShow = !this.isShow;
+ // 瑙﹀彂鏈粍浠剁殑浜嬩欢
+ this.$emit('change', {
+ index: this.index,
+ show: this.isShow
+ })
+ // 鍙湁鍦ㄦ墦寮�鏃舵墠鍙戝嚭浜嬩欢
+ if (this.isShow) this.parent && this.parent.onChange();
+ this.$forceUpdate();
+ },
+ // 鏌ヨ鍐呭楂樺害
+ queryRect() {
+ // $uGetRect涓簎View鑷甫鐨勮妭鐐规煡璇㈢畝鍖栨柟娉曪紝璇﹁鏂囨。浠嬬粛锛歨ttps://www.uviewui.com/js/getRect.html
+ // 缁勪欢鍐呴儴涓�鑸敤this.$uGetRect锛屽澶栫殑涓簍his.$u.getRect锛屼簩鑰呭姛鑳戒竴鑷达紝鍚嶇О涓嶅悓
+ this.$uGetRect('#' + this.elId).then(res => {
+ this.height = res.height;
+ })
+ }
+ },
+ mounted() {
+ this.init();
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-collapse-head {
+ position: relative;
+ @include vue-flex;
+ justify-content: space-between;
+ align-items: center;
+ color: $u-main-color;
+ font-size: 30rpx;
+ line-height: 1;
+ padding: 24rpx 0;
+ text-align: left;
+ }
+
+ .u-collapse-title {
+ flex: 1;
+ overflow: hidden;
+ }
+
+ .u-arrow-down-icon {
+ transition: all 0.3s;
+ margin-right: 20rpx;
+ margin-left: 14rpx;
+ }
+
+ .u-arrow-down-icon-active {
+ transform: rotate(180deg);
+ transform-origin: center center;
+ }
+
+ .u-collapse-body {
+ overflow: hidden;
+ transition: all 0.3s;
+ }
+
+ .u-collapse-content {
+ overflow: hidden;
+ font-size: 28rpx;
+ color: $u-tips-color;
+ text-align: left;
+ }
+</style>
--
Gitblit v1.9.3