提交 6f6e3846 编写于 作者: DCloud_JSON's avatar DCloud_JSON

- 新增逻辑:调用uni-id-cf的logout接口后刷新设备信息中token的有效期 -...

- 新增逻辑:调用uni-id-cf的logout接口后刷新设备信息中token的有效期 - 修复某些情况下前端执行logout没调用uniID.logout的问题 - 修复某些情况下报push_clientid未定义的问题
上级 bc3dcf06
......@@ -2,7 +2,7 @@
<view class="content">
<!-- 顶部文字 -->
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules">
<uni-forms ref="form" :value="formData" >
<uni-forms-item name="phone">
<!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框,否则focus手机号码输入框 -->
<uni-easyinput :disabled="lock" :focus="formData.phone.length!=11" type="number" class="easyinput" :inputBorder="false"
......@@ -132,7 +132,8 @@
onReady() {
if (this.formData.phone) {
this.$refs.shortCode.start();
}
}
this.$refs.form.setRules(this.rules)
},
methods: {
/**
......
## 1.1.6(2021-09-22)
- 修复 在字节小程序上样式不生效的 bug
## 1.1.5(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.4(2021-07-29)
- 修复 去掉 nvue 不支持css 的 align-self 属性,nvue 下不暂支持 absolute 属性
## 1.1.3(2021-06-24)
- 优化 示例项目
## 1.1.1(2021-05-12)
- 新增 组件示例地址
## 1.1.0(2021-05-12)
- 新增 uni-badge 的 absolute 属性,支持定位
- 新增 uni-badge 的 offset 属性,支持定位偏移
- 新增 uni-badge 的 is-dot 属性,支持仅显示有一个小点
- 新增 uni-badge 的 max-num 属性,支持自定义封顶的数字值,超过 99 显示99+
- 优化 uni-badge 属性 custom-style, 支持以对象形式自定义样式
## 1.0.7(2021-05-07)
- 修复 uni-badge 在 App 端,数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时,宽度缩小的bug
- 新增 uni-badge 属性 custom-style, 支持自定义样式
## 1.0.6(2021-02-04)
- 调整为uni_modules目录规范
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
## 1.1.7(2021-11-08)
- 优化 升级ui
- 修改 size 属性默认值调整为 small
- 修改 type 属性,默认值调整为 error,info 替换 default
## 1.1.6(2021-09-22)
- 修复 在字节小程序上样式不生效的 bug
## 1.1.5(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.4(2021-07-29)
- 修复 去掉 nvue 不支持css 的 align-self 属性,nvue 下不暂支持 absolute 属性
## 1.1.3(2021-06-24)
- 优化 示例项目
## 1.1.1(2021-05-12)
- 新增 组件示例地址
## 1.1.0(2021-05-12)
- 新增 uni-badge 的 absolute 属性,支持定位
- 新增 uni-badge 的 offset 属性,支持定位偏移
- 新增 uni-badge 的 is-dot 属性,支持仅显示有一个小点
- 新增 uni-badge 的 max-num 属性,支持自定义封顶的数字值,超过 99 显示99+
- 优化 uni-badge 属性 custom-style, 支持以对象形式自定义样式
## 1.0.7(2021-05-07)
- 修复 uni-badge 在 App 端,数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时,宽度缩小的bug
- 新增 uni-badge 属性 custom-style, 支持自定义样式
## 1.0.6(2021-02-04)
- 调整为uni_modules目录规范
......@@ -2,8 +2,7 @@
<view class="uni-badge--x">
<slot />
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
class="uni-badge"
@click="onClick()">{{displayValue}}</text>
class="uni-badge" @click="onClick()">{{displayValue}}</text>
</view>
</template>
......@@ -13,26 +12,33 @@
* @description 数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
* @property {String} text 角标内容
* @property {String} type = [default|primary|success|warning|error] 颜色类型
* @value default 灰色
* @property {String} size = [normal|small] 角标内容
* @property {String} type = [info|primary|success|warning|error] 颜色类型
* @value info 灰色
* @value primary 蓝色
* @value success 绿色
* @value warning 黄色
* @value error 红色
* @property {String} size = [normal|small] Badge 大小
* @value normal 一般尺寸
* @value small 小尺寸
* @property {String} inverted = [true|false] 是否无需背景颜色
* @property {Number} maxNum 展示封顶的数字值,超过 99 显示 99+
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
* @value rightTop 右上
* @value rightBottom 右下
* @value leftTop 左上
* @value leftBottom 左下
* @property {Array[number]} offset 距定位角中心点的偏移量,只有存在 absolute 属性时有效,例如:[-10, -10] 表示向外偏移 10px,[10, 10] 表示向 absolute 指定的内偏移 10px
* @property {String} isDot = [true|false] 是否显示为一个小点
* @event {Function} click 点击 Badge 触发事件
* @example <uni-badge text="1"></uni-badge>
*/
export default {
name: 'UniBadge',
emits:['click'],
emits: ['click'],
props: {
type: {
type: String,
default: 'default'
default: 'error'
},
inverted: {
type: Boolean,
......@@ -62,7 +68,7 @@
},
size: {
type: String,
default: 'normal'
default: 'small'
},
customStyle: {
type: Object,
......@@ -136,10 +142,14 @@
height: '10px',
borderRadius: '10px'
}
},
displayValue() {
const { isDot, text, maxNum } = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
},
displayValue() {
const {
isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
}
},
methods: {
......@@ -151,9 +161,15 @@
</script>
<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #4cd964 !default;
$uni-warning: #f0ad4e !default;
$uni-error: #dd524d !default;
$uni-info: #909399 !default;
$bage-size: 12px;
$bage-small: scale(0.8);
$bage-height: 20px;
.uni-badge--x {
/* #ifdef APP-NVUE */
......@@ -169,6 +185,11 @@
position: absolute;
}
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
}
.uni-badge {
/* #ifndef APP-NVUE */
display: flex;
......@@ -177,77 +198,71 @@
/* #endif */
justify-content: center;
flex-direction: row;
height: $bage-height;
line-height: $bage-height;
color: $uni-text-color;
height: 20px;
line-height: 18px;
color: #fff;
border-radius: 100px;
background-color: $uni-bg-color-hover;
background-color: $uni-info;
background-color: transparent;
border: 1px solid #fff;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: $bage-size;
/* #ifdef H5 */
z-index: 999;
cursor: pointer;
/* #endif */
}
.uni-badge--inverted {
padding: 0 5px 0 0;
color: $uni-bg-color-hover;
}
&--info {
color: #fff;
background-color: $uni-info;
}
.uni-badge--default {
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
&--primary {
background-color: $uni-primary;
}
.uni-badge--default-inverted {
color: $uni-text-color-grey;
background-color: transparent;
}
&--success {
background-color: $uni-success;
}
.uni-badge--primary {
color: $uni-text-color-inverse;
background-color: $uni-color-primary;
}
&--warning {
background-color: $uni-warning;
}
.uni-badge--primary-inverted {
color: $uni-color-primary;
background-color: transparent;
}
&--error {
background-color: $uni-error;
}
.uni-badge--success {
color: $uni-text-color-inverse;
background-color: $uni-color-success;
}
&--inverted {
padding: 0 5px 0 0;
color: $uni-info;
}
.uni-badge--success-inverted {
color: $uni-color-success;
background-color: transparent;
}
&--info-inverted {
color: $uni-info;
background-color: transparent;
}
.uni-badge--warning {
color: $uni-text-color-inverse;
background-color: $uni-color-warning;
}
&--primary-inverted {
color: $uni-primary;
background-color: transparent;
}
.uni-badge--warning-inverted {
color: $uni-color-warning;
background-color: transparent;
}
&--success-inverted {
color: $uni-success;
background-color: transparent;
}
.uni-badge--error {
color: $uni-text-color-inverse;
background-color: $uni-color-error;
}
&--warning-inverted {
color: $uni-warning;
background-color: transparent;
}
.uni-badge--error-inverted {
color: $uni-color-error;
background-color: transparent;
}
&--error-inverted {
color: $uni-error;
background-color: transparent;
}
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
}
</style>
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.1.6",
"description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"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": [],
"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"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.2.0",
"description": "数字角标(徽章)组件,在元素周围展示消息提醒,一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"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": [],
"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"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Badge 数字角标
> **组件名:uni-badge**
> 代码块: `uBadge`
数字角标一般和其它控件(列表、9宫格等)配合使用,用于进行数量提示,默认为实心灰色背景,
### 安装方式
本组件符合[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-badge size="small" :text="100" absolute="rightBottom" type="primary">
<button type="default">右上</button>
</uni-badge>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
```
## API
### Badge Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |角标内容 |
|type |String |default|颜色类型,可选值:default(灰色)、primary(蓝色)、success(绿色)、warning(黄色)、error(红色)|
|size |String |normal |Badge 大小,可取值:normal、small |
|is-dot |Boolean|false |不展示数字,只有一个小点 |
|max-num |String/Numbuer|99 |展示封顶的数字值,超过 99 显示99+ |
|custom-style |Object | {} |自定义 Badge 样式, 样式对象语法 |
|inverted |Boolean|false |是否无需背景颜色,为 true 时,背景颜色将变为文字的字体颜色 |
|absolute (不支持 nvue) |String| rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上,可选值: rightTop(右上角)、rightBottom(右下角)、leftBottom(左下角) 、leftTop(左上角) |
|offset |Array[number]| [0, 0]|距定位角中心点的偏移量,[-10, -10] 表示向 absolute 指定的方向偏移 10px,[10, 10] 表示向 absolute 指定的反方向偏移 10px,只有存在 absolute 属性时有效,与absolute 的值一一对应(例如:值为rightTop, 对应 offset 为 [right, Top])|
### Badge Events
|事件名 |事件说明 |返回参数 |
|:-: |:-: |:-: |
|@click |点击 Badge 触发事件| - |
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
\ No newline at end of file
## 1.3.1(2021-12-20)
- 修复 在vue页面下略缩图显示不正常的bug
## 1.3.0(2021-11-19)
- 重构插槽的用法 ,header 替换为 title
- 新增 actions 插槽
- 新增 cover 封面图属性和插槽
- 新增 padding 内容默认内边距离
- 新增 margin 卡片默认外边距离
- 新增 spacing 卡片默认内边距
- 新增 shadow 卡片阴影属性
- 取消 mode 属性,可使用组合插槽代替
- 取消 note 属性 ,使用actions插槽代替
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
## 1.2.1(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8(2021-07-01)
- 优化 图文卡片无图片加载时,提供占位图标
- 新增 header 插槽,自定义卡片头部( 图文卡片 mode="style" 时,不支持)
- 修复 thumbnail 不存在仍然占位的 bug
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-04)
- 调整为uni_modules目录规范
## 1.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8(2021-07-01)
- 优化 图文卡片无图片加载时,提供占位图标
- 新增 header 插槽,自定义卡片头部( 图文卡片 mode="style" 时,不支持)
- 修复 thumbnail 不存在仍然占位的 bug
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-04)
- 调整为uni_modules目录规范
<template>
<view class="uni-card uni-border"
:class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true'}">
<!-- 基础 -->
<view v-if="mode === 'basic' && title" @click.stop="onClick" class="uni-card__head-padding">
<view class="uni-card__header uni-border-bottom">
<slot name="header">
<view v-if="thumbnail" class="uni-card__header-extra-img-view">
<image :src="thumbnail" class="uni-card__header-extra-img" />
</view>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</slot>
<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
<!-- 封面 -->
<slot name="cover">
<view v-if="cover" class="uni-card__cover">
<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
</view>
</view>
<!-- 标题 -->
<view v-if="mode === 'title'" @click.stop="onClick" class="uni-card__head-padding">
<view class="uni-card__title uni-border-bottom">
<slot name="header">
<view class="uni-card__title-box">
<view v-if="thumbnail" class="uni-card__title-header">
<image class="uni-card__title-header-image" :src="thumbnail" mode="scaleToFill" />
</view>
<view class="uni-card__title-content">
<text class="uni-card__title-content-title uni-ellipsis">{{ title }}</text>
<text class="uni-card__title-content-extra uni-ellipsis">{{ subTitle }}</text>
</view>
</slot>
<slot name="title">
<view v-if="title || extra" class="uni-card__header">
<!-- 卡片标题 -->
<view class="uni-card__header-box" @click="onClick('title')">
<view v-if="thumbnail" class="uni-card__header-avatar">
<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
</view>
<view v-if="extra">
<text class="uni-card__header-extra-text">{{ extra }}</text>
<view class="uni-card__header-content">
<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
<text v-if="title&&subTitle"
class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
</view>
</slot>
</view>
<view class="uni-card__header-extra" @click="onClick('extra')">
<text class="uni-card__header-extra-text">{{ extra }}</text>
</view>
</view>
</slot>
<!-- 卡片内容 -->
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
<slot></slot>
</view>
<!-- 图文 -->
<view v-if="mode === 'style'" class="uni-card__thumbnailimage" @click.stop="onClick">
<view class="uni-card__thumbnailimage-box">
<image v-if="thumbnail" class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
<uni-icons v-if="!thumbnail" type="image" size="30" color="#999" />
</view>
<view v-if="title" class="uni-card__thumbnailimage-title">
<text class="uni-card__thumbnailimage-title-text">{{ title }}</text>
</view>
</view>
<!-- 内容 -->
<view class="uni-card__content uni-card__content--pd" @click.stop="onClick">
<view v-if="mode === 'style' && extra" class=""><text class="uni-card__content-extra">{{ extra }}</text>
</view>
<slot />
</view>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer uni-border-top">
<slot name="footer">
<text class="uni-card__footer-text">{{ note }}</text>
</slot>
<view class="uni-card__actions" @click="onClick('actions')">
<slot name="actions"></slot>
</view>
</view>
</template>
......@@ -63,22 +41,22 @@
* @description 卡片视图组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
* @property {String} title 标题文字
* @property {String} subTitle 副标题(仅仅mode=title下生效)
* @property {String} subTitle 副标题
* @property {Number} padding 内容内边距
* @property {Number} margin 卡片外边距
* @property {Number} spacing 卡片内边距
* @property {String} extra 标题额外信息
* @property {String} note 底部信息
* @property {String} cover 封面图(本地路径需要引入)
* @property {String} thumbnail 标题左侧缩略图
* @property {String} mode = [basic|style|title] 卡片模式
* @value basic 基础卡片
* @value style 图文卡片
* @value title 标题卡片
* @property {Boolean} isFull = [true | false] 卡片内容是否通栏,为 true 时将去除padding值
* @property {Boolean} isShadow = [true | false] 卡片内容是否开启阴影
* @property {Boolean} is-full = [true | false] 卡片内容是否通栏,为 true 时将去除padding值
* @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
* @property {String} shadow 卡片阴影
* @property {Boolean} border 卡片边框
* @event {Function} click 点击 Card 触发事件
* @example <uni-card title="标题文字" thumbnail="xxx.jpg" extra="额外信息" note="Tips">内容主体,可自定义内容及样式</uni-card>
*/
export default {
name: 'UniCard',
emits:['click'],
emits: ['click'],
props: {
title: {
type: String,
......@@ -88,11 +66,23 @@
type: String,
default: ''
},
padding: {
type: String,
default: '10px'
},
margin: {
type: String,
default: '15px'
},
spacing: {
type: String,
default: '0 10px'
},
extra: {
type: String,
default: ''
},
note: {
cover: {
type: String,
default: ''
},
......@@ -100,10 +90,6 @@
type: String,
default: ''
},
mode: {
type: String,
default: 'basic'
},
isFull: {
// 内容区域是否通栏
type: Boolean,
......@@ -111,300 +97,157 @@
},
isShadow: {
// 是否开启阴影
type: [Boolean, String],
default: false
type: Boolean,
default: true
},
shadow: {
type: String,
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
},
border: {
type: Boolean,
default: true
}
},
methods: {
onClick() {
this.$emit('click')
onClick(type) {
this.$emit('click', type)
}
}
}
</script>
<style lang="scss" scoped>
.uni-card {
/* #ifndef APP-NVUE */
display: flex;
flex: 1;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
/* #endif */
margin: $uni-spacing-col-lg $uni-spacing-row-lg;
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
<style lang="scss">
$uni-border-3: #EBEEF5 !default;
$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-main-color: #3a3a3a !default;
$uni-base-color: #6a6a6a !default;
$uni-secondary-color: #909399 !default;
$uni-spacing-sm: 8px !default;
$uni-border-color:$uni-border-3;
$uni-shadow: $uni-shadow-base;
$uni-card-title: 15px;
$uni-cart-title-color:$uni-main-color;
$uni-card-subtitle: 12px;
$uni-cart-subtitle-color:$uni-secondary-color;
$uni-card-spacing: 10px;
$uni-card-content-color: $uni-base-color;
.uni-border {
position: relative;
/* #ifdef APP-NVUE */
border-color: $uni-border-color;
border-style: solid;
border-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border: 1px solid $uni-border-color;
border-radius: 10px;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-bottom {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-bottom:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-bottom: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-top: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-card__thumbnailimage {
position: relative;
/* #ifndef APP-NVUE */
// display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
height: 150px;
background-color: #F1F1F1;
overflow: hidden;
}
.uni-card__thumbnailimage-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
height: 150px;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
}
.uni-card__thumbnailimage-image {
flex: 1;
}
.uni-card__thumbnailimage-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
bottom: 0;
left: 0;
right: 0;
flex-direction: row;
padding: $uni-spacing-col-base $uni-spacing-col-lg;
background-color: $uni-bg-color-mask;
}
.uni-card__thumbnailimage-title-text {
flex: 1;
font-size: $uni-font-size-base;
color: #fff;
}
.uni-card__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 10px;
}
.uni-card__title-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__title-header {
width: 40px;
height: 40px;
.uni-card {
margin: $uni-card-spacing;
padding: 0 $uni-spacing-sm;
border-radius: 4px;
overflow: hidden;
border-radius: 5px;
padding-right: 10px;
}
.uni-card__title-header-image {
width: 40px;
height: 40px;
}
.uni-card__title-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
flex: 1;
height: 40px;
overflow: hidden;
}
.uni-card__title-content-title {
font-size: $uni-font-size-base;
line-height: 22px;
}
.uni-card__title-content-extra {
font-size: $uni-font-size-sm;
line-height: 27px;
color: $uni-text-color-grey;
}
.uni-card__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
padding: $uni-spacing-col-lg;
align-items: center;
}
.uni-card__header-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
margin-right: $uni-spacing-col-base;
justify-content: flex-start;
align-items: center;
}
.uni-card__header-title-text {
font-size: $uni-font-size-lg;
flex: 1;
color: #333;
}
.uni-card__cover {
position: relative;
margin-top: $uni-card-spacing;
flex-direction: row;
overflow: hidden;
border-radius: 4px;
.uni-card__cover-image {
flex: 1;
// width: 100%;
/* #ifndef APP-PLUS */
vertical-align: middle;
/* #endif */
}
}
.uni-card__header-extra-img {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
margin-right: $uni-spacing-col-base;
}
.uni-card__header {
display: flex;
border-bottom: 1px $uni-border-color solid;
flex-direction: row;
align-items: center;
padding: $uni-card-spacing;
overflow: hidden;
.uni-card__header-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__header-extra-text {
flex: 1;
margin-left: $uni-spacing-col-base;
font-size: $uni-font-size-sm;
text-align: right;
color: $uni-text-color-grey;
}
.uni-card__header-avatar {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 5px;
margin-right: $uni-card-spacing;
.uni-card__header-avatar-image {
flex: 1;
width: 40px;
height: 40px;
}
}
.uni-card__content {
color: $uni-text-color;
}
.uni-card__header-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1;
// height: 40px;
overflow: hidden;
.uni-card__header-content-title {
font-size: $uni-card-title;
color: $uni-cart-title-color;
// line-height: 22px;
}
.uni-card__header-content-subtitle {
font-size: $uni-card-subtitle;
margin-top: 5px;
color: $uni-cart-subtitle-color;
}
}
.uni-card__content--pd {
padding: $uni-spacing-col-lg;
}
.uni-card__header-extra {
line-height: 12px;
.uni-card__content-extra {
font-size: $uni-font-size-base;
padding-bottom: 10px;
color: $uni-text-color-grey;
}
.uni-card__header-extra-text {
font-size: 12px;
color: $uni-cart-subtitle-color;
}
}
}
.uni-card__footer {
justify-content: space-between;
padding: $uni-spacing-col-lg;
}
.uni-card__content {
padding: $uni-card-spacing;
font-size: 14px;
color: $uni-card-content-color;
line-height: 22px;
}
.uni-card__footer-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
.uni-card__actions {
font-size: 12px;
}
}
.uni-card--border {
border: 1px solid $uni-border-color;
}
.uni-card--shadow {
position: relative;
/* #ifndef APP-NVUE */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: $uni-shadow;
/* #endif */
}
.uni-card--full {
margin: 0;
border-left-width: 0;
border-left-width: 0;
border-radius: 0;
}
......@@ -424,8 +267,4 @@
lines: 1;
/* #endif */
}
.uni-card__head-padding {
// mar: 12px;
}
</style>
{
"id": "uni-card",
"displayName": "uni-card 卡片",
"version": "1.2.1",
"description": "Card 组件,提供常见的卡片样式。",
"keywords": [
"uni-ui",
"uniui",
"card",
"",
"卡片"
],
"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"
}
}
}
}
}
{
"id": "uni-card",
"displayName": "uni-card 卡片",
"version": "1.3.1",
"description": "Card 组件,提供常见的卡片样式。",
"keywords": [
"uni-ui",
"uniui",
"card",
"",
"卡片"
],
"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",
"uni-scss"
],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
......@@ -4,101 +4,9 @@
> **组件名:uni-card**
> 代码块: `uCard`
卡片视图组件。
### 安装方式
本组件符合[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)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 因为平台兼容问题 , 目前 APP-NVUE 安卓平台下不支持阴影
### 基本用法
``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-card title="标题文字" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="额外信息" note="Tips">
内容主体,可自定义内容及样式
</uni-card>
<!-- 内容通栏 -->
<uni-card is-full="true" title="DCloud" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="2018.12.12" >
<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" style="width: 100%;"></image>
</uni-card>
<!-- 图文卡片模式 -->
<uni-card
title="标题文字"
mode="style"
:is-shadow="true"
thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
extra="Dcloud 2019-05-20 12:32:19"
note="Tips"
>
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。
</uni-card>
<!-- 标题卡片模式 -->
<uni-card
title="Dcloud"
mode="title"
:is-shadow="true"
thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
extra="技术没有上限"
note="Tips"
>
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。
</uni-card>
<!-- 自定义底部按钮 -->
<uni-card title="Dcloud" note="true">
默认内容
<template v-slot:footer>
<view class="footer-box">
<view>喜欢</view>
<view>评论</view>
<view>分享</view>
</view>
</template>
</uni-card>
```
## API
### Card Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|title |String |- |标题文字 |
|extra |String |- |标题额外信息 |
|note |String |- |底部信息 |
|thumbnail |String |- |标题左侧缩略图,支持网络图片,本地图片,本图片需要传入一个绝对路径,如:`/static/xxx.png` |
|mode |String |basic |卡片模式 ,可选值, basic:基础卡片 ;style :图文卡片 ; title :标题卡片 |
|isFull |Boolean|false |卡片内容是否通栏,为true时将去除padding值 |
|isShadow |Boolean|false |卡片内容是否开启阴影 |
### Card Events
|事件称名 |事件说明 |返回参数 |
|:-: |:-: |:-: |
|@click |点击 Card 触发事件 |- |
### Card Slots
|插槽称名 |说明 |
|:-: |:-: |
|header |卡片头部插槽( 图文卡片 mode="style" 时,不支持)|
|footer |卡片底部插槽 |
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/card/card](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file
## 1.4.3(2022-01-25)
- 修复 初始化的时候 ,open 属性失效的bug
## 1.4.2(2022-01-21)
- 修复 微信小程序resize后组件收起的bug
## 1.4.1(2021-11-22)
- 修复 vue3中个别scss变量无法找到的问题
## 1.4.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
## 1.3.3(2021-08-17)
- 优化 show-arrow 属性默认为true
## 1.3.2(2021-08-17)
- 新增 show-arrow 属性,控制是否显示右侧箭头
## 1.3.1(2021-07-30)
- 优化 vue3下小程序事件警告的问题
## 1.3.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.2.2(2021-07-21)
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.1(2021-07-21)
- 优化 组件示例
## 1.2.0(2021-07-21)
- 新增 组件折叠动画
- 新增 value\v-model 属性 ,动态修改面板折叠状态
- 新增 title 插槽 ,可定义面板标题
- 新增 border 属性 ,显示隐藏面板内容分隔线
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
- 修复 resize 方法失效的Bug
- 修复 change 事件返回参数不正确的Bug
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
## 1.3.2(2021-08-17)
- 新增 show-arrow 属性,控制是否显示右侧箭头
## 1.3.1(2021-07-30)
- 优化 vue3下小程序事件警告的问题
## 1.3.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.2.2(2021-07-21)
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.1(2021-07-21)
- 优化 组件示例
## 1.2.0(2021-07-21)
- 新增 组件折叠动画
- 新增 value\v-model 属性 ,动态修改面板折叠状态
- 新增 title 插槽 ,可定义面板标题
- 新增 border 属性 ,显示隐藏面板内容分隔线
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
- 修复 resize 方法失效的Bug
- 修复 change 事件返回参数不正确的Bug
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
## 1.1.7(2021-05-12)
- 新增 组件示例地址
## 1.1.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.1.5(2021-02-05)
- 调整为uni_modules目录规范
\ No newline at end of file
......@@ -11,11 +11,10 @@
</view>
</slot>
</view>
<view
v-if="showArrow"
<view v-if="showArrow"
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
class="uni-collapse-item__title-arrow">
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="arrowdown" />
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
</view>
</view>
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
......@@ -96,7 +95,7 @@
type: Boolean,
default: true
},
showArrow:{
showArrow: {
type: Boolean,
default: true
}
......@@ -115,31 +114,32 @@
watch: {
open(val) {
this.isOpen = val
this.onClick(val,'init')
this.onClick(val, 'init')
}
},
updated(e) {
this.$nextTick(()=> {
this.$nextTick(() => {
this.init(true)
})
},
created(){
created() {
this.collapse = this.getCollapse()
this.oldHeight = 0
},
// #ifndef VUE3
// TODO vue2
destroyed() {
if (this.__isUnmounted) return
this.uninstall()
},
this.onClick(this.open, 'init')
},
// #ifndef VUE3
// TODO vue2
destroyed() {
if (this.__isUnmounted) return
this.uninstall()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.__isUnmounted = true
this.uninstall()
},
// #ifdef VUE3
// TODO vue3
unmounted() {
this.__isUnmounted = true
this.uninstall()
},
// #endif
mounted() {
if (!this.collapse) return
......@@ -181,14 +181,14 @@
})
}
},
onClick(isOpen,type) {
onClick(isOpen, type) {
if (this.disabled) return
this.isOpen = isOpen
if (this.isOpen && this.collapse) {
this.collapse.setAccordion(this)
}
if(type !== 'init'){
this.collapse.onChange(isOpen,this)
if (type !== 'init') {
this.collapse.onChange(isOpen, this)
}
},
getCollapseHeight(type, index = 0) {
......@@ -213,7 +213,7 @@
// #endif
this.isheight = true
if (type) return
this.onClick(this.open,'init')
this.onClick(this.isOpen, 'init')
})
.exec()
},
......@@ -228,7 +228,7 @@
// #endif
this.isheight = true
if (type) return
this.onClick(this.open,'init')
this.onClick(this.open, 'init')
}
})
},
......@@ -249,7 +249,7 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.uni-collapse-item {
/* #ifndef APP-NVUE */
box-sizing: border-box;
......@@ -296,7 +296,7 @@
/* #endif */
&.is-disabled {
.uni-collapse-item__title-text {
color: $uni-text-color-disable;
color: #999;
}
}
......@@ -311,14 +311,14 @@
}
&-img {
height: $uni-img-size-base;
width: $uni-img-size-base;
height: 22px;
width: 22px;
margin-right: 10px;
}
&-text {
flex: 1;
font-size: $uni-font-size-base;
font-size: 14px;
/* #ifndef APP-NVUE */
white-space: nowrap;
color: inherit;
......@@ -343,7 +343,7 @@
transform: rotate(0deg);
&-active {
transform: rotate(180deg);
transform: rotate(-180deg);
}
}
......
......@@ -51,7 +51,7 @@
}
},
watch: {
dataValue(val) {
dataValue(val) {
this.setOpen(val)
}
},
......@@ -59,14 +59,15 @@
this.childrens = []
this.names = []
},
mounted() {
this.setOpen(this.dataValue)
mounted() {
this.$nextTick(()=>{
this.setOpen(this.dataValue)
})
},
methods: {
setOpen(val) {
let str = typeof val === 'string'
let arr = Array.isArray(val)
let arr = Array.isArray(val)
this.childrens.forEach((vm, index) => {
if (str) {
if (val === vm.nameSync) {
......@@ -76,10 +77,10 @@
}
vm.isOpen = true
}
}
}
if (arr) {
val.forEach(v => {
if (v === vm.nameSync) {
if (v === vm.nameSync) {
if (this.accordion) {
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
return
......@@ -131,7 +132,7 @@
}
}
</script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-collapse {
/* #ifndef APP-NVUE */
width: 100%;
......@@ -141,6 +142,6 @@
flex: 1;
/* #endif */
flex-direction: column;
background-color: $uni-bg-color;
background-color: #fff;
}
</style>
</style>
{
"id": "uni-collapse",
"displayName": "uni-collapse 折叠面板",
"version": "1.3.3",
"description": "Collapse 组件,可以折叠 / 展开的内容区域。",
"keywords": [
"uni-ui",
"折叠",
"折叠面板",
"手风琴"
],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}
\ No newline at end of file
{
"id": "uni-collapse",
"displayName": "uni-collapse 折叠面板",
"version": "1.4.3",
"description": "Collapse 组件,可以折叠 / 展开的内容区域。",
"keywords": [
"uni-ui",
"折叠",
"折叠面板",
"手风琴"
],
"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-scss",
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
......@@ -8,269 +8,5 @@
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `App` 端默认关闭组件动画 ,因为 `height` 动画开销比较大,会导致页面卡顿,请酌情使用动画
> - 如在使用组件过程从发现卡顿严重,请尝试停用组件动画,问题原因如上
> - 在小程序端组件内容发生变化,需要手动调用 resize() 方法,手动更新几点信息,避免出现内容错位
> - 如需自定义组件默认边框颜色等,请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性
> - 折叠面板仅支持嵌套使用,请勿单独使用
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
本组件符合[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)
### 基本用法
使用 `title` 属性指定面板显示内容
使用 `open` 属性默认打开当前面板
使用 `disabled` 属性禁用面板
```html
<uni-collapse>
<uni-collapse-item title="默认开启" :open="true">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="折叠内容">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 手风琴效果
使用 `accordion` 属性,可以仅打开一个面板并关闭其他已经打开的面板,效果类似手风琴
设置 `accordion` 属性时,`open` 属性则生效在最后一个组件
```html
<uni-collapse accordion>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="手风琴效果">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item title="禁用状态" disabled>
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 动态设置折叠面板打开状态
使用 `v-model` 属性,动态设置面板的显示状态
使用 `name` 属性设置每个面板的唯一标识,如不设置使用默认索引,从字符串 `"0"` 开始记数
**注意**
- 如果 `accordion` 属性为 `true``v-model` 类型为 `String`
- 如果 `accordion` 属性为 `false``v-model` 类型为 `Array`
- 请注意 `v-model` 属性与 `open` 属性请勿一起使用 ,建议只使用 `v-model`
```html
<uni-collapse v-model="value">
<uni-collapse-item name="key1" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key2" title="默认开启">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item name="key3" title="默认不开启">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
```javascript
export default {
data(){
return {
value:['key1','key2'],
// 如果设置了 accordion 属性,则使用 string 类型
// value:'key1'
}
}
}
```
### 使用动画
使用 `show-animation` 属性开启或关闭面板折叠动画,默认动画开启
**注意**
- `App` 端默认关闭组件动画 ,因为 height 动画开销比较大,会导致页面卡顿,请酌情使用动画,如出现明显卡顿,尝试关闭动画
```html
<uni-collapse>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="true" title="开启动画">
<text>折叠内容</text>
</uni-collapse-item>
<uni-collapse-item :show-animation="false" title="不开启动画">
<text>折叠内容</text>
</uni-collapse-item>
</uni-collapse>
```
### 配置图片
使用 `thumb` 配置图片地址, 可在面板左侧显示一个图片
如需显示更多内容,如图标等,请见下方自定义插槽的说明
```html
<uni-collapse>
<uni-collapse-item title="标题文字"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
<view class="content">
<text class="text">折叠内容主体,可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
### 自定义插槽
如果需要自定义面板显示,可以使用 `title` 插槽达成完全自定义。下面是一个使用 `uni-list` 的列表示例,需要引入 `uni-list` 组件
```html
<uni-collapse>
<!-- 因为list默认带一条分隔线,所以使用 titleBorder="none" 取消面板的分隔线 -->
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<uni-list>
<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
</uni-list-item>
</uni-list>
</template>
<view class="content">
<text class="text">折叠内容主体,可自定义内容及样式</text>
</view>
</uni-collapse-item>
</uni-collapse>
```
**注意**
- 在折叠面板组件中使用list时,在 App-Nvue 下请勿单独使用 uni-list-item,会导致组件无法正常显示,其他平台不做限制
- 在默认插槽里使用 uni-list 组件与上方示例一样,直接写在默认插槽里即可
## API
### Collapse Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|value/v-model|String/Array|-|当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)|
|accordion|Boolean|false|是否开启手风琴效果 |
### Collapse Event
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|切换面板时触发 |切换面板时触发,如果是手风琴模式,返回类型为string,否则为array|
### Collapse Methods
|方法名称|说明|
|:-:|:-:|
|resize |更新当前列表高度|
> **提示**
> - resize 方法解决动态添加数据,带动画的折叠面板高度不更新的问题
> - 需要在数据渲染完毕之后使用 `resize` 方法。推荐在 `this.$nextTick()` 中使用
> - 当前只有小程序端需要调用此方法,H5\App 端已经做了处理,不需要手动更新高度
> ```html
> <view>
> <uni-collapse ref="collapse" v-model="value">
> <uni-collapse-item title="默认开启" >
> <view class="content">
> <text class="text">{{content}}</text>
> </view>
> </uni-collapse-item>
> <uni-collapse-item title="折叠内容">
> <view class="content">
> <text class="text">折叠内容主体,这是一段比较长内容。默认折叠主要内容,只显示当前项标题。点击标题展开,才能看到这段文字。再次点击标题,折叠内容。</text>
> </view>
> </uni-collapse-item>
> </uni-collapse>
> <button class="button" type="primary" @click="add">动态修改内容</button>
> </view>
> ```
> ```javascript
> export default {
> data() {
> return {
> value:['0'],
> content: '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。',
> }
> },
> methods: {
> add() {
> if (this.content.length > 35) {
> this.content = '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。'
> } else {
> this.content = '折叠内容主体,这是一段比较长内容。通过点击按钮修改后内容后,使组件高度发生变化,在次点击按钮恢复之前的内容和高度。'
> }
> // TODO 小程序中不支持自动更新 ,需要手动resize 更新组件高度
> // #ifdef MP
> this.$nextTick(() => {
> this.$refs.collapse.resize()
> })
> // #endif
> }
> }
> }
> ```
### CollapseItem Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|title|String|-|标题文字|
|thumb|String|-|标题左侧缩略图|
|disabled|Boolean|false|是否禁用|
|open|Boolean|false|是否展开面板|
|show-animation|Boolean|false|开启动画|
|border|Boolean|true|折叠面板内容分隔线|
|title-border|String|auto|折叠面板标题分隔线可选值见下方 **TitleBorder Params**|
|show-arrow|Boolean|true|是否显示右侧箭头|
#### TitleBorder Params
|参数名|说明|
|:-:|:-:|
|auto|分隔线自动显示|
|none|不显示分隔线|
|show|一直显示分隔线|
### Collapse Slots
|插槽名|说明|
|:-:| :-:|
|default|默认插槽|
|title|面板标题插槽,如使用此插槽禁用样式效果将失效|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse](https://hellouniapp.dcloud.net.cn/pages/extUI/collapse/collapse)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 0.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.1(2021-11-23)
- 优化 label、label-width 属性
## 1.0.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
## 0.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.6(2021-05-12)
- 新增 组件示例地址
## 0.0.5(2021-04-21)
......
<template>
<view class="uni-combox">
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput"
@focus="onFocus" @blur="onBlur" />
<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
<view class="uni-combox__selector" v-if="showSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
<input class="uni-combox__input" type="text" :placeholder="placeholder"
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
@blur="onBlur" />
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
</uni-icons>
</view>
<view class="uni-combox__selector" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
@click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
</view>
</template>
......@@ -35,8 +39,12 @@
*/
export default {
name: 'uniCombox',
emits:['input','update:modelValue'],
emits: ['input', 'update:modelValue'],
props: {
border: {
type: Boolean,
default: true
},
label: {
type: String,
default: ''
......@@ -81,11 +89,9 @@
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return {}
}
return {
width: this.labelWidth
return ""
}
return `width: ${this.labelWidth}`
},
filterCandidates() {
return this.candidates.filter((item) => {
......@@ -144,10 +150,15 @@
<style lang="scss" scoped>
.uni-combox {
font-size: 14px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 6px 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
height: 40px;
// height: 40px;
flex-direction: row;
align-items: center;
// border-bottom: solid 1px #DDDDDD;
......@@ -172,13 +183,14 @@
.uni-combox__input {
flex: 1;
font-size: 16px;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-arrow {
padding: 10px;
.uni-combox__input-plac {
font-size: 14px;
color: #999;
}
.uni-combox__selector {
......@@ -186,13 +198,15 @@
box-sizing: border-box;
/* #endif */
position: absolute;
top: 42px;
top: calc(100% + 12px);
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
padding: 4px 0;
}
.uni-combox__selector-scroll {
......@@ -202,21 +216,6 @@
/* #endif */
}
.uni-combox__selector::before {
/* #ifndef APP-NVUE */
content: '';
/* #endif */
position: absolute;
width: 0;
height: 0;
border-bottom: solid 6px #FFFFFF;
border-right: solid 6px transparent;
border-left: solid 6px transparent;
left: 50%;
top: -6px;
margin-left: -6px;
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifndef APP-NVUE */
......@@ -226,8 +225,12 @@
line-height: 36px;
font-size: 14px;
text-align: center;
border-bottom: solid 1px #DDDDDD;
margin: 0px 10px;
// border-bottom: solid 1px #DDDDDD;
padding: 0px 10px;
}
.uni-combox__selector-item:hover {
background-color: #f9f9f9;
}
.uni-combox__selector-empty:last-child,
......@@ -236,4 +239,37 @@
border-bottom: none;
/* #endif */
}
// picker 弹出层通用的指示小三角
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-combox__no-border {
border: none;
}
</style>
{
"id": "uni-combox",
"displayName": "uni-combox 组合框",
"version": "0.1.0",
"version": "1.0.1",
"description": "可以选择也可以输入的表单项 ",
"keywords": [
"uni-ui",
......@@ -42,6 +42,7 @@
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
......@@ -78,6 +79,10 @@
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
......
## Combox 组合框
> **组件名:uni-combox**
> 代码块: `uCombox`
组合框组件。
### 平台兼容性说明
**暂不支持nvue**
### 安装方式
本组件符合[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-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
```
## API
### Combox Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|label |String |- |标签文字 |
|value |String |- |combox的值 |
|labelWidth |String |auto |标签宽度,有单位字符串,如:'100px' |
|placeholder|String |- |输入框占位符 |
|candidates |Array/String |[] |候选字段 |
|emptyTips |String |无匹配项 |无匹配项时的提示语 |
### Combox Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@input |combox输入事件 |返回combox值|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox](https://hellouniapp.dcloud.net.cn/pages/extUI/combox/combox)
\ No newline at end of file
## Combox 组合框
> **组件名:uni-combox**
> 代码块: `uCombox`
组合框组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.2.2(2022-01-19)
- 修复 在微信小程序中样式不生效的bug
## 1.2.1(2022-01-18)
- 新增 update 方法 ,在动态更新时间后,刷新组件
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
## 1.1.3(2021-10-18)
- 重构
- 新增 font-size 支持自定义字体大小
## 1.1.2(2021-08-24)
- 新增 支持国际化
## 1.1.1(2021-07-30)
......
<template>
<view class="uni-countdown">
<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
class="uni-countdown__number">{{ d }}</text>
<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">{{dayText}}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
class="uni-countdown__number">{{ h }}</text>
<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
class="uni-countdown__number">{{ i }}</text>
<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
class="uni-countdown__number">{{ s }}</text>
<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">{{secondText}}</text>
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
<text :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
<text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
</view>
</template>
<script>
import {
initVueI18n
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
const {
t
} = initVueI18n(messages)
/**
* Countdown 倒计时
* @description 倒计时组件
......@@ -32,14 +30,14 @@
* @property {Number} second 秒
* @property {Number} timestamp 时间戳
* @property {Boolean} showDay = [true|false] 是否显示天数
* @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
* @property {String} splitorColor 分割符号颜色
* @event {Function} timeup 倒计时时间到触发事件
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
*/
export default {
name: 'UniCountdown',
emits:['timeup'],
emits: ['timeup'],
props: {
showDay: {
type: Boolean,
......@@ -55,19 +53,19 @@
},
backgroundColor: {
type: String,
default: '#FFFFFF'
},
borderColor: {
type: String,
default: '#000000'
default: ''
},
color: {
type: String,
default: '#000000'
default: '#333'
},
fontSize: {
type: Number,
default: 14
},
splitorColor: {
type: String,
default: '#000000'
default: '#333'
},
day: {
type: Number,
......@@ -115,15 +113,38 @@
secondText(val) {
return t("uni-countdown.s")
},
timeStyle() {
const {
color,
backgroundColor,
fontSize
} = this
return {
color,
backgroundColor,
fontSize: `${fontSize}px`,
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
lineHeight: `${fontSize * 20 / 14}px`,
borderRadius: `${fontSize * 3 / 14}px`,
}
},
splitorStyle() {
const { splitorColor, fontSize, backgroundColor } = this
return {
color: splitorColor,
fontSize: `${fontSize * 12 / 14}px`,
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
}
}
},
watch: {
day(val) {
this.changeFlag()
},
hour(val) {
hour(val) {
this.changeFlag()
},
minute(val) {
minute(val) {
this.changeFlag()
},
second(val) {
......@@ -193,13 +214,15 @@
this.d = day
this.h = hour
this.i = minute
this.s = second
this.s = second
},
startData() {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
if (this.seconds <= 0) {
if (this.seconds <= 0) {
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
this.countDown()
return
}
}
clearInterval(this.timer)
this.countDown()
this.timer = setInterval(() => {
......@@ -210,8 +233,11 @@
}
this.countDown()
}, 1000)
},
update(){
this.startData();
},
changeFlag() {
changeFlag() {
if (!this.syncFlag) {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
this.startData();
......@@ -222,39 +248,24 @@
}
</script>
<style lang="scss" scoped>
$countdown-height: 48rpx;
$countdown-width: 52rpx;
$font-size: 14px;
.uni-countdown {
/* #ifndef APP-NVUE */
.uni-countdown {
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-start;
padding: 2rpx 0;
}
align-items: center;
.uni-countdown__splitor {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
line-height: $countdown-height;
padding: 5rpx;
font-size: $uni-font-size-sm;
}
&__splitor {
margin: 0 2px;
font-size: $font-size;
color: #333;
}
.uni-countdown__number {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: $countdown-width;
height: $countdown-height;
line-height: $countdown-height;
margin: 5rpx;
text-align: center;
font-size: $uni-font-size-sm;
&__number {
border-radius: 3px;
text-align: center;
font-size: $font-size;
}
}
</style>
</style>
{
"id": "uni-countdown",
"displayName": "uni-countdown 倒计时",
"version": "1.1.2",
"version": "1.2.2",
"description": "CountDown 倒计时组件",
"keywords": [
"uni-ui",
......@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
......@@ -78,7 +78,7 @@
},
"Vue": {
"vue2": "y",
"vue3": "u"
"vue3": "y"
}
}
}
......
......@@ -4,54 +4,7 @@
> **组件名:uni-countdown**
> 代码块: `uCountDown`
倒计时组件。
### 安装方式
本组件符合[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-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
<!-- 不显示天数 -->
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
<!-- 修改颜色 -->
<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
```
## API
### Countdown Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|backgroundColor |String |#FFFFFF|背景色 |
|color |String |#000000|文字颜色 |
|splitorColor |String |#000000|分割符号颜色 |
|day |Number |0 |天数 |
|hour |Number |0 |小时 |
|minute |Number |0 |分钟 |
|second |Number |0 |秒 |
|showDay |Boolean|true |是否显示天数 |
|showColon |Boolean|true |是否以冒号为分隔符 |
|start |Boolean|true |是否初始化组件后就开始倒计时|
### Countdown Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@timeup|倒计时时间到触发事件 |- |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown](https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 1.0.1(2022-02-07)
- 修复 multiple 为 true 时,v-model 的值为 null 报错的 bug
## 1.0.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
## 0.2.5(2021-08-23)
- 修复 在uni-forms中 modelValue 中不存在当前字段,当前字段必填写也不参与校验的问题
## 0.2.4(2021-08-17)
- 修复 单选 list 模式下 ,icon 为 left 时,选中图标不显示的问题
## 0.2.3(2021-08-11)
- 修复 在 uni-forms 中重置表单,错误信息无法清除的问题
## 0.2.2(2021-07-30)
- 优化 在uni-forms组件,与label不对齐的问题
## 0.2.1(2021-07-27)
- 修复 单选默认值为0不能选中的Bug
## 0.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.11(2021-07-06)
- 优化 删除无用日志
## 0.1.10(2021-07-05)
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9(2021-07-05)
- 修复 nvue 黑框样式问题
## 0.1.8(2021-06-28)
- 修复 selectedTextColor 属性不生效的Bug
## 0.1.7(2021-06-02)
- 新增 map 属性,可以方便映射text/value属性
## 0.1.6(2021-05-26)
- 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5(2021-05-12)
- 新增 组件示例地址
## 0.1.4(2021-04-09)
- 修复 nvue 下无法选中的问题
## 0.1.3(2021-03-22)
- 新增 disabled属性
## 0.1.2(2021-02-24)
- 优化 默认颜色显示
## 0.1.1(2021-02-24)
- 新增 支持nvue
## 0.1.0(2021-02-18)
- “暂无数据”显示居中
## 0.2.3(2021-08-11)
- 修复 在 uni-forms 中重置表单,错误信息无法清除的问题
## 0.2.2(2021-07-30)
- 优化 在uni-forms组件,与label不对齐的问题
## 0.2.1(2021-07-27)
- 修复 单选默认值为0不能选中的Bug
## 0.2.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.11(2021-07-06)
- 优化 删除无用日志
## 0.1.10(2021-07-05)
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9(2021-07-05)
- 修复 nvue 黑框样式问题
## 0.1.8(2021-06-28)
- 修复 selectedTextColor 属性不生效的Bug
## 0.1.7(2021-06-02)
- 新增 map 属性,可以方便映射text/value属性
## 0.1.6(2021-05-26)
- 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5(2021-05-12)
- 新增 组件示例地址
## 0.1.4(2021-04-09)
- 修复 nvue 下无法选中的问题
## 0.1.3(2021-03-22)
- 新增 disabled属性
## 0.1.2(2021-02-24)
- 优化 默认颜色显示
## 0.1.1(2021-02-24)
- 新增 支持nvue
## 0.1.0(2021-02-18)
- “暂无数据”显示居中
......@@ -65,15 +65,9 @@
* @event {Function} change 选中发生变化触发
*/
// import clientdb from './clientdb.js'
export default {
name: 'uniDataChecklist',
// mixins: [clientdb],
mixins: [uniCloud.mixinDatacom || {}],
// model: {
// prop: 'modelValue',
// event: 'update:modelValue'
// },
emits:['input','update:modelValue','change'],
props: {
mode: {
......@@ -185,8 +179,8 @@
},
isLocal:true,
styles: {
selectedColor: '#007aff',
selectedTextColor: '#333',
selectedColor: '#2979ff',
selectedTextColor: '#666',
},
isTop:0
};
......@@ -381,7 +375,7 @@
selectedArr.push(item[this.map.value])
}
})
return this.dataValue.length > 0 ? this.dataValue : selectedArr
return this.dataValue && this.dataValue.length > 0 ? this.dataValue : selectedArr
},
/**
......@@ -389,7 +383,7 @@
*/
setStyleBackgroud(item) {
let styles = {}
let selectedColor = this.selectedColor?this.selectedColor:'#007aff'
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode !== 'list') {
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
}
......@@ -405,7 +399,7 @@
setStyleIcon(item) {
let styles = {}
let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#007aff'
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
styles['background-color'] = item.selected?selectedColor:'#fff'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
......@@ -422,11 +416,11 @@
setStyleIconText(item) {
let styles = {}
let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#007aff'
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode === 'tag') {
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#333'
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
} else {
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#333'
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
}
if(!item.selected && item.disabled){
styles.color = '#999'
......@@ -454,7 +448,7 @@
</script>
<style lang="scss">
$checked-color: #007aff;
$checked-color: #2979ff;
$border-color: #DCDFE6;
$disable:0.4;
......@@ -477,7 +471,7 @@
.uni-data-checklist {
position: relative;
z-index: 0;
flex: 1;
// 多选样式
.checklist-group {
@include flex;
......@@ -510,7 +504,7 @@
justify-content: space-between;
.checklist-text {
font-size: 14px;
color: #333;
color: #666;
margin-left: 5px;
line-height: 14px;
}
......@@ -541,7 +535,7 @@
width: 16px;
height: 16px;
border: 1px solid $border-color;
border-radius: 2px;
border-radius: 4px;
background-color: #fff;
z-index: 1;
.checkbox__inner-icon {
......@@ -657,7 +651,7 @@
// 按钮样式
&.is--button {
margin-right: 10px;
padding: 5px 15px;
padding: 5px 10px;
border: 1px $border-color solid;
border-radius: 3px;
transition: border-color 0.2s;
......@@ -729,7 +723,7 @@
.checklist-text {
margin: 0;
color: #333;
color: #666;
}
// 禁用
......
{
"id": "uni-data-checkbox",
"displayName": "uni-data-checkbox 数据选择器",
"version": "0.2.5",
"description": "通过数据驱动的单选框和复选框",
"keywords": [
"uni-ui",
"checkbox",
"单选",
"多选",
"单选多选"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.1"
},
"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-load-more"],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}
{
"id": "uni-data-checkbox",
"displayName": "uni-data-checkbox 数据选择器",
"version": "1.0.1",
"description": "通过数据驱动的单选框和复选框",
"keywords": [
"uni-ui",
"checkbox",
"单选",
"多选",
"单选多选"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.1"
},
"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-load-more","uni-scss"],
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
......@@ -14,286 +14,5 @@
在uniCloud开发中,`DB Schema`中配置了enum枚举等类型后,在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中,会自动生成``uni-data-checkbox``组件并绑定好data
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 本组件为数据驱动,目的是快速投入使用,只可通过 style 覆盖有限样式,不支持自定义更多样式
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如组件显示有问题 ,请升级 `HBuilderX` 为 `v3.1.0` 以上
### 安装方式
本组件符合[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)
### 基本用法
设置 `localdata` 属性后,组件会通过数据渲染出对应的内容,默认显示的是单选框
需要注意 `:multiple="false"` 时(单选) , `value/v-model` 的值是 `String|Number` 类型
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 多选框
设置 `multiple` 属性,组件显示为多选框
需要注意 `:multiple="true"` 时(多选) , `value/v-model` 的值是 `Array` 类型
```html
<template>
<view>
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置最大最小值
设置 `:multiple="true"` 时(多选) ,可以设置 `min``max` 属性
如果选中个数小于 `min` 属性设置的值,那么选中内容将不可取消,只有当选中个数大于等于 `min`且小于 `max` 时,才可取消选中
如果选中个数大于等于 `max` 属性设置的值,那么其他未选中内容将不可选
```html
<template>
<view>
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 设置禁用
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{
"value": 0,
"text": "篮球"
},
{
"value": 1,
"text": "足球",
// 禁用当前项
"disable":true
},
{
"value": 2,
"text": "游泳"
}
]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 自定义选中颜色
设置 `selectedColor` 属性,可以修改组件选中后的图标及边框颜色
设置 `selectedTextColor` 属性,可以修改组件选中后的文字颜色,如不填写默认同 `selectedColor` 属性 ,`mode` 属性为 `tag` 时,默认为白色
```html
<template>
<view>
<uni-data-checkbox selectedColor="red" selectedTextColor="red" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: [0,2],
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
### 更多模式
设置 `mode` 属性,可以设置更多显示样式,目前内置样式有四种 `default/list/button/tag`
如果需要禁用某项,需要在 `localdata` 属性的数据源中添加 `disable` 属性,而不是在组件中添加 `disable` 属性
```html
<template>
<view>
<!-- 默认 default -->
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示左侧图标 -->
<uni-data-checkbox mode="list" icon="left" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 列表 list ,显示右侧图标 -->
<uni-data-checkbox mode="list" icon="right" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 按钮 button -->
<uni-data-checkbox mode="button" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
<!-- 标签 tag -->
<uni-data-checkbox mode="tag" v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
</view>
</template>
```
```javascript
export default {
data() {
return {
value: 0,
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
}
},
methods: {
change(e){
console.log('e:',e);
}
}
}
```
## API
### DataCheckbox Props
| 属性名 | 类型 |可选值 | 默认值| 说明 |
| :-: | :-: |:-: |:-: | :-: |
|value/v-model|Array/String/Number|- |- |默认值,multiple=true时为 Array类型,否则为 String或Number类型 |
|localdata |Array |- |- |本地渲染数据, |
|mode | String |default/list/button/tag|default|显示模式 |
|multiple |Boolean |- |false |是否多选 |
|min |String/Number |- |- |最小选择个数 ,multiple为true时生效 |
|max |String/Number |- |- |最大选择个数 ,multiple为true时生效 |
|wrap |Boolean |- |- |是否换行显示 |
|icon |String |left/right |left |list 列表模式下 icon 显示的位置 |
|selectedColor|String |- |#007aff|选中颜色|
|selectedTextColor|String |- |#333 |选中文本颜色,如不填写则自动显示|
|emptyText |String |- |暂无数据 |没有数据时显示的文字 ,本地数据无效|
|map |Object |- |{text:'text',value:'value'} |字段映射,将text/value映射到数据中的其他字段|
#### Localdata Options
`localdata` 属性的格式为数组,数组内每项是对象,需要严格遵循如下格式
|属性名 | 说明 |
|:-: | :-: |
|text |显示文本 |
|value |选中后的值 |
|disable |是否禁用 |
#### Mode Options
|属性名 | 说明 |
|:-: | :-: |
|default |默认值,横向显示 |
|list |列表 |
|button |按钮 |
|tag |标签 |
### DataCheckbox Events
| 事件名 | 事件说明 | 返回参数|
| :-: | :-: | :-: |
| @change| 选中状态改变时触发事件 | - |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox](https://hellouniapp.dcloud.net.cn/pages/extUI/data-checkbox/data-checkbox)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 0.4.9(2021-10-28)
- 修复 VUE2 v-model 概率无效的bug
## 1.0.1(2021-11-23)
- 修复 由上个版本引发的map、v-model等属性不生效的bug
## 1.0.0(2021-11-19)
- 优化 组件 UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
## 0.4.9(2021-10-28)
- 修复 VUE2 v-model 概率无效的 bug
## 0.4.8(2021-10-27)
- 修复 v-model 概率无效的bug
- 修复 v-model 概率无效的 bug
## 0.4.7(2021-10-25)
- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
- 修复 树型 uniCloud 数据类型为 int 时报错的bug
- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
## 0.4.6(2021-10-19)
- 修复 非VUE3 v-model 为 0 时无法选中的 bug
- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
## 0.4.5(2021-09-26)
- 新增 清除已选项的功能(通过 clearIcon 属性配置是否显示按钮),同时提供 clear 方法以供调用,二者等效
- 修复 readonly 为 true 时报错的 bug
## 0.4.4(2021-09-26)
- 修复 上一版本造成的 map 属性失效的bug
- 修复 上一版本造成的 map 属性失效的 bug
- 新增 ellipsis 属性,支持配置 tab 选项长度过长时是否自动省略
## 0.4.3(2021-09-24)
- 修复 某些情况下级联未触发的 bug
## 0.4.2(2021-09-23)
- 新增 提供 show 和 hide 方法,开发者可以通过 ref 调用
- 新增 选项内容过长自动添加省略号
## 0.4.1(2021-09-15)
- 新增 map 属性 字段映射,将 text/value 映射到数据中的其他字段
## 0.4.0(2021-07-13)
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.3.5(2021-06-04)
- 修复 无法加载云端数据的问题
## 0.3.4(2021-05-28)
- 修复 v-model 无效问题
- 修复 loaddata 为空数据组时加载时间过长问题
- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
## 0.3.3(2021-05-12)
- 新增 组件示例地址
## 0.3.2(2021-04-22)
- 修复 非树形数据有 where 属性查询报错的问题
## 0.3.1(2021-04-15)
- 修复 本地数据概率无法回显时问题
## 0.3.0(2021-04-07)
- 新增 支持云端非树形表结构数据
- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
## 0.2.0(2021-03-15)
- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
## 0.1.9(2021-03-09)
- 修复 微信小程序某些情况下无法选择的问题
## 0.1.8(2021-02-05)
- 优化 部分样式在 nvue 上的兼容表现
## 0.1.7(2021-02-05)
- 调整为 uni_modules 目录规范
......@@ -28,6 +28,7 @@
</view>
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
<view class="uni-data-tree-dialog" v-if="isOpened">
<view class="uni-popper__arrow"></view>
<view class="dialog-caption">
<view class="title-area">
<text class="dialog-title">{{popupTitle}}</text>
......@@ -218,15 +219,15 @@
var isTree = dataList.findIndex((item) => {
return item.children
})
if (isTree > -1) {
if (isTree > -1) {
let inputValue
if (Array.isArray(value)) {
inputValue = value[value.length - 1]
if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value
}
} else {
inputValue = value
} else {
inputValue = value
}
this.inputSelected = this._findNodePath(inputValue, this.localdata)
return
......@@ -264,7 +265,7 @@
}
return result
},
_dispatchEvent(selected) {
_dispatchEvent(selected) {
let item = {}
if (selected.length) {
var value = new Array(selected.length)
......@@ -272,8 +273,8 @@
value[i] = selected[i].value
}
item = selected[selected.length - 1]
} else {
item.value = ''
} else {
item.value = ''
}
if (this.formItem) {
this.formItem.setValue(item.value)
......@@ -425,7 +426,7 @@
display: flex;
/* #endif */
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
/* border-bottom: 1px solid #f0f0f0; */
}
.title-area {
......@@ -440,7 +441,7 @@
}
.dialog-title {
font-weight: bold;
/* font-weight: bold; */
line-height: 44px;
}
......@@ -483,13 +484,15 @@
.uni-data-tree-dialog {
position: absolute;
top: 100%;
top: 55px;
height: auto;
min-height: 400px;
max-height: 50vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .3);
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: unset;
}
.dialog-caption {
......@@ -502,4 +505,33 @@
}
/* #endif */
</style>
/* picker 弹出层通用的指示小三角, todo:扩展至上下左右方向定位 */
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
</style>
......@@ -58,10 +58,10 @@
managedMode: {
type: Boolean,
default: false
},
ellipsis: {
type: Boolean,
default: true
},
ellipsis: {
type: Boolean,
default: true
}
},
data() {
......@@ -288,7 +288,7 @@
.item {
padding: 12px 15px;
border-bottom: 1px solid #f0f0f0;
/* border-bottom: 1px solid #f0f0f0; */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
......@@ -330,4 +330,4 @@
/* #endif */
transform: rotate(45deg);
}
</style>
</style>
{
"id": "uni-data-picker",
"displayName": "uni-data-picker 数据驱动的picker选择器",
"version": "0.4.9",
"version": "1.0.1",
"description": "单列、多列级联选择器,常用于省市区城市选择、公司部门选择、多级分类等场景",
"keywords": [
"uni-ui",
......@@ -43,8 +43,9 @@
},
"uni_modules": {
"dependencies": [
"uni-load-more",
"uni-icons"
"uni-load-more",
"uni-icons",
"uni-scss"
],
"encrypt": [],
"platforms": {
......
## DataPicker 级联选择
> **组件名:uni-data-picker**
> 代码块: `uDataPicker`
> 关联组件:`uni-data-pickerview`、`uni-load-more`。
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)
支持单列、和多列级联选择。列数没有限制,如果屏幕显示不全,顶部tab区域会左右滚动。
候选数据支持一次性加载完毕,也支持懒加载,比如示例图中,选择了“北京”后,动态加载北京的区县数据。
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
`<uni-data-picker>` 支持本地数据、云端静态数据(json),uniCloud云数据库数据。
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库,配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema),可在schema2code中自动生成前端页面,还支持服务器端校验。
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”,这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面,会自动生成地址管理的维护页面,自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
> - `<uni-data-picker>` 内部包含了弹出层组件 `<uni-data-pickerview>` 外层的布局可能会影响弹出层,[详情](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`componets`
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
## API
### DataPicker Props
|属性名 | 类型 | 可选值 | 默认值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|v-model |String/ Number | - | - |绑定数据|
|spaceInfo |Object | | |服务空间配置,[详情](https://uniapp.dcloud.net.cn/uniCloud/init)|
|localdata |Array | | |数据,[详情](https://gitee.com/dcloud/datacom)|
|preload |Boolean | true/false | false |预加载数据|
|readonly |Boolean | true/false | false |是否禁用|
|clear-icon |Boolean | true/false | true |是否显示清除按钮|
|ellipsis |Boolean | true/false | true |是否隐藏 tab 标签过长的文本|
|step-searh |Boolean | true/false | true |分步查询时,点击节点请求数据|
|step-search-url |String | | |分步查询时,动态加载云端数据url格式,`https://xxx.com/{parentValue}`(当前版本暂不支持,下版支持)|
|self-field |String | | |分步查询时当前字段名称|
|parent-field |String | | |分步查询时父字段名称|
|collection |String | | |表名。支持输入多个表名,用 `,` 分割|
|field |String | | |查询字段,多个字段用 `,` 分割|
|where |String | | |查询条件,内容较多,另见jql文档:[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
|orderby |String | | |排序字段及正序倒叙设置|
|popup-title |String | | |弹出层标题|
|map |Object | |{text:'text',value:'value'}|字段映射,将text/value映射到数据中的其他字段|
> ****
> `collection/where/orderby` 和 `<unicloud-db>` 的用法一致,[详情](https://uniapp.dcloud.net.cn/uniCloud/unicloud-db)
### DataPicker Events
|事件称名 | 类型 | 说明 |
|:-: | :-: | :-: |
|@change |EventHandle | 选择完成时触发 {detail: {value}} |
|@nodeclick |EventHandle | 节点被点击时触发 |
|@stepsearch |EventHandle | 动态加载节点数据前触发(当前版本暂不支持,下版支持) |
|@popupopened |EventHandle | 弹出层弹出时触发 |
|@popupclosed |EventHandle | 弹出层关闭时触发 |
### DataPicker Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|hide|关闭弹出层|-|
|clear|清除已选项|-|
**使用方法:**
```js
this.$refs.picker.show() // `picker` 为组件的 ref 名称
```
### DataPicker Slots
|名称|说明|
|:-:|:-:|
|default|覆盖显示框内容|
### 基本用法
#### 云端数据
> **注意事项**
> - 云端数据需要关联服务空间
> - 下面示例中使用的表 `opendb-city-china`(中国城市省市区数据,含港澳台), 在[uniCloud控制台](https://unicloud.dcloud.net.cn/)使用opendb创建,[详情](https://gitee.com/dcloud/opendb)
```html
<template>
<view>
<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
@change="onchange" @nodeclick="onnodeclick">
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {}
}
}
</script>
```
#### 本地数据
```html
<template>
<view>
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
items: [{
text: "一年级",
value: "1-0",
children: [
{
text: "1.1班",
value: "1-1"
},
{
text: "1.2班",
value: "1-2"
}
]
},
{
text: "二年级",
value: "2-0"
},
{
text: "三年级",
value: "3-0"
}]
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {
}
}
}
</script>
```
#### 自定义solt
```html
<uni-data-picker v-slot:default="{data, error, options}" popup-title="请选择所在地区">
<view v-if="error" class="error">
<text>{{error}}</text>
</view>
<view v-else-if="data.length" class="selected">
<view v-for="(item,index) in data" :key="index" class="selected-item">
<text>{{item.text}}</text>
</view>
</view>
<view v-else>
<text>请选择</text>
</view>
</uni-data-picker>
```
> **注意事项**
> `localdata` 和 `collection` 同时配置时,`localdata` 优先
#### 完整示例
```html
<template>
<view class="container">
<uni-data-picker @change="onchange" @nodeclick="onnodeclick" @stepsearch="onstepsearch" @popupopened="onpopupopened"
@popupclosed="onpopupclosed">
</uni-data-picker>
</view>
</template>
```
```js
<script>
export default {
data() {
return {
count: 1
}
},
methods: {
onchange(e) {
const value = e.detail.value
},
onnodeclick(node) {
// node 当前点击节点
},
onstepsearch(node, resolve) {
if (node.level === 0) {
return resolve([{
text: 'region1',
value: 'region1'
}, {
text: 'region2',
value: 'region1'
}]);
}
var hasChild;
if (node.text === 'region1') {
hasChild = true;
} else if (node.text === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
text: 'zone' + this.count++,
value: 'zone' + this.count++
}, {
text: 'zone' + this.count++,
value: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
},
onpopupopened() {},
onpopupclosed() {}
}
}
</script>
```
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/data-picker/data-picker)
\ No newline at end of file
## DataPicker 级联选择
> **组件名:uni-data-picker**
> 代码块: `uDataPicker`
> 关联组件:`uni-data-pickerview`、`uni-load-more`。
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)
支持单列、和多列级联选择。列数没有限制,如果屏幕显示不全,顶部tab区域会左右滚动。
候选数据支持一次性加载完毕,也支持懒加载,比如示例图中,选择了“北京”后,动态加载北京的区县数据。
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
`<uni-data-picker>` 支持本地数据、云端静态数据(json),uniCloud云数据库数据。
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库,配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema),可在schema2code中自动生成前端页面,还支持服务器端校验。
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”,这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面,会自动生成地址管理的维护页面,自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 0.0.5(2021-07-08)
- 调整 默认时间不再是当前时间,而是显示'-'字符
## 0.0.4(2021-05-12)
- 新增 组件示例地址
## 0.0.3(2021-02-04)
- 调整为uni_modules目录规范
- 修复 iOS 平台日期格式化出错的问题
## 1.0.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
## 0.0.5(2021-07-08)
- 调整 默认时间不再是当前时间,而是显示'-'字符
## 0.0.4(2021-05-12)
- 新增 组件示例地址
## 0.0.3(2021-02-04)
- 调整为uni_modules目录规范
- 修复 iOS 平台日期格式化出错的问题
<template>
<text>{{dateShow}}</text>
</template>
<script>
import {friendlyDate} from './date-format.js'
/**
* Dateformat 日期格式化
* @description 日期格式化组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
* @property {String} locale 格式化使用的语言
* @value zh 中文
* @value en 英文
* @property {Array} threshold 应用不同类型格式化的阈值
* @property {String} format 输出日期字符串时的格式
*/
export default {
name: 'uniDateformat',
props: {
date: {
type: [Object, String, Number],
default () {
return '-'
}
},
locale: {
type: String,
default: 'zh',
},
threshold: {
type: Array,
default () {
return [0, 0]
}
},
format: {
type: String,
default: 'yyyy/MM/dd hh:mm:ss'
},
// refreshRate使用不当可能导致性能问题,谨慎使用
refreshRate: {
type: [Number, String],
default: 0
}
},
data() {
return {
refreshMark: 0
}
},
computed: {
dateShow() {
this.refreshMark
return friendlyDate(this.date, {
locale: this.locale,
threshold: this.threshold,
format: this.format
})
}
},
watch: {
refreshRate: {
handler() {
this.setAutoRefresh()
},
immediate: true
}
},
methods: {
refresh() {
this.refreshMark++
},
setAutoRefresh() {
clearInterval(this.refreshInterval)
if (this.refreshRate) {
this.refreshInterval = setInterval(() => {
this.refresh()
}, parseInt(this.refreshRate))
}
}
}
}
</script>
<style>
</style>
<template>
<text>{{dateShow}}</text>
</template>
<script>
import {friendlyDate} from './date-format.js'
/**
* Dateformat 日期格式化
* @description 日期格式化组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
* @property {String} locale 格式化使用的语言
* @value zh 中文
* @value en 英文
* @property {Array} threshold 应用不同类型格式化的阈值
* @property {String} format 输出日期字符串时的格式
*/
export default {
name: 'uniDateformat',
props: {
date: {
type: [Object, String, Number],
default () {
return '-'
}
},
locale: {
type: String,
default: 'zh',
},
threshold: {
type: Array,
default () {
return [0, 0]
}
},
format: {
type: String,
default: 'yyyy/MM/dd hh:mm:ss'
},
// refreshRate使用不当可能导致性能问题,谨慎使用
refreshRate: {
type: [Number, String],
default: 0
}
},
data() {
return {
refreshMark: 0
}
},
computed: {
dateShow() {
this.refreshMark
return friendlyDate(this.date, {
locale: this.locale,
threshold: this.threshold,
format: this.format
})
}
},
watch: {
refreshRate: {
handler() {
this.setAutoRefresh()
},
immediate: true
}
},
methods: {
refresh() {
this.refreshMark++
},
setAutoRefresh() {
clearInterval(this.refreshInterval)
if (this.refreshRate) {
this.refreshInterval = setInterval(() => {
this.refresh()
}, parseInt(this.refreshRate))
}
}
}
}
</script>
<style>
</style>
{
"id": "uni-dateformat",
"displayName": "uni-dateformat 日期格式化",
"version": "0.0.5",
"version": "1.0.0",
"description": "日期格式化组件,可以将日期格式化为1分钟前、刚刚等形式",
"keywords": [
"uni-ui",
......@@ -42,7 +42,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
......@@ -77,6 +77,10 @@
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
......
### DateFormat 日期格式化
> **组件名:uni-dateformat**
> 代码块: `uDateformat`
日期格式化组件。
### 安装方式
本组件符合[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-dateformat date="2020/10/20 20:20:20"></uni-dateformat>
<!-- 不显示刚刚/马上/xx分钟前 -->
<uni-dateformat date="2020/10/20 20:20:20" :threshold="[0,0]"></uni-dateformat>
```
## API
### Dateformat Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|date |Object&#124;String&#124;Number |Date.now() |要格式化的日期对象/日期字符串/时间戳 |
|threshold |Array |[0, 0] |转化类型阈值 |
|format |String |'yyyy/MM/dd hh:mm:ss' |格式字符串 |
|locale |String |zh |格式化使用的语言,目前支持zh(中文)、en(英文) |
#### Threshold Options
格式化组件会对时间进行用户友好转化,threshold就是用来控制转化的时间阈值的。
`[60000, 3600000]`为例,将传入时间与当前时间差的绝对值记为delta(单位毫秒)
- `delta < 60000`时,时间会被转化为“刚刚|马上”
- `delta >= 60000 && delta < 3600000`时,时间会被转化为“xx分钟前|xx分钟后”,如果超过1小时会显示成“xx小时前|xx小时后”,以此类推
- `delta >= 3600000`时,会按照format参数传入的格式进行格式化
如果不想转化为“马上|刚刚”可以传入`:threshold = "[0,3600000]"`。默认值`[0,0]`既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”
#### Format Options
format接收字符以及含义如下:
|字符 |说明 |
|:-: |:-: |
|yyyy |四位年份 |
|yy |两位年份 |
|MM |两位月份(不足两位在前面补0) |
|M |月份,不自动补0 |
|dd |两位天(不足两位在前面补0) |
|d |天,不自动补0 |
|hh |两位小时(不足两位在前面补0) |
|h |小时,不自动补0 |
|mm |两位分钟(不足两位在前面补0) |
|m |分钟,不自动补0 |
|ss |两位秒(不足两位在前面补0) |
|s |秒,不自动补0 |
|SSS |三位毫秒(不足三位在前面补0) |
|S |毫秒,不自动补0 |
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat](https://hellouniapp.dcloud.net.cn/pages/extUI/dateformat/dateformat)
\ No newline at end of file
### DateFormat 日期格式化
> **组件名:uni-dateformat**
> 代码块: `uDateformat`
日期格式化组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 2.2.2(2021-12-10)
- 修复 clear-icon 属性在小程序平台不生效的 bug
## 2.2.1(2021-12-10)
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的 bug
## 2.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
## 2.1.5(2021-11-09)
- 新增 提供组件设计资源,组件样式调整
## 2.1.4(2021-09-10)
- 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时,赋值日期未高亮的 bug
......
......@@ -6,17 +6,17 @@
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
}">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text">{{weeks.date}}</text>
</view>
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
</view>
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
</view>
</template>
......@@ -70,18 +70,20 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin: 3px 0;
margin: 1px 0;
position: relative;
}
.uni-calendar-item__weeks-box-text {
font-size: 12px;
// font-size: $uni-font-size-base;
// color: $uni-text-color;
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: #455997;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
font-size: 12px;
color: #333;
}
.uni-calendar-item__weeks-box-item {
......@@ -107,38 +109,43 @@
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
background-color: #dd524d;
}
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
cursor: default;
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
}
.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text {
color: $uni-color-primary;
}
.uni-calendar-item--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
.uni-calendar-item--isDay {
position: absolute;
top: 10px;
right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: $uni-color-error;
color: #dd524d;
opacity: 0.8;
}
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-color-primary;
// border-radius: 50%;
background-color: #007aff;
border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
color: #fff;
opacity: 0.8;
border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
......@@ -146,36 +153,33 @@
}
.uni-calendar-item--multiple {
background-color: #f2f6fc;
background-color: #F6F7FC;
// color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked {
background-color: #409eff;
color: #fff !important;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff;;
color: #fff !important;
// border-radius: 50%;
background-color: #409eff;
border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
border: 3px solid #F6F7FC;
}
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
}
.uni-calendar-item--before-checked-x {
// border-top-left-radius: 25px;
// border-bottom-left-radius: 25px;
background-color: #f2f6fc;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
box-sizing: border-box;
background-color: #F6F7FC;
}
.uni-calendar-item--after-checked-x {
// border-top-right-radius: 25px;
// border-bottom-right-radius: 25px;
background-color: #f2f6fc;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #F6F7FC;
}
</style>
......@@ -3,26 +3,30 @@
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
@click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view class="uni-calendar__header">
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
<text
class="uni-calendar__header-text">{{ (nowDate.year||'') + '' + ( nowDate.month||'') +''}}</text>
</picker>
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view>
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
<view v-if="!insert" class="dialog-close" @click="clean">
<view class="dialog-close-plus" data-id="close"></view>
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
......@@ -66,22 +70,23 @@
<view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view>
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" :hide-second="hideSecond"
:disabled="!tempRange.before" class="time-picker-style">
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker>
</view>
<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons>
<view class="uni-date-changed--time-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false" :hide-second="hideSecond"
:disabled="!tempRange.after" class="time-picker-style">
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker>
</view>
</view>
<view v-if="!insert" class="uni-date-changed uni-calendar__header" @click="confirm">
<view class="uni-calendar__header-btn-box">
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<!-- <view class="uni-calendar__header-btn-box">
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
</view>
</view> -->
<view class="uni-datetime-picker--btn" @click="confirm">确认</view>
</view>
</view>
</view>
......@@ -187,10 +192,10 @@
checkHover: {
type: Boolean,
default: true
},
hideSecond: {
type: [Boolean],
default: false
},
hideSecond: {
type: [Boolean],
default: false
},
pleStatus: {
type: Object,
......@@ -228,25 +233,25 @@
date: {
immediate: true,
handler(newVal, oldVal) {
if (!this.range) {
if (!this.range) {
this.tempSingleDate = newVal
setTimeout(() => {
this.init(newVal)
}, 100)
}
}
},
defTime: {
immediate: true,
handler(newVal, oldVal) {
if (!this.range) {
this.time = newVal
} else {
// console.log('-----', newVal);
this.timeRange.startTime = newVal.start
this.timeRange.endTime = newVal.end
}
}
},
defTime: {
immediate: true,
handler(newVal, oldVal) {
if (!this.range) {
this.time = newVal
} else {
// console.log('-----', newVal);
this.timeRange.startTime = newVal.start
this.timeRange.endTime = newVal.end
}
}
},
startDate(val) {
this.cale.resetSatrtDate(val)
......@@ -361,7 +366,6 @@
})
// 选中某一天
// this.cale.setDate(this.date)
this.init(this.date)
// this.setDay
},
......@@ -411,8 +415,8 @@
} else {
this.time = ''
this.tempSingleDate = ''
}
this.calendar.fullDate = ''
}
this.calendar.fullDate = ''
this.setDate()
},
......@@ -425,7 +429,6 @@
* @param {Object} date
*/
init(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
......@@ -605,7 +608,7 @@
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
......@@ -639,6 +642,12 @@
background-color: #fff;
}
.uni-calendar__content-mobile {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
......@@ -648,9 +657,11 @@
justify-content: center;
align-items: center;
height: 50px;
// border-bottom-color: $uni-border-color;
// border-bottom-style: solid;
// border-bottom-width: 1px;
}
.uni-calendar__header-mobile {
padding: 10px;
padding-bottom: 0;
}
.uni-calendar--fixed-top {
......@@ -659,14 +670,13 @@
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-color: rgba(0, 0, 0, 0.4);
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
......@@ -680,21 +690,21 @@
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
color: #fff;
background-color: #f1f1f1;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
color: $uni-text-color;
font-size: 15px;
color: #666;
}
.uni-calendar__button-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
font-size: 14px;
color: #007aff;
/* #ifndef APP-NVUE */
letter-spacing: 3px;
......@@ -713,12 +723,12 @@
}
.uni-calendar__header-btn {
width: 8px;
height: 8px;
border-left-color: $uni-text-color-placeholder;
width: 9px;
height: 9px;
border-left-color: #808080;
border-left-style: solid;
border-left-width: 1px;
border-top-color: $uni-color-subtitle;
border-top-color: #555555;
border-top-style: solid;
border-top-width: 1px;
}
......@@ -760,10 +770,13 @@
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #B2B2B2;
}
.uni-calendar__box {
position: relative;
// padding: 0 10px;
padding-bottom: 7px;
}
.uni-calendar__box-bg {
......@@ -782,7 +795,7 @@
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
color: #999;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
......@@ -795,12 +808,17 @@
// line-height: 50px;
text-align: center;
color: #333;
border-top-color: $uni-border-color;
border-top-color: #DCDCDC;
;
border-top-style: solid;
border-top-width: 1px;
flex: 1;
}
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start {
/* #ifndef APP-NVUE */
display: flex;
......@@ -834,4 +852,47 @@
.mr-10 {
margin-right: 10px;
}
.dialog-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 0 25px;
margin-top: 10px;
}
.dialog-close-plus {
width: 16px;
height: 2px;
background-color: #737987;
border-radius: 2px;
transform: rotate(45deg);
}
.dialog-close-rotate {
position: absolute;
transform: rotate(-45deg);
}
.uni-datetime-picker--btn {
border-radius: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
color: #fff;
font-size: 16px;
letter-spacing: 5px;
}
/* #ifndef APP-NVUE */
.uni-datetime-picker--btn:active {
opacity: 0.7;
}
/* #endif */
</style>
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
......@@ -112,7 +110,6 @@ class Calendar {
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
......@@ -123,7 +120,7 @@ class Calendar {
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let isinfo = false
let nowDate = full.year + '-' + (full.month < 10 ?
......@@ -164,16 +161,15 @@ class Calendar {
if (multiplesStatus !== -1) {
checked = true
}
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay,
userChecked: false
......@@ -195,7 +191,6 @@ class Calendar {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
......@@ -243,7 +238,26 @@ class Calendar {
return false
}
}
/**
* 比较真实起始日期
*/
isLogicBefore(currentDay, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = this.dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDay)
}
isLogicAfter(currentDay, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = this.dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDay)
}
/**
* 获取日期范围内所有日期
......@@ -266,19 +280,6 @@ class Calendar {
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
......@@ -287,8 +288,7 @@ class Calendar {
let {
before,
after
} = this.multipleStatus
} = this.multipleStatus
if (!this.range) return
if (before && after) {
if (!this.lastHover) {
......@@ -301,9 +301,9 @@ class Calendar {
this.multipleStatus.fulldate = ''
this.lastHover = false
} else {
this.lastHover = false
if (!before) {
this.multipleStatus.before = fullDate
this.multipleStatus.before = fullDate
this.lastHover = false
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
......@@ -312,7 +312,8 @@ class Calendar {
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before);
}
}
this.lastHover = true
}
}
this._getWeek(fullDate)
......
{
"id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器",
"version": "2.1.4",
"version": "2.2.2",
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
"keywords": [
"uni-datetime-picker",
......@@ -42,6 +42,7 @@
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
......
## 1.1.1(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.2.1(2021-11-22)
- 修复 vue3中个别scss变量无法找到的问题
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
## 1.1.1(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.1.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7(2021-05-12)
......
......@@ -105,7 +105,8 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
// 抽屉宽度
$drawer-width: 220px;
......@@ -169,7 +170,7 @@
left: 0;
bottom: 0;
right: 0;
background-color: $uni-bg-color-mask;
background-color: $uni-mask;
transition: opacity 0.3s;
}
......
{
"id": "uni-drawer",
"displayName": "uni-drawer 抽屉",
"version": "1.1.1",
"version": "1.2.1",
"description": "抽屉式导航,用于展示侧滑菜单,侧滑导航。",
"keywords": [
"uni-ui",
......@@ -41,7 +41,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
......@@ -76,6 +76,10 @@
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
......
......@@ -4,83 +4,7 @@
> **组件名:uni-drawer**
> 代码块: `uDrawer`
抽屉侧滑菜单。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - `width` 属性仅在 `vue` 页面生效,`nvue` 页面因性能问题,不支持动态设置宽度,如需修改,请下载组件修改源码
### 安装方式
本组件符合[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
<template>
<view>
<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
<uni-drawer ref="showRight" mode="right" :mask-click="false">
<scroll-view style="height: 100%;" scroll-y="true">
<button @click="closeDrawer" type="primary">关闭Drawer</button>
<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
</scroll-view>
</uni-drawer>
</view>
</template>
<script>
export default {
methods: {
showDrawer() {
this.$refs.showRight.open();
},
closeDrawer() {
this.$refs.showRight.close();
}
}
}
</script
```
## API
### Drawer Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|mask |Boolean|true |是否显示遮罩 |
|maskClick |Boolean|true |点击遮罩是否可以关闭抽屉 |
|mode |String |left |Drawe滑出位置,可选值:left(从左侧滑出), right(从右侧滑出)|
|width |Number |220 |Drawe 宽度,仅vue页面设置生效 |
### Drawer Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|抽屉状态发生变化触发事件 |true:抽屉已经打开;false:抽屉已经关闭; |
### Drawer Methods
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|open |打开抽屉 |-|
|close |关闭抽屉 |-|
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer](https://hellouniapp.dcloud.net.cn/pages/extUI/drawer/drawer)
\ No newline at end of file
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册