Skip to content

U
uni-starter

梦想橡皮擦 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter
提交 6f6e3846 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

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

- 新增逻辑:调用uni-id-cf的logout接口后刷新设备信息中token的有效期 - 修复某些情况下前端执行logout没调用uniID.logout的问题 - 修复某些情况下报push_clientid未定义的问题
上级 bc3dcf06
展开全部 显示空白变更内容
内联 并排
Showing with 5956 addition and 9433 deletion
pages/ucenter/login-page/pwd-retrieve/pwd-retrieve.vue
浏览文件 @ 6f6e3846
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="content"> <view class="content">
<!-- 顶部文字 --> <!-- 顶部文字 -->
<!-- 登录框 (选择手机号所属国家和地区需要另行实现) --> <!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
<uni-forms ref="form" :value="formData" :rules="rules"> <uni-forms ref="form" :value="formData" >
<uni-forms-item name="phone"> <uni-forms-item name="phone">
<!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框，否则focus手机号码输入框 --> <!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框，否则focus手机号码输入框 -->
<uni-easyinput :disabled="lock" :focus="formData.phone.length!=11" type="number" class="easyinput" :inputBorder="false" <uni-easyinput :disabled="lock" :focus="formData.phone.length!=11" type="number" class="easyinput" :inputBorder="false"
...@@ -133,6 +133,7 @@ ...@@ -133,6 +133,7 @@
if (this.formData.phone) { if (this.formData.phone) {
this.$refs.shortCode.start(); this.$refs.shortCode.start();
} }
this.$refs.form.setRules(this.rules)
}, },
methods: { methods: {
/** /**
......
uni_modules/uni-badge/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 1.1.6（2021-09-22）
- 修复 在字节小程序上样式不生效的 bug - 修复 在字节小程序上样式不生效的 bug
## 1.1.5（2021-07-30） ## 1.1.5（2021-07-30）
......
uni_modules/uni-badge/components/uni-badge/uni-badge.vue
浏览文件 @ 6f6e3846
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<view class="uni-badge--x"> <view class="uni-badge--x">
<slot /> <slot />
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]" <text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
class="uni-badge" class="uni-badge" @click="onClick()">{{displayValue}}</text>
@click="onClick()">{{displayValue}}</text>
</view> </view>
</template> </template>
...@@ -13,26 +12,33 @@ ...@@ -13,26 +12,33 @@
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
* @tutorial https://ext.dcloud.net.cn/plugin?id=21 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
* @property {String} text 角标内容 * @property {String} text 角标内容
* @property {String} type = [default|primary|success|warning|error] 颜色类型 * @property {String} size = [normal|small] 角标内容
* @value default 灰色 * @property {String} type = [info|primary|success|warning|error] 颜色类型
* @value info 灰色
* @value primary 蓝色 * @value primary 蓝色
* @value success 绿色 * @value success 绿色
* @value warning 黄色 * @value warning 黄色
* @value error 红色 * @value error 红色
* @property {String} size = [normal|small] Badge 大小
* @value normal 一般尺寸
* @value small 小尺寸
* @property {String} inverted = [true|false] 是否无需背景颜色 * @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 触发事件 * @event {Function} click 点击 Badge 触发事件
* @example <uni-badge text="1"></uni-badge> * @example <uni-badge text="1"></uni-badge>
*/ */
export default { export default {
name: 'UniBadge', name: 'UniBadge',
emits:['click'], emits: ['click'],
props: { props: {
type: { type: {
type: String, type: String,
default: 'default' default: 'error'
}, },
inverted: { inverted: {
type: Boolean, type: Boolean,
...@@ -62,7 +68,7 @@ ...@@ -62,7 +68,7 @@
}, },
size: { size: {
type: String, type: String,
default: 'normal' default: 'small'
}, },
customStyle: { customStyle: {
type: Object, type: Object,
...@@ -138,7 +144,11 @@ ...@@ -138,7 +144,11 @@
} }
}, },
displayValue() { displayValue() {
const { isDot, text, maxNum } = this const {
isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text) return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
} }
}, },
...@@ -151,9 +161,15 @@ ...@@ -151,9 +161,15 @@
</script> </script>
<style lang="scss" scoped> <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-size: 12px;
$bage-small: scale(0.8); $bage-small: scale(0.8);
$bage-height: 20px;
.uni-badge--x { .uni-badge--x {
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
...@@ -169,6 +185,11 @@ ...@@ -169,6 +185,11 @@
position: absolute; position: absolute;
} }
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
}
.uni-badge { .uni-badge {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -177,77 +198,71 @@ ...@@ -177,77 +198,71 @@
/* #endif */ /* #endif */
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
height: $bage-height; height: 20px;
line-height: $bage-height; line-height: 18px;
color: $uni-text-color; color: #fff;
border-radius: 100px; border-radius: 100px;
background-color: $uni-bg-color-hover; background-color: $uni-info;
background-color: transparent; background-color: transparent;
border: 1px solid #fff;
text-align: center; text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif; font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: $bage-size; font-size: $bage-size;
/* #ifdef H5 */ /* #ifdef H5 */
z-index: 999;
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
}
.uni-badge--inverted { &--info {
padding: 0 5px 0 0; color: #fff;
color: $uni-bg-color-hover; background-color: $uni-info;
} }
.uni-badge--default { &--primary {
color: $uni-text-color; background-color: $uni-primary;
background-color: $uni-bg-color-hover;
} }
.uni-badge--default-inverted { &--success {
color: $uni-text-color-grey; background-color: $uni-success;
background-color: transparent;
} }
.uni-badge--primary { &--warning {
color: $uni-text-color-inverse; background-color: $uni-warning;
background-color: $uni-color-primary;
} }
.uni-badge--primary-inverted { &--error {
color: $uni-color-primary; background-color: $uni-error;
background-color: transparent;
} }
.uni-badge--success { &--inverted {
color: $uni-text-color-inverse; padding: 0 5px 0 0;
background-color: $uni-color-success; color: $uni-info;
} }
.uni-badge--success-inverted { &--info-inverted {
color: $uni-color-success; color: $uni-info;
background-color: transparent; background-color: transparent;
} }
.uni-badge--warning { &--primary-inverted {
color: $uni-text-color-inverse; color: $uni-primary;
background-color: $uni-color-warning; background-color: transparent;
} }
.uni-badge--warning-inverted { &--success-inverted {
color: $uni-color-warning; color: $uni-success;
background-color: transparent; background-color: transparent;
} }
.uni-badge--error { &--warning-inverted {
color: $uni-text-color-inverse; color: $uni-warning;
background-color: $uni-color-error; background-color: transparent;
} }
.uni-badge--error-inverted { &--error-inverted {
color: $uni-color-error; color: $uni-error;
background-color: transparent; background-color: transparent;
} }
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
} }
</style> </style>
uni_modules/uni-badge/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-badge", "id": "uni-badge",
"displayName": "uni-badge 数字角标", "displayName": "uni-badge 数字角标",
"version": "1.1.6", "version": "1.2.0",
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。", "description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
"keywords": [ "keywords": [
"", "",
......
uni_modules/uni-badge/readme.md
浏览文件 @ 6f6e3846
## Badge 数字角标 ## Badge 数字角标
> **组件名：uni-badge** > **组件名：uni-badge**
> 代码块： `uBadge` > 代码块： `uBadge`
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景， 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
#### 如使用过程中有任何问题，或者您对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)
### 基本用法
在 ``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://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
\ No newline at end of file
uni_modules/uni-card/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 1.2.1（2021-07-30）
- 优化 vue3下事件警告的问题 - 优化 vue3下事件警告的问题
## 1.2.0（2021-07-13） ## 1.2.0（2021-07-13）
......
uni_modules/uni-card/components/uni-card/uni-card.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-card uni-border" <view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
:class="{ 'uni-card--full': isFull === true || isFull === 'true', 'uni-card--shadow': isShadow === true || isShadow === 'true'}"> :style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
<!-- 基础 --> <!-- 封面 -->
<view v-if="mode === 'basic' && title" @click.stop="onClick" class="uni-card__head-padding"> <slot name="cover">
<view class="uni-card__header uni-border-bottom"> <view v-if="cover" class="uni-card__cover">
<slot name="header"> <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
<view v-if="thumbnail" class="uni-card__header-extra-img-view">
<image :src="thumbnail" class="uni-card__header-extra-img" />
</view> </view>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</slot> </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>
<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> </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>
<view class="uni-card__title-content"> <view class="uni-card__header-extra" @click="onClick('extra')">
<text class="uni-card__title-content-title uni-ellipsis">{{ title }}</text>
<text class="uni-card__title-content-extra uni-ellipsis">{{ subTitle }}</text>
</view>
</view>
<view v-if="extra">
<text class="uni-card__header-extra-text">{{ extra }}</text> <text class="uni-card__header-extra-text">{{ extra }}</text>
</view> </view>
</slot>
</view>
</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>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer uni-border-top">
<slot name="footer">
<text class="uni-card__footer-text">{{ note }}</text>
</slot> </slot>
<!-- 卡片内容 -->
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
<slot></slot>
</view>
<view class="uni-card__actions" @click="onClick('actions')">
<slot name="actions"></slot>
</view> </view>
</view> </view>
</template> </template>
...@@ -63,22 +41,22 @@ ...@@ -63,22 +41,22 @@
* @description 卡片视图组件 * @description 卡片视图组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=22 * @tutorial https://ext.dcloud.net.cn/plugin?id=22
* @property {String} title 标题文字 * @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} extra 标题额外信息
* @property {String} note 底部信息 * @property {String} cover 封面图（本地路径需要引入）
* @property {String} thumbnail 标题左侧缩略图 * @property {String} thumbnail 标题左侧缩略图
* @property {String} mode = [basic|style|title] 卡片模式 * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
* @value basic 基础卡片 * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
* @value style 图文卡片 * @property {String} shadow 卡片阴影
* @value title 标题卡片 * @property {Boolean} border 卡片边框
* @property {Boolean} isFull = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
* @property {Boolean} isShadow = [true | false] 卡片内容是否开启阴影
* @event {Function} click 点击 Card 触发事件 * @event {Function} click 点击 Card 触发事件
* @example <uni-card title="标题文字" thumbnail="xxx.jpg" extra="额外信息" note="Tips">内容主体，可自定义内容及样式</uni-card>
*/ */
export default { export default {
name: 'UniCard', name: 'UniCard',
emits:['click'], emits: ['click'],
props: { props: {
title: { title: {
type: String, type: String,
...@@ -88,11 +66,23 @@ ...@@ -88,11 +66,23 @@
type: String, type: String,
default: '' default: ''
}, },
padding: {
type: String,
default: '10px'
},
margin: {
type: String,
default: '15px'
},
spacing: {
type: String,
default: '0 10px'
},
extra: { extra: {
type: String, type: String,
default: '' default: ''
}, },
note: { cover: {
type: String, type: String,
default: '' default: ''
}, },
...@@ -100,10 +90,6 @@ ...@@ -100,10 +90,6 @@
type: String, type: String,
default: '' default: ''
}, },
mode: {
type: String,
default: 'basic'
},
isFull: { isFull: {
// 内容区域是否通栏 // 内容区域是否通栏
type: Boolean, type: Boolean,
...@@ -111,183 +97,75 @@ ...@@ -111,183 +97,75 @@
}, },
isShadow: { isShadow: {
// 是否开启阴影 // 是否开启阴影
type: [Boolean, String], type: Boolean,
default: false default: true
},
shadow: {
type: String,
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
},
border: {
type: Boolean,
default: true
} }
}, },
methods: { methods: {
onClick() { onClick(type) {
this.$emit('click') this.$emit('click', type)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <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-card { .uni-card {
/* #ifndef APP-NVUE */ margin: $uni-card-spacing;
display: flex; padding: 0 $uni-spacing-sm;
flex: 1; border-radius: 4px;
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; overflow: hidden;
/* #ifdef H5 */ font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
cursor: pointer; background-color: #fff;
/* #endif */ flex: 1;
}
.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 { .uni-card__cover {
position: relative; position: relative;
/* #ifndef APP-NVUE */ margin-top: $uni-card-spacing;
// 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; flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden; overflow: hidden;
} border-radius: 4px;
.uni-card__cover-image {
.uni-card__thumbnailimage-image {
flex: 1; flex: 1;
} // width: 100%;
/* #ifndef APP-PLUS */
.uni-card__thumbnailimage-title { vertical-align: middle;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */ /* #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 { .uni-card__header {
/* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ border-bottom: 1px $uni-border-color solid;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 10px; padding: $uni-card-spacing;
overflow: hidden;
}
.uni-card__title-box { .uni-card__header-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
...@@ -297,114 +175,79 @@ ...@@ -297,114 +175,79 @@
overflow: hidden; overflow: hidden;
} }
.uni-card__title-header { .uni-card__header-avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 5px;
padding-right: 10px; margin-right: $uni-card-spacing;
} .uni-card__header-avatar-image {
flex: 1;
.uni-card__title-header-image {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
}
.uni-card__title-content { .uni-card__header-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
height: 40px; // height: 40px;
overflow: hidden; overflow: hidden;
}
.uni-card__title-content-title { .uni-card__header-content-title {
font-size: $uni-font-size-base; font-size: $uni-card-title;
line-height: 22px; color: $uni-cart-title-color;
// line-height: 22px;
} }
.uni-card__title-content-extra { .uni-card__header-content-subtitle {
font-size: $uni-font-size-sm; font-size: $uni-card-subtitle;
line-height: 27px; margin-top: 5px;
color: $uni-text-color-grey; color: $uni-cart-subtitle-color;
} }
.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 { .uni-card__header-extra {
/* #ifndef APP-NVUE */ line-height: 12px;
display: flex;
/* #endif */
flex-direction: row;
margin-right: $uni-spacing-col-base;
justify-content: flex-start;
align-items: center;
}
.uni-card__header-title-text { .uni-card__header-extra-text {
font-size: $uni-font-size-lg; font-size: 12px;
flex: 1; color: $uni-cart-subtitle-color;
color: #333;
} }
.uni-card__header-extra-img {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
margin-right: $uni-spacing-col-base;
} }
.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__content { .uni-card__content {
color: $uni-text-color; padding: $uni-card-spacing;
} font-size: 14px;
color: $uni-card-content-color;
.uni-card__content--pd { line-height: 22px;
padding: $uni-spacing-col-lg;
} }
.uni-card__content-extra { .uni-card__actions {
font-size: $uni-font-size-base; font-size: 12px;
padding-bottom: 10px;
color: $uni-text-color-grey;
} }
.uni-card__footer {
justify-content: space-between;
padding: $uni-spacing-col-lg;
} }
.uni-card__footer-text { .uni-card--border {
color: $uni-text-color-grey; border: 1px solid $uni-border-color;
font-size: $uni-font-size-sm;
} }
.uni-card--shadow { .uni-card--shadow {
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); box-shadow: $uni-shadow;
/* #endif */ /* #endif */
} }
.uni-card--full { .uni-card--full {
margin: 0; margin: 0;
border-left-width: 0;
border-left-width: 0;
border-radius: 0; border-radius: 0;
} }
...@@ -424,8 +267,4 @@ ...@@ -424,8 +267,4 @@
lines: 1; lines: 1;
/* #endif */ /* #endif */
} }
.uni-card__head-padding {
// mar: 12px;
}
</style> </style>
uni_modules/uni-card/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-card", "id": "uni-card",
"displayName": "uni-card 卡片", "displayName": "uni-card 卡片",
"version": "1.2.1", "version": "1.3.1",
"description": "Card 组件，提供常见的卡片样式。", "description": "Card 组件，提供常见的卡片样式。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -42,7 +42,8 @@ ...@@ -42,7 +42,8 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-icons" "uni-icons",
"uni-scss"
], ],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
...@@ -78,6 +79,10 @@ ...@@ -78,6 +79,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-card/readme.md
浏览文件 @ 6f6e3846
...@@ -4,101 +4,9 @@ ...@@ -4,101 +4,9 @@
> **组件名：uni-card** > **组件名：uni-card**
> 代码块： `uCard` > 代码块： `uCard`
卡片视图组件。 卡片视图组件。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
#### 如使用过程中有任何问题，或者您对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)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 因为平台兼容问题 ， 目前 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://hellouniapp.dcloud.net.cn/pages/extUI/card/card](https://hellouniapp.dcloud.net.cn/pages/extUI/card/card)
\ No newline at end of file
uni_modules/uni-collapse/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 1.3.3（2021-08-17）
- 优化 show-arrow 属性默认为true - 优化 show-arrow 属性默认为true
## 1.3.2（2021-08-17） ## 1.3.2（2021-08-17）
......
uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ 6f6e3846
...@@ -11,11 +11,10 @@ ...@@ -11,11 +11,10 @@
</view> </view>
</slot> </slot>
</view> </view>
<view <view v-if="showArrow"
v-if="showArrow"
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }" :class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
class="uni-collapse-item__title-arrow"> 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> </view>
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}" <view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
...@@ -96,7 +95,7 @@ ...@@ -96,7 +95,7 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
showArrow:{ showArrow: {
type: Boolean, type: Boolean,
default: true default: true
} }
...@@ -115,17 +114,18 @@ ...@@ -115,17 +114,18 @@
watch: { watch: {
open(val) { open(val) {
this.isOpen = val this.isOpen = val
this.onClick(val,'init') this.onClick(val, 'init')
} }
}, },
updated(e) { updated(e) {
this.$nextTick(()=> { this.$nextTick(() => {
this.init(true) this.init(true)
}) })
}, },
created(){ created() {
this.collapse = this.getCollapse() this.collapse = this.getCollapse()
this.oldHeight = 0 this.oldHeight = 0
this.onClick(this.open, 'init')
}, },
// #ifndef VUE3 // #ifndef VUE3
// TODO vue2 // TODO vue2
...@@ -181,14 +181,14 @@ ...@@ -181,14 +181,14 @@
}) })
} }
}, },
onClick(isOpen,type) { onClick(isOpen, type) {
if (this.disabled) return if (this.disabled) return
this.isOpen = isOpen this.isOpen = isOpen
if (this.isOpen && this.collapse) { if (this.isOpen && this.collapse) {
this.collapse.setAccordion(this) this.collapse.setAccordion(this)
} }
if(type !== 'init'){ if (type !== 'init') {
this.collapse.onChange(isOpen,this) this.collapse.onChange(isOpen, this)
} }
}, },
getCollapseHeight(type, index = 0) { getCollapseHeight(type, index = 0) {
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
// #endif // #endif
this.isheight = true this.isheight = true
if (type) return if (type) return
this.onClick(this.open,'init') this.onClick(this.isOpen, 'init')
}) })
.exec() .exec()
}, },
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
// #endif // #endif
this.isheight = true this.isheight = true
if (type) return if (type) return
this.onClick(this.open,'init') this.onClick(this.open, 'init')
} }
}) })
}, },
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.uni-collapse-item { .uni-collapse-item {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
...@@ -296,7 +296,7 @@ ...@@ -296,7 +296,7 @@
/* #endif */ /* #endif */
&.is-disabled { &.is-disabled {
.uni-collapse-item__title-text { .uni-collapse-item__title-text {
color: $uni-text-color-disable; color: #999;
} }
} }
...@@ -311,14 +311,14 @@ ...@@ -311,14 +311,14 @@
} }
&-img { &-img {
height: $uni-img-size-base; height: 22px;
width: $uni-img-size-base; width: 22px;
margin-right: 10px; margin-right: 10px;
} }
&-text { &-text {
flex: 1; flex: 1;
font-size: $uni-font-size-base; font-size: 14px;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
white-space: nowrap; white-space: nowrap;
color: inherit; color: inherit;
...@@ -343,7 +343,7 @@ ...@@ -343,7 +343,7 @@
transform: rotate(0deg); transform: rotate(0deg);
&-active { &-active {
transform: rotate(180deg); transform: rotate(-180deg);
} }
} }
......
uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue
浏览文件 @ 6f6e3846
...@@ -60,13 +60,14 @@ ...@@ -60,13 +60,14 @@
this.names = [] this.names = []
}, },
mounted() { mounted() {
this.$nextTick(()=>{
this.setOpen(this.dataValue) this.setOpen(this.dataValue)
})
}, },
methods: { methods: {
setOpen(val) { setOpen(val) {
let str = typeof val === 'string' let str = typeof val === 'string'
let arr = Array.isArray(val) let arr = Array.isArray(val)
this.childrens.forEach((vm, index) => { this.childrens.forEach((vm, index) => {
if (str) { if (str) {
if (val === vm.nameSync) { if (val === vm.nameSync) {
...@@ -131,7 +132,7 @@ ...@@ -131,7 +132,7 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-collapse { .uni-collapse {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -141,6 +142,6 @@ ...@@ -141,6 +142,6 @@
flex: 1; flex: 1;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
background-color: $uni-bg-color; background-color: #fff;
} }
</style> </style>
uni_modules/uni-collapse/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-collapse", "id": "uni-collapse",
"displayName": "uni-collapse 折叠面板", "displayName": "uni-collapse 折叠面板",
"version": "1.3.3", "version": "1.4.3",
"description": "Collapse 组件，可以折叠 / 展开的内容区域。", "description": "Collapse 组件，可以折叠 / 展开的内容区域。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -80,7 +81,7 @@ ...@@ -80,7 +81,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-collapse/readme.md
浏览文件 @ 6f6e3846
...@@ -8,269 +8,5 @@ ...@@ -8,269 +8,5 @@
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。 折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 \ No newline at end of file
> - `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
uni_modules/uni-combox/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 0.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.6（2021-05-12） ## 0.0.6（2021-05-12）
......
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
浏览文件 @ 6f6e3846
<template> <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"> <view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text> <text>{{label}}</text>
</view> </view>
<view class="uni-combox__input-box"> <view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" <input class="uni-combox__input" type="text" :placeholder="placeholder"
@focus="onFocus" @blur="onBlur" /> placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons> @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-combox__selector" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-combox__selector-scroll"> <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text> <text>{{emptyTips}}</text>
</view> </view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)"> <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
@click="onSelectorClick(index)">
<text>{{item}}</text> <text>{{item}}</text>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script> <script>
...@@ -35,8 +39,12 @@ ...@@ -35,8 +39,12 @@
*/ */
export default { export default {
name: 'uniCombox', name: 'uniCombox',
emits:['input','update:modelValue'], emits: ['input', 'update:modelValue'],
props: { props: {
border: {
type: Boolean,
default: true
},
label: { label: {
type: String, type: String,
default: '' default: ''
...@@ -81,11 +89,9 @@ ...@@ -81,11 +89,9 @@
computed: { computed: {
labelStyle() { labelStyle() {
if (this.labelWidth === 'auto') { if (this.labelWidth === 'auto') {
return {} return ""
}
return {
width: this.labelWidth
} }
return `width: ${this.labelWidth}`
}, },
filterCandidates() { filterCandidates() {
return this.candidates.filter((item) => { return this.candidates.filter((item) => {
...@@ -144,10 +150,15 @@ ...@@ -144,10 +150,15 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.uni-combox { .uni-combox {
font-size: 14px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 6px 10px;
position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
height: 40px; // height: 40px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
// border-bottom: solid 1px #DDDDDD; // border-bottom: solid 1px #DDDDDD;
...@@ -172,13 +183,14 @@ ...@@ -172,13 +183,14 @@
.uni-combox__input { .uni-combox__input {
flex: 1; flex: 1;
font-size: 16px; font-size: 14px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
} }
.uni-combox__input-arrow { .uni-combox__input-plac {
padding: 10px; font-size: 14px;
color: #999;
} }
.uni-combox__selector { .uni-combox__selector {
...@@ -186,13 +198,15 @@ ...@@ -186,13 +198,15 @@
box-sizing: border-box; box-sizing: border-box;
/* #endif */ /* #endif */
position: absolute; position: absolute;
top: 42px; top: calc(100% + 12px);
left: 0; left: 0;
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px; 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; z-index: 2;
padding: 4px 0;
} }
.uni-combox__selector-scroll { .uni-combox__selector-scroll {
...@@ -202,21 +216,6 @@ ...@@ -202,21 +216,6 @@
/* #endif */ /* #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-empty,
.uni-combox__selector-item { .uni-combox__selector-item {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -226,8 +225,12 @@ ...@@ -226,8 +225,12 @@
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
border-bottom: solid 1px #DDDDDD; // border-bottom: solid 1px #DDDDDD;
margin: 0px 10px; padding: 0px 10px;
}
.uni-combox__selector-item:hover {
background-color: #f9f9f9;
} }
.uni-combox__selector-empty:last-child, .uni-combox__selector-empty:last-child,
...@@ -236,4 +239,37 @@ ...@@ -236,4 +239,37 @@
border-bottom: none; border-bottom: none;
/* #endif */ /* #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> </style>
uni_modules/uni-combox/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-combox", "id": "uni-combox",
"displayName": "uni-combox 组合框", "displayName": "uni-combox 组合框",
"version": "0.1.0", "version": "1.0.1",
"description": "可以选择也可以输入的表单项 ", "description": "可以选择也可以输入的表单项 ",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -78,6 +79,10 @@ ...@@ -78,6 +79,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-combox/readme.md
浏览文件 @ 6f6e3846
...@@ -7,46 +7,5 @@ ...@@ -7,46 +7,5 @@
组合框组件。 组合框组件。
### 平台兼容性说明 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
**暂不支持nvue** \ No newline at end of file
### 安装方式
本组件符合[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
uni_modules/uni-countdown/changelog.md
浏览文件 @ 6f6e3846
## 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.2（2021-08-24）
- 新增 支持国际化 - 新增 支持国际化
## 1.1.1（2021-07-30） ## 1.1.1（2021-07-30）
......
uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-countdown"> <view class="uni-countdown">
<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" <text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
class="uni-countdown__number">{{ d }}</text> <text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">{{dayText}}</text> <text :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" <text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
class="uni-countdown__number">{{ h }}</text> <text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text> <text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" <text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
class="uni-countdown__number">{{ i }}</text> <text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</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>
</view> </view>
</template> </template>
<script> <script>
...@@ -19,7 +15,9 @@ ...@@ -19,7 +15,9 @@
initVueI18n initVueI18n
} from '@dcloudio/uni-i18n' } from '@dcloudio/uni-i18n'
import messages from './i18n/index.js' import messages from './i18n/index.js'
const { t } = initVueI18n(messages) const {
t
} = initVueI18n(messages)
/** /**
* Countdown 倒计时 * Countdown 倒计时
* @description 倒计时组件 * @description 倒计时组件
...@@ -32,14 +30,14 @@ ...@@ -32,14 +30,14 @@
* @property {Number} second 秒 * @property {Number} second 秒
* @property {Number} timestamp 时间戳 * @property {Number} timestamp 时间戳
* @property {Boolean} showDay = [true|false] 是否显示天数 * @property {Boolean} showDay = [true|false] 是否显示天数
* @property {Boolean} showColon = [true|false] 是否以冒号为分隔符 * @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
* @property {String} splitorColor 分割符号颜色 * @property {String} splitorColor 分割符号颜色
* @event {Function} timeup 倒计时时间到触发事件 * @event {Function} timeup 倒计时时间到触发事件
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown> * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
*/ */
export default { export default {
name: 'UniCountdown', name: 'UniCountdown',
emits:['timeup'], emits: ['timeup'],
props: { props: {
showDay: { showDay: {
type: Boolean, type: Boolean,
...@@ -55,19 +53,19 @@ ...@@ -55,19 +53,19 @@
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: '#FFFFFF' default: ''
},
borderColor: {
type: String,
default: '#000000'
}, },
color: { color: {
type: String, type: String,
default: '#000000' default: '#333'
},
fontSize: {
type: Number,
default: 14
}, },
splitorColor: { splitorColor: {
type: String, type: String,
default: '#000000' default: '#333'
}, },
day: { day: {
type: Number, type: Number,
...@@ -115,6 +113,29 @@ ...@@ -115,6 +113,29 @@
secondText(val) { secondText(val) {
return t("uni-countdown.s") 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: { watch: {
day(val) { day(val) {
...@@ -198,6 +219,8 @@ ...@@ -198,6 +219,8 @@
startData() { startData() {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) 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 return
} }
clearInterval(this.timer) clearInterval(this.timer)
...@@ -211,6 +234,9 @@ ...@@ -211,6 +234,9 @@
this.countDown() this.countDown()
}, 1000) }, 1000)
}, },
update(){
this.startData();
},
changeFlag() { changeFlag() {
if (!this.syncFlag) { if (!this.syncFlag) {
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
...@@ -222,39 +248,24 @@ ...@@ -222,39 +248,24 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$countdown-height: 48rpx; $font-size: 14px;
$countdown-width: 52rpx;
.uni-countdown { .uni-countdown {
/* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: 2rpx 0; align-items: center;
}
.uni-countdown__splitor { &__splitor {
/* #ifndef APP-NVUE */ margin: 0 2px;
display: flex; font-size: $font-size;
/* #endif */ color: #333;
justify-content: center;
line-height: $countdown-height;
padding: 5rpx;
font-size: $uni-font-size-sm;
} }
.uni-countdown__number { &__number {
/* #ifndef APP-NVUE */ border-radius: 3px;
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: $countdown-width;
height: $countdown-height;
line-height: $countdown-height;
margin: 5rpx;
text-align: center; text-align: center;
font-size: $uni-font-size-sm; font-size: $font-size;
}
} }
</style> </style>
uni_modules/uni-countdown/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-countdown", "id": "uni-countdown",
"displayName": "uni-countdown 倒计时", "displayName": "uni-countdown 倒计时",
"version": "1.1.2", "version": "1.2.2",
"description": "CountDown 倒计时组件", "description": "CountDown 倒计时组件",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-countdown/readme.md
浏览文件 @ 6f6e3846
...@@ -4,54 +4,7 @@ ...@@ -4,54 +4,7 @@
> **组件名：uni-countdown** > **组件名：uni-countdown**
> 代码块： `uCountDown` > 代码块： `uCountDown`
倒计时组件。 倒计时组件。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`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
uni_modules/uni-data-checkbox/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 0.2.5（2021-08-23）
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题 - 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
## 0.2.4（2021-08-17） ## 0.2.4（2021-08-17）
......
uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
浏览文件 @ 6f6e3846
...@@ -65,15 +65,9 @@ ...@@ -65,15 +65,9 @@
* @event {Function} change 选中发生变化触发 * @event {Function} change 选中发生变化触发
*/ */
// import clientdb from './clientdb.js'
export default { export default {
name: 'uniDataChecklist', name: 'uniDataChecklist',
// mixins: [clientdb],
mixins: [uniCloud.mixinDatacom || {}], mixins: [uniCloud.mixinDatacom || {}],
// model: {
// prop: 'modelValue',
// event: 'update:modelValue'
// },
emits:['input','update:modelValue','change'], emits:['input','update:modelValue','change'],
props: { props: {
mode: { mode: {
...@@ -185,8 +179,8 @@ ...@@ -185,8 +179,8 @@
}, },
isLocal:true, isLocal:true,
styles: { styles: {
selectedColor: '#007aff', selectedColor: '#2979ff',
selectedTextColor: '#333', selectedTextColor: '#666',
}, },
isTop:0 isTop:0
}; };
...@@ -381,7 +375,7 @@ ...@@ -381,7 +375,7 @@
selectedArr.push(item[this.map.value]) 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 @@ ...@@ -389,7 +383,7 @@
*/ */
setStyleBackgroud(item) { setStyleBackgroud(item) {
let styles = {} let styles = {}
let selectedColor = this.selectedColor?this.selectedColor:'#007aff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode !== 'list') { if (this.mode !== 'list') {
styles['border-color'] = item.selected?selectedColor:'#DCDFE6' styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
} }
...@@ -405,7 +399,7 @@ ...@@ -405,7 +399,7 @@
setStyleIcon(item) { setStyleIcon(item) {
let styles = {} let styles = {}
let classles = '' let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#007aff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
styles['background-color'] = item.selected?selectedColor:'#fff' styles['background-color'] = item.selected?selectedColor:'#fff'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6' styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
...@@ -422,11 +416,11 @@ ...@@ -422,11 +416,11 @@
setStyleIconText(item) { setStyleIconText(item) {
let styles = {} let styles = {}
let classles = '' let classles = ''
let selectedColor = this.selectedColor?this.selectedColor:'#007aff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode === 'tag') { 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 { } 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){ if(!item.selected && item.disabled){
styles.color = '#999' styles.color = '#999'
...@@ -454,7 +448,7 @@ ...@@ -454,7 +448,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
$checked-color: #007aff; $checked-color: #2979ff;
$border-color: #DCDFE6; $border-color: #DCDFE6;
$disable:0.4; $disable:0.4;
...@@ -477,7 +471,7 @@ ...@@ -477,7 +471,7 @@
.uni-data-checklist { .uni-data-checklist {
position: relative; position: relative;
z-index: 0; z-index: 0;
flex: 1;
// 多选样式 // 多选样式
.checklist-group { .checklist-group {
@include flex; @include flex;
...@@ -510,7 +504,7 @@ ...@@ -510,7 +504,7 @@
justify-content: space-between; justify-content: space-between;
.checklist-text { .checklist-text {
font-size: 14px; font-size: 14px;
color: #333; color: #666;
margin-left: 5px; margin-left: 5px;
line-height: 14px; line-height: 14px;
} }
...@@ -541,7 +535,7 @@ ...@@ -541,7 +535,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 2px; border-radius: 4px;
background-color: #fff; background-color: #fff;
z-index: 1; z-index: 1;
.checkbox__inner-icon { .checkbox__inner-icon {
...@@ -657,7 +651,7 @@ ...@@ -657,7 +651,7 @@
// 按钮样式 // 按钮样式
&.is--button { &.is--button {
margin-right: 10px; margin-right: 10px;
padding: 5px 15px; padding: 5px 10px;
border: 1px $border-color solid; border: 1px $border-color solid;
border-radius: 3px; border-radius: 3px;
transition: border-color 0.2s; transition: border-color 0.2s;
...@@ -729,7 +723,7 @@ ...@@ -729,7 +723,7 @@
.checklist-text { .checklist-text {
margin: 0; margin: 0;
color: #333; color: #666;
} }
// 禁用 // 禁用
......
uni_modules/uni-data-checkbox/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-data-checkbox", "id": "uni-data-checkbox",
"displayName": "uni-data-checkbox 数据选择器", "displayName": "uni-data-checkbox 数据选择器",
"version": "0.2.5", "version": "1.0.1",
"description": "通过数据驱动的单选框和复选框", "description": "通过数据驱动的单选框和复选框",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": ["uni-load-more"], "dependencies": ["uni-load-more","uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-data-checkbox/readme.md
浏览文件 @ 6f6e3846
...@@ -14,286 +14,5 @@ ...@@ -14,286 +14,5 @@
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data 在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 \ No newline at end of file
> - 本组件为数据驱动，目的是快速投入使用，只可通过 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
uni_modules/uni-data-picker/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 0.4.9（2021-10-28）
- 修复 VUE2 v-model 概率无效的bug - 修复 VUE2 v-model 概率无效的 bug
## 0.4.8（2021-10-27） ## 0.4.8（2021-10-27）
- 修复 v-model 概率无效的bug - 修复 v-model 概率无效的 bug
## 0.4.7（2021-10-25） ## 0.4.7（2021-10-25）
- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+ - 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
- 修复 树型 uniCloud 数据类型为 int 时报错的bug - 修复 树型 uniCloud 数据类型为 int 时报错的 bug
## 0.4.6（2021-10-19） ## 0.4.6（2021-10-19）
- 修复 非VUE3 v-model 为 0 时无法选中的 bug - 修复 非 VUE3 v-model 为 0 时无法选中的 bug
## 0.4.5（2021-09-26） ## 0.4.5（2021-09-26）
- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效 - 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
- 修复 readonly 为 true 时报错的 bug - 修复 readonly 为 true 时报错的 bug
## 0.4.4（2021-09-26） ## 0.4.4（2021-09-26）
- 修复 上一版本造成的 map 属性失效的bug - 修复 上一版本造成的 map 属性失效的 bug
- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略 - 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
## 0.4.3（2021-09-24） ## 0.4.3（2021-09-24）
- 修复 某些情况下级联未触发的 bug - 修复 某些情况下级联未触发的 bug
## 0.4.2（2021-09-23） ## 0.4.2（2021-09-23）
- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用 - 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
- 新增 选项内容过长自动添加省略号 - 新增 选项内容过长自动添加省略号
## 0.4.1（2021-09-15） ## 0.4.1（2021-09-15）
- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段 - 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
## 0.4.0（2021-07-13） ## 0.4.0（2021-07-13）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.3.5（2021-06-04） ## 0.3.5（2021-06-04）
- 修复 无法加载云端数据的问题 - 修复 无法加载云端数据的问题
## 0.3.4（2021-05-28） ## 0.3.4（2021-05-28）
- 修复 v-model 无效问题 - 修复 v-model 无效问题
- 修复 loaddata 为空数据组时加载时间过长问题 - 修复 loaddata 为空数据组时加载时间过长问题
- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点 - 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
## 0.3.3（2021-05-12） ## 0.3.3（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 0.3.2（2021-04-22） ## 0.3.2（2021-04-22）
- 修复 非树形数据有 where 属性查询报错的问题 - 修复 非树形数据有 where 属性查询报错的问题
## 0.3.1（2021-04-15） ## 0.3.1（2021-04-15）
- 修复 本地数据概率无法回显时问题 - 修复 本地数据概率无法回显时问题
## 0.3.0（2021-04-07） ## 0.3.0（2021-04-07）
- 新增 支持云端非树形表结构数据 - 新增 支持云端非树形表结构数据
- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题 - 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
## 0.2.0（2021-03-15） ## 0.2.0（2021-03-15）
- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题 - 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
## 0.1.9（2021-03-09） ## 0.1.9（2021-03-09）
- 修复 微信小程序某些情况下无法选择的问题 - 修复 微信小程序某些情况下无法选择的问题
## 0.1.8（2021-02-05） ## 0.1.8（2021-02-05）
- 优化 部分样式在 nvue 上的兼容表现 - 优化 部分样式在 nvue 上的兼容表现
## 0.1.7（2021-02-05） ## 0.1.7（2021-02-05）
- 调整为 uni_modules 目录规范 - 调整为 uni_modules 目录规范
uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
浏览文件 @ 6f6e3846
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
</view> </view>
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></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-data-tree-dialog" v-if="isOpened">
<view class="uni-popper__arrow"></view>
<view class="dialog-caption"> <view class="dialog-caption">
<view class="title-area"> <view class="title-area">
<text class="dialog-title">{{popupTitle}}</text> <text class="dialog-title">{{popupTitle}}</text>
...@@ -425,7 +426,7 @@ ...@@ -425,7 +426,7 @@
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
border-bottom: 1px solid #f0f0f0; /* border-bottom: 1px solid #f0f0f0; */
} }
.title-area { .title-area {
...@@ -440,7 +441,7 @@ ...@@ -440,7 +441,7 @@
} }
.dialog-title { .dialog-title {
font-weight: bold; /* font-weight: bold; */
line-height: 44px; line-height: 44px;
} }
...@@ -483,13 +484,15 @@ ...@@ -483,13 +484,15 @@
.uni-data-tree-dialog { .uni-data-tree-dialog {
position: absolute; position: absolute;
top: 100%; top: 55px;
height: auto; height: auto;
min-height: 400px; min-height: 400px;
max-height: 50vh; max-height: 50vh;
background-color: #fff; background-color: #fff;
border-radius: 5px; border: 1px solid #EBEEF5;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .3); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: unset;
} }
.dialog-caption { .dialog-caption {
...@@ -502,4 +505,33 @@ ...@@ -502,4 +505,33 @@
} }
/* #endif */ /* #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>
uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue
浏览文件 @ 6f6e3846
...@@ -288,7 +288,7 @@ ...@@ -288,7 +288,7 @@
.item { .item {
padding: 12px 15px; padding: 12px 15px;
border-bottom: 1px solid #f0f0f0; /* border-bottom: 1px solid #f0f0f0; */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
......
uni_modules/uni-data-picker/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-data-picker", "id": "uni-data-picker",
"displayName": "uni-data-picker 数据驱动的picker选择器", "displayName": "uni-data-picker 数据驱动的picker选择器",
"version": "0.4.9", "version": "1.0.1",
"description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景", "description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-load-more", "uni-load-more",
"uni-icons" "uni-icons",
"uni-scss"
], ],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
......
uni_modules/uni-data-picker/readme.md
浏览文件 @ 6f6e3846
...@@ -18,269 +18,5 @@ ...@@ -18,269 +18,5 @@
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。 在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
> - 组件需要依赖 `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
uni_modules/uni-dateformat/changelog.md
浏览文件 @ 6f6e3846
## 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.5（2021-07-08）
- 调整 默认时间不再是当前时间，而是显示'-'字符 - 调整 默认时间不再是当前时间，而是显示'-'字符
## 0.0.4（2021-05-12） ## 0.0.4（2021-05-12）
......
uni_modules/uni-dateformat/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-dateformat", "id": "uni-dateformat",
"displayName": "uni-dateformat 日期格式化", "displayName": "uni-dateformat 日期格式化",
"version": "0.0.5", "version": "1.0.0",
"description": "日期格式化组件，可以将日期格式化为1分钟前、刚刚等形式", "description": "日期格式化组件，可以将日期格式化为1分钟前、刚刚等形式",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -77,6 +77,10 @@ ...@@ -77,6 +77,10 @@
"快应用": { "快应用": {
"华为": "y", "华为": "y",
"联盟": "y" "联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-dateformat/readme.md
浏览文件 @ 6f6e3846
...@@ -7,71 +7,5 @@ ...@@ -7,71 +7,5 @@
日期格式化组件。 日期格式化组件。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`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
uni_modules/uni-datetime-picker/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 2.1.4（2021-09-10）
- 修复 hide-second 在移动端的 bug - 修复 hide-second 在移动端的 bug
- 修复 单选赋默认值时，赋值日期未高亮的 bug - 修复 单选赋默认值时，赋值日期未高亮的 bug
......
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
浏览文件 @ 6f6e3846
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
'uni-calendar-item--after-checked-x':weeks.afterMultiple, 'uni-calendar-item--after-checked-x':weeks.afterMultiple,
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
<view class="uni-calendar-item__weeks-box-item" :class="{ <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':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
'uni-calendar-item--checked-range-text': checkHover, 'uni-calendar-item--checked-range-text': checkHover,
'uni-calendar-item--before-checked':weeks.beforeMultiple, 'uni-calendar-item--before-checked':weeks.beforeMultiple,
...@@ -15,8 +14,9 @@ ...@@ -15,8 +14,9 @@
'uni-calendar-item--disable':weeks.disable, 'uni-calendar-item--disable':weeks.disable,
}"> }">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> <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> <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>
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
</view> </view>
</template> </template>
...@@ -70,18 +70,20 @@ ...@@ -70,18 +70,20 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 3px 0; margin: 1px 0;
position: relative;
} }
.uni-calendar-item__weeks-box-text { .uni-calendar-item__weeks-box-text {
font-size: 12px; font-size: 14px;
// font-size: $uni-font-size-base; // font-family: Lato-Bold, Lato;
// color: $uni-text-color; font-weight: bold;
color: #455997;
} }
.uni-calendar-item__weeks-lunar-text { .uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm; font-size: 12px;
color: $uni-text-color; color: #333;
} }
.uni-calendar-item__weeks-box-item { .uni-calendar-item__weeks-box-item {
...@@ -107,38 +109,43 @@ ...@@ -107,38 +109,43 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 8px; border-radius: 8px;
background-color: $uni-color-error; background-color: #dd524d;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--disable { .uni-calendar-item__weeks-box .uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled); // background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
cursor: default; cursor: default;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text { .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: $uni-color-primary; color: #D1D1D1;
} }
.uni-calendar-item--isDay { .uni-calendar-item--isDay {
background-color: $uni-color-primary; position: absolute;
opacity: 0.8; top: 10px;
color: #fff; right: 17%;
background-color: #dd524d;
width:6px;
height: 6px;
border-radius: 50%;
} }
.uni-calendar-item--extra { .uni-calendar-item--extra {
color: $uni-color-error; color: #dd524d;
opacity: 0.8; opacity: 0.8;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--checked { .uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: $uni-color-primary; background-color: #007aff;
// border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid #f2f6fc; border: 3px solid #fff;
}
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff; color: #fff;
opacity: 0.8;
} }
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text { .uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
...@@ -146,36 +153,33 @@ ...@@ -146,36 +153,33 @@
} }
.uni-calendar-item--multiple { .uni-calendar-item--multiple {
background-color: #f2f6fc; background-color: #F6F7FC;
// color: #fff; // color: #fff;
opacity: 0.8;
} }
.uni-calendar-item--multiple .uni-calendar-item--before-checked { .uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
background-color: #409eff; background-color: #409eff;
color: #fff !important; border-radius: 50%;
// border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid #f2f6fc; border: 3px solid #F6F7FC;
} }
.uni-calendar-item--multiple .uni-calendar-item--after-checked { .uni-calendar-item--before-checked .uni-calendar-item--checked-text,
background-color: #409eff;; .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff !important; color: #fff;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
} }
.uni-calendar-item--before-checked-x { .uni-calendar-item--before-checked-x {
// border-top-left-radius: 25px; border-top-left-radius: 50px;
// border-bottom-left-radius: 25px; border-bottom-left-radius: 50px;
background-color: #f2f6fc; box-sizing: border-box;
background-color: #F6F7FC;
} }
.uni-calendar-item--after-checked-x { .uni-calendar-item--after-checked-x {
// border-top-right-radius: 25px; border-top-right-radius: 50px;
// border-bottom-right-radius: 25px; border-bottom-right-radius: 50px;
background-color: #f2f6fc; background-color: #F6F7FC;
} }
</style> </style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
浏览文件 @ 6f6e3846
...@@ -3,26 +3,30 @@ ...@@ -3,26 +3,30 @@
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
@click="clean"></view> @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" <view v-if="insert || show" class="uni-calendar__content"
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}"> :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 class="uni-calendar__header">
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre"> <view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view> <view class="uni-calendar__header-btn uni-calendar--left"></view>
</view> </view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange"> <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> </picker>
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next"> <view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view> <view class="uni-calendar__header-btn uni-calendar--right"></view>
</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>
<view class="uni-calendar__box"> <view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg"> <view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view> </view>
<view class="uni-calendar__weeks"> <view class="uni-calendar__weeks" style="padding-bottom: 7px;">
<view class="uni-calendar__weeks-day"> <view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text> <text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view> </view>
...@@ -66,22 +70,23 @@ ...@@ -66,22 +70,23 @@
<view class="uni-date-changed--time-start"> <view class="uni-date-changed--time-start">
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
</view> </view>
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" :hide-second="hideSecond" <time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
:disabled="!tempRange.before" class="time-picker-style"> :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
</time-picker> </time-picker>
</view> </view>
<uni-icons type="arrowthinright" color="#999" style="line-height: 50px;"></uni-icons> <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-end">
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> <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" <time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
:disabled="!tempRange.after" class="time-picker-style"> :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
</time-picker> </time-picker>
</view> </view>
</view> </view>
<view v-if="!insert" class="uni-date-changed uni-calendar__header" @click="confirm"> <view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
<view class="uni-calendar__header-btn-box"> <!-- <view class="uni-calendar__header-btn-box">
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text> <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> </view>
</view> </view>
...@@ -361,7 +366,6 @@ ...@@ -361,7 +366,6 @@
}) })
// 选中某一天 // 选中某一天
// this.cale.setDate(this.date) // this.cale.setDate(this.date)
this.init(this.date) this.init(this.date)
// this.setDay // this.setDay
}, },
...@@ -425,7 +429,6 @@ ...@@ -425,7 +429,6 @@
* @param {Object} date * @param {Object} date
*/ */
init(date) { init(date) {
this.cale.setDate(date) this.cale.setDate(date)
this.weeks = this.cale.weeks this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date) this.nowDate = this.calendar = this.cale.getInfo(date)
...@@ -605,7 +608,7 @@ ...@@ -605,7 +608,7 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: $uni-bg-color-mask; background-color: rgba(0, 0, 0, 0.4);
transition-property: opacity; transition-property: opacity;
transition-duration: 0.3s; transition-duration: 0.3s;
opacity: 0; opacity: 0;
...@@ -639,6 +642,12 @@ ...@@ -639,6 +642,12 @@
background-color: #fff; 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 { .uni-calendar__header {
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -648,9 +657,11 @@ ...@@ -648,9 +657,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 50px; 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 { .uni-calendar--fixed-top {
...@@ -659,14 +670,13 @@ ...@@ -659,14 +670,13 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
justify-content: space-between; 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-style: solid;
border-top-width: 1px; border-top-width: 1px;
} }
.uni-calendar--fixed-width { .uni-calendar--fixed-width {
width: 50px; width: 50px;
// padding: 0 15px;
} }
.uni-calendar__backtoday { .uni-calendar__backtoday {
...@@ -680,21 +690,21 @@ ...@@ -680,21 +690,21 @@
font-size: 12px; font-size: 12px;
border-top-left-radius: 25px; border-top-left-radius: 25px;
border-bottom-left-radius: 25px; border-bottom-left-radius: 25px;
color: $uni-text-color; color: #fff;
background-color: $uni-bg-color-hover; background-color: #f1f1f1;
} }
.uni-calendar__header-text { .uni-calendar__header-text {
text-align: center; text-align: center;
width: 100px; width: 100px;
font-size: $uni-font-size-base; font-size: 15px;
color: $uni-text-color; color: #666;
} }
.uni-calendar__button-text { .uni-calendar__button-text {
text-align: center; text-align: center;
width: 100px; width: 100px;
font-size: $uni-font-size-base; font-size: 14px;
color: #007aff; color: #007aff;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
letter-spacing: 3px; letter-spacing: 3px;
...@@ -713,12 +723,12 @@ ...@@ -713,12 +723,12 @@
} }
.uni-calendar__header-btn { .uni-calendar__header-btn {
width: 8px; width: 9px;
height: 8px; height: 9px;
border-left-color: $uni-text-color-placeholder; border-left-color: #808080;
border-left-style: solid; border-left-style: solid;
border-left-width: 1px; border-left-width: 1px;
border-top-color: $uni-color-subtitle; border-top-color: #555555;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
} }
...@@ -760,10 +770,13 @@ ...@@ -760,10 +770,13 @@
.uni-calendar__weeks-day-text { .uni-calendar__weeks-day-text {
font-size: 12px; font-size: 12px;
color: #B2B2B2;
} }
.uni-calendar__box { .uni-calendar__box {
position: relative; position: relative;
// padding: 0 10px;
padding-bottom: 7px;
} }
.uni-calendar__box-bg { .uni-calendar__box-bg {
...@@ -782,7 +795,7 @@ ...@@ -782,7 +795,7 @@
.uni-calendar__box-bg-text { .uni-calendar__box-bg-text {
font-size: 200px; font-size: 200px;
font-weight: bold; font-weight: bold;
color: $uni-text-color-grey; color: #999;
opacity: 0.1; opacity: 0.1;
text-align: center; text-align: center;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -795,12 +808,17 @@ ...@@ -795,12 +808,17 @@
// line-height: 50px; // line-height: 50px;
text-align: center; text-align: center;
color: #333; color: #333;
border-top-color: $uni-border-color; border-top-color: #DCDCDC;
;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
flex: 1; flex: 1;
} }
.uni-date-btn--ok {
padding: 20px 15px;
}
.uni-date-changed--time-start { .uni-date-changed--time-start {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -834,4 +852,47 @@ ...@@ -834,4 +852,47 @@
.mr-10 { .mr-10 {
margin-right: 10px; 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> </style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
浏览文件 @ 6f6e3846
...@@ -5,16 +5,12 @@ ...@@ -5,16 +5,12 @@
<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled, <view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
'uni-date-x--border': border}"> 'uni-date-x--border': border}">
<view v-if="!isRange" class="uni-date-x uni-date-single"> <view v-if="!isRange" class="uni-date-x uni-date-single">
<view class="uni-date__icon-logo"> <uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
</view>
<input class="uni-date__x-input" type="text" v-model="singleVal" <input class="uni-date__x-input" type="text" v-model="singleVal"
:placeholder="singlePlaceholderText" :disabled="true" /> :placeholder="singlePlaceholderText" :disabled="true" />
</view> </view>
<view v-else class="uni-date-x uni-date-range"> <view v-else class="uni-date-x uni-date-range">
<view class="uni-date__icon-logo"> <uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
</view>
<input class="uni-date__x-input t-c" type="text" v-model="range.startDate" <input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
:placeholder="startPlaceholderText" :disabled="true" /> :placeholder="startPlaceholderText" :disabled="true" />
<slot> <slot>
...@@ -23,9 +19,8 @@ ...@@ -23,9 +19,8 @@
<input class="uni-date__x-input t-c" type="text" v-model="range.endDate" <input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
:placeholder="endPlaceholderText" :disabled="true" /> :placeholder="endPlaceholderText" :disabled="true" />
</view> </view>
<view v-show="clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))" <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
class="uni-date__icon-clear" @click.stop="clear"> <uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
<uni-icons type="clear" color="#e1e1e1" size="14"></uni-icons>
</view> </view>
</view> </view>
</slot> </slot>
...@@ -34,7 +29,8 @@ ...@@ -34,7 +29,8 @@
<view v-show="popup" class="uni-date-mask" @click="close"></view> <view v-show="popup" class="uni-date-mask" @click="close"></view>
<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container"> <view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
<view v-if="!isRange" class="uni-date-single--x" :style="popover"> <view v-if="!isRange" class="uni-date-single--x" :style="popover">
<view v-show="hasTime" class="uni-date-changed popup-x-header"> <view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="uni-date-changed popup-x-header">
<input class="uni-date__input t-c" type="text" v-model="tempSingleDate" <input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
:placeholder="selectDateText" /> :placeholder="selectDateText" />
<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate" <time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
...@@ -43,9 +39,9 @@ ...@@ -43,9 +39,9 @@
:disabled="!tempSingleDate" /> :disabled="!tempSingleDate" />
</time-picker> </time-picker>
</view> </view>
<calendar ref="pcSingle" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="pcSingle" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate"
@change="singleChange" /> @change="singleChange" style="padding: 0 8px;" />
<view v-if="hasTime" class="popup-x-footer"> <view v-if="hasTime" class="popup-x-footer">
<!-- <text class="">此刻</text> --> <!-- <text class="">此刻</text> -->
<text class="confirm" @click="confirmSingleChange">{{okText}}</text> <text class="confirm" @click="confirmSingleChange">{{okText}}</text>
...@@ -54,7 +50,8 @@ ...@@ -54,7 +50,8 @@
</view> </view>
<view v-else class="uni-date-range--x" :style="popover"> <view v-else class="uni-date-range--x" :style="popover">
<view v-show="hasTime" class="popup-x-header uni-date-changed"> <view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="popup-x-header uni-date-changed">
<view class="popup-x-header--datetime"> <view class="popup-x-header--datetime">
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate" <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
:placeholder="startDateText" /> :placeholder="startDateText" />
...@@ -77,14 +74,14 @@ ...@@ -77,14 +74,14 @@
</view> </view>
</view> </view>
<view class="popup-x-body"> <view class="popup-x-body">
<calendar ref="left" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="left" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
@change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale" @change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale"
@monthSwitch="leftMonthSwitch" /> @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
<calendar ref="right" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="right" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
@change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale" @change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
@monthSwitch="rightMonthSwitch" style="border-left: 1px solid #F1F1F1;" /> @monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
</view> </view>
<view v-if="hasTime" class="popup-x-footer"> <view v-if="hasTime" class="popup-x-footer">
<text class="" @click="clear">{{clearText}}</text> <text class="" @click="clear">{{clearText}}</text>
...@@ -92,7 +89,7 @@ ...@@ -92,7 +89,7 @@
</view> </view>
</view> </view>
</view> </view>
<calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime" <calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false" :pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
:hideSecond="hideSecond" @confirm="mobileChange" /> :hideSecond="hideSecond" @confirm="mobileChange" />
...@@ -104,10 +101,10 @@ ...@@ -104,10 +101,10 @@
* @description 同时支持 PC 和移动端使用日历选择日期和日期范围 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
* @tutorial https://ext.dcloud.net.cn/plugin?id=3962 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
* @property {String} type 选择器类型 * @property {String} type 选择器类型
* @property {String|Array} value 绑定值 * @property {String|Number|Array|Date} value 绑定值
* @property {String} placeholder 单选择时的占位内容 * @property {String} placeholder 单选择时的占位内容
* @property {String} start 起始时间 * @property {String} start 起始时间
* @property {String} start 终止时间 * @property {String} end 终止时间
* @property {String} start-placeholder 范围选择时开始日期的占位内容 * @property {String} start-placeholder 范围选择时开始日期的占位内容
* @property {String} end-placeholder 范围选择时结束日期的占位内容 * @property {String} end-placeholder 范围选择时结束日期的占位内容
* @property {String} range-separator 选择范围时的分隔符 * @property {String} range-separator 选择范围时的分隔符
...@@ -115,6 +112,9 @@ ...@@ -115,6 +112,9 @@
* @property {Boolean} disabled = [true|false] 是否禁用 * @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用） * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
* @event {Function} change 确定日期时触发的事件 * @event {Function} change 确定日期时触发的事件
* @event {Function} show 打开弹出层
* @event {Function} close 关闭弹出层
* @event {Function} clear 清除上次选中的状态和值
**/ **/
import calendar from './calendar.vue' import calendar from './calendar.vue'
import timePicker from './time-picker.vue' import timePicker from './time-picker.vue'
...@@ -180,7 +180,6 @@ ...@@ -180,7 +180,6 @@
isEmitValue: false, isEmitValue: false,
isPhone: false, isPhone: false,
isFirstShow: true, isFirstShow: true,
iconBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACVklEQVRoge2Zv2vTQRTAP4oWJQQskmolBAnSQVMcSxbp4ubmIEWETu0oIjg5iIOgpLNunfQfMHToUgpOVgfRqRAL4q8WRLQVq4sOdyHPL9/7evfNJReS+8DB433v7r37fl/eu9xBJBKUB0BLt+uDaOOQZb8SUNXyuKuRftg46NeXcBww6M8AC0ANOAycAyb1s7e6+SbNxi/gBfAQ2HadcA7YB/4MUPsKzLos4jzwewAcNy3mhMnx5I/9BiqUAD4DDWAXmAfqWt8Enlq+GBfSbEwAt4AicAxYBO7aTPaGzhu4KvTLQn/Hh9cpmGzcFvqmaXAyaxWE/MGTg93yXsgFUyfbOrJCJ2s8y+tRP21s0fmMTlmih8zT8WnN1GloCmJWaF0CpvrlSAb1/3fJXshNT470hZEIrZeoahqaU8BZ10Exa4XGtiCaKKL+EIHaMX8U81ZEP7ntrwi7n4CfWi7p+UCFdFdh7Rpaps9+mn93rjY2THut0QqtoVlIkpi1QjNyCzEdnl0W+idCXxb6VmKudaGfsbBhRbcHdEWhf5eYt0o6FVR6BjhqYcOKoQkt2y/SAB5rWVbpVeCilmUl3hb6JNeAI1p+ZWEjFzH9hsY2tEwHdHX9DGATWNLyceCeGL/YhY+58LWhy9o0uhJDKw3T4dlr4L6WZab5JvRBGJqs9UPI5R44lQfpx56pUzK0NlA3R6AK1Engu1+/nGhfK7R5bjtwGnXdFfpSJ6190Quz5grqQCC048lFXMhy2nQZWkUVsRowZv8OvLOPCvdHwE5APyKRSMQzfwE22DtT3T5PPwAAAABJRU5ErkJggg=='
} }
}, },
props: { props: {
...@@ -363,6 +362,11 @@ ...@@ -363,6 +362,11 @@
}, },
clearText() { clearText() {
return t("uni-datetime-picker.clear") return t("uni-datetime-picker.clear")
},
showClearIcon() {
const { clearIcon, disabled, singleVal, range } = this
const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
return bool
} }
}, },
created() { created() {
...@@ -493,7 +497,7 @@ ...@@ -493,7 +497,7 @@
} }
} }
}, 20) }, 50)
}, },
close() { close() {
...@@ -685,9 +689,9 @@ ...@@ -685,9 +689,9 @@
this.tempSingleDate = '' this.tempSingleDate = ''
this.time = '' this.time = ''
if (this.isPhone) { if (this.isPhone) {
this.$refs.mobile.clearCalender() this.$refs.mobile && this.$refs.mobile.clearCalender()
} else { } else {
this.$refs.pcSingle.clearCalender() this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
} }
if (needEmit) { if (needEmit) {
this.formItem && this.formItem.setValue('') this.formItem && this.formItem.setValue('')
...@@ -698,16 +702,16 @@ ...@@ -698,16 +702,16 @@
} else { } else {
this.range.startDate = '' this.range.startDate = ''
this.range.endDate = '' this.range.endDate = ''
this.tempRange.startDate= '' this.tempRange.startDate = ''
this.tempRange.startTime= '' this.tempRange.startTime = ''
this.tempRange.endDate= '' this.tempRange.endDate = ''
this.tempRange.endTime= '' this.tempRange.endTime = ''
if (this.isPhone) { if (this.isPhone) {
this.$refs.mobile.clearCalender() this.$refs.mobile && this.$refs.mobile.clearCalender()
} else { } else {
this.$refs.left.clearCalender() this.$refs.left && this.$refs.left.clearCalender()
this.$refs.right.clearCalender() this.$refs.right && this.$refs.right.clearCalender()
this.$refs.right.next() this.$refs.right && this.$refs.right.next()
} }
if (needEmit) { if (needEmit) {
this.formItem && this.formItem.setValue([]) this.formItem && this.formItem.setValue([])
...@@ -728,7 +732,8 @@ ...@@ -728,7 +732,8 @@
const minute = defVal.getMinutes() const minute = defVal.getMinutes()
const second = defVal.getSeconds() const second = defVal.getSeconds()
const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day) const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this.lessTen(second))) const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
.lessTen(second)))
return { return {
defDate, defDate,
defTime defTime
...@@ -782,12 +787,11 @@ ...@@ -782,12 +787,11 @@
.uni-date-editor--x .uni-date__icon-clear { .uni-date-editor--x .uni-date__icon-clear {
position: absolute; position: absolute;
top: 5px; top: 0;
right: 0; right: 0;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid transparent; border: 9px solid transparent;
margin-right: 6px;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
...@@ -846,8 +850,8 @@ ...@@ -846,8 +850,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 999; z-index: 999;
border: 1px solid #e4e7ed; border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
} }
...@@ -857,8 +861,8 @@ ...@@ -857,8 +861,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 999; z-index: 999;
border: 1px solid #e4e7ed; border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
} }
...@@ -899,7 +903,7 @@ ...@@ -899,7 +903,7 @@
border-top-color: #F1F1F1; border-top-color: #F1F1F1;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
background-color: #fff; /* background-color: #fff; */
line-height: 40px; line-height: 40px;
text-align: right; text-align: right;
color: #666; color: #666;
...@@ -917,7 +921,7 @@ ...@@ -917,7 +921,7 @@
} }
.uni-date-changed { .uni-date-changed {
background-color: #fff; /* background-color: #fff; */
text-align: center; text-align: center;
color: #333; color: #333;
border-bottom-color: #F1F1F1; border-bottom-color: #F1F1F1;
...@@ -946,7 +950,32 @@ ...@@ -946,7 +950,32 @@
margin-right: 50px; margin-right: 50px;
} }
.uni-date_calendar-pc { /* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
padding: 0 6px; .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> </style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
浏览文件 @ 6f6e3846
import CALENDAR from './calendar.js'
class Calendar { class Calendar {
constructor({ constructor({
date, date,
...@@ -112,7 +110,6 @@ class Calendar { ...@@ -112,7 +110,6 @@ class Calendar {
dateArr.push({ dateArr.push({
date: beforeDate, date: beforeDate,
month: full.month - 1, month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true disable: true
}) })
} }
...@@ -170,10 +167,9 @@ class Calendar { ...@@ -170,10 +167,9 @@ class Calendar {
year: full.year, year: full.year,
date: i, date: i,
multiple: this.range ? checked : false, multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate), beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate), afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
month: full.month, month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter), disable: !(disableBefore && disableAfter),
isDay, isDay,
userChecked: false userChecked: false
...@@ -195,7 +191,6 @@ class Calendar { ...@@ -195,7 +191,6 @@ class Calendar {
dateArr.push({ dateArr.push({
date: i, date: i,
month: Number(full.month) + 1, month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true disable: true
}) })
} }
...@@ -244,6 +239,25 @@ class Calendar { ...@@ -244,6 +239,25 @@ class Calendar {
} }
} }
/**
* 比较真实起始日期
*/
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 { ...@@ -266,19 +280,6 @@ class Calendar {
} }
return arr return arr
} }
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/** /**
* 获取多选状态 * 获取多选状态
...@@ -288,7 +289,6 @@ class Calendar { ...@@ -288,7 +289,6 @@ class Calendar {
before, before,
after after
} = this.multipleStatus } = this.multipleStatus
if (!this.range) return if (!this.range) return
if (before && after) { if (before && after) {
if (!this.lastHover) { if (!this.lastHover) {
...@@ -301,9 +301,9 @@ class Calendar { ...@@ -301,9 +301,9 @@ class Calendar {
this.multipleStatus.fulldate = '' this.multipleStatus.fulldate = ''
this.lastHover = false this.lastHover = false
} else { } else {
this.lastHover = false
if (!before) { if (!before) {
this.multipleStatus.before = fullDate this.multipleStatus.before = fullDate
this.lastHover = false
} else { } else {
this.multipleStatus.after = fullDate this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
...@@ -313,6 +313,7 @@ class Calendar { ...@@ -313,6 +313,7 @@ class Calendar {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
.before); .before);
} }
this.lastHover = true
} }
} }
this._getWeek(fullDate) this._getWeek(fullDate)
......
uni_modules/uni-datetime-picker/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-datetime-picker", "id": "uni-datetime-picker",
"displayName": "uni-datetime-picker 日期选择器", "displayName": "uni-datetime-picker 日期选择器",
"version": "2.1.4", "version": "2.2.2",
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择", "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
"keywords": [ "keywords": [
"uni-datetime-picker", "uni-datetime-picker",
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
......
uni_modules/uni-datetime-picker/readme.md
浏览文件 @ 6f6e3846
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护` > `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
## DatetimePicker 时间选择器 ## DatetimePicker 时间选择器
> **组件名：uni-datetime-picker** > **组件名：uni-datetime-picker**
> 代码块： `uDatetimePicker` > 代码块： `uDatetimePicker`
...@@ -9,151 +12,10 @@ ...@@ -9,151 +12,10 @@
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。 若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
**_点击 picker 默认值规则：_**
___点击 picker 默认值规则：___
- 若设置初始值 value, 会显示在 picker 显示框中 - 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中 - 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
### 安装方式 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
本组件符合[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 class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20" />
</view>
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
rangeSeparator="至" />
</view>
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: '2021-04-3',
datetimesingle: '2021-04-3',
range: ['2021-03-8', '2021-4-20'],
datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
}
},
watch: {
datetimesingle(newval) {
console.log('单选:', this.datetimesingle);
},
range(newval) {
console.log('范围选:', this.range);
},
datetimerange(newval) {
console.log('范围选:', this.datetimerange);
}
},
mounted() {
setTimeout(() => {
this.datetimesingle = '2021-5-1'
this.single = '2021-5-1'
},1000)
},
methods:{
change(e) {
this.single = e
console.log('-change事件:', e);
}
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean |false | |是否不可选择 |
|clear-icon |Boolean |true | |是否显示清除按钮 |
|hide-second |Boolean |false | |是否显示秒，只显示时分 |
### DatetimePicker Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 |单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
|maskClick|点击遮罩层触发 |- |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|close|关闭弹出层 |-|
|clear|清除上次选中的状态和值|-|
###
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
uni_modules/uni-drawer/changelog.md
浏览文件 @ 6f6e3846
## 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） ## 1.1.1（2021-07-30）
- 优化 vue3下事件警告的问题 - 优化 vue3下事件警告的问题
## 1.1.0（2021-07-13） ## 1.1.0（2021-07-13）
......
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
浏览文件 @ 6f6e3846
...@@ -106,6 +106,7 @@ ...@@ -106,6 +106,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
// 抽屉宽度 // 抽屉宽度
$drawer-width: 220px; $drawer-width: 220px;
...@@ -169,7 +170,7 @@ ...@@ -169,7 +170,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: $uni-bg-color-mask; background-color: $uni-mask;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
......
uni_modules/uni-drawer/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-drawer", "id": "uni-drawer",
"displayName": "uni-drawer 抽屉", "displayName": "uni-drawer 抽屉",
"version": "1.1.1", "version": "1.2.1",
"description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。", "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -76,6 +76,10 @@ ...@@ -76,6 +76,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-drawer/readme.md
浏览文件 @ 6f6e3846
...@@ -4,83 +4,7 @@ ...@@ -4,83 +4,7 @@
> **组件名：uni-drawer** > **组件名：uni-drawer**
> 代码块： `uDrawer` > 代码块： `uDrawer`
抽屉侧滑菜单。 抽屉侧滑菜单。
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - `width` 属性仅在 `vue` 页面生效，`nvue` 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码 \ No newline at end of file
### 安装方式
本组件符合[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
uni_modules/uni-easyinput/changelog.md
浏览文件 @ 6f6e3846
## 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-easyinput](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
## 0.1.4（2021-08-20） ## 0.1.4（2021-08-20）
- 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug - 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
## 0.1.3（2021-08-11） ## 0.1.3（2021-08-11）
......
uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#dd524d':styles.color}"> <view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#e43d33':styles.color}">
<view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}" <view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}"
:style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}"> :style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}">
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons> <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons>
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}" <textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}"
:name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class"
:maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus"
@confirm="onConfirm"></textarea> @confirm="onConfirm"></textarea>
<input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{ <input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
'padding-left':prefixIcon?'':'10px' 'padding-left':prefixIcon?'':'10px'
}" }"
:name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder"
:placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus"
@blur="onBlur" @input="onInput" @confirm="onConfirm" /> @blur="onBlur" @input="onInput" @confirm="onConfirm" />
<template v-if="type === 'password' && passwordIcon" > <template v-if="type === 'password' && passwordIcon" >
<uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'" <uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'"
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
default () { default () {
return { return {
color: '#333', color: '#333',
disableColor: '#eee', disableColor: '#F7F6F6',
borderColor: '#e5e5e5' borderColor: '#e5e5e5'
} }
} }
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
msg() { msg() {
return this.errorMessage || this.errMsg; return this.errorMessage || this.errMsg;
}, },
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值 // 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
inputMaxlength() { inputMaxlength() {
return Number(this.maxlength); return Number(this.maxlength);
}, },
...@@ -223,10 +223,7 @@ ...@@ -223,10 +223,7 @@
} }
}, },
mounted() { mounted() {
// this.onInput = throttle(this.input, 500)
this.$nextTick(() => { this.$nextTick(() => {
// setTimeout(()=>{
// },1000)
this.focused = this.focus this.focused = this.focus
}) })
}, },
...@@ -277,14 +274,10 @@ ...@@ -277,14 +274,10 @@
}, },
onFocus(event) { onFocus(event) {
// this.focused = true;
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
let value = event.detail.value; let value = event.detail.value;
// setTimeout(() => {
// this.focused = false;
// }, 100);
this.$emit('blur', event); this.$emit('blur', event);
}, },
onConfirm(e) { onConfirm(e) {
...@@ -324,6 +317,8 @@ ...@@ -324,6 +317,8 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$uni-error: #e43d33;
$uni-border-1: #DCDFE6 !default;
.uni-easyinput { .uni-easyinput {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -357,7 +352,11 @@ ...@@ -357,7 +352,11 @@
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
} }
.uni-easyinput__placeholder-class {
color: #999;
font-size: 12px;
font-weight: 200;
}
.is-textarea { .is-textarea {
align-items: flex-start; align-items: flex-start;
} }
...@@ -402,25 +401,16 @@ ...@@ -402,25 +401,16 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: 1px solid $uni-border-color; border: 1px solid $uni-border-1;
border-radius: 4px; border-radius: 4px;
} }
.uni-easyinput__right {
// margin-left: 5px;
}
// 必填
.is-required {
color: $uni-color-error;
}
.uni-error-message { .uni-error-message {
position: absolute; position: absolute;
bottom: -17px; bottom: -17px;
left: 0; left: 0;
line-height: 12px; line-height: 12px;
color: $uni-color-error; color: $uni-error;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
} }
...@@ -432,9 +422,13 @@ ...@@ -432,9 +422,13 @@
} }
.is-input-error-border { .is-input-error-border {
border-color: $uni-color-error; border-color: $uni-error;
.uni-easyinput__placeholder-class {
color: mix(#fff, $uni-error, 50%);;
}
} }
.uni-easyinput--border { .uni-easyinput--border {
margin-bottom: 0; margin-bottom: 0;
padding: 10px 15px; padding: 10px 15px;
...@@ -456,6 +450,12 @@ ...@@ -456,6 +450,12 @@
} }
.is-disabled { .is-disabled {
background-color: #eee; border-color: red;
background-color: #F7F6F6;
color: #D5D5D5;
.uni-easyinput__placeholder-class {
color: #D5D5D5;
font-size: 12px;
}
} }
</style> </style>
uni_modules/uni-easyinput/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-easyinput", "id": "uni-easyinput",
"displayName": "uni-easyinput 增强输入框", "displayName": "uni-easyinput 增强输入框",
"version": "0.1.4", "version": "1.0.0",
"description": "Easyinput 组件是对原生input组件的增强", "description": "Easyinput 组件是对原生input组件的增强",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-easyinput/readme.md
浏览文件 @ 6f6e3846
...@@ -7,192 +7,5 @@ ...@@ -7,192 +7,5 @@
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能 easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
> **注意事项** #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 \ No newline at end of file
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 平台差异说明
暂不支持在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)
### 基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可
`clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容
```html
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 输入框带左右图标
设置 `prefixIcon` 属性来显示输入框的头部图标
设置 `suffixIcon` 属性来显示输入框的尾部图标
注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标
绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标
```html
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
```
### 输入框禁用
设置 `disable` 属性可以禁用输入框，此时输入框不可编辑
```html
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 密码框
设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态
```html
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
```
### 输入框聚焦
设置 `focus` 属性可以使输入框聚焦
如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效
```html
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本
设置 `type="textarea"` 时可输入多行文本
```html
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本自动高度
设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度
```html
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 取消边框
设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果
```html
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>
```
## API
### Easyinput Props
|属性名| 类型| 可选值|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value|String/ Number|-|-|输入内容|
|type|String|见 type Options|text|输入框的类型（默认text）|
|clearable|Boolean|-|true| 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容|
|autoHeight|Boolean|-|false| 是否自动增高输入区域，type为textarea时有效|
|placeholder|String |-| - | 输入框的提示文字|
|placeholderStyle|String| - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"|
|focus|Boolean|-|false|是否自动获得焦点|
|disabled|Boolean|-|false|是否不可输入|
|maxlength|Number|-|140|最大输入长度，设置为 -1 的时候不限制最大长度|
|confirmType|String|-|done|设置键盘右下角按钮的文字，仅在type="text"时生效|
|clearSize|Number|-|15|清除图标的大小，单位px|
|prefixIcon|String|-|-|输入框头部图标 |
|suffixIcon|String|-|-|输入框尾部图标|
|trim|Boolean/String|见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格|
|inputBorder|Boolean|-|true|是否显示input输入框的边框|
|styles|Object|-|-| 样式自定义|
|passwordIcon|Boolean|-| true | type=password 时，是否显示小眼睛图标|
#### Type Options
|属性名| 说明|
|:-:| :-:|
|text|文本输入键盘|
|textarea |多行文本输入键盘|
|password |密码输入键盘|
|number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
|idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
|digit|带小数点的数字键盘，仅支持微信、支付宝、百度、头条、QQ小程序 |
#### ConfirmType Options
平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
|属性名 | 说明|
|:-:| :-:|
|send|右下角按钮为“发送” |
|search |右下角按钮为“搜索” |
|next|右下角按钮为“下一个”|
|go|右下角按钮为“前往” |
|done|右下角按钮为“完成” |
#### Styles Options
|属性名| 默认值 |说明|
|:-:| :-:| :-:|
|color| #333| 输入文字颜色|
|disableColor |#eee| 输入框禁用背景色|
|borderColor |#e5e5e5 | 边框颜色|
#### Trim Options
传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值
|属性名|说明|
|:-:| :-:|
|both|去除两端空格|
|left|去除左侧空格|
|right|去除右侧空格|
|all|去除所有空格|
|none|不去除空格|
### Easyinput Events
|事件称名| 说明|返回值|
|:-:| :-:|:-:|
|@input|输入框内容发生变化时触发| -|
|@focus|输入框获得焦点时触发| -|
|@blur|输入框失去焦点时触发| -|
|@confirm|点击完成按钮时触发| -|
|@iconClick |点击图标时触发| prefix/suffix |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
\ No newline at end of file
uni_modules/uni-fab/changelog.md
浏览文件 @ 6f6e3846
## 1.2.2（2021-12-29）
- 更新 组件依赖
## 1.2.1（2021-11-19）
- 修复 阴影颜色不正确的bug
## 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-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
## 1.1.1（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.1.0（2021-07-30） ## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12） ## 1.0.7（2021-05-12）
......
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
浏览文件 @ 6f6e3846
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
'uni-fab--rightBottom': rightBottom, 'uni-fab--rightBottom': rightBottom,
'uni-fab--leftTop': leftTop, 'uni-fab--leftTop': leftTop,
'uni-fab--rightTop': rightTop 'uni-fab--rightTop': rightTop
}" }" class="uni-fab">
class="uni-fab">
<view :class="{ <view :class="{
'uni-fab__content--left': horizontal === 'left', 'uni-fab__content--left': horizontal === 'left',
'uni-fab__content--right': horizontal === 'right', 'uni-fab__content--right': horizontal === 'right',
...@@ -14,14 +13,15 @@ ...@@ -14,14 +13,15 @@
'uni-fab__content--flexDirectionStart': flexDirectionStart, 'uni-fab__content--flexDirectionStart': flexDirectionStart,
'uni-fab__content--flexDirectionEnd': flexDirectionEnd, 'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
'uni-fab__content--other-platform': !isAndroidNvue 'uni-fab__content--other-platform': !isAndroidNvue
}" }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
:style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content" class="uni-fab__content" elevation="5">
elevation="5">
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" <view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
@click="_onItemClick(index, item)"> class="uni-fab__item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" /> <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> mode="aspectFit" />
<text class="uni-fab__item-text"
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view> </view>
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
</view> </view>
...@@ -32,10 +32,11 @@ ...@@ -32,10 +32,11 @@
'uni-fab__circle--leftTop': leftTop, 'uni-fab__circle--leftTop': leftTop,
'uni-fab__circle--rightTop': rightTop, 'uni-fab__circle--rightTop': rightTop,
'uni-fab__content--other-platform': !isAndroidNvue 'uni-fab__content--other-platform': !isAndroidNvue
}" }" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick"> <uni-icons class="fab-circle-icon" type="plusempty" :color="styles.iconColor" size="32"
<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> :class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> <!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> -->
</view> </view>
</view> </view>
</template> </template>
...@@ -67,7 +68,7 @@ ...@@ -67,7 +68,7 @@
*/ */
export default { export default {
name: 'UniFab', name: 'UniFab',
emits:['fabClick','trigger'], emits: ['fabClick', 'trigger'],
props: { props: {
pattern: { pattern: {
type: Object, type: Object,
...@@ -111,16 +112,17 @@ ...@@ -111,16 +112,17 @@
color: '#3c3e49', color: '#3c3e49',
selectedColor: '#007AFF', selectedColor: '#007AFF',
backgroundColor: '#fff', backgroundColor: '#fff',
buttonColor: '#007AFF' buttonColor: '#007AFF',
iconColor: '#fff'
} }
} }
}, },
computed: { computed: {
contentWidth(e) { contentWidth(e) {
return (this.content.length + 1) * 55 + 10 + 'px' return (this.content.length + 1) * 55 + 15 + 'px'
}, },
contentWidthMin() { contentWidthMin() {
return 55 + 'px' return '55px'
}, },
// 动态计算宽度 // 动态计算宽度
boxWidth() { boxWidth() {
...@@ -159,9 +161,11 @@ ...@@ -159,9 +161,11 @@
} }
}, },
watch: { watch: {
pattern(newValue, oldValue) { pattern: {
//console.log(JSON.stringify(newValue)) handler(val, oldVal) {
this.styles = Object.assign({}, this.styles, newValue) this.styles = Object.assign({}, this.styles, val)
},
deep: true
} }
}, },
created() { created() {
...@@ -213,7 +217,9 @@ ...@@ -213,7 +217,9 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
.uni-fab { .uni-fab {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -222,6 +228,8 @@ ...@@ -222,6 +228,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; z-index: 10;
border-radius: 45px;
box-shadow: $uni-shadow-base;
} }
.uni-cursor-point { .uni-cursor-point {
...@@ -235,43 +243,43 @@ ...@@ -235,43 +243,43 @@
} }
.uni-fab--leftBottom { .uni-fab--leftBottom {
left: 5px; left: 15px;
bottom: 20px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(5px + var(--window-left)); left: calc(15px + var(--window-left));
bottom: calc(20px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--leftTop { .uni-fab--leftTop {
left: 5px; left: 15px;
top: 30px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(5px + var(--window-left)); left: calc(15px + var(--window-left));
top: calc(30px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--rightBottom { .uni-fab--rightBottom {
right: 5px; right: 15px;
bottom: 20px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(5px + var(--window-right)); right: calc(15px + var(--window-right));
bottom: calc(20px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--rightTop { .uni-fab--rightTop {
right: 5px; right: 15px;
top: 30px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(5px + var(--window-right)); right: calc(15px + var(--window-right));
top: calc(30px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab__circle { .uni-fab__circle {
...@@ -284,8 +292,9 @@ ...@@ -284,8 +292,9 @@
width: 55px; width: 55px;
height: 55px; height: 55px;
background-color: #3c3e49; background-color: #3c3e49;
border-radius: 55px; border-radius: 45px;
z-index: 11; z-index: 11;
// box-shadow: $uni-shadow-base;
} }
.uni-fab__circle--leftBottom { .uni-fab__circle--leftBottom {
...@@ -299,10 +308,10 @@ ...@@ -299,10 +308,10 @@
.uni-fab__circle--leftTop { .uni-fab__circle--leftTop {
left: 15px; left: 15px;
top: 40px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(15px + var(--window-left)); left: calc(15px + var(--window-left));
top: calc(40px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
} }
...@@ -317,10 +326,10 @@ ...@@ -317,10 +326,10 @@
.uni-fab__circle--rightTop { .uni-fab__circle--rightTop {
right: 15px; right: 15px;
top: 40px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(15px + var(--window-right)); right: calc(15px + var(--window-right));
top: calc(40px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
} }
...@@ -344,26 +353,42 @@ ...@@ -344,26 +353,42 @@
font-weight: bold; font-weight: bold;
} }
.fab-circle-v { // .fab-circle-v {
position: absolute; // position: absolute;
width: 3px; // width: 2px;
height: 31px; // height: 24px;
left: 26px; // left: 0;
top: 12px; // top: 0;
background-color: white; // right: 0;
transform: rotate(0deg); // bottom: 0;
transition: transform 0.3s; // /* #ifndef APP-NVUE */
} // margin: auto;
// /* #endif */
.fab-circle-h { // background-color: white;
position: absolute; // transform: rotate(0deg);
width: 31px; // transition: transform 0.3s;
height: 3px; // }
left: 12px;
top: 26px; // .fab-circle-h {
background-color: white; // position: absolute;
// width: 24px;
// height: 2px;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// /* #ifndef APP-NVUE */
// margin: auto;
// /* #endif */
// background-color: white;
// transform: rotate(0deg);
// transition: transform 0.3s;
// }
.fab-circle-icon {
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s; transition: transform 0.3s;
font-weight: 200;
} }
.uni-fab__plus--active { .uni-fab__plus--active {
...@@ -388,7 +413,7 @@ ...@@ -388,7 +413,7 @@
.uni-fab__content--other-platform { .uni-fab__content--other-platform {
border-width: 0px; border-width: 0px;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); box-shadow: $uni-shadow-base;
} }
.uni-fab__content--left { .uni-fab__content--left {
...@@ -432,14 +457,16 @@ ...@@ -432,14 +457,16 @@
} }
.uni-fab__item-image { .uni-fab__item-image {
width: 25px; width: 20px;
height: 25px; height: 20px;
margin-bottom: 3px; margin-bottom: 4px;
} }
.uni-fab__item-text { .uni-fab__item-text {
color: #FFFFFF; color: #FFFFFF;
font-size: 12px; font-size: 12px;
line-height: 12px;
margin-top: 2px;
} }
.uni-fab__item--first { .uni-fab__item--first {
......
uni_modules/uni-fab/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-fab", "id": "uni-fab",
"displayName": "uni-fab 悬浮按钮", "displayName": "uni-fab 悬浮按钮",
"version": "1.1.0", "version": "1.2.2",
"description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。", "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss","uni-icons"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -76,6 +76,10 @@ ...@@ -76,6 +76,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-fab/readme.md
浏览文件 @ 6f6e3846
## Fab 悬浮按钮 ## Fab 悬浮按钮
> **组件名：uni-fab** > **组件名：uni-fab**
> 代码块： `uFab` > 代码块： `uFab`
...@@ -7,85 +5,5 @@ ...@@ -7,85 +5,5 @@
点击可展开一个图形按钮菜单 点击可展开一个图形按钮菜单
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 不建议动态修改属性，可能会耗损部分性能。
> - 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
> - 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。
> - 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
### 基本用法
在 `template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| pattern | Object | - | 可选样式配置项 |
| horizontal| String | 'left' | 水平对齐方式。`left`:左对齐，`right`：右对齐 |
| vertical | String | 'bottom' | 垂直对齐方式。`bottom`:下对齐，`top`：上对齐 |
| direction | String | 'horizontal' | 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 |
| popMenu | Boolean | true | 是否使用弹出菜单 |
| content | Array | - | 展开菜单内容配置项 |
**pattern配置项：**
| 参数 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| color | String | #3c3e49 | 文字默认颜色 |
| selectedColor | String | #007AFF | 文字选中时的颜色 |
| backgroundColor | String | #ffffff | 背景色 |
| buttonColor | String | #3c3e49 | 按钮背景色 |
**content配置项：**
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |
| iconPath | String | 图片路径 |
| selectedIconPath | String | 选中后图片路径|
| text | String | 文字 |
| active | Boolean | 是否选中当前 |
### Fab Events
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: |
| @trigger | Function | 展开菜单点击事件，返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file
uni_modules/uni-fav/changelog.md
浏览文件 @ 6f6e3846
## 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-fav](https://uniapp.dcloud.io/component/uniui/uni-fav)
## 1.1.1（2021-08-24） ## 1.1.1（2021-08-24）
- 新增 支持国际化 - 新增 支持国际化
## 1.1.0（2021-07-13） ## 1.1.0（2021-07-13）
......
uni_modules/uni-fav/components/uni-fav/uni-fav.vue
浏览文件 @ 6f6e3846
...@@ -151,6 +151,6 @@ ...@@ -151,6 +151,6 @@
line-height: $fav-height; line-height: $fav-height;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: $uni-font-size-base; font-size: 12px;
} }
</style> </style>
uni_modules/uni-fav/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-fav", "id": "uni-fav",
"displayName": "uni-fav 收藏按钮", "displayName": "uni-fav 收藏按钮",
"version": "1.1.1", "version": "1.2.0",
"description": " Fav 收藏组件，可自定义颜色、大小。", "description": " Fav 收藏组件，可自定义颜色、大小。",
"keywords": [ "keywords": [
"fav", "fav",
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -80,7 +81,7 @@ ...@@ -80,7 +81,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-fav/readme.md
浏览文件 @ 6f6e3846
...@@ -4,47 +4,7 @@ ...@@ -4,47 +4,7 @@
> **组件名：uni-fav** > **组件名：uni-fav**
> 代码块： `uFav` > 代码块： `uFav`
用于收藏功能，可点击切换选中、不选中的状态。 用于收藏功能，可点击切换选中、不选中的状态。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fav)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<uni-fav :checked="checked" @click="onClick"/>
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
```
## API
### Fav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|star |Boolean|true |按钮是否带星星 |
|bgColor |String |#eeeeee |未收藏时的背景色 |
|bgColorChecked |String |#007aff |已收藏时的背景色 |
|fgColor |String |#666666 |未收藏时的文字颜色 |
|fgColorChecked |String |#FFFFFF |已收藏时的文字颜色 |
|circle |Boolean|false |是否为圆角 |
|checked |Boolean|false |是否为已收藏 |
|contentText |Object |```{contentDefault: '收藏',contentFav: '已收藏'}```|收藏按钮文字 |
### Fav Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击 fav按钮 触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file
uni_modules/uni-feedback/changelog.md
浏览文件 @ 6f6e3846
## 1.0.4（2021-09-26）
为了数据安全，`opendb-feedback`表的`permission`中`delete`，`update`的值默认为`false`
## 1.0.3（2021-08-26） ## 1.0.3（2021-08-26）
删除多余的云函数test2 删除多余的云函数test2
\ No newline at end of file
uni_modules/uni-feedback/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-feedback", "id": "uni-feedback",
"displayName": "问题反馈用户端页面模板", "displayName": "问题反馈页面模板",
"version": "1.0.3", "version": "1.0.4",
"description": "问题反馈用户端页面模板，方便开发者快速搭建问题反馈界面", "description": "问题反馈页面模板，方便开发者快速搭建问题反馈界面",
"keywords": [ "keywords": [
"问题反馈用户端页面模板" "问题反馈页面模板"
], ],
"repository": "", "repository": "",
"engines": { "engines": {
......
uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback.vue
浏览文件 @ 6f6e3846
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
import { import {
validator validator
} from '../../js_sdk/validator/opendb-feedback.js'; } from '../../js_sdk/validator/opendb-feedback.js';
console.log(validator);
const db = uniCloud.database(); const db = uniCloud.database();
const dbCollectionName = 'opendb-feedback'; const dbCollectionName = 'opendb-feedback';
......
uni_modules/uni-feedback/readme.md
浏览文件 @ 6f6e3846
这是一个问题反馈客户端插件，admin端插件：[https://ext.dcloud.net.cn/plugin?id=4992](https://ext.dcloud.net.cn/plugin?id=4992) 这是一个问题反馈客户端插件，admin端插件：[https://ext.dcloud.net.cn/plugin?id=4992](https://ext.dcloud.net.cn/plugin?id=4992)
> 参考案例 [uni-starter](https://ext.dcloud.net.cn/plugin?id=5057)
\ No newline at end of file
uni_modules/uni-file-picker/changelog.md
浏览文件 @ 6f6e3846
## 1.0.1（2021-11-23）
- 修复 参数为对象的情况下，url在某些情况显示错误的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-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
## 0.2.16（2021-11-08）
- 修复 传入空对象 ，显示错误的Bug
## 0.2.15（2021-08-30）
- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
## 0.2.14（2021-08-23） ## 0.2.14（2021-08-23）
- 新增 参数中返回 fileID 字段 - 新增 参数中返回 fileID 字段
## 0.2.13（2021-08-23） ## 0.2.13（2021-08-23）
......
uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue
浏览文件 @ 6f6e3846
...@@ -278,7 +278,6 @@ ...@@ -278,7 +278,6 @@
files.push(Object.assign({}, v)) files.push(Object.assign({}, v))
} }
}) })
this.uploadFiles(files) this.uploadFiles(files)
}, },
async setValue(newVal, oldVal) { async setValue(newVal, oldVal) {
...@@ -294,7 +293,7 @@ ...@@ -294,7 +293,7 @@
v.fileID = url v.fileID = url
v.url = await this.getTempFileURL(url) v.url = await this.getTempFileURL(url)
} }
v.path = v.url if(v.url) v.path = v.url
return v return v
} }
if (this.returnType === 'object') { if (this.returnType === 'object') {
...@@ -542,8 +541,7 @@ ...@@ -542,8 +541,7 @@
let data = [] let data = []
if (this.returnType === 'object') { if (this.returnType === 'object') {
data = this.backObject(this.files)[0] data = this.backObject(this.files)[0]
this.localValue = {} this.localValue = data?data:null
Object.assign(this.localValue, data)
} else { } else {
data = this.backObject(this.files) data = this.backObject(this.files)
if (!this.localValue) { if (!this.localValue) {
......
uni_modules/uni-forms/changelog.md
浏览文件 @ 6f6e3846
## 1.3.2（2021-12-09）
-
## 1.3.1（2021-11-19）
- 修复 label 插槽不生效的bug
## 1.3.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-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
## 1.2.7（2021-08-13） ## 1.2.7（2021-08-13）
- 修复 没有添加校验规则的字段依然报错的Bug - 修复 没有添加校验规则的字段依然报错的Bug
## 1.2.6（2021-08-11） ## 1.2.6（2021-08-11）
......
uni_modules/uni-forms/components/uni-forms/uni-forms.vue
浏览文件 @ 6f6e3846
...@@ -459,7 +459,7 @@ ...@@ -459,7 +459,7 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-forms { .uni-forms {
// overflow: hidden; // overflow: hidden;
// padding: 10px 15px; // padding: 10px 15px;
......
uni_modules/uni-forms/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-forms/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-goods-nav/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-grid/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-grid/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-grid/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-group/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-group/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-group/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-icons/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-icons/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-id-cf/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-id-cf/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-link/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-link/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-link/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-list/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-list/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-load-more/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-nav-bar/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-popup/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-popup/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-rate/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-rate/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-rate/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-row/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-row/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-row/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-scss/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-scss/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-steps/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-steps/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-steps/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-table/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-table/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-table/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-tag/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-tag/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-tag/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-title/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-title/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-title/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-ui/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-ui/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-ui/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-upgrade-center-app/images/bg_top.png 0 → 100644
浏览文件 @ 6f6e3846
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或