zsc/model_example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
winter_born
2026-04-19 21:44:35 +08:00
commit 9960e025b3
759 changed files with 47395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
uni_modules/uni-collapse/changelog.md Normal file
View File

@@ -0,0 +1,6 @@
## 1.1.7（2021-05-12）
- 新增 组件示例地址
## 1.1.6（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.1.5（2021-02-05）
- 调整为uni_modules目录规范

220
uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
class="uni-collapse-cell">
<view :class="{ 'uni-collapse-cell--disabled': disabled}" class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<!-- #ifdef MP-ALIPAY -->
<view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow">
<uni-icons color="#bbb" size="20" type="arrowdown" />
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
<!-- #endif -->
</view>
<view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
<view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
<slot />
</view>
</view>
</view>
</template>
<script>
/**
* CollapseItem 折叠面板子组件
* @description 折叠面板子组件
* @property {String} title 标题文字
* @property {String} thumb 标题左侧缩略图
* @property {Boolean} disabled = [true|false] 是否展开面板
* @property {Boolean} showAnimation = [true|false] 开启动画
*/
export default {
name: 'UniCollapseItem',
props: {
title: {
// 列表标题
type: String,
default: ''
},
name: {
// 唯一标识符
type: [Number, String],
default: 0
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
showAnimation: {
// 是否显示动画
type: Boolean,
default: false
},
open: {
// 是否展开
type: Boolean,
default: false
},
thumb: {
// 缩略图
type: String,
default: ''
}
},
data() {
return {
isOpen: false
}
},
watch: {
open(val) {
this.isOpen = val
}
},
inject: ['collapse'],
created() {
this.isOpen = this.open
this.nameSync = this.name ? this.name : this.collapse.childrens.length
this.collapse.childrens.push(this)
if (String(this.collapse.accordion) === 'true') {
if (this.isOpen) {
let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
if (lastEl) {
this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
}
}
}
},
methods: {
onClick() {
if (this.disabled) {
return
}
if (String(this.collapse.accordion) === 'true') {
this.collapse.childrens.forEach(vm => {
if (vm === this) {
return
}
vm.isOpen = false
})
}
this.isOpen = !this.isOpen
this.collapse.onChange && this.collapse.onChange()
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse-cell {
flex-direction: column;
border-color: $uni-border-color;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.uni-collapse-cell--hover {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--open {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell--disabled {
background-color: $uni-bg-color-hover;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
// opacity: 0.3;
}
.uni-collapse-cell--hide {
height: 48px;
}
.uni-collapse-cell--animation {
// transition: transform 0.3s ease;
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.uni-collapse-cell__title {
padding: 12px 12px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
box-sizing: border-box;
/* #endif */
height: 48px;
line-height: 24px;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-collapse-cell__title:active {
background-color: $uni-bg-color-hover;
}
.uni-collapse-cell__title-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0deg);
transform-origin: center center;
}
.uni-collapse-cell__title-arrow-active {
transform: rotate(180deg);
}
.uni-collapse-cell__title-text {
flex: 1;
font-size: $uni-font-size-base;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
}
.uni-collapse-cell__content {
overflow: hidden;
}
.uni-collapse-cell__wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-collapse-cell__content--hide {
height: 0px;
line-height: 0px;
}
</style>

59
uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="uni-collapse">
<slot />
</view>
</template>
<script>
/**
* Collapse 折叠面板
* @description 展示可以折叠 / 展开的内容区域
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
* @event {Function} change 切换面板时触发，activeNames（Array）：展开状态的uniCollapseItem的 name 值
*/
export default {
name: 'UniCollapse',
props: {
accordion: {
// 是否开启手风琴效果
type: [Boolean, String],
default: false
}
},
data() {
return {}
},
provide() {
return {
collapse: this
}
},
created() {
this.childrens = []
},
methods: {
onChange() {
let activeItem = []
this.childrens.forEach((vm, index) => {
if (vm.isOpen) {
activeItem.push(vm.nameSync)
}
})
this.$emit('change', activeItem)
}
}
}
</script>
<style lang="scss" scoped>
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
}
</style>

86
uni_modules/uni-collapse/package.json Normal file
View File

@@ -0,0 +1,86 @@
{
"id": "uni-collapse",
"displayName": "uni-collapse 折叠面板",
"version": "1.1.7",
"description": "Collapse 组件，可以折叠 / 展开的内容区域。",
"keywords": [
"",
"uni-ui",
"uniui",
"collapse",
"折叠面板",
"手风琴"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

113
uni_modules/uni-collapse/readme.md Normal file
View File

@@ -0,0 +1,113 @@
## Collapse 折叠面板
> **组件名：uni-collapse**
> 代码块： `uCollapse`
> 关联组件：`uni-collapse-item`、`uni-icons`。
展示可以折叠 / 展开的内容区域。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中引用组件
```html
<!-- 一般用法 -->
<uni-collapse @change="change">
<uni-collapse-item title="标题文字">
<uni-list>
<uni-list-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"></uni-list-item>
<uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
</uni-list>
</uni-collapse-item>
<uni-collapse-item title="默认开启" open="true">
<view style="padding: 30rpx;"> 折叠内容主体，可自定义内容及样式 </view>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled="true">
<view style="padding: 30rpx;"> 禁用状态 </view>
</uni-collapse-item>
</uni-collapse>
<!-- 手风琴效果 -->
<uni-collapse accordion="true">
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字">
<view style="padding: 30rpx;">
手风琴效果
</view>
</uni-collapse-item>
</uni-collapse>
<!-- 带图标 -->
<uni-collapse>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体，可自定义内容及样式
</view>
</uni-collapse-item>
<uni-collapse-item title="标题文字" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view style="padding: 30rpx;">
折叠内容主体，可自定义内容及样式
</view>
</uni-collapse-item>
</uni-collapse>
```
## API
### Collapse Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|accordion |Boolean|false |是否开启手风琴效果 |
### Collapse Event
|事件称名 |说明 |返回值 |
|:-: |:-: :-: |
|@change |切换面板时触发 |activeNames（Array）：展开状态的uniCollapseItem的name值|
### Collapse Methods
|方法名称 |说明 |
|:-: |:-: |
|resize |更新当前列表高度，只有 `animation:true` 下生效|
> **提示**
> - resize 方法解决动态添加数据，带动画的折叠面板高度不更新的问题
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.nextTick()` 中使用
### CollapseItem Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|title |String |- |标题文字 |
|thumb |String |- |标题左侧缩略图 |
|disabled |Boolean|false |是否禁用 |
|open |Boolean|false |是否展开面板 |
|showAnimation |Boolean |false |开启动画 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)