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"
...@@ -132,7 +132,8 @@ ...@@ -132,7 +132,8 @@
onReady() { onReady() {
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.1.6（2021-09-22） ## 1.2.0（2021-11-19）
- 修复 在字节小程序上样式不生效的 bug - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.1.5（2021-07-30） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) ## 1.1.7（2021-11-08）
## 1.1.4（2021-07-29） - 优化 升级ui
- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性 - 修改 size 属性默认值调整为 small
## 1.1.3（2021-06-24） - 修改 type 属性，默认值调整为 error，info 替换 default
- 优化 示例项目 ## 1.1.6（2021-09-22）
## 1.1.1（2021-05-12） - 修复 在字节小程序上样式不生效的 bug
- 新增 组件示例地址 ## 1.1.5（2021-07-30）
## 1.1.0（2021-05-12） - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 新增 uni-badge 的 absolute 属性，支持定位 ## 1.1.4（2021-07-29）
- 新增 uni-badge 的 offset 属性，支持定位偏移 - 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点 ## 1.1.3（2021-06-24）
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+ - 优化 示例项目
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式 ## 1.1.1（2021-05-12）
## 1.0.7（2021-05-07） - 新增 组件示例地址
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug ## 1.1.0（2021-05-12）
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug - 新增 uni-badge 的 absolute 属性，支持定位
- 新增 uni-badge 属性 custom-style， 支持自定义样式 - 新增 uni-badge 的 offset 属性，支持定位偏移
## 1.0.6（2021-02-04） - 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
- 调整为uni_modules目录规范 - 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
## 1.0.7（2021-05-07）
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
- 新增 uni-badge 属性 custom-style， 支持自定义样式
## 1.0.6（2021-02-04）
- 调整为uni_modules目录规范
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,
...@@ -136,10 +142,14 @@ ...@@ -136,10 +142,14 @@
height: '10px', height: '10px',
borderRadius: '10px' borderRadius: '10px'
} }
}, },
displayValue() { displayValue() {
const { isDot, text, maxNum } = this const {
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text) isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
} }
}, },
methods: { methods: {
...@@ -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": [
"", "",
"badge", "badge",
"uni-ui", "uni-ui",
"uniui", "uniui",
"数字角标", "数字角标",
"徽章" "徽章"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"前端组件", "前端组件",
"通用组件" "通用组件"
], ],
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
"sourcecode": { "sourcecode": {
"price": "0.00" "price": "0.00"
} }
}, },
"contact": { "contact": {
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "无", "ads": "无",
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": [],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "y",
"aliyun": "y" "aliyun": "y"
}, },
"client": { "client": {
"App": { "App": {
"app-vue": "y", "app-vue": "y",
"app-nvue": "y" "app-nvue": "y"
}, },
"H5-mobile": { "H5-mobile": {
"Safari": "y", "Safari": "y",
"Android Browser": "y", "Android Browser": "y",
"微信浏览器(Android)": "y", "微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y" "QQ浏览器(Android)": "y"
}, },
"H5-pc": { "H5-pc": {
"Chrome": "y", "Chrome": "y",
"IE": "y", "IE": "y",
"Edge": "y", "Edge": "y",
"Firefox": "y", "Firefox": "y",
"Safari": "y" "Safari": "y"
}, },
"小程序": { "小程序": {
"微信": "y", "微信": "y",
"阿里": "y", "阿里": "y",
"百度": "y", "百度": "y",
"字节跳动": "y", "字节跳动": "y",
"QQ": "y" "QQ": "y"
}, },
"快应用": { "快应用": {
"华为": "y", "华为": "y",
"联盟": "y" "联盟": "y"
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "y" "vue3": "y"
} }
} }
} }
} }
} }
\ No newline at end of file
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）
- 组件兼容 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.1.8（2021-07-01） ## 1.1.8（2021-07-01）
- 优化 图文卡片无图片加载时，提供占位图标 - 优化 图文卡片无图片加载时，提供占位图标
- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持） - 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
- 修复 thumbnail 不存在仍然占位的 bug - 修复 thumbnail 不存在仍然占位的 bug
## 1.1.7（2021-05-12） ## 1.1.7（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.1.6（2021-02-04） ## 1.1.6（2021-02-04）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
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>
<text class="uni-card__header-title-text">{{ title }}</text>
<text v-if="extra" class="uni-card__header-extra-text">{{ extra }}</text>
</slot>
</view> </view>
</view> </slot>
<!-- 标题 --> <slot name="title">
<view v-if="mode === 'title'" @click.stop="onClick" class="uni-card__head-padding"> <view v-if="title || extra" class="uni-card__header">
<view class="uni-card__title uni-border-bottom"> <!-- 卡片标题 -->
<slot name="header"> <view class="uni-card__header-box" @click="onClick('title')">
<view class="uni-card__title-box"> <view v-if="thumbnail" class="uni-card__header-avatar">
<view v-if="thumbnail" class="uni-card__title-header"> <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
<image class="uni-card__title-header-image" :src="thumbnail" mode="scaleToFill" />
</view>
<view class="uni-card__title-content">
<text class="uni-card__title-content-title uni-ellipsis">{{ title }}</text>
<text class="uni-card__title-content-extra uni-ellipsis">{{ subTitle }}</text>
</view>
</view> </view>
<view v-if="extra"> <view class="uni-card__header-content">
<text class="uni-card__header-extra-text">{{ extra }}</text> <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>
</slot> </view>
<view class="uni-card__header-extra" @click="onClick('extra')">
<text class="uni-card__header-extra-text">{{ extra }}</text>
</view>
</view> </view>
</slot>
<!-- 卡片内容 -->
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
<slot></slot>
</view> </view>
<!-- 图文 --> <view class="uni-card__actions" @click="onClick('actions')">
<view v-if="mode === 'style'" class="uni-card__thumbnailimage" @click.stop="onClick"> <slot name="actions"></slot>
<view class="uni-card__thumbnailimage-box">
<image v-if="thumbnail" class="uni-card__thumbnailimage-image" :src="thumbnail" mode="aspectFill" />
<uni-icons v-if="!thumbnail" type="image" size="30" color="#999" />
</view>
<view v-if="title" class="uni-card__thumbnailimage-title">
<text class="uni-card__thumbnailimage-title-text">{{ title }}</text>
</view>
</view>
<!-- 内容 -->
<view class="uni-card__content uni-card__content--pd" @click.stop="onClick">
<view v-if="mode === 'style' && extra" class=""><text class="uni-card__content-extra">{{ extra }}</text>
</view>
<slot />
</view>
<!-- 底部 -->
<view v-if="note" class="uni-card__footer uni-border-top">
<slot name="footer">
<text class="uni-card__footer-text">{{ note }}</text>
</slot>
</view> </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,300 +97,157 @@ ...@@ -111,300 +97,157 @@
}, },
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-card { $uni-border-3: #EBEEF5 !default;
/* #ifndef APP-NVUE */ $uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
display: flex; $uni-main-color: #3a3a3a !default;
flex: 1; $uni-base-color: #6a6a6a !default;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); $uni-secondary-color: #909399 !default;
/* #endif */ $uni-spacing-sm: 8px !default;
margin: $uni-spacing-col-lg $uni-spacing-row-lg; $uni-border-color:$uni-border-3;
background-color: $uni-bg-color; $uni-shadow: $uni-shadow-base;
position: relative; $uni-card-title: 15px;
flex-direction: column; $uni-cart-title-color:$uni-main-color;
border-radius: 5px; $uni-card-subtitle: 12px;
overflow: hidden; $uni-cart-subtitle-color:$uni-secondary-color;
/* #ifdef H5 */ $uni-card-spacing: 10px;
cursor: pointer; $uni-card-content-color: $uni-base-color;
/* #endif */
}
.uni-card {
.uni-border { margin: $uni-card-spacing;
position: relative; padding: 0 $uni-spacing-sm;
/* #ifdef APP-NVUE */ border-radius: 4px;
border-color: $uni-border-color;
border-style: solid;
border-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border: 1px solid $uni-border-color;
border-radius: 10px;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-bottom {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-bottom:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-bottom: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
z-index: 1;
}
/* #ifndef APP-NVUE */
.uni-border-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
border-top: 1px solid $uni-border-color;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
z-index: -1;
}
/* #endif */
.uni-card__thumbnailimage {
position: relative;
/* #ifndef APP-NVUE */
// display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
height: 150px;
background-color: #F1F1F1;
overflow: hidden;
}
.uni-card__thumbnailimage-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
height: 150px;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
}
.uni-card__thumbnailimage-image {
flex: 1;
}
.uni-card__thumbnailimage-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
bottom: 0;
left: 0;
right: 0;
flex-direction: row;
padding: $uni-spacing-col-base $uni-spacing-col-lg;
background-color: $uni-bg-color-mask;
}
.uni-card__thumbnailimage-title-text {
flex: 1;
font-size: $uni-font-size-base;
color: #fff;
}
.uni-card__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 10px;
}
.uni-card__title-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__title-header {
width: 40px;
height: 40px;
overflow: hidden; overflow: hidden;
border-radius: 5px; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
padding-right: 10px; background-color: #fff;
}
.uni-card__title-header-image {
width: 40px;
height: 40px;
}
.uni-card__title-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1; flex: 1;
height: 40px;
overflow: hidden;
}
.uni-card__title-content-title {
font-size: $uni-font-size-base;
line-height: 22px;
}
.uni-card__title-content-extra {
font-size: $uni-font-size-sm;
line-height: 27px;
color: $uni-text-color-grey;
}
.uni-card__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
padding: $uni-spacing-col-lg;
align-items: center;
}
.uni-card__header-title { .uni-card__cover {
/* #ifndef APP-NVUE */ position: relative;
display: flex; margin-top: $uni-card-spacing;
/* #endif */ flex-direction: row;
flex-direction: row; overflow: hidden;
margin-right: $uni-spacing-col-base; border-radius: 4px;
justify-content: flex-start; .uni-card__cover-image {
align-items: center; flex: 1;
} // width: 100%;
/* #ifndef APP-PLUS */
.uni-card__header-title-text { vertical-align: middle;
font-size: $uni-font-size-lg; /* #endif */
flex: 1; }
color: #333; }
}
.uni-card__header-extra-img { .uni-card__header {
height: $uni-img-size-sm; display: flex;
width: $uni-img-size-sm; border-bottom: 1px $uni-border-color solid;
margin-right: $uni-spacing-col-base; flex-direction: row;
} align-items: center;
padding: $uni-card-spacing;
overflow: hidden;
.uni-card__header-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__header-extra-text { .uni-card__header-avatar {
flex: 1; width: 40px;
margin-left: $uni-spacing-col-base; height: 40px;
font-size: $uni-font-size-sm; overflow: hidden;
text-align: right; border-radius: 5px;
color: $uni-text-color-grey; margin-right: $uni-card-spacing;
} .uni-card__header-avatar-image {
flex: 1;
width: 40px;
height: 40px;
}
}
.uni-card__content { .uni-card__header-content {
color: $uni-text-color; /* #ifndef APP-NVUE */
} display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1;
// height: 40px;
overflow: hidden;
.uni-card__header-content-title {
font-size: $uni-card-title;
color: $uni-cart-title-color;
// line-height: 22px;
}
.uni-card__header-content-subtitle {
font-size: $uni-card-subtitle;
margin-top: 5px;
color: $uni-cart-subtitle-color;
}
}
.uni-card__content--pd { .uni-card__header-extra {
padding: $uni-spacing-col-lg; line-height: 12px;
}
.uni-card__content-extra { .uni-card__header-extra-text {
font-size: $uni-font-size-base; font-size: 12px;
padding-bottom: 10px; color: $uni-cart-subtitle-color;
color: $uni-text-color-grey; }
} }
}
.uni-card__footer { .uni-card__content {
justify-content: space-between; padding: $uni-card-spacing;
padding: $uni-spacing-col-lg; font-size: 14px;
} color: $uni-card-content-color;
line-height: 22px;
}
.uni-card__footer-text { .uni-card__actions {
color: $uni-text-color-grey; font-size: 12px;
font-size: $uni-font-size-sm; }
} }
.uni-card--border {
border: 1px solid $uni-border-color;
}
.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",
"uniui", "uniui",
"card", "card",
"", "",
"卡片" "卡片"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"前端组件", "前端组件",
"通用组件" "通用组件"
], ],
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
"sourcecode": { "sourcecode": {
"price": "0.00" "price": "0.00"
} }
}, },
"contact": { "contact": {
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "无", "ads": "无",
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"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-icons" "uni-icons",
], "uni-scss"
"encrypt": [], ],
"platforms": { "encrypt": [],
"cloud": { "platforms": {
"tcb": "y", "cloud": {
"aliyun": "y" "tcb": "y",
}, "aliyun": "y"
"client": { },
"App": { "client": {
"app-vue": "y", "App": {
"app-nvue": "y" "app-vue": "y",
}, "app-nvue": "y"
"H5-mobile": { },
"Safari": "y", "H5-mobile": {
"Android Browser": "y", "Safari": "y",
"微信浏览器(Android)": "y", "Android Browser": "y",
"QQ浏览器(Android)": "y" "微信浏览器(Android)": "y",
}, "QQ浏览器(Android)": "y"
"H5-pc": { },
"Chrome": "y", "H5-pc": {
"IE": "y", "Chrome": "y",
"Edge": "y", "IE": "y",
"Firefox": "y", "Edge": "y",
"Safari": "y" "Firefox": "y",
}, "Safari": "y"
"小程序": { },
"微信": "y", "小程序": {
"阿里": "y", "微信": "y",
"百度": "y", "阿里": "y",
"字节跳动": "y", "百度": "y",
"QQ": "y" "字节跳动": "y",
}, "QQ": "y"
"快应用": { },
"华为": "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）
- 新增 show-arrow 属性，控制是否显示右侧箭头 - 新增 show-arrow 属性，控制是否显示右侧箭头
## 1.3.1（2021-07-30） ## 1.3.1（2021-07-30）
- 优化 vue3下小程序事件警告的问题 - 优化 vue3下小程序事件警告的问题
## 1.3.0（2021-07-30） ## 1.3.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.2.2（2021-07-21） ## 1.2.2（2021-07-21）
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug - 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.1（2021-07-21） ## 1.2.1（2021-07-21）
- 优化 组件示例 - 优化 组件示例
## 1.2.0（2021-07-21） ## 1.2.0（2021-07-21）
- 新增 组件折叠动画 - 新增 组件折叠动画
- 新增 value\v-model 属性 ，动态修改面板折叠状态 - 新增 value\v-model 属性 ，动态修改面板折叠状态
- 新增 title 插槽 ，可定义面板标题 - 新增 title 插槽 ，可定义面板标题
- 新增 border 属性 ，显示隐藏面板内容分隔线 - 新增 border 属性 ，显示隐藏面板内容分隔线
- 新增 title-border 属性 ，显示隐藏面板标题分隔线 - 新增 title-border 属性 ，显示隐藏面板标题分隔线
- 修复 resize 方法失效的Bug - 修复 resize 方法失效的Bug
- 修复 change 事件返回参数不正确的Bug - 修复 change 事件返回参数不正确的Bug
- 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法 - 优化 H5、App 平台自动更具内容更新高度，无需调用 reszie() 方法
## 1.1.7（2021-05-12） ## 1.1.7（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.1.6（2021-02-05） ## 1.1.6（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件 - 优化 组件引用关系，通过uni_modules引用组件
## 1.1.5（2021-02-05） ## 1.1.5（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
\ No newline at end of file
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,31 +114,32 @@ ...@@ -115,31 +114,32 @@
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 },
// TODO vue2 // #ifndef VUE3
destroyed() { // TODO vue2
if (this.__isUnmounted) return destroyed() {
this.uninstall() if (this.__isUnmounted) return
}, this.uninstall()
},
// #endif // #endif
// #ifdef VUE3 // #ifdef VUE3
// TODO vue3 // TODO vue3
unmounted() { unmounted() {
this.__isUnmounted = true this.__isUnmounted = true
this.uninstall() this.uninstall()
}, },
// #endif // #endif
mounted() { mounted() {
if (!this.collapse) return if (!this.collapse) return
...@@ -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
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
} }
}, },
watch: { watch: {
dataValue(val) { dataValue(val) {
this.setOpen(val) this.setOpen(val)
} }
}, },
...@@ -59,14 +59,15 @@ ...@@ -59,14 +59,15 @@
this.childrens = [] this.childrens = []
this.names = [] this.names = []
}, },
mounted() { mounted() {
this.setOpen(this.dataValue) this.$nextTick(()=>{
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) {
...@@ -76,10 +77,10 @@ ...@@ -76,10 +77,10 @@
} }
vm.isOpen = true vm.isOpen = true
} }
} }
if (arr) { if (arr) {
val.forEach(v => { val.forEach(v => {
if (v === vm.nameSync) { if (v === vm.nameSync) {
if (this.accordion) { if (this.accordion) {
console.warn('accordion 属性为 true ,v-model 类型应该为 string') console.warn('accordion 属性为 true ,v-model 类型应该为 string')
return return
...@@ -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",
"折叠", "折叠",
"折叠面板", "折叠面板",
"手风琴" "手风琴"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": ""
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"前端组件", "前端组件",
"通用组件" "通用组件"
], ],
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
"sourcecode": { "sourcecode": {
"price": "0.00" "price": "0.00"
} }
}, },
"contact": { "contact": {
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "无", "ads": "无",
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"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-icons" "uni-scss",
], "uni-icons"
"encrypt": [], ],
"platforms": { "encrypt": [],
"cloud": { "platforms": {
"tcb": "y", "cloud": {
"aliyun": "y" "tcb": "y",
}, "aliyun": "y"
"client": { },
"App": { "client": {
"app-vue": "y", "App": {
"app-nvue": "y" "app-vue": "y",
}, "app-nvue": "y"
"H5-mobile": { },
"Safari": "y", "H5-mobile": {
"Android Browser": "y", "Safari": "y",
"微信浏览器(Android)": "y", "Android Browser": "y",
"QQ浏览器(Android)": "y" "微信浏览器(Android)": "y",
}, "QQ浏览器(Android)": "y"
"H5-pc": { },
"Chrome": "y", "H5-pc": {
"IE": "y", "Chrome": "y",
"Edge": "y", "IE": "y",
"Firefox": "y", "Edge": "y",
"Safari": "y" "Firefox": "y",
}, "Safari": "y"
"小程序": { },
"微信": "y", "小程序": {
"阿里": "y", "微信": "y",
"百度": "y", "阿里": "y",
"字节跳动": "y", "百度": "y",
"QQ": "y" "字节跳动": "y",
}, "QQ": "y"
"快应用": { },
"华为": "u", "快应用": {
"联盟": "u" "华为": "u",
}, "联盟": "u"
"Vue": { },
"vue2": "y", "Vue": {
"vue3": "u" "vue2": "y",
} "vue3": "y"
} }
} }
} }
} }
\ No newline at end of file }
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
## 0.1.0（2021-07-30） ## 1.0.1（2021-11-23）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 label、label-width 属性
## 1.0.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
## 0.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.6（2021-05-12） ## 0.0.6（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 0.0.5（2021-04-21） ## 0.0.5（2021-04-21）
......
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" />
<view class="uni-combox__selector" v-if="showSelector"> <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
<scroll-view scroll-y="true" class="uni-combox__selector-scroll"> </uni-icons>
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> </view>
<text>{{emptyTips}}</text> <view class="uni-combox__selector" v-if="showSelector">
</view> <view class="uni-popper__arrow"></view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)"> <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<text>{{item}}</text> <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
</view> <text>{{emptyTips}}</text>
</scroll-view> </view>
</view> <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
@click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view> </view>
</view> </view>
</template> </template>
...@@ -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
## Combox 组合框 ## Combox 组合框
> **组件名：uni-combox** > **组件名：uni-combox**
> 代码块： `uCombox` > 代码块： `uCombox`
组合框组件。 组合框组件。
### 平台兼容性说明 ### [查看文档](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>
import { import {
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,15 +113,38 @@ ...@@ -115,15 +113,38 @@
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) {
this.changeFlag() this.changeFlag()
}, },
hour(val) { hour(val) {
this.changeFlag() this.changeFlag()
}, },
minute(val) { minute(val) {
this.changeFlag() this.changeFlag()
}, },
second(val) { second(val) {
...@@ -193,13 +214,15 @@ ...@@ -193,13 +214,15 @@
this.d = day this.d = day
this.h = hour this.h = hour
this.i = minute this.i = minute
this.s = second this.s = second
}, },
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)
this.countDown() this.countDown()
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -210,8 +233,11 @@ ...@@ -210,8 +233,11 @@
} }
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)
this.startData(); this.startData();
...@@ -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; text-align: center;
/* #endif */ font-size: $font-size;
justify-content: center; }
align-items: center;
width: $countdown-width;
height: $countdown-height;
line-height: $countdown-height;
margin: 5rpx;
text-align: center;
font-size: $uni-font-size-sm;
} }
</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）
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题 - 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
## 0.2.3（2021-08-11） ## 0.2.3（2021-08-11）
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题 - 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
## 0.2.2（2021-07-30） ## 0.2.2（2021-07-30）
- 优化 在uni-forms组件，与label不对齐的问题 - 优化 在uni-forms组件，与label不对齐的问题
## 0.2.1（2021-07-27） ## 0.2.1（2021-07-27）
- 修复 单选默认值为0不能选中的Bug - 修复 单选默认值为0不能选中的Bug
## 0.2.0（2021-07-13） ## 0.2.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.1.11（2021-07-06） ## 0.1.11（2021-07-06）
- 优化 删除无用日志 - 优化 删除无用日志
## 0.1.10（2021-07-05） ## 0.1.10（2021-07-05）
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题 - 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9（2021-07-05） ## 0.1.9（2021-07-05）
- 修复 nvue 黑框样式问题 - 修复 nvue 黑框样式问题
## 0.1.8（2021-06-28） ## 0.1.8（2021-06-28）
- 修复 selectedTextColor 属性不生效的Bug - 修复 selectedTextColor 属性不生效的Bug
## 0.1.7（2021-06-02） ## 0.1.7（2021-06-02）
- 新增 map 属性，可以方便映射text/value属性 - 新增 map 属性，可以方便映射text/value属性
## 0.1.6（2021-05-26） ## 0.1.6（2021-05-26）
- 修复 不关联服务空间的情况下组件报错的Bug - 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5（2021-05-12） ## 0.1.5（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 0.1.4（2021-04-09） ## 0.1.4（2021-04-09）
- 修复 nvue 下无法选中的问题 - 修复 nvue 下无法选中的问题
## 0.1.3（2021-03-22） ## 0.1.3（2021-03-22）
- 新增 disabled属性 - 新增 disabled属性
## 0.1.2（2021-02-24） ## 0.1.2（2021-02-24）
- 优化 默认颜色显示 - 优化 默认颜色显示
## 0.1.1（2021-02-24） ## 0.1.1（2021-02-24）
- 新增 支持nvue - 新增 支持nvue
## 0.1.0（2021-02-18） ## 0.1.0（2021-02-18）
- “暂无数据”显示居中 - “暂无数据”显示居中
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",
"checkbox", "checkbox",
"单选", "单选",
"多选", "多选",
"单选多选" "单选多选"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "^3.1.1" "HBuilderX": "^3.1.1"
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"前端组件", "前端组件",
"通用组件" "通用组件"
], ],
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
"sourcecode": { "sourcecode": {
"price": "0.00" "price": "0.00"
} }
}, },
"contact": { "contact": {
"qq": "" "qq": ""
}, },
"declaration": { "declaration": {
"ads": "无", "ads": "无",
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"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": {
"tcb": "y", "tcb": "y",
"aliyun": "y" "aliyun": "y"
}, },
"client": { "client": {
"App": { "App": {
"app-vue": "y", "app-vue": "y",
"app-nvue": "y" "app-nvue": "y"
}, },
"H5-mobile": { "H5-mobile": {
"Safari": "y", "Safari": "y",
"Android Browser": "y", "Android Browser": "y",
"微信浏览器(Android)": "y", "微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y" "QQ浏览器(Android)": "y"
}, },
"H5-pc": { "H5-pc": {
"Chrome": "y", "Chrome": "y",
"IE": "y", "IE": "y",
"Edge": "y", "Edge": "y",
"Firefox": "y", "Firefox": "y",
"Safari": "y" "Safari": "y"
}, },
"小程序": { "小程序": {
"微信": "y", "微信": "y",
"阿里": "y", "阿里": "y",
"百度": "y", "百度": "y",
"字节跳动": "y", "字节跳动": "y",
"QQ": "y" "QQ": "y"
}, },
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
}, },
"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
## 0.4.9（2021-10-28） ## 1.0.1（2021-11-23）
- 修复 VUE2 v-model 概率无效的bug - 修复 由上个版本引发的map、v-model等属性不生效的bug
## 1.0.0（2021-11-19）
- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
## 0.4.9（2021-10-28）
- 修复 VUE2 v-model 概率无效的 bug
## 0.4.8（2021-10-27） ## 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>
...@@ -218,15 +219,15 @@ ...@@ -218,15 +219,15 @@
var isTree = dataList.findIndex((item) => { var isTree = dataList.findIndex((item) => {
return item.children return item.children
}) })
if (isTree > -1) { if (isTree > -1) {
let inputValue let inputValue
if (Array.isArray(value)) { if (Array.isArray(value)) {
inputValue = value[value.length - 1] inputValue = value[value.length - 1]
if (typeof inputValue === 'object' && inputValue.value) { if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value inputValue = inputValue.value
} }
} else { } else {
inputValue = value inputValue = value
} }
this.inputSelected = this._findNodePath(inputValue, this.localdata) this.inputSelected = this._findNodePath(inputValue, this.localdata)
return return
...@@ -264,7 +265,7 @@ ...@@ -264,7 +265,7 @@
} }
return result return result
}, },
_dispatchEvent(selected) { _dispatchEvent(selected) {
let item = {} let item = {}
if (selected.length) { if (selected.length) {
var value = new Array(selected.length) var value = new Array(selected.length)
...@@ -272,8 +273,8 @@ ...@@ -272,8 +273,8 @@
value[i] = selected[i].value value[i] = selected[i].value
} }
item = selected[selected.length - 1] item = selected[selected.length - 1]
} else { } else {
item.value = '' item.value = ''
} }
if (this.formItem) { if (this.formItem) {
this.formItem.setValue(item.value) this.formItem.setValue(item.value)
...@@ -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
...@@ -58,10 +58,10 @@ ...@@ -58,10 +58,10 @@
managedMode: { managedMode: {
type: Boolean, type: Boolean,
default: false default: false
}, },
ellipsis: { ellipsis: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
data() { data() {
...@@ -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 */
...@@ -330,4 +330,4 @@ ...@@ -330,4 +330,4 @@
/* #endif */ /* #endif */
transform: rotate(45deg); transform: rotate(45deg);
} }
</style> </style>
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",
...@@ -43,8 +43,9 @@ ...@@ -43,8 +43,9 @@
}, },
"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
## DataPicker 级联选择 ## DataPicker 级联选择
> **组件名：uni-data-picker** > **组件名：uni-data-picker**
> 代码块： `uDataPicker` > 代码块： `uDataPicker`
> 关联组件：`uni-data-pickerview`、`uni-load-more`。 > 关联组件：`uni-data-pickerview`、`uni-load-more`。
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。 `<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。 候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。 `<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。 `<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。 `<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。 在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
## 0.0.5（2021-07-08） ## 1.0.0（2021-11-19）
- 调整 默认时间不再是当前时间，而是显示'-'字符 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 0.0.4（2021-05-12） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
- 新增 组件示例地址 ## 0.0.5（2021-07-08）
## 0.0.3（2021-02-04） - 调整 默认时间不再是当前时间，而是显示'-'字符
- 调整为uni_modules目录规范 ## 0.0.4（2021-05-12）
- 修复 iOS 平台日期格式化出错的问题 - 新增 组件示例地址
## 0.0.3（2021-02-04）
- 调整为uni_modules目录规范
- 修复 iOS 平台日期格式化出错的问题
uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue
浏览文件 @ 6f6e3846
<template> <template>
<text>{{dateShow}}</text> <text>{{dateShow}}</text>
</template> </template>
<script> <script>
import {friendlyDate} from './date-format.js' import {friendlyDate} from './date-format.js'
/** /**
* Dateformat 日期格式化 * Dateformat 日期格式化
* @description 日期格式化组件 * @description 日期格式化组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279 * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳 * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
* @property {String} locale 格式化使用的语言 * @property {String} locale 格式化使用的语言
* @value zh 中文 * @value zh 中文
* @value en 英文 * @value en 英文
* @property {Array} threshold 应用不同类型格式化的阈值 * @property {Array} threshold 应用不同类型格式化的阈值
* @property {String} format 输出日期字符串时的格式 * @property {String} format 输出日期字符串时的格式
*/ */
export default { export default {
name: 'uniDateformat', name: 'uniDateformat',
props: { props: {
date: { date: {
type: [Object, String, Number], type: [Object, String, Number],
default () { default () {
return '-' return '-'
} }
}, },
locale: { locale: {
type: String, type: String,
default: 'zh', default: 'zh',
}, },
threshold: { threshold: {
type: Array, type: Array,
default () { default () {
return [0, 0] return [0, 0]
} }
}, },
format: { format: {
type: String, type: String,
default: 'yyyy/MM/dd hh:mm:ss' default: 'yyyy/MM/dd hh:mm:ss'
}, },
// refreshRate使用不当可能导致性能问题，谨慎使用 // refreshRate使用不当可能导致性能问题，谨慎使用
refreshRate: { refreshRate: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
} }
}, },
data() { data() {
return { return {
refreshMark: 0 refreshMark: 0
} }
}, },
computed: { computed: {
dateShow() { dateShow() {
this.refreshMark this.refreshMark
return friendlyDate(this.date, { return friendlyDate(this.date, {
locale: this.locale, locale: this.locale,
threshold: this.threshold, threshold: this.threshold,
format: this.format format: this.format
}) })
} }
}, },
watch: { watch: {
refreshRate: { refreshRate: {
handler() { handler() {
this.setAutoRefresh() this.setAutoRefresh()
}, },
immediate: true immediate: true
} }
}, },
methods: { methods: {
refresh() { refresh() {
this.refreshMark++ this.refreshMark++
}, },
setAutoRefresh() { setAutoRefresh() {
clearInterval(this.refreshInterval) clearInterval(this.refreshInterval)
if (this.refreshRate) { if (this.refreshRate) {
this.refreshInterval = setInterval(() => { this.refreshInterval = setInterval(() => {
this.refresh() this.refresh()
}, parseInt(this.refreshRate)) }, parseInt(this.refreshRate))
} }
} }
} }
} }
</script> </script>
<style> <style>
</style> </style>
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
### DateFormat 日期格式化 ### DateFormat 日期格式化
> **组件名：uni-dateformat** > **组件名：uni-dateformat**
> 代码块： `uDateformat` > 代码块： `uDateformat`
日期格式化组件。 日期格式化组件。
### 安装方式 ### [查看文档](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,17 +6,17 @@ ...@@ -6,17 +6,17 @@
'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,
'uni-calendar-item--multiple': weeks.multiple, 'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple, 'uni-calendar-item--after-checked':weeks.afterMultiple,
'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--disable .uni-calendar-item__weeks-box-text-disable {
color: #D1D1D1;
} }
.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text { .uni-calendar-item--isDay {
color: $uni-color-primary; position: absolute;
} top: 10px;
right: 17%;
.uni-calendar-item--isDay { background-color: #dd524d;
background-color: $uni-color-primary; width:6px;
opacity: 0.8; height: 6px;
color: #fff; 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;
color: #fff; }
opacity: 0.8;
.uni-calendar-item--checked .uni-calendar-item--checked-text {
color: #fff;
} }
.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 {
background-color: #409eff;
color: #fff !important;
// border-radius: 50%;
box-sizing: border-box;
border: 6px solid #f2f6fc;
} }
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
.uni-calendar-item--multiple .uni-calendar-item--after-checked { .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--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: #fff;
} }
.uni-calendar-item--before-checked-x { .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>
...@@ -187,10 +192,10 @@ ...@@ -187,10 +192,10 @@
checkHover: { checkHover: {
type: Boolean, type: Boolean,
default: true default: true
}, },
hideSecond: { hideSecond: {
type: [Boolean], type: [Boolean],
default: false default: false
}, },
pleStatus: { pleStatus: {
type: Object, type: Object,
...@@ -228,25 +233,25 @@ ...@@ -228,25 +233,25 @@
date: { date: {
immediate: true, immediate: true,
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (!this.range) { if (!this.range) {
this.tempSingleDate = newVal this.tempSingleDate = newVal
setTimeout(() => { setTimeout(() => {
this.init(newVal) this.init(newVal)
}, 100) }, 100)
} }
} }
}, },
defTime: { defTime: {
immediate: true, immediate: true,
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (!this.range) { if (!this.range) {
this.time = newVal this.time = newVal
} else { } else {
// console.log('-----', newVal); // console.log('-----', newVal);
this.timeRange.startTime = newVal.start this.timeRange.startTime = newVal.start
this.timeRange.endTime = newVal.end this.timeRange.endTime = newVal.end
} }
} }
}, },
startDate(val) { startDate(val) {
this.cale.resetSatrtDate(val) this.cale.resetSatrtDate(val)
...@@ -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
}, },
...@@ -411,8 +415,8 @@ ...@@ -411,8 +415,8 @@
} else { } else {
this.time = '' this.time = ''
this.tempSingleDate = '' this.tempSingleDate = ''
} }
this.calendar.fullDate = '' this.calendar.fullDate = ''
this.setDate() this.setDate()
}, },
...@@ -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/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
}) })
} }
...@@ -123,7 +120,7 @@ class Calendar { ...@@ -123,7 +120,7 @@ class Calendar {
*/ */
_currentMonthDys(dateData, full) { _currentMonthDys(dateData, full) {
let dateArr = [] let dateArr = []
let fullDate = this.date.fullDate let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) { for (let i = 1; i <= dateData; i++) {
let isinfo = false let isinfo = false
let nowDate = full.year + '-' + (full.month < 10 ? let nowDate = full.year + '-' + (full.month < 10 ?
...@@ -164,16 +161,15 @@ class Calendar { ...@@ -164,16 +161,15 @@ class Calendar {
if (multiplesStatus !== -1) { if (multiplesStatus !== -1) {
checked = true checked = true
} }
} }
let data = { let data = {
fullDate: nowDate, fullDate: nowDate,
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
}) })
} }
...@@ -243,7 +238,26 @@ class Calendar { ...@@ -243,7 +238,26 @@ class Calendar {
return false return false
} }
} }
/**
* 比较真实起始日期
*/
isLogicBefore(currentDay, before, after) {
let logicBefore = before
if (before && after) {
logicBefore = this.dateCompare(before, after) ? before : after
}
return this.dateEqual(logicBefore, currentDay)
}
isLogicAfter(currentDay, before, after) {
let logicAfter = after
if (before && after) {
logicAfter = this.dateCompare(before, after) ? after : before
}
return this.dateEqual(logicAfter, currentDay)
}
/** /**
* 获取日期范围内所有日期 * 获取日期范围内所有日期
...@@ -266,19 +280,6 @@ class Calendar { ...@@ -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)
}
/** /**
* 获取多选状态 * 获取多选状态
...@@ -287,8 +288,7 @@ class Calendar { ...@@ -287,8 +288,7 @@ class Calendar {
let { let {
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)) {
...@@ -312,7 +312,8 @@ class Calendar { ...@@ -312,7 +312,8 @@ class Calendar {
} else { } else {
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-drawer/changelog.md
浏览文件 @ 6f6e3846
## 1.1.1（2021-07-30） ## 1.2.1（2021-11-22）
- 优化 vue3下事件警告的问题 - 修复 vue3中个别scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
## 1.1.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.1.0（2021-07-13） ## 1.1.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)
## 1.0.7（2021-05-12） ## 1.0.7（2021-05-12）
......
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
浏览文件 @ 6f6e3846
...@@ -105,7 +105,8 @@ ...@@ -105,7 +105,8 @@
} }
</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/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fab/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fab/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fab/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fav/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fav/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-fav/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-feedback/readme.md
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-forms/changelog.md
浏览文件 @ 6f6e3846
此差异已折叠。
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-list/readme.md
浏览文件 @ 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-popup/readme.md
浏览文件 @ 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/index.scss
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-scss/package.json
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-scss/theme.scss
浏览文件 @ 6f6e3846
此差异已折叠。
uni_modules/uni-scss/variables.scss
浏览文件 @ 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.
先完成此消息的编辑！
想要评论请 注册 或