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 6062 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/uni-datetime-picker.vue
浏览文件 @ 6f6e3846
...@@ -5,16 +5,12 @@ ...@@ -5,16 +5,12 @@
<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled, <view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
'uni-date-x--border': border}"> 'uni-date-x--border': border}">
<view v-if="!isRange" class="uni-date-x uni-date-single"> <view v-if="!isRange" class="uni-date-x uni-date-single">
<view class="uni-date__icon-logo"> <uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
</view>
<input class="uni-date__x-input" type="text" v-model="singleVal" <input class="uni-date__x-input" type="text" v-model="singleVal"
:placeholder="singlePlaceholderText" :disabled="true" /> :placeholder="singlePlaceholderText" :disabled="true" />
</view> </view>
<view v-else class="uni-date-x uni-date-range"> <view v-else class="uni-date-x uni-date-range">
<view class="uni-date__icon-logo"> <uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
</view>
<input class="uni-date__x-input t-c" type="text" v-model="range.startDate" <input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
:placeholder="startPlaceholderText" :disabled="true" /> :placeholder="startPlaceholderText" :disabled="true" />
<slot> <slot>
...@@ -23,9 +19,8 @@ ...@@ -23,9 +19,8 @@
<input class="uni-date__x-input t-c" type="text" v-model="range.endDate" <input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
:placeholder="endPlaceholderText" :disabled="true" /> :placeholder="endPlaceholderText" :disabled="true" />
</view> </view>
<view v-show="clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))" <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
class="uni-date__icon-clear" @click.stop="clear"> <uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
<uni-icons type="clear" color="#e1e1e1" size="14"></uni-icons>
</view> </view>
</view> </view>
</slot> </slot>
...@@ -34,7 +29,8 @@ ...@@ -34,7 +29,8 @@
<view v-show="popup" class="uni-date-mask" @click="close"></view> <view v-show="popup" class="uni-date-mask" @click="close"></view>
<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container"> <view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
<view v-if="!isRange" class="uni-date-single--x" :style="popover"> <view v-if="!isRange" class="uni-date-single--x" :style="popover">
<view v-show="hasTime" class="uni-date-changed popup-x-header"> <view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="uni-date-changed popup-x-header">
<input class="uni-date__input t-c" type="text" v-model="tempSingleDate" <input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
:placeholder="selectDateText" /> :placeholder="selectDateText" />
<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate" <time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
...@@ -43,9 +39,9 @@ ...@@ -43,9 +39,9 @@
:disabled="!tempSingleDate" /> :disabled="!tempSingleDate" />
</time-picker> </time-picker>
</view> </view>
<calendar ref="pcSingle" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="pcSingle" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :date="defSingleDate"
@change="singleChange" /> @change="singleChange" style="padding: 0 8px;" />
<view v-if="hasTime" class="popup-x-footer"> <view v-if="hasTime" class="popup-x-footer">
<!-- <text class="">此刻</text> --> <!-- <text class="">此刻</text> -->
<text class="confirm" @click="confirmSingleChange">{{okText}}</text> <text class="confirm" @click="confirmSingleChange">{{okText}}</text>
...@@ -54,7 +50,8 @@ ...@@ -54,7 +50,8 @@
</view> </view>
<view v-else class="uni-date-range--x" :style="popover"> <view v-else class="uni-date-range--x" :style="popover">
<view v-show="hasTime" class="popup-x-header uni-date-changed"> <view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="popup-x-header uni-date-changed">
<view class="popup-x-header--datetime"> <view class="popup-x-header--datetime">
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate" <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
:placeholder="startDateText" /> :placeholder="startDateText" />
...@@ -77,14 +74,14 @@ ...@@ -77,14 +74,14 @@
</view> </view>
</view> </view>
<view class="popup-x-body"> <view class="popup-x-body">
<calendar ref="left" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="left" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
@change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale" @change="leftChange" :pleStatus="endMultipleStatus" @firstEnterCale="updateRightCale"
@monthSwitch="leftMonthSwitch" /> @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
<calendar ref="right" class="uni-date_calendar-pc" :showMonth="false" <calendar ref="right" :showMonth="false"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :range="true"
@change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale" @change="rightChange" :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
@monthSwitch="rightMonthSwitch" style="border-left: 1px solid #F1F1F1;" /> @monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
</view> </view>
<view v-if="hasTime" class="popup-x-footer"> <view v-if="hasTime" class="popup-x-footer">
<text class="" @click="clear">{{clearText}}</text> <text class="" @click="clear">{{clearText}}</text>
...@@ -92,7 +89,7 @@ ...@@ -92,7 +89,7 @@
</view> </view>
</view> </view>
</view> </view>
<calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime" <calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime" :start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false" :pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
:hideSecond="hideSecond" @confirm="mobileChange" /> :hideSecond="hideSecond" @confirm="mobileChange" />
...@@ -104,10 +101,10 @@ ...@@ -104,10 +101,10 @@
* @description 同时支持 PC 和移动端使用日历选择日期和日期范围 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
* @tutorial https://ext.dcloud.net.cn/plugin?id=3962 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
* @property {String} type 选择器类型 * @property {String} type 选择器类型
* @property {String|Array} value 绑定值 * @property {String|Number|Array|Date} value 绑定值
* @property {String} placeholder 单选择时的占位内容 * @property {String} placeholder 单选择时的占位内容
* @property {String} start 起始时间 * @property {String} start 起始时间
* @property {String} start 终止时间 * @property {String} end 终止时间
* @property {String} start-placeholder 范围选择时开始日期的占位内容 * @property {String} start-placeholder 范围选择时开始日期的占位内容
* @property {String} end-placeholder 范围选择时结束日期的占位内容 * @property {String} end-placeholder 范围选择时结束日期的占位内容
* @property {String} range-separator 选择范围时的分隔符 * @property {String} range-separator 选择范围时的分隔符
...@@ -115,6 +112,9 @@ ...@@ -115,6 +112,9 @@
* @property {Boolean} disabled = [true|false] 是否禁用 * @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用） * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
* @event {Function} change 确定日期时触发的事件 * @event {Function} change 确定日期时触发的事件
* @event {Function} show 打开弹出层
* @event {Function} close 关闭弹出层
* @event {Function} clear 清除上次选中的状态和值
**/ **/
import calendar from './calendar.vue' import calendar from './calendar.vue'
import timePicker from './time-picker.vue' import timePicker from './time-picker.vue'
...@@ -180,7 +180,6 @@ ...@@ -180,7 +180,6 @@
isEmitValue: false, isEmitValue: false,
isPhone: false, isPhone: false,
isFirstShow: true, isFirstShow: true,
iconBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACVklEQVRoge2Zv2vTQRTAP4oWJQQskmolBAnSQVMcSxbp4ubmIEWETu0oIjg5iIOgpLNunfQfMHToUgpOVgfRqRAL4q8WRLQVq4sOdyHPL9/7evfNJReS+8DB433v7r37fl/eu9xBJBKUB0BLt+uDaOOQZb8SUNXyuKuRftg46NeXcBww6M8AC0ANOAycAyb1s7e6+SbNxi/gBfAQ2HadcA7YB/4MUPsKzLos4jzwewAcNy3mhMnx5I/9BiqUAD4DDWAXmAfqWt8Enlq+GBfSbEwAt4AicAxYBO7aTPaGzhu4KvTLQn/Hh9cpmGzcFvqmaXAyaxWE/MGTg93yXsgFUyfbOrJCJ2s8y+tRP21s0fmMTlmih8zT8WnN1GloCmJWaF0CpvrlSAb1/3fJXshNT470hZEIrZeoahqaU8BZ10Exa4XGtiCaKKL+EIHaMX8U81ZEP7ntrwi7n4CfWi7p+UCFdFdh7Rpaps9+mn93rjY2THut0QqtoVlIkpi1QjNyCzEdnl0W+idCXxb6VmKudaGfsbBhRbcHdEWhf5eYt0o6FVR6BjhqYcOKoQkt2y/SAB5rWVbpVeCilmUl3hb6JNeAI1p+ZWEjFzH9hsY2tEwHdHX9DGATWNLyceCeGL/YhY+58LWhy9o0uhJDKw3T4dlr4L6WZab5JvRBGJqs9UPI5R44lQfpx56pUzK0NlA3R6AK1Engu1+/nGhfK7R5bjtwGnXdFfpSJ6190Quz5grqQCC048lFXMhy2nQZWkUVsRowZv8OvLOPCvdHwE5APyKRSMQzfwE22DtT3T5PPwAAAABJRU5ErkJggg=='
} }
}, },
props: { props: {
...@@ -235,10 +234,10 @@ ...@@ -235,10 +234,10 @@
clearIcon: { clearIcon: {
type: [Boolean], type: [Boolean],
default: true default: true
}, },
hideSecond: { hideSecond: {
type: [Boolean], type: [Boolean],
default: false default: false
} }
}, },
watch: { watch: {
...@@ -309,7 +308,7 @@ ...@@ -309,7 +308,7 @@
const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : '' const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
return res return res
}, },
reactMobDefTime() { reactMobDefTime() {
const times = { const times = {
start: this.tempRange.startTime, start: this.tempRange.startTime,
end: this.tempRange.endTime end: this.tempRange.endTime
...@@ -363,6 +362,11 @@ ...@@ -363,6 +362,11 @@
}, },
clearText() { clearText() {
return t("uni-datetime-picker.clear") return t("uni-datetime-picker.clear")
},
showClearIcon() {
const { clearIcon, disabled, singleVal, range } = this
const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
return bool
} }
}, },
created() { created() {
...@@ -377,7 +381,7 @@ ...@@ -377,7 +381,7 @@
// } // }
}, },
mounted() { mounted() {
this.platform() this.platform()
}, },
methods: { methods: {
/** /**
...@@ -437,7 +441,7 @@ ...@@ -437,7 +441,7 @@
}) })
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, { this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
which: 'left' which: 'left'
}) })
} }
}, },
updateLeftCale(e) { updateLeftCale(e) {
...@@ -493,7 +497,7 @@ ...@@ -493,7 +497,7 @@
} }
} }
}, 20) }, 50)
}, },
close() { close() {
...@@ -685,9 +689,9 @@ ...@@ -685,9 +689,9 @@
this.tempSingleDate = '' this.tempSingleDate = ''
this.time = '' this.time = ''
if (this.isPhone) { if (this.isPhone) {
this.$refs.mobile.clearCalender() this.$refs.mobile && this.$refs.mobile.clearCalender()
} else { } else {
this.$refs.pcSingle.clearCalender() this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
} }
if (needEmit) { if (needEmit) {
this.formItem && this.formItem.setValue('') this.formItem && this.formItem.setValue('')
...@@ -698,16 +702,16 @@ ...@@ -698,16 +702,16 @@
} else { } else {
this.range.startDate = '' this.range.startDate = ''
this.range.endDate = '' this.range.endDate = ''
this.tempRange.startDate= '' this.tempRange.startDate = ''
this.tempRange.startTime= '' this.tempRange.startTime = ''
this.tempRange.endDate= '' this.tempRange.endDate = ''
this.tempRange.endTime= '' this.tempRange.endTime = ''
if (this.isPhone) { if (this.isPhone) {
this.$refs.mobile.clearCalender() this.$refs.mobile && this.$refs.mobile.clearCalender()
} else { } else {
this.$refs.left.clearCalender() this.$refs.left && this.$refs.left.clearCalender()
this.$refs.right.clearCalender() this.$refs.right && this.$refs.right.clearCalender()
this.$refs.right.next() this.$refs.right && this.$refs.right.next()
} }
if (needEmit) { if (needEmit) {
this.formItem && this.formItem.setValue([]) this.formItem && this.formItem.setValue([])
...@@ -728,7 +732,8 @@ ...@@ -728,7 +732,8 @@
const minute = defVal.getMinutes() const minute = defVal.getMinutes()
const second = defVal.getSeconds() const second = defVal.getSeconds()
const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day) const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this.lessTen(second))) const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
.lessTen(second)))
return { return {
defDate, defDate,
defTime defTime
...@@ -782,12 +787,11 @@ ...@@ -782,12 +787,11 @@
.uni-date-editor--x .uni-date__icon-clear { .uni-date-editor--x .uni-date__icon-clear {
position: absolute; position: absolute;
top: 5px; top: 0;
right: 0; right: 0;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: 6px solid transparent; border: 9px solid transparent;
margin-right: 6px;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
...@@ -846,8 +850,8 @@ ...@@ -846,8 +850,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 999; z-index: 999;
border: 1px solid #e4e7ed; border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
} }
...@@ -857,8 +861,8 @@ ...@@ -857,8 +861,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 999; z-index: 999;
border: 1px solid #e4e7ed; border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
} }
...@@ -899,7 +903,7 @@ ...@@ -899,7 +903,7 @@
border-top-color: #F1F1F1; border-top-color: #F1F1F1;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
background-color: #fff; /* background-color: #fff; */
line-height: 40px; line-height: 40px;
text-align: right; text-align: right;
color: #666; color: #666;
...@@ -917,7 +921,7 @@ ...@@ -917,7 +921,7 @@
} }
.uni-date-changed { .uni-date-changed {
background-color: #fff; /* background-color: #fff; */
text-align: center; text-align: center;
color: #333; color: #333;
border-bottom-color: #F1F1F1; border-bottom-color: #F1F1F1;
...@@ -946,7 +950,32 @@ ...@@ -946,7 +950,32 @@
margin-right: 50px; margin-right: 50px;
} }
.uni-date_calendar-pc { /* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
padding: 0 6px; .uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
} }
</style> </style>
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js
浏览文件 @ 6f6e3846
import CALENDAR from './calendar.js'
class Calendar { class Calendar {
constructor({ constructor({
date, date,
...@@ -112,7 +110,6 @@ class Calendar { ...@@ -112,7 +110,6 @@ class Calendar {
dateArr.push({ dateArr.push({
date: beforeDate, date: beforeDate,
month: full.month - 1, month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true disable: true
}) })
} }
...@@ -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-datetime-picker/readme.md
浏览文件 @ 6f6e3846
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护` > `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
## DatetimePicker 时间选择器 ## DatetimePicker 时间选择器
> **组件名：uni-datetime-picker** > **组件名：uni-datetime-picker**
> 代码块： `uDatetimePicker` > 代码块： `uDatetimePicker`
...@@ -9,151 +12,10 @@ ...@@ -9,151 +12,10 @@
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。 若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
**_点击 picker 默认值规则：_**
___点击 picker 默认值规则：___
- 若设置初始值 value, 会显示在 picker 显示框中 - 若设置初始值 value, 会显示在 picker 显示框中
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中 - 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
### 安装方式 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="date" :value="single" start="2021-3-20" end="2021-6-20" @change="change" />
</view>
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20" end="2021-5-20" />
</view>
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
</view>
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" />
</view>
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
</view>
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" :border="false" />
</view>
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="single" disabled />
</view>
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="range" type="daterange" start="2021-3-20" end="2021-5-20"
rangeSeparator="至" />
</view>
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker v-model="datetimerange" type="datetimerange"
start="2021-3-20 12:00:00" end="2021-6-20 20:00:00" rangeSeparator="至" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
single: '2021-04-3',
datetimesingle: '2021-04-3',
range: ['2021-03-8', '2021-4-20'],
datetimerange: ['2021-03-20 20:10:10', '2021-05-10 10:10:10'],
}
},
watch: {
datetimesingle(newval) {
console.log('单选:', this.datetimesingle);
},
range(newval) {
console.log('范围选:', this.range);
},
datetimerange(newval) {
console.log('范围选:', this.datetimerange);
}
},
mounted() {
setTimeout(() => {
this.datetimesingle = '2021-5-1'
this.single = '2021-5-1'
},1000)
},
methods:{
change(e) {
this.single = e
console.log('-change事件:', e);
}
}
}
</script>
<style lang="scss">
@import '@/common/uni-nvue.scss';
</style>
```
## API
### DatetimePicker Props
|属性名 |类型 |默认值 |值域 |说明 |
|:-: |:-: |:-: | |:-: |
|type |String |datetime |date/daterange/datetime/datetimerange|选择器类型 |
|value |String、Number、Array(范围选择)、Date|- |- |输入框当前值 |
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
|return-type |String |string |timestamp 、string、date |返回值格式 |
|border |Boolean |true | |是否有边框 |
|rangeSeparator |String |'-' |- |选择范围时的分隔符 |
|placeholder |String |- |- |非范围选择时的占位内容 |
|start-placeholder|String |- |- |范围选择时开始日期的占位内容 |
|end-placeholder |String |- |- |范围选择时结束日期的占位内容 |
|disabled |Boolean |false | |是否不可选择 |
|clear-icon |Boolean |true | |是否显示清除按钮 |
|hide-second |Boolean |false | |是否显示秒，只显示时分 |
### DatetimePicker Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |确定日期时间时触发的事件，参数为当前选择的日期对象 |单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
|maskClick|点击遮罩层触发 |- |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|show|打开弹出层|-|
|close|关闭弹出层 |-|
|clear|清除上次选中的状态和值|-|
###
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/datetime-picker/datetime-picker)
\ No newline at end of file
uni_modules/uni-drawer/changelog.md
浏览文件 @ 6f6e3846
## 1.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/changelog.md
浏览文件 @ 6f6e3846
## 0.1.4（2021-08-20） ## 1.0.0（2021-11-19）
- 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-easyinput](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
## 0.1.4（2021-08-20）
- 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
## 0.1.3（2021-08-11） ## 0.1.3（2021-08-11）
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题 - 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
## 0.1.2（2021-07-30） ## 0.1.2（2021-07-30）
......
uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#dd524d':styles.color}"> <view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#e43d33':styles.color}">
<view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}" <view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}"
:style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}"> :style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}">
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons> <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons>
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}" <textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}"
:name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class"
:maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus"
@confirm="onConfirm"></textarea> @confirm="onConfirm"></textarea>
<input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{ <input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
'padding-left':prefixIcon?'':'10px' 'padding-left':prefixIcon?'':'10px'
}" }"
:name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder"
:placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" @focus="onFocus"
@blur="onBlur" @input="onInput" @confirm="onConfirm" /> @blur="onBlur" @input="onInput" @confirm="onConfirm" />
<template v-if="type === 'password' && passwordIcon" > <template v-if="type === 'password' && passwordIcon" >
<uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'" <uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'"
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
* @example <uni-easyinput v-model="mobile"></uni-easyinput> * @example <uni-easyinput v-model="mobile"></uni-easyinput>
*/ */
export default { export default {
name: 'uni-easyinput', name: 'uni-easyinput',
emits:['click','iconClick','update:modelValue','input','focus','blur','confirm'], emits:['click','iconClick','update:modelValue','input','focus','blur','confirm'],
model:{ model:{
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
default () { default () {
return { return {
color: '#333', color: '#333',
disableColor: '#eee', disableColor: '#F7F6F6',
borderColor: '#e5e5e5' borderColor: '#e5e5e5'
} }
} }
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
msg() { msg() {
return this.errorMessage || this.errMsg; return this.errorMessage || this.errMsg;
}, },
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值 // 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
inputMaxlength() { inputMaxlength() {
return Number(this.maxlength); return Number(this.maxlength);
}, },
...@@ -223,10 +223,7 @@ ...@@ -223,10 +223,7 @@
} }
}, },
mounted() { mounted() {
// this.onInput = throttle(this.input, 500)
this.$nextTick(() => { this.$nextTick(() => {
// setTimeout(()=>{
// },1000)
this.focused = this.focus this.focused = this.focus
}) })
}, },
...@@ -277,14 +274,10 @@ ...@@ -277,14 +274,10 @@
}, },
onFocus(event) { onFocus(event) {
// this.focused = true;
this.$emit('focus', event); this.$emit('focus', event);
}, },
onBlur(event) { onBlur(event) {
let value = event.detail.value; let value = event.detail.value;
// setTimeout(() => {
// this.focused = false;
// }, 100);
this.$emit('blur', event); this.$emit('blur', event);
}, },
onConfirm(e) { onConfirm(e) {
...@@ -323,7 +316,9 @@ ...@@ -323,7 +316,9 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$uni-error: #e43d33;
$uni-border-1: #DCDFE6 !default;
.uni-easyinput { .uni-easyinput {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: 100%; width: 100%;
...@@ -355,9 +350,13 @@ ...@@ -355,9 +350,13 @@
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
}
.uni-easyinput__placeholder-class {
color: #999;
font-size: 12px;
font-weight: 200;
} }
.is-textarea { .is-textarea {
align-items: flex-start; align-items: flex-start;
} }
...@@ -402,25 +401,16 @@ ...@@ -402,25 +401,16 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: 1px solid $uni-border-color; border: 1px solid $uni-border-1;
border-radius: 4px; border-radius: 4px;
} }
.uni-easyinput__right {
// margin-left: 5px;
}
// 必填
.is-required {
color: $uni-color-error;
}
.uni-error-message { .uni-error-message {
position: absolute; position: absolute;
bottom: -17px; bottom: -17px;
left: 0; left: 0;
line-height: 12px; line-height: 12px;
color: $uni-color-error; color: $uni-error;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
} }
...@@ -432,8 +422,12 @@ ...@@ -432,8 +422,12 @@
} }
.is-input-error-border { .is-input-error-border {
border-color: $uni-color-error; border-color: $uni-error;
} .uni-easyinput__placeholder-class {
color: mix(#fff, $uni-error, 50%);;
}
}
.uni-easyinput--border { .uni-easyinput--border {
margin-bottom: 0; margin-bottom: 0;
...@@ -455,7 +449,13 @@ ...@@ -455,7 +449,13 @@
/* #endif */ /* #endif */
} }
.is-disabled { .is-disabled {
background-color: #eee; border-color: red;
background-color: #F7F6F6;
color: #D5D5D5;
.uni-easyinput__placeholder-class {
color: #D5D5D5;
font-size: 12px;
}
} }
</style> </style>
uni_modules/uni-easyinput/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-easyinput", "id": "uni-easyinput",
"displayName": "uni-easyinput 增强输入框", "displayName": "uni-easyinput 增强输入框",
"version": "0.1.4", "version": "1.0.0",
"description": "Easyinput 组件是对原生input组件的增强", "description": "Easyinput 组件是对原生input组件的增强",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-easyinput/readme.md
浏览文件 @ 6f6e3846
...@@ -7,192 +7,5 @@ ...@@ -7,192 +7,5 @@
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能 easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-easyinput)
> **注意事项** #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 \ No newline at end of file
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 平台差异说明
暂不支持在nvue页面中使用
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可
`clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容
```html
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 输入框带左右图标
设置 `prefixIcon` 属性来显示输入框的头部图标
设置 `suffixIcon` 属性来显示输入框的尾部图标
注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标
绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标
```html
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
```
### 输入框禁用
设置 `disable` 属性可以禁用输入框，此时输入框不可编辑
```html
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 密码框
设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态
```html
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
```
### 输入框聚焦
设置 `focus` 属性可以使输入框聚焦
如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效
```html
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本
设置 `type="textarea"` 时可输入多行文本
```html
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 多行文本自动高度
设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度
```html
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
```
### 取消边框
设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果
```html
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>
```
## API
### Easyinput Props
|属性名| 类型| 可选值|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value|String/ Number|-|-|输入内容|
|type|String|见 type Options|text|输入框的类型（默认text）|
|clearable|Boolean|-|true| 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容|
|autoHeight|Boolean|-|false| 是否自动增高输入区域，type为textarea时有效|
|placeholder|String |-| - | 输入框的提示文字|
|placeholderStyle|String| - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"|
|focus|Boolean|-|false|是否自动获得焦点|
|disabled|Boolean|-|false|是否不可输入|
|maxlength|Number|-|140|最大输入长度，设置为 -1 的时候不限制最大长度|
|confirmType|String|-|done|设置键盘右下角按钮的文字，仅在type="text"时生效|
|clearSize|Number|-|15|清除图标的大小，单位px|
|prefixIcon|String|-|-|输入框头部图标 |
|suffixIcon|String|-|-|输入框尾部图标|
|trim|Boolean/String|见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格|
|inputBorder|Boolean|-|true|是否显示input输入框的边框|
|styles|Object|-|-| 样式自定义|
|passwordIcon|Boolean|-| true | type=password 时，是否显示小眼睛图标|
#### Type Options
|属性名| 说明|
|:-:| :-:|
|text|文本输入键盘|
|textarea |多行文本输入键盘|
|password |密码输入键盘|
|number|数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 |
|idcard|身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序|
|digit|带小数点的数字键盘，仅支持微信、支付宝、百度、头条、QQ小程序 |
#### ConfirmType Options
平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同
|属性名 | 说明|
|:-:| :-:|
|send|右下角按钮为“发送” |
|search |右下角按钮为“搜索” |
|next|右下角按钮为“下一个”|
|go|右下角按钮为“前往” |
|done|右下角按钮为“完成” |
#### Styles Options
|属性名| 默认值 |说明|
|:-:| :-:| :-:|
|color| #333| 输入文字颜色|
|disableColor |#eee| 输入框禁用背景色|
|borderColor |#e5e5e5 | 边框颜色|
#### Trim Options
传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值
|属性名|说明|
|:-:| :-:|
|both|去除两端空格|
|left|去除左侧空格|
|right|去除右侧空格|
|all|去除所有空格|
|none|不去除空格|
### Easyinput Events
|事件称名| 说明|返回值|
|:-:| :-:|:-:|
|@input|输入框内容发生变化时触发| -|
|@focus|输入框获得焦点时触发| -|
|@blur|输入框失去焦点时触发| -|
|@confirm|点击完成按钮时触发| -|
|@iconClick |点击图标时触发| prefix/suffix |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)
\ No newline at end of file
uni_modules/uni-fab/changelog.md
浏览文件 @ 6f6e3846
## 1.2.2（2021-12-29）
- 更新 组件依赖
## 1.2.1（2021-11-19）
- 修复 阴影颜色不正确的bug
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
## 1.1.1（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.1.0（2021-07-30） ## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12） ## 1.0.7（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.6（2021-02-05） ## 1.0.6（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
- 优化 按钮背景色调整 - 优化 按钮背景色调整
- 优化 兼容pc端 - 优化 兼容pc端
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
浏览文件 @ 6f6e3846
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
'uni-fab--rightBottom': rightBottom, 'uni-fab--rightBottom': rightBottom,
'uni-fab--leftTop': leftTop, 'uni-fab--leftTop': leftTop,
'uni-fab--rightTop': rightTop 'uni-fab--rightTop': rightTop
}" }" class="uni-fab">
class="uni-fab">
<view :class="{ <view :class="{
'uni-fab__content--left': horizontal === 'left', 'uni-fab__content--left': horizontal === 'left',
'uni-fab__content--right': horizontal === 'right', 'uni-fab__content--right': horizontal === 'right',
...@@ -14,14 +13,15 @@ ...@@ -14,14 +13,15 @@
'uni-fab__content--flexDirectionStart': flexDirectionStart, 'uni-fab__content--flexDirectionStart': flexDirectionStart,
'uni-fab__content--flexDirectionEnd': flexDirectionEnd, 'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
'uni-fab__content--other-platform': !isAndroidNvue 'uni-fab__content--other-platform': !isAndroidNvue
}" }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
:style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content" class="uni-fab__content" elevation="5">
elevation="5">
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" <view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
@click="_onItemClick(index, item)"> class="uni-fab__item" @click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" /> <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> mode="aspectFit" />
<text class="uni-fab__item-text"
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view> </view>
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
</view> </view>
...@@ -32,10 +32,11 @@ ...@@ -32,10 +32,11 @@
'uni-fab__circle--leftTop': leftTop, 'uni-fab__circle--leftTop': leftTop,
'uni-fab__circle--rightTop': rightTop, 'uni-fab__circle--rightTop': rightTop,
'uni-fab__content--other-platform': !isAndroidNvue 'uni-fab__content--other-platform': !isAndroidNvue
}" }" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick"> <uni-icons class="fab-circle-icon" type="plusempty" :color="styles.iconColor" size="32"
<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> :class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> <!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> -->
</view> </view>
</view> </view>
</template> </template>
...@@ -67,7 +68,7 @@ ...@@ -67,7 +68,7 @@
*/ */
export default { export default {
name: 'UniFab', name: 'UniFab',
emits:['fabClick','trigger'], emits: ['fabClick', 'trigger'],
props: { props: {
pattern: { pattern: {
type: Object, type: Object,
...@@ -111,16 +112,17 @@ ...@@ -111,16 +112,17 @@
color: '#3c3e49', color: '#3c3e49',
selectedColor: '#007AFF', selectedColor: '#007AFF',
backgroundColor: '#fff', backgroundColor: '#fff',
buttonColor: '#007AFF' buttonColor: '#007AFF',
iconColor: '#fff'
} }
} }
}, },
computed: { computed: {
contentWidth(e) { contentWidth(e) {
return (this.content.length + 1) * 55 + 10 + 'px' return (this.content.length + 1) * 55 + 15 + 'px'
}, },
contentWidthMin() { contentWidthMin() {
return 55 + 'px' return '55px'
}, },
// 动态计算宽度 // 动态计算宽度
boxWidth() { boxWidth() {
...@@ -159,9 +161,11 @@ ...@@ -159,9 +161,11 @@
} }
}, },
watch: { watch: {
pattern(newValue, oldValue) { pattern: {
//console.log(JSON.stringify(newValue)) handler(val, oldVal) {
this.styles = Object.assign({}, this.styles, newValue) this.styles = Object.assign({}, this.styles, val)
},
deep: true
} }
}, },
created() { created() {
...@@ -173,7 +177,7 @@ ...@@ -173,7 +177,7 @@
this.styles = Object.assign({}, this.styles, this.pattern) this.styles = Object.assign({}, this.styles, this.pattern)
}, },
methods: { methods: {
_onClick() { _onClick() {
this.$emit('fabClick') this.$emit('fabClick')
if (!this.popMenu) { if (!this.popMenu) {
return return
...@@ -213,7 +217,9 @@ ...@@ -213,7 +217,9 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
.uni-fab { .uni-fab {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -222,12 +228,14 @@ ...@@ -222,12 +228,14 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; z-index: 10;
} border-radius: 45px;
box-shadow: $uni-shadow-base;
.uni-cursor-point { }
/* #ifdef H5 */
cursor: pointer; .uni-cursor-point {
/* #endif */ /* #ifdef H5 */
cursor: pointer;
/* #endif */
} }
.uni-fab--active { .uni-fab--active {
...@@ -235,43 +243,43 @@ ...@@ -235,43 +243,43 @@
} }
.uni-fab--leftBottom { .uni-fab--leftBottom {
left: 5px; left: 15px;
bottom: 20px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(5px + var(--window-left)); left: calc(15px + var(--window-left));
bottom: calc(20px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--leftTop { .uni-fab--leftTop {
left: 5px; left: 15px;
top: 30px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(5px + var(--window-left)); left: calc(15px + var(--window-left));
top: calc(30px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--rightBottom { .uni-fab--rightBottom {
right: 5px; right: 15px;
bottom: 20px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(5px + var(--window-right)); right: calc(15px + var(--window-right));
bottom: calc(20px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab--rightTop { .uni-fab--rightTop {
right: 5px; right: 15px;
top: 30px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(5px + var(--window-right)); right: calc(15px + var(--window-right));
top: calc(30px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
padding: 10px; // padding: 10px;
} }
.uni-fab__circle { .uni-fab__circle {
...@@ -284,14 +292,15 @@ ...@@ -284,14 +292,15 @@
width: 55px; width: 55px;
height: 55px; height: 55px;
background-color: #3c3e49; background-color: #3c3e49;
border-radius: 55px; border-radius: 45px;
z-index: 11; z-index: 11;
// box-shadow: $uni-shadow-base;
} }
.uni-fab__circle--leftBottom { .uni-fab__circle--leftBottom {
left: 15px; left: 15px;
bottom: 30px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(15px + var(--window-left)); left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
...@@ -299,17 +308,17 @@ ...@@ -299,17 +308,17 @@
.uni-fab__circle--leftTop { .uni-fab__circle--leftTop {
left: 15px; left: 15px;
top: 40px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
left: calc(15px + var(--window-left)); left: calc(15px + var(--window-left));
top: calc(40px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
} }
.uni-fab__circle--rightBottom { .uni-fab__circle--rightBottom {
right: 15px; right: 15px;
bottom: 30px; bottom: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(15px + var(--window-right)); right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom)); bottom: calc(30px + var(--window-bottom));
/* #endif */ /* #endif */
...@@ -317,10 +326,10 @@ ...@@ -317,10 +326,10 @@
.uni-fab__circle--rightTop { .uni-fab__circle--rightTop {
right: 15px; right: 15px;
top: 40px; top: 30px;
/* #ifdef H5 */ /* #ifdef H5 */
right: calc(15px + var(--window-right)); right: calc(15px + var(--window-right));
top: calc(40px + var(--window-top)); top: calc(30px + var(--window-top));
/* #endif */ /* #endif */
} }
...@@ -344,26 +353,42 @@ ...@@ -344,26 +353,42 @@
font-weight: bold; font-weight: bold;
} }
.fab-circle-v { // .fab-circle-v {
position: absolute; // position: absolute;
width: 3px; // width: 2px;
height: 31px; // height: 24px;
left: 26px; // left: 0;
top: 12px; // top: 0;
background-color: white; // right: 0;
transform: rotate(0deg); // bottom: 0;
transition: transform 0.3s; // /* #ifndef APP-NVUE */
} // margin: auto;
// /* #endif */
.fab-circle-h { // background-color: white;
position: absolute; // transform: rotate(0deg);
width: 31px; // transition: transform 0.3s;
height: 3px; // }
left: 12px;
top: 26px; // .fab-circle-h {
background-color: white; // position: absolute;
// width: 24px;
// height: 2px;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// /* #ifndef APP-NVUE */
// margin: auto;
// /* #endif */
// background-color: white;
// transform: rotate(0deg);
// transition: transform 0.3s;
// }
.fab-circle-icon {
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s; transition: transform 0.3s;
font-weight: 200;
} }
.uni-fab__plus--active { .uni-fab__plus--active {
...@@ -388,7 +413,7 @@ ...@@ -388,7 +413,7 @@
.uni-fab__content--other-platform { .uni-fab__content--other-platform {
border-width: 0px; border-width: 0px;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); box-shadow: $uni-shadow-base;
} }
.uni-fab__content--left { .uni-fab__content--left {
...@@ -432,17 +457,19 @@ ...@@ -432,17 +457,19 @@
} }
.uni-fab__item-image { .uni-fab__item-image {
width: 25px; width: 20px;
height: 25px; height: 20px;
margin-bottom: 3px; margin-bottom: 4px;
} }
.uni-fab__item-text { .uni-fab__item-text {
color: #FFFFFF; color: #FFFFFF;
font-size: 12px; font-size: 12px;
line-height: 12px;
margin-top: 2px;
} }
.uni-fab__item--first { .uni-fab__item--first {
width: 55px; width: 55px;
} }
</style> </style>
uni_modules/uni-fab/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-fab", "id": "uni-fab",
"displayName": "uni-fab 悬浮按钮", "displayName": "uni-fab 悬浮按钮",
"version": "1.1.0", "version": "1.2.2",
"description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。", "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
"uniui", "uniui",
"按钮", "按钮",
"悬浮按钮", "悬浮按钮",
"fab" "fab"
], ],
"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-scss","uni-icons"],
"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": {
} "vue2": "y",
} "vue3": "y"
} }
}
}
}
}
uni_modules/uni-fab/readme.md
浏览文件 @ 6f6e3846
## Fab 悬浮按钮 ## Fab 悬浮按钮
> **组件名：uni-fab** > **组件名：uni-fab**
> 代码块： `uFab` > 代码块： `uFab`
...@@ -7,85 +5,5 @@ ...@@ -7,85 +5,5 @@
点击可展开一个图形按钮菜单 点击可展开一个图形按钮菜单
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 不建议动态修改属性，可能会耗损部分性能。
> - 展开菜单暂不支持字体图标，使用图片路径时建议使用绝对路径，相对路径可能会有问题。
> - 选中状态要通过自己控制，如果不希望有选中状态，不处理 `active` 即可。
> - 展开菜单建议最多显示四个，如果过多对于小屏手机可能会超出屏幕。
### 基本用法
在 `template` 中使用组件
```html
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
```
## API
### Fab Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| pattern | Object | - | 可选样式配置项 |
| horizontal| String | 'left' | 水平对齐方式。`left`:左对齐，`right`：右对齐 |
| vertical | String | 'bottom' | 垂直对齐方式。`bottom`:下对齐，`top`：上对齐 |
| direction | String | 'horizontal' | 展开菜单显示方式。`horizontal`:水平显示，`vertical`：垂直显示 |
| popMenu | Boolean | true | 是否使用弹出菜单 |
| content | Array | - | 展开菜单内容配置项 |
**pattern配置项：**
| 参数 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| color | String | #3c3e49 | 文字默认颜色 |
| selectedColor | String | #007AFF | 文字选中时的颜色 |
| backgroundColor | String | #ffffff | 背景色 |
| buttonColor | String | #3c3e49 | 按钮背景色 |
**content配置项：**
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: | :-: |
| iconPath | String | 图片路径 |
| selectedIconPath | String | 选中后图片路径|
| text | String | 文字 |
| active | Boolean | 是否选中当前 |
### Fab Events
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: |
| @trigger | Function | 展开菜单点击事件，返回点击信息|
| @fabClick | Function | 悬浮按钮点击事件 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab](https://hellouniapp.dcloud.net.cn/pages/extUI/fab/fab)
\ No newline at end of file
uni_modules/uni-fav/changelog.md
浏览文件 @ 6f6e3846
## 1.1.1（2021-08-24） ## 1.2.0（2021-11-19）
- 新增 支持国际化 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.1.0（2021-07-13） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fav](https://uniapp.dcloud.io/component/uniui/uni-fav)
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) ## 1.1.1（2021-08-24）
## 1.0.6（2021-05-12） - 新增 支持国际化
- 新增 组件示例地址 ## 1.1.0（2021-07-13）
## 1.0.5（2021-04-21） - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 ## 1.0.6（2021-05-12）
## 1.0.4（2021-02-05） - 新增 组件示例地址
- 优化 组件引用关系，通过uni_modules引用组件 ## 1.0.5（2021-04-21）
## 1.0.3（2021-02-05） - 优化 添加依赖 uni-icons, 导入后自动下载依赖
- 优化 组件引用关系，通过uni_modules引用组件 ## 1.0.4（2021-02-05）
## 1.0.2（2021-02-05） - 优化 组件引用关系，通过uni_modules引用组件
- 调整为uni_modules目录规范 ## 1.0.3（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.2（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-fav/components/uni-fav/uni-fav.vue
浏览文件 @ 6f6e3846
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
}, },
methods: { methods: {
onClick() { onClick() {
this.$emit("click"); this.$emit("click");
} }
} }
}; };
...@@ -146,11 +146,11 @@ ...@@ -146,11 +146,11 @@
.uni-fav-text { .uni-fav-text {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
height: $fav-height; height: $fav-height;
line-height: $fav-height; line-height: $fav-height;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: $uni-font-size-base; font-size: 12px;
} }
</style> </style>
uni_modules/uni-fav/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-fav", "id": "uni-fav",
"displayName": "uni-fav 收藏按钮", "displayName": "uni-fav 收藏按钮",
"version": "1.1.1", "version": "1.2.0",
"description": " Fav 收藏组件，可自定义颜色、大小。", "description": " Fav 收藏组件，可自定义颜色、大小。",
"keywords": [ "keywords": [
"fav", "fav",
"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": [
"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"
} }
} }
} }
} }
}
uni_modules/uni-fav/readme.md
浏览文件 @ 6f6e3846
...@@ -4,47 +4,7 @@ ...@@ -4,47 +4,7 @@
> **组件名：uni-fav** > **组件名：uni-fav**
> 代码块： `uFav` > 代码块： `uFav`
用于收藏功能，可点击切换选中、不选中的状态。 用于收藏功能，可点击切换选中、不选中的状态。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fav)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 \ No newline at end of file
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<uni-fav :checked="checked" @click="onClick"/>
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
```
## API
### Fav Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|star |Boolean|true |按钮是否带星星 |
|bgColor |String |#eeeeee |未收藏时的背景色 |
|bgColorChecked |String |#007aff |已收藏时的背景色 |
|fgColor |String |#666666 |未收藏时的文字颜色 |
|fgColorChecked |String |#FFFFFF |已收藏时的文字颜色 |
|circle |Boolean|false |是否为圆角 |
|checked |Boolean|false |是否为已收藏 |
|contentText |Object |```{contentDefault: '收藏',contentFav: '已收藏'}```|收藏按钮文字 |
### Fav Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击 fav按钮 触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav](https://hellouniapp.dcloud.net.cn/pages/extUI/fav/fav)
\ No newline at end of file
uni_modules/uni-feedback/changelog.md
浏览文件 @ 6f6e3846
## 1.0.4（2021-09-26）
为了数据安全，`opendb-feedback`表的`permission`中`delete`，`update`的值默认为`false`
## 1.0.3（2021-08-26） ## 1.0.3（2021-08-26）
删除多余的云函数test2 删除多余的云函数test2
\ No newline at end of file
uni_modules/uni-feedback/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-feedback", "id": "uni-feedback",
"displayName": "问题反馈用户端页面模板", "displayName": "问题反馈页面模板",
"version": "1.0.3", "version": "1.0.4",
"description": "问题反馈用户端页面模板，方便开发者快速搭建问题反馈界面", "description": "问题反馈页面模板，方便开发者快速搭建问题反馈界面",
"keywords": [ "keywords": [
"问题反馈用户端页面模板" "问题反馈页面模板"
], ],
"repository": "", "repository": "",
"engines": { "engines": {
......
uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback.vue
浏览文件 @ 6f6e3846
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
import { import {
validator validator
} from '../../js_sdk/validator/opendb-feedback.js'; } from '../../js_sdk/validator/opendb-feedback.js';
console.log(validator);
const db = uniCloud.database(); const db = uniCloud.database();
const dbCollectionName = 'opendb-feedback'; const dbCollectionName = 'opendb-feedback';
......
uni_modules/uni-feedback/readme.md
浏览文件 @ 6f6e3846
这是一个问题反馈客户端插件，admin端插件：[https://ext.dcloud.net.cn/plugin?id=4992](https://ext.dcloud.net.cn/plugin?id=4992) 这是一个问题反馈客户端插件，admin端插件：[https://ext.dcloud.net.cn/plugin?id=4992](https://ext.dcloud.net.cn/plugin?id=4992)
> 参考案例 [uni-starter](https://ext.dcloud.net.cn/plugin?id=5057) \ No newline at end of file
\ No newline at end of file
uni_modules/uni-file-picker/changelog.md
浏览文件 @ 6f6e3846
## 0.2.14（2021-08-23） ## 1.0.1（2021-11-23）
- 新增 参数中返回 fileID 字段 - 修复 参数为对象的情况下，url在某些情况显示错误的bug
## 1.0.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
## 0.2.16（2021-11-08）
- 修复 传入空对象 ，显示错误的Bug
## 0.2.15（2021-08-30）
- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
## 0.2.14（2021-08-23）
- 新增 参数中返回 fileID 字段
## 0.2.13（2021-08-23） ## 0.2.13（2021-08-23）
- 修复 腾讯云传入fileID 不能回显的bug - 修复 腾讯云传入fileID 不能回显的bug
- 修复 选择图片后，不能放大的问题 - 修复 选择图片后，不能放大的问题
......
uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue
浏览文件 @ 6f6e3846
...@@ -278,7 +278,6 @@ ...@@ -278,7 +278,6 @@
files.push(Object.assign({}, v)) files.push(Object.assign({}, v))
} }
}) })
this.uploadFiles(files) this.uploadFiles(files)
}, },
async setValue(newVal, oldVal) { async setValue(newVal, oldVal) {
...@@ -293,8 +292,8 @@ ...@@ -293,8 +292,8 @@
if (reg.test(url)) { if (reg.test(url)) {
v.fileID = url v.fileID = url
v.url = await this.getTempFileURL(url) v.url = await this.getTempFileURL(url)
} }
v.path = v.url if(v.url) v.path = v.url
return v return v
} }
if (this.returnType === 'object') { if (this.returnType === 'object') {
...@@ -439,7 +438,7 @@ ...@@ -439,7 +438,7 @@
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
const item = res[i] const item = res[i]
const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index
if (index === -1 || !this.files) break if (index === -1 || !this.files) break
if (item.errMsg === 'request:fail') { if (item.errMsg === 'request:fail') {
this.files[index].url = item.path this.files[index].url = item.path
...@@ -457,7 +456,7 @@ ...@@ -457,7 +456,7 @@
}else{ }else{
this.files[index].url = item.url this.files[index].url = item.url
} }
this.files[index].status = 'success' this.files[index].status = 'success'
this.files[index].progress += 1 this.files[index].progress += 1
successData.push(this.files[index]) successData.push(this.files[index])
...@@ -521,7 +520,7 @@ ...@@ -521,7 +520,7 @@
this.setEmit() this.setEmit()
}) })
}, },
/** /**
* 获取文件名和后缀 * 获取文件名和后缀
* @param {Object} name * @param {Object} name
...@@ -542,8 +541,7 @@ ...@@ -542,8 +541,7 @@
let data = [] let data = []
if (this.returnType === 'object') { if (this.returnType === 'object') {
data = this.backObject(this.files)[0] data = this.backObject(this.files)[0]
this.localValue = {} this.localValue = data?data:null
Object.assign(this.localValue, data)
} else { } else {
data = this.backObject(this.files) data = this.backObject(this.files)
if (!this.localValue) { if (!this.localValue) {
......
uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue
浏览文件 @ 6f6e3846
...@@ -116,13 +116,15 @@ ...@@ -116,13 +116,15 @@
let { let {
border border
} = this.styles } = this.styles
let obj = {} let obj = {}
const widthDefaultValue = 1
const radiusDefaultValue = 3
if (typeof border === 'boolean') { if (typeof border === 'boolean') {
obj.border = border ? '1px #eee solid' : 'none' obj.border = border ? '1px #eee solid' : 'none'
} else { } else {
let width = (border && border.width) || 1 let width = (border && border.width) || widthDefaultValue
width = this.value2px(width) width = this.value2px(width)
let radius = (border && border.radius) || 5 let radius = (border && border.radius) || radiusDefaultValue
radius = this.value2px(radius) radius = this.value2px(radius)
obj = { obj = {
'border-width': width, 'border-width': width,
...@@ -206,7 +208,7 @@ ...@@ -206,7 +208,7 @@
left: 0; left: 0;
margin: 5px; margin: 5px;
border: 1px #eee solid; border: 1px #eee solid;
border-radius: 8px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
...@@ -271,8 +273,8 @@ ...@@ -271,8 +273,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
top: 5px; top: 3px;
right: 5px; right: 3px;
height: 26px; height: 26px;
width: 26px; width: 26px;
border-radius: 50%; border-radius: 50%;
......
uni_modules/uni-file-picker/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-file-picker", "id": "uni-file-picker",
"displayName": "uni-file-picker 文件选择上传", "displayName": "uni-file-picker 文件选择上传",
"version": "0.2.14", "version": "1.0.1",
"description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间", "description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
"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-file-picker/readme.md
浏览文件 @ 6f6e3846
## FilePicker 文件选择上传 ## FilePicker 文件选择上传
> **组件名：uni-file-picker** > **组件名：uni-file-picker**
> 代码块： `uFilePicker` > 代码块： `uFilePicker`
文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 \ No newline at end of file
> - 如不绑定服务空间，`autoUpload`默认为`false`且不可更改
> - 选择文件目前只支持 `H5` 和 `微信小程序平台` ，且 `微信小程序平台` 使用 `wx.chooseMessageFile()`
> - v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
## API
### FilePicker Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :-: | :-: | :-: | :-: | :-: |
| v-model/value | Array\Object | - | - | 组件数据，通常用来回显 ,类型由`return-type`属性决定 ，**格式见下文** |
| disabled | Boolean | false | - | 组件禁用 |
| readonly | Boolean | false | - | 组件只读，不可选择，不显示进度，不显示删除按钮 |
| return-type | String | array | array/object | 限制 `value` 格式，当为 `object` 时 ，组件只能单选，且会覆盖 |
| disable-preview| Boolean | false | - | 禁用图片预览，仅 `mode:grid`生效 |
| del-icon | Boolean | true | - | 是否显示删除按钮 |
| auto-upload | Boolean | true | - | 是否自动上传，值为`true`则只触发@select,可自行上传|
| limit | Number\String | 9 | - | 最大选择个数 ，h5 会自动忽略多选的部分 |
| title | String | - | - | 组件标题，右侧显示上传计数 |
| mode | String | list | list/grid | 选择文件后的文件列表样式 |
| file-mediatype| String | image | image/video/all | 选择文件类型,all 只支持 H5 和微信小程序平台 |
| file-extname | Array\String | - | - | 选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 `file-mediatype` 属性而不同|
| list-styles | Object | - | - | `mode:list` 时的样式 |
| image-styles | Object | - | - | `mode:grid` 时的样式 |
### value 格式
三个属性必填，否则影响组件显示
```json
[
{
"name":"file.txt",
"extname":"txt",
"url":"https://xxxx",
// ...
}
]
```
### list-styles 格式
```json
{
"borderStyle":{
"color":"#eee", // 边框颜色
"width":"1px", // 边框宽度
"style":"solid", // 边框样式
"radius":"5px" // 边框圆角，不支持百分比
},
"border":false, // 是否显示边框
"dividline":true // 是否显示分隔线
}
```
### image-styles 格式
```json
{
"height": 60, // 边框高度
"width": 60, // 边框宽度
"border":{ // 如果为 Boolean 值，可以控制边框显示与否
"color":"#eee", // 边框颜色
"width":"1px", // 边框宽度
"style":"solid", // 边框样式
"radius":"50%" // 边框圆角，支持百分比
}
}
```
### FilePicker Events
|事件称名 |说明 | 返回值 |
|:-: |:-: | :-: |
|@select | 选择文件后触发 | 见下文|
|@progress|文件上传时触发 | 见下文|
|@success |上传成功触发 | 见下文|
|@fail |上传失败触发 | 见下文|
|@delete |文件从列表移除时触发| 见下文|
#### Callback Params
`**注意**：如果绑定的是腾讯云的服务空间 ，tempFilePaths 将返回 fileID`
```json
{
"progress" : Number, // 上传进度 ，仅 @progress 事件包含此字段
"index" : Number, // 上传文件索引 ，仅 @progress 事件包含此字段
"tempFile" : file, // 当前文件对象 ，包含文件流，文件大小，文件名称等，仅 @progress 事件包含此字段
"tempFiles" : files, // 文件列表,包含文件流，文件大小，文件名称等
"tempFilePaths" : filePaths, // 文件地址列表，@sucess 事件为上传后的线上文件地址
}
```
### FilePicker Methods
通过 `$ref` 调用
| 方法称名 | 说明 | 参数 |
| :-: | :-: | :-: |
| upload() | 手动上传 ，如`autoUpload`为`false` ，必须调用此方法| - |
| clearFiles(index:Number) | 清除选择结果| 传如 Number　为删除指定下标的文件 ，不传为删除所有|
### FilePicker Slots
插槽可定义上传按钮显示样式
| 插槽名 | 说明 |
| :-: | :-: |
| default |默认插槽|
## 组件用法
### 基础用法
```html
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
/>
```
```javascript
export default {
data() {
return {
imageValue:[]
}
},
methods:{
// 获取上传状态
select(e){
console.log('选择文件：',e)
},
// 获取上传进度
progress(e){
console.log('上传进度：',e)
},
// 上传成功
success(e){
console.log('上传成功')
},
// 上传失败
fail(e){
console.log('上传失败：',e)
}
}
}
```
### 选择指定后缀图片，且限制选择个数
配置 `file-mediatype` 属性为 `image`，限定只选择图片
配置 `file-extname` 属性为 `'png,jpg'`，限定只选择 `png`和`jpg`后缀的图片
配置 `limit` 属性为 1 ，则最多选择一张图片
配置 `mode` 属性为 `grid` ，可以使用九宫格样式选择图片
```html
<uni-file-picker
v-model="imageValue"
file-mediatype="image"
mode="grid"
file-extname="png,jpg"
:limit="1"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
/>
```
### 手动上传
配置 `auto-upload` 属性为 `false` ，可以停止自动上传，通过`ref`调用`upload`方法自行选择上传时机
```html
<view>
<uni-file-picker ref="files" :auto-upload="false"/>
<button @click="upload">上传文件</button>
</view>
```
```javascript
export default {
data() {},
methods:{
upload(){
this.$refs.files.upload()
}
}
}
```
### 单选图片且点击再次选择
配置 `disable-preview` 属性为 `true`，禁用点击预览图片功能
配置 `del-icon` 属性为 `false`，隐藏删除按钮
配置 `return-type` 属性为 `object`，设置 `value` 类型 ，如需绑定 `array`类型 ，则设置`limit:1`，可达到一样的效果
```html
<uni-file-picker
disable-preview
:del-icon="false"
return-type="object"
>选择头像</uni-file-picker>
```
### 自定义样式
配置 `image-styles` 属性，可以自定义`mode:image`时的回显样式
配置 `list-styles` 属性，可以自定义`mode:video|| mode:all`时的回显样式
```html
<view>
<uni-file-picker fileMediatype="image" :image-styles="imageStyles"/>
<uni-file-picker fileMediatype="all" :list-styles="listStyles"/>
</view>
```
```javascript
export default {
data() {
imageStyles:{
width:64,
height:64,
border:{
color:"#ff5a5f",
width:2,
style:'dashed',
radius:'2px'
}
},
listStyles:{
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {
width:1,
color:'blue',
radius:2
}
}
}
}
```
### 使用插槽
使用默认插槽可以自定义选择文件按钮样式
```html
<uni-file-picker
v-model="value" file-mediatype="all">
<button>选择文件</button>
</uni-file-picker>
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker](https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker)
\ No newline at end of file
uni_modules/uni-forms/changelog.md
浏览文件 @ 6f6e3846
## 1.3.2（2021-12-09）
-
## 1.3.1（2021-11-19）
- 修复 label 插槽不生效的bug
## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
## 1.2.7（2021-08-13） ## 1.2.7（2021-08-13）
- 修复 没有添加校验规则的字段依然报错的Bug - 修复 没有添加校验规则的字段依然报错的Bug
## 1.2.6（2021-08-11） ## 1.2.6（2021-08-11）
- 修复 重置表单错误信息无法清除的问题 - 修复 重置表单错误信息无法清除的问题
## 1.2.5（2021-08-11） ## 1.2.5（2021-08-11）
- 优化 组件文档 - 优化 组件文档
## 1.2.4（2021-08-11） ## 1.2.4（2021-08-11）
- 修复 表单验证只生效一次的问题 - 修复 表单验证只生效一次的问题
## 1.2.3（2021-07-30） ## 1.2.3（2021-07-30）
- 优化 vue3下事件警告的问题 - 优化 vue3下事件警告的问题
## 1.2.2（2021-07-26） ## 1.2.2（2021-07-26）
- 修复 vue2 下条件编译导致destroyed生命周期失效的Bug - 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
- 修复 1.2.1 引起的示例在小程序平台报错的Bug - 修复 1.2.1 引起的示例在小程序平台报错的Bug
## 1.2.1（2021-07-22） ## 1.2.1（2021-07-22）
- 修复 动态校验表单，默认值为空的情况下校验失效的Bug - 修复 动态校验表单，默认值为空的情况下校验失效的Bug
- 修复 不指定name属性时，运行报错的Bug - 修复 不指定name属性时，运行报错的Bug
- 优化 label默认宽度从65调整至70，使required为true且四字时不换行 - 优化 label默认宽度从65调整至70，使required为true且四字时不换行
- 优化 组件示例，新增动态校验示例代码 - 优化 组件示例，新增动态校验示例代码
- 优化 组件文档，使用方式更清晰 - 优化 组件文档，使用方式更清晰
## 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.2（2021-06-25） ## 1.1.2（2021-06-25）
- 修复 pattern 属性在微信小程序平台无效的问题 - 修复 pattern 属性在微信小程序平台无效的问题
## 1.1.1（2021-06-22） ## 1.1.1（2021-06-22）
- 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug - 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
## 1.1.0（2021-06-22） ## 1.1.0（2021-06-22）
- 修复 只写setRules方法而导致校验不生效的Bug - 修复 只写setRules方法而导致校验不生效的Bug
- 修复 由上个办法引发的错误提示文字错位的Bug - 修复 由上个办法引发的错误提示文字错位的Bug
## 1.0.48（2021-06-21） ## 1.0.48（2021-06-21）
- 修复 不设置 label 属性 ，无法设置label插槽的问题 - 修复 不设置 label 属性 ，无法设置label插槽的问题
## 1.0.47（2021-06-21） ## 1.0.47（2021-06-21）
- 修复 不设置label属性，label-width属性不生效的bug - 修复 不设置label属性，label-width属性不生效的bug
- 修复 setRules 方法与rules属性冲突的问题 - 修复 setRules 方法与rules属性冲突的问题
## 1.0.46（2021-06-04） ## 1.0.46（2021-06-04）
- 修复 动态删减数据导致报错的问题 - 修复 动态删减数据导致报错的问题
## 1.0.45（2021-06-04） ## 1.0.45（2021-06-04）
- 新增 modelValue 属性 ，value 即将废弃 - 新增 modelValue 属性 ，value 即将废弃
## 1.0.44（2021-06-02） ## 1.0.44（2021-06-02）
- 新增 uni-forms-item 可以设置单独的 rules - 新增 uni-forms-item 可以设置单独的 rules
- 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤 - 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
- 优化 submit 事件重命名为 validate - 优化 submit 事件重命名为 validate
## 1.0.43（2021-05-12） ## 1.0.43（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.42（2021-04-30） ## 1.0.42（2021-04-30）
- 修复 自定义检验器失效的问题 - 修复 自定义检验器失效的问题
## 1.0.41（2021-03-05） ## 1.0.41（2021-03-05）
- 更新 校验器 - 更新 校验器
- 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug - 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug
## 1.0.40（2021-03-04） ## 1.0.40（2021-03-04）
- 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug - 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
## 1.0.39（2021-02-05） ## 1.0.39（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
- 修复 校验器传入 int 等类型 ，返回String类型的Bug - 修复 校验器传入 int 等类型 ，返回String类型的Bug
uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue
浏览文件 @ 6f6e3846
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<view class="uni-forms-item" :class="{ 'uni-forms-item--border': border, 'is-first-border': border && isFirstBorder, 'uni-forms-item-error': msg }"> <view class="uni-forms-item" :class="{ 'uni-forms-item--border': border, 'is-first-border': border && isFirstBorder, 'uni-forms-item-error': msg }">
<view class="uni-forms-item__box"> <view class="uni-forms-item__box">
<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]"> <view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
<view class="uni-forms-item__label" :style="{ width: labelWid , justifyContent: justifyContent }"> <view class="uni-forms-item__label" :style="{ width: labelWid , justifyContent: justifyContent }">
<slot name="left"> <slot name="label">
<text v-if="required" class="is-required">*</text> <text v-if="required" class="is-required">*</text>
<uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" /> <uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
<text class="label-text">{{ label }}</text> <text class="label-text">{{ label }}</text>
...@@ -180,32 +180,32 @@ export default { ...@@ -180,32 +180,32 @@ export default {
} }
this.init(); this.init();
}, },
// #ifndef VUE3 // #ifndef VUE3
destroyed() { destroyed() {
if(this.__isUnmounted) return if(this.__isUnmounted) return
this.unInit() this.unInit()
}, },
// #endif // #endif
// #ifdef VUE3 // #ifdef VUE3
unmounted(){ unmounted(){
this.__isUnmounted = true this.__isUnmounted = true
this.unInit() this.unInit()
}, },
// #endif // #endif
methods: { methods: {
init() { init() {
if (this.form) { if (this.form) {
let { formRules, validator, formData, value, labelPosition, labelWidth, labelAlign, errShowType } = this.form; let { formRules, validator, formData, value, labelPosition, labelWidth, labelAlign, errShowType } = this.form;
this.labelPos = this.labelPosition ? this.labelPosition : labelPosition; this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;
if(this.label){ if(this.label){
this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth||70)) this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth||70))
}else{ }else{
this.labelWid =( this.labelWidth ? this.labelWidth : (labelWidth||'auto')) this.labelWid =( this.labelWidth ? this.labelWidth : (labelWidth||'auto'))
} }
if(this.labelWid && this.labelWid !=='auto') { if(this.labelWid && this.labelWid !=='auto') {
this.labelWid +='px' this.labelWid +='px'
} }
this.labelAli = this.labelAlign ? this.labelAlign : labelAlign; this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;
// 判断第一个 item // 判断第一个 item
...@@ -241,16 +241,16 @@ export default { ...@@ -241,16 +241,16 @@ export default {
this.labelWid = this.labelWidth || 65; this.labelWid = this.labelWidth || 65;
this.labelAli = this.labelAlign || 'left'; this.labelAli = this.labelAlign || 'left';
} }
}, },
unInit(){ unInit(){
if (this.form) { if (this.form) {
this.form.childrens.forEach((item, index) => { this.form.childrens.forEach((item, index) => {
if (item === this) { if (item === this) {
this.form.childrens.splice(index, 1) this.form.childrens.splice(index, 1)
delete this.form.formData[item.name] delete this.form.formData[item.name]
} }
}) })
} }
}, },
/** /**
* 获取父元素实例 * 获取父元素实例
...@@ -293,7 +293,7 @@ export default { ...@@ -293,7 +293,7 @@ export default {
*/ */
async triggerCheck(value,formTrigger) { async triggerCheck(value,formTrigger) {
let promise = null; let promise = null;
this.errMsg = ''; this.errMsg = '';
// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题 // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
if (!this.validator || Object.keys(this.formRules).length === 0) return; if (!this.validator || Object.keys(this.formRules).length === 0) return;
const isNoField = this.isRequired(this.formRules.rules || []); const isNoField = this.isRequired(this.formRules.rules || []);
...@@ -379,7 +379,7 @@ export default { ...@@ -379,7 +379,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-forms-item { .uni-forms-item {
position: relative; position: relative;
padding: 0px; padding: 0px;
...@@ -427,8 +427,8 @@ export default { ...@@ -427,8 +427,8 @@ export default {
// margin-right: 5px; // margin-right: 5px;
.label-text { .label-text {
font-size: 14px; font-size: 13px;
color: #333; color: #666666;
} }
.label-seat { .label-seat {
margin-right: 5px; margin-right: 5px;
...@@ -452,7 +452,7 @@ export default { ...@@ -452,7 +452,7 @@ export default {
// 必填 // 必填
.is-required { .is-required {
// color: $uni-color-error; // color: $uni-color-error;
color: #f00; color: #dd524d;
font-weight: bold; font-weight: bold;
} }
...@@ -465,7 +465,7 @@ export default { ...@@ -465,7 +465,7 @@ export default {
.uni-error-message-text { .uni-error-message-text {
line-height: 22px; line-height: 22px;
color: $uni-color-error; color: #dd524d;
font-size: 12px; font-size: 12px;
} }
...@@ -476,7 +476,7 @@ export default { ...@@ -476,7 +476,7 @@ export default {
} }
.is-input-error-border { .is-input-error-border {
border-color: $uni-color-error; border-color: #dd524d;
} }
.uni-forms-item--border { .uni-forms-item--border {
...@@ -506,4 +506,4 @@ export default { ...@@ -506,4 +506,4 @@ export default {
.uni-forms--no-padding { .uni-forms--no-padding {
padding: 0; padding: 0;
} }
</style> </style>
uni_modules/uni-forms/components/uni-forms/uni-forms.vue
浏览文件 @ 6f6e3846
...@@ -245,8 +245,8 @@ ...@@ -245,8 +245,8 @@
item.errMsg = ''; item.errMsg = '';
const inputComp = this.inputChildrens.find(child => child.rename === item.name); const inputComp = this.inputChildrens.find(child => child.rename === item.name);
if (inputComp) { if (inputComp) {
inputComp.errMsg = ''; inputComp.errMsg = '';
// fix by mehaotian 不触发其他组件的 setValue // fix by mehaotian 不触发其他组件的 setValue
inputComp.is_reset = true inputComp.is_reset = true
inputComp.$emit('input', inputComp.multiple ? [] : ''); inputComp.$emit('input', inputComp.multiple ? [] : '');
inputComp.$emit('update:modelValue', inputComp.multiple ? [] : ''); inputComp.$emit('update:modelValue', inputComp.multiple ? [] : '');
...@@ -459,7 +459,7 @@ ...@@ -459,7 +459,7 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-forms { .uni-forms {
// overflow: hidden; // overflow: hidden;
// padding: 10px 15px; // padding: 10px 15px;
...@@ -469,4 +469,4 @@ ...@@ -469,4 +469,4 @@
// padding: 10px 15px; // padding: 10px 15px;
// padding-top: 22px; // padding-top: 22px;
} }
</style> </style>
uni_modules/uni-forms/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-forms", "id": "uni-forms",
"displayName": "uni-forms 表单", "displayName": "uni-forms 表单",
"version": "1.2.7", "version": "1.3.2",
"description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据", "description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
"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"
} }
} }
} }
} }
}
uni_modules/uni-forms/readme.md
浏览文件 @ 6f6e3846
...@@ -19,812 +19,5 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。 ...@@ -19,812 +19,5 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。 另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-forms)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 \ No newline at end of file
> - `resetFields` 方法不会重置原生组件和三方组件的值
> - 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能，请谨慎使用
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - uni-forms 中不包含其他表单组件，如需使用 uni-easyinput、uni-data-checkbox 等组件，需要自行引入
> - 如使用过程中有任何问题，或者您对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)
### 基本用法
`uni-forms` 组件通常用来做表单校验和提交。每一个 `uni-forms-item` 是它的一个表单域组件，用来承载表单具体内容，`uni-forms-item` 中可以嵌套 `uni-easyinput`、`uni-data-checkbox` 和 uni-app内置的表单组件 ，不过 uni-app 的内置表单组件需要通过 `binddata` 或者 `uni-forms` 提供的 `setValue` 方法，将内容与 `uni-forms` 关联，才可完成表单的校验与提交（详见后文`表单校验` 部分）
```html
<template>
<view class="">
<uni-forms :modelValue="formData">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
<button @click="submitForm">Submit</button>
</view>
</template>
```
### 对齐方式
使用 `label-position` 属性可以设置所有表单域的位置，默认在左侧
```html
<template>
<view class="">
<uni-forms :modelValue="formData" label-position="top">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
</view>
</template>
```
## 表单校验
表单校验还可以直接通过 `uniCloud web 控制台` 快速根据 `schema` 自动生成表单维护界面，比如新建页面和编辑页面，自动处理校验规则，更多参考[DB Schema](https://uniapp.dcloud.io/uniCloud/schema)
### 如何使用
1. `uni-forms` 需要通过 `rules` 属性传入约定的校验规则，详细描述下文`校验规则说明`。
```html
<!-- rules 内容详见下方完整示例 -->
<uni-forms ref="form" :rules="rules">
...
</uni-forms>
```
2. `uni-forms` 需要绑定`modelValue`属性，值为表单的key\value 组成的对象。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms ref="form" :modelValue="formData" :rules="rules">
...
</uni-forms>
```
3. `uni-forms-item` 需要设置 `name` 属性为当前字段名，字段为 `String` 类型而非变量。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
```
4. 如果使用`uni-easyinput` 和 `uni-data-checkbox` 等关联组件，只需绑定 v-model，无需其他操作。
5. 如果使用原生 input、checkbox 或三方组件等，只需要给组件绑定 `binddata` 方法即可触发表单校验，无需绑定事件到 `methods` 中，见下方完整示例。
6. `binddata('name',$event.detail.value,'form')"` 方法接受三个值，
- 第一个参数传入当前表单组件所在的 name，同当前父组件 `uni-forms-item` 绑定属性 `name` 的值
- 第二个参数传入需要校验的值，内置组件可以通过 `$event.detail.value` 获取到组件的返回值，自定义组件传入需要校验的值即可
- 第三个参数传入 `uni-forms` 组件绑定属性 `ref` 的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个 `uni-forms` 可忽略
7. 如果内置 `binddata` 方法无法满足需求，在当前页面的 `methods` 中复写此方法即可，复写此方法需要调用 `uni-forms` 的 `setValue` 来触发表单校验，见下方 `setValue`方法说明
**完整示例**
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="邮箱" name="email">
<input class="input" v-model="formData.email" type="text" placeholder="请输入用户名" @input="binddata('email',$event.detail.value)" />
</uni-forms-item>
</uni-forms>
<button @click="submit">Submit</button>
</view>
</template>
```
```javascript
export default {
data() {
return {
// 表单数据
formData: {
name: 'LiMing',
email: 'dcloud@email.com'
},
rules: {
// 对name字段进行必填验证
name: {
rules: [{
required: true,
errorMessage: '请输入姓名',
},
{
minLength: 3,
maxLength: 5,
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
// 对email字段进行必填验证
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
}
}
},
methods: {
/**
* 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
* @param {String} name 字段名称
* @param {String} value 表单域的值
*/
// binddata(name,value){
// 通过 input 事件设置表单指定 name 的值
// this.$refs.form.setValue(name, value)
// },
// 触发提交表单
submit() {
this.$refs.form.validate().then(res=>{
console.log('表单数据信息：', res);
}).catch(err =>{
console.log('表单错误信息：', err);
})
}
}
}
```
> **注意**
> `modelValue` 对象目前有比较严格的格式要求：
> - 尽量不要使用嵌套的数据结构，因为表单域指定的`name`值与 modeValue 的 key 是一一对应的，只有一种情况例外，那就是动态校验表单，见下方`动态校验表单`章节
### 校验规则说明
校验规则接受一个 `Object` 类型的值，通过传入不同的规则来表示每个表单域的值该如何校验
对象的 `key` 表示当前表单域的字段名，`value` 为具体的校验规则
以下为 `value` 所包含的内容：
|属性名|类型|说明|
|:-:|:-:|:-:|
|rules|Array|校验规则，见下方 `rules 属性说明`|
|validateTrigger| String| 表单校验时机|
|label|String|当前表单域的字段中文名，多用于 `errorMessage` 的显示，可不填|
```javascript
rules: {
// 对name字段进行必填验证
name: {
// name 字段的校验规则
rules:[
// 校验 name 不能为空
{
required: true,
message: '请填写姓名',
},
// 对name字段进行长度验证
{
minLength: 3,
maxLength: 5,
message: '{label}长度在 {minLength} 到 {maxLength} 个字符',
}
],
// 当前表单域的字段中文名，可不填写
label:'姓名',
validateTrigger:'submit'
}
}
```
### rules 属性说明
每一个验证规则中，可以配置多个属性，下面是一些常见规则属性。实际上这里的规范，与uniCloud的[DB Schema](https://uniapp.dcloud.io/uniCloud/schema?id=validator)规范相同。
|属性名|类型|默认值|可选值|说明 |
|:-:|:-:|:-:|:-:|:-:|
|required|Boolean|-|-|是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置`uni-forms-item`组件的的required为true|
|range|Array|-|-|数组至少要有一个元素，且数组内的每一个元素都是唯一的。 |
|format|String|-|-|内置校验规则，如这些规则无法满足需求，可以使用正则匹配或者自定义规则 |
|pattern|RegExp|-|-|正则表达式，注意事项见下方说明|
|maximum|Number|-|-| 校验最大值(大于)|
|minimum|Number|-|-| 校验最小值(小于) |
|maxLength|Number|-|-| 校验数据最大长度 |
|errorMessage|String|-|-|校验失败提示信息语，可添加属性占位符，当前表格内属性都可用作占位符|
|trigger|String|bind| bind/submit|校验触发时机|
|validateFunction|Function|-|-|自定义校验规则 |
**format属性值说明**
|属性名|说明|
|:-:|:-:|
|string|必须是 string 类型，默认类型|
|number|必须是 number 类型|
|boolean|必须是 boolean 类型|
|array|必须是 array 类型|
|object|必须是 object 类型|
|url|必须是 url 类型|
|email|必须是 email 类型|
> **pattern属性说明**
> 在小程序中，json 中不能使用正则对象，如：`/^\S+?@\S+?\.\S+?$/`，使用正则对象会被微信序列化，导致正则失效。
> 所以建议统一使用字符串的方式来使用正则 ，如`'^\\S+?@\\S+?\\.\\S+?$'` ，需要注意 `\` 需要使用 `\\` 来转译。
> 如验证邮箱：/^\S+?@\S+?\.\S+?$/ （注意不带引号）,或使用 "^\\S+?@\\S+?\\.\\S+?$"（注意带引号需要使用 `\` 转义）
### validateFunction 自定义校验规则使用说明
`uni-forms` 的 `rules` 基础规则有时候不能满足项目的所有使用场景，这时候可以使用 `validateFunction` 来自定义校验规则
`validateFunction` 方法返回四个参数 `validateFunction:function(rule,value,data,callback){}` ，当然返回参数名开发者可以自定义：
- rule : 当前校验字段在 rules 中所对应的校验规则
- value : 当前校验字段的值
- data : 所有校验字段的字段和值的对象
- callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 `errMessage`，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可
> **注意**
> 需要注意，如果需要使用 `validateFunction` 自定义校验规则,则不能采用 `uni-forms` 的 `rules` 属性来配置校验规则，这时候需要通过`ref`，在`onReady`生命周期调用组件的`setRules`方法绑定验证规则
> 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
>
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData">
<uni-forms-item label="兴趣爱好" required name="hobby">
<uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
</uni-forms-item>
</uni-forms>
<button class="button" @click="submit">校验表单</button>
</view>
</template>
```
```javascript
export default {
data() {
return {
formData:{
},
rules: {
hobby: {
rules: [{
required: true,
errorMessage: '请选择兴趣',
},{
validateFunction:function(rule,value,data,callback){
if (value.length < 2) {
callback('请至少勾选两个兴趣爱好')
}
return true
}
}]
}
}
}
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules)
},
methods: {
submit(form) {
this.$refs.form.validate().then(res=>{
console.log('表单数据信息：', res);
}).catch(err =>{
console.log('表单错误信息：', err);
})
}
}
}
```
### validateFunction 异步校验
上面的自定义校验方式为同步校验 ，如果需要异步校验，`validateFunction` 需要返回一个 `Promise` ，校验不通过 执行 `reject(new Error('错误信息'))` 返回对应的错误信息，如果校验通过则直接执行 `resolve()` 即可，在异步校验方法中，不需要使用 `callback` 。
```html
<template>
<view>
<uni-forms :modelValue="formData" ref="form">
<uni-forms-item name="age" label="年龄">
<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
</uni-forms-item>
</uni-forms>
<button class="button" @click="submit">校验表单</button>
</view>
</template>
```
```javascript
export default {
data() {
return {
formData:{
age:''
},
rules: {
age: {
rules: [{
required: true,
errorMessage: '请输入年龄',
},{
validateFunction: (rule, value, data, callback) => {
// 异步需要返回 Promise 对象
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value > 10 ) {
// 通过返回 resolve
resolve()
} else {
// 不通过返回 reject(new Error('错误信息'))
reject(new Error('年龄必须大于十岁'))
}
}, 2000)
})
}
}]
}
}
}
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 表单提交
* @param {Object} event
*/
submit() {
uni.showLoading()
this.$refs.form.validate().then(res => {
uni.hideLoading()
console.log('表单数据信息：', res);
}).catch(err => {
uni.hideLoading()
console.log('表单错误信息：', err);
})
}
}
}
```
### 动态表单校验
`uni-forms v1.0.44` 开始增加了动态校验表单的相关内容。
多用于同一个字段需要添加多次的场景，如需要动态创建多个域名参与检验。
1. 在 `formData` 中定义个变量用来接受同一个字段的多个结果。
```javascript
dynamicFormData: {
email: '',
// domains 字段下会有多个结果
domains: {}
}
```
2. 使用 `uni-forms-item` 的 `rules` 属性定义单个表单域的校验规则。
```html
<uni-forms-item :label="item.label+' '+index" required
:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id">
...
</uni-forms-item>
```
3. `name` 需要动态指定，格式为： `字段[唯一值]`
```html
<uni-forms-item
required
:label="item.label+' '+index"
:name="'domains[' + item.id + ']'"
:rules="[{'required': true,errorMessage: '域名项必填'}]"
:key="item.id"
>
...
</uni-forms-item>
```
4. 需要绑定值的组件的 v-model 也需要动态指定，格式为：`数据源.字段[唯一值]`
```html
<uni-forms-item
required
:label="item.label+' '+index"
:name="'domains[' + item.id + ']'"
:rules="[{'required': true,errorMessage: '域名项必填'}]"
:key="item.id"
>
<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
</uni-forms-item>
```
**完整示例**
```html
<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData">
<uni-forms-item label="邮箱" required name="email">
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
</uni-forms-item>
<template v-for="(item,index) in dynamicLists">
<uni-forms-item :label="item.label+' '+index" required
:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id"
:name="'domains[' + item.id + ']'">
<view class="form-item">
<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
</view>
</uni-forms-item>
</template>
</uni-forms>
<view class="button-group">
<button type="primary" size="mini" @click="add">新增域名</button>
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
</view>
```
```javascript
export default {
data() {
return {
// 数据源
dynamicFormData: {
email: '',
domains: {}
},
// 动态表单数据
dynamicLists: [],
// 规则
dynamicRules: {
email: {
rules: [{
required: true,
errorMessage: '域名不能为空'
}, {
format: 'email',
errorMessage: '域名格式错误'
}]
}
}
}
},
methods: {
// 新增表单域
add() {
this.dynamicLists.push({
label: '域名',
id: Date.now()
})
},
// 删除表单域
del(id) {
let index = this.dynamicLists.findIndex(v => v.id === id)
this.dynamicLists.splice(index, 1)
},
// 提交
submit(ref) {
this.$refs[ref].validate((err,value)=>{
console.log(err,value);
})
},
}
}
// 返回值格式 ，根据自有业务，自行处理数据
{
emial:'',
domains:{
id1:'',
id2:'',
...
}
}
```
### 表单校验时机说明
不管是在规则里还是`uni-forms`、`uni-forms-item`里，都有 `validateTrigger` 属性， `validateTrigger` 属性规定了表单校验时机，当前只有 `bind`、`submit` 两个值域
- `bind` ： 数据绑定时触发校验，`uni-esayinput` 、`uni-data-checkbox` 组件表现为数据发生变化时。其他内置或三方组件为 `binddata` 事件执行时机
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData" validate-trigger="bind">
<uni-forms-item name="age" label="年龄">
<!-- uni-easyinput 的校验时机是数据发生变化， 即触发 input 时 -->
<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item name="email" label="邮箱">
<!-- input 的校验时机是触发 binddata 时， 即触发 blur 时 -->
<input v-model="formData.email" @blur="binddata('email',$event.detail.value)" />
</uni-forms-item>
<button class="button" @click="submit">校验表单</button>
</uni-forms>
</view>
</template>
```
- `submit`： 只有提交表单才会触发表单校验
对于表单校验时机，同时只会有一个 `validateTrigger` 发生作用，它的作用权重为
**`规则 > uni-forms-item > uni-forms `**
- 如果规则里配置 `validateTrigger` ，则优先使用规则里的 `validateTrigger` 属性来决定表单校验时机
- 如果规则里没有配置 `validateTrigger` ，则优先使用 `uni-forms-item` 的 `validateTrigger` 属性来决定表单校验时机
- 如果 `uni-forms-item` 组件里没有配置 `validateTrigger` ，则优先使用 `uni-forms` 的 `validateTrigger` 属性来决定表单校验时机
- 以此类推，如果都没有使用 `validateTrigger` 属性，则会使用 `uni-forms` 的 `validateTrigger` 属性默认值来决定表单校验时机
## API
### Forms Props
|属性名|类型|默认值|可选值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value [即将废弃]|Object|-|-| 表单数据|
|modelValue|Object|-|-| 表单数据|
|rules|Object|-|-|表单校验规则|
|validate-trigger|String|submit|bind/submit| 表单校验时机|
|label-position|String|left|top/left|label 位置|
|label-width|String/Number|75|-|label 宽度，单位 px|
|label-align|String|left| left/center/right|label 居中方式|
|err-show-type|String|undertext| undertext/toast/modal|表单错误信息提示方式|
|border|Boolean|false|-|是否显示分格线|
### Forms Events
|事件称名|说明|
|:-:|:-:|
|validate|任意表单项被校验后触发，返回表单校验信息|
### Forms Methods
|方法称名|说明|
|:-:| :-:|
|submit[即将废弃]| 对整个表单进行校验的方法，会返回一个 promise|
|validate|对整个表单进行校验的方法，会返回一个 promise|
|setValue|设置表单某一项 name 的对应值，通常在 uni-forms-item 和自定表单组件中使用|
|validateField|部分表单进行校验|
|clearValidate|移除表单的校验结果|
|resetFields|重置表单, 需要把 `uni-forms` 的`modelValue`属性改为 `v-model` ,且对内置组件可能不生效|
### validate(keepItem:Array,callback:Function) 方法说明
`validate` 方法是对整个表单进行校验，方法接受两个参数
|参数称名|类型|说明|
|:-:| :-:|:-:|
|keepItem|Array|保留不参与校验的字段|
|callback|Function|校验完成返回函数|
校验成功后，校验对象只保留指定了`name`的字段（只要 ``uni-forms-item` 绑定了 `name`，哪怕不校验，也会返回），如果需要保留其他字段，则需要 `keepItem` 属性
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData">
<uni-forms-item name="age" label="年龄">
<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
</uni-forms-item>
<button class="button" @click="submit">校验表单</button>
</uni-forms>
</view>
</template>
```
```javascript
export default {
data() {
return {
formData:{
age:''
},
rules: {
// ...
}
}
},
onLoad(){
this.formData.id = 'testId'
},
methods: {
submit() {
// 在 onLoad 生命周期中，formData添加了一个 id 字段 ，此时这个字段是不参数校验的，所以结果中不返回
// 在 validate(['id']) 方法中，指定第一个参数 ，即可返回id字段
this.$refs.form.validate(['id'],(err,formData)=>{
if(!err){
console.log('success',formData)
}
})
}
}
}
```
`validate` 方法还可以返回一个 `Promise` 对象，如果使用了 `callback` 则`Promise` 返回 `null`，`validate` 方法会优先使用 `callback`。
`callback` 方法会返回两个返回值 :
- 第一个返回值为检验结果，如果校验失败，则返回失败信息，如果成功，返回 `null`
- 第二个返回值校验数据
```javascript
// 使用 callback
// 如果不需要 keepItem 参数 ，则可以省略
this.$refs.form.validate((err,formData)=>{
// 如果校验成功 ，err 返回 null
if(!err){
console.log('success',formData)
return
}
console.log('error',err)
}).then(res=>{
// res 返回 null
})
// 使用 Promise
// 对整个表单进行校验，返回一个 Promise
this.$refs.form.validate().then((res)=>{
// 成功返回，res 为表单数据
// 其他逻辑处理
// ...
}).catch((err)=>{
// 表单校验验失败，err 为具体错误信息
// 其他逻辑处理
// ...
})
```
### setValue(name:String,value:any) 方法说明
`setValue` 方法通常用于内置组件或三方组件返回值的校验，因为`uni-esayinput` 等 uni 开头的组件内置了对 `uni-forms`的支持，所以这些组件返回的值可以直接使用，但是比如像`input` 这些内置组件值的变化，无法及时通知 `uni-forms` ，从而无法正常的校验，这时就需要我们手动将这些值加入到`uni-forms`的校验。
`setValue` 方法接受两个参数：
- name: 表单域对应的name
- value: 表单域对应的值
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData">
<uni-forms-item name="age" label="年龄">
<input v-model="formData.age" @input="setValue('age',formData.age)">
</uni-forms-item>
<button class="button" @click="submit">校验表单</button>
</uni-forms>
</view>
</template>
```
```javascript
export default {
data() {
return {
formData:{
age:''
},
rules: {
// ...
}
}
},
methods: {
setValue(name,value){
// 设置表单某项对应得值来触发表单校验
// 接受两个参数，第一个参数为表单域的 name ，第二个参数为表单域的值
this.$refs.form.setValue(name,value)
},
submit() {
this.$refs.form.validate(['id'],(err,formData)=>{
if(!err){
console.log('success',formData)
}
})
}
}
}
```
### 其他方法说明
```javascript
// 部分表单进行校验，接受一个参数，类型为 String 或 Array ，只校验传入 name 表单域的值
this.$refs.form.validateField(['name', 'email']).then((res)=>{
// 成功返回，res 为对应表单数据
// 其他逻辑处理
// ...
}).catch((err)=>{
// 表单校验验失败，err 为具体错误信息
// 其他逻辑处理
// ...
})
// 移除表单校验，接受一个参数，类型为 String 或 Array ，只移除传入 name 表单域的值，如果不传入参数，则移除所有
this.$refs.form.clearValidate(['name', 'email'])
```
### FormsItem Props
|属性名|类型|默认值|可选值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|name|String|-|-|表单域的属性名，在使用校验规则时必填|
|required|Boolean|false|-|label 右边显示红色"*"号，样式显示不会对校验规则产生效果|
|validate-trigger|String|submit|bind/submit|表单校验时机|
|left-icon|String|-|-| label左边的图标，限uni-ui的图标名称|
|icon-color|String|#606266|-| 左边通过icon配置的图标的颜色|
|label|String|-|-| 输入框左边的文字提示|
|label-width|Number|70|-| label的宽度，单位px|
|label-align|String|left|left/center/right|label的文字对齐方式|
|label-position|String|left|top/left|label的文字的位置|
|error-message|String|-|-|显示的错误提示内容，如果为空字符串或者false，则不显示错误信息|
### FormsItem Slots
|插槽名|说明|
|:-:| :-:|
|default|默认插槽|
|left(已经失效，请使用label代替)|label插槽，自定义label显示内容|
|label|label插槽，自定义label显示内容|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms](https://hellouniapp.dcloud.net.cn/pages/extUI/forms/forms)
\ No newline at end of file
uni_modules/uni-goods-nav/changelog.md
浏览文件 @ 6f6e3846
## 1.1.1（2021-08-24） ## 1.2.0（2021-11-19）
- 新增 支持国际化 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.1.0（2021-07-13） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) ## 1.1.1（2021-08-24）
## 1.0.7（2021-05-12） - 新增 支持国际化
- 新增 组件示例地址 ## 1.1.0（2021-07-13）
## 1.0.6（2021-04-21） - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 ## 1.0.7（2021-05-12）
## 1.0.5（2021-02-05） - 新增 组件示例地址
- 优化 组件引用关系，通过uni_modules引用组件 ## 1.0.6（2021-04-21）
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.4（2021-02-05） ## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范 - 优化 组件引用关系，通过uni_modules引用组件
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json
浏览文件 @ 6f6e3846
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
"uni-goods-nav.options.cart": "cart", "uni-goods-nav.options.cart": "cart",
"uni-goods-nav.buttonGroup.addToCart": "add to cart", "uni-goods-nav.buttonGroup.addToCart": "add to cart",
"uni-goods-nav.buttonGroup.buyNow": "buy now" "uni-goods-nav.buttonGroup.buyNow": "buy now"
} }
uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js
浏览文件 @ 6f6e3846
...@@ -5,4 +5,4 @@ export default { ...@@ -5,4 +5,4 @@ export default {
en, en,
'zh-Hans': zhHans, 'zh-Hans': zhHans,
'zh-Hant': zhHant 'zh-Hant': zhHant
} }
uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json
浏览文件 @ 6f6e3846
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
"uni-goods-nav.options.cart": "购物车", "uni-goods-nav.options.cart": "购物车",
"uni-goods-nav.buttonGroup.addToCart": "加入购物车", "uni-goods-nav.buttonGroup.addToCart": "加入购物车",
"uni-goods-nav.buttonGroup.buyNow": "立即购买" "uni-goods-nav.buttonGroup.buyNow": "立即购买"
} }
uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json
浏览文件 @ 6f6e3846
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
"uni-goods-nav.options.cart": "購物車", "uni-goods-nav.options.cart": "購物車",
"uni-goods-nav.buttonGroup.addToCart": "加入購物車", "uni-goods-nav.buttonGroup.addToCart": "加入購物車",
"uni-goods-nav.buttonGroup.buyNow": "立即購買" "uni-goods-nav.buttonGroup.buyNow": "立即購買"
} }
uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue
浏览文件 @ 6f6e3846
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</view> </view>
</view> </view>
<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right "> <view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
<view v-for="(item,index) in buttonGroup" :key="index" :style="{backgroundColor:item.backgroundColor,color:item.color}" <view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view> class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
</view> </view>
</view> </view>
...@@ -63,12 +63,12 @@ ...@@ -63,12 +63,12 @@
default () { default () {
return [{ return [{
text: t("uni-goods-nav.buttonGroup.addToCart"), text: t("uni-goods-nav.buttonGroup.addToCart"),
backgroundColor: '#ffa200', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff' color: '#fff'
}, },
{ {
text: t("uni-goods-nav.buttonGroup.buyNow"), text: t("uni-goods-nav.buttonGroup.buyNow"),
backgroundColor: '#ff0000', backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff' color: '#fff'
} }
] ]
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
.uni-tab__text { .uni-tab__text {
margin-top: 3px; margin-top: 3px;
font-size: $uni-font-size-sm; font-size: 12px;
color: #646566; color: #646566;
} }
...@@ -182,7 +182,7 @@ ...@@ -182,7 +182,7 @@
} }
.uni-tab__cart-button-right-text { .uni-tab__cart-button-right-text {
font-size: $uni-font-size-base; font-size: 14px;
color: #fff; color: #fff;
} }
...@@ -221,12 +221,4 @@ ...@@ -221,12 +221,4 @@
// width: auto; // width: auto;
border-radius: 15px; border-radius: 15px;
} }
.uni-tab__color-y {
background-color: #ffa200;
}
.uni-tab__color-r {
background-color: #ff0000;
}
</style> </style>
uni_modules/uni-goods-nav/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-goods-nav", "id": "uni-goods-nav",
"displayName": "uni-goods-nav 商品导航", "displayName": "uni-goods-nav 商品导航",
"version": "1.1.1", "version": "1.2.0",
"description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作", "description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作",
"keywords": [ "keywords": [
"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": [
"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-goods-nav/readme.md
浏览文件 @ 6f6e3846
### GoodsNav 商品导航 ## GoodsNav 商品导航
*已经支持在nvue页面中使用* > **组件名：uni-goods-nav**
> 代码块： `uGoodsNav`
商品加入购物车，立即购买，组件名：`uni-goods-nav`，代码块： uGoodsNav。 商品加入购物车，立即购买等。
### 使用方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
引用组件 \ No newline at end of file
```javascript
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
export default {
components: {uniGoodsNav}
}
```
使用组件
```html
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
```
```javascript
export default {
data () {
return {
options: [{
icon: 'headphones',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor:'#007aff',
infoColor:"red"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
},
methods: {
onClick (e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick (e) {
console.log(e)
this.options[2].info++
}
}
}
```
### 属性说明
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|options |Array |- |组件参数 |
|buttonGroup|Array |- |组件按钮组参数 |
|fill |Boolean|false |按钮是否平铺 |
**options 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |显示文字 |
|icon |String | |图标，[参考](https://ext.dcloud.net.cn/plugin?id=28) |
|info |Number |0 |右上角数字角标 |
|infoBackgroundColor|String |#ff0000|角标背景色 |
|infoColor |String |#fff |角标前景色 |
**buttonGroup 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |按钮文字 |
|backgroundColor |String |- |按钮背景色 |
|color |String |- |字体颜色 |
### 事件说明
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |左侧点击事件 |e = {index,content}|
|@buttonClick |右侧按钮组点击事件 |e = {index,content}|
### 插件预览地址
[https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav](https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav](https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav)
\ No newline at end of file
uni_modules/uni-grid/changelog.md
浏览文件 @ 6f6e3846
## 1.3.1（2021-07-30） ## 1.4.0（2021-11-19）
- 优化 vue3下事件警告的问题 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-grid](https://uniapp.dcloud.io/component/uniui/uni-grid)
## 1.3.2（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.3.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.3.0（2021-07-13） ## 1.3.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.2.4（2021-05-12） ## 1.2.4（2021-05-12）
......
uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
浏览文件 @ 6f6e3846
...@@ -94,34 +94,34 @@ ...@@ -94,34 +94,34 @@
.uni-grid-item--border { .uni-grid-item--border {
position: relative; position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-bottom-color: $uni-border-color; border-bottom-color: #D2D2D2;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 0.5px; border-bottom-width: 0.5px;
border-right-color: $uni-border-color; border-right-color: #D2D2D2;
border-right-style: solid; border-right-style: solid;
border-right-width: 0.5px; border-right-width: 0.5px;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 0; z-index: 0;
border-bottom: 1px $uni-border-color solid; border-bottom: 1px #D2D2D2 solid;
border-right: 1px $uni-border-color solid; border-right: 1px #D2D2D2 solid;
/* #endif */ /* #endif */
} }
.uni-grid-item--border-top { .uni-grid-item--border-top {
position: relative; position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-top-color: $uni-border-color; border-top-color: #D2D2D2;
border-top-style: solid; border-top-style: solid;
border-top-width: 0.5px; border-top-width: 0.5px;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
border-top: 1px $uni-border-color solid; border-top: 1px #D2D2D2 solid;
z-index: 0; z-index: 0;
/* #endif */ /* #endif */
} }
.uni-highlight:active { .uni-highlight:active {
background-color: $uni-bg-color-hover; background-color: #f1f1f1;
} }
</style> </style>
uni_modules/uni-grid/components/uni-grid/uni-grid.vue
浏览文件 @ 6f6e3846
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
// 边框颜色 // 边框颜色
borderColor: { borderColor: {
type: String, type: String,
default: '#e5e5e5' default: '#D2D2D2'
}, },
// 是否正方形显示,默认为 true // 是否正方形显示,默认为 true
square: { square: {
...@@ -130,13 +130,13 @@ ...@@ -130,13 +130,13 @@
.uni-grid--border { .uni-grid--border {
position: relative; position: relative;
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
border-left-color: $uni-border-color; border-left-color: #D2D2D2;
border-left-style: solid; border-left-style: solid;
border-left-width: 0.5px; border-left-width: 0.5px;
/* #endif */ /* #endif */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 1; z-index: 1;
border-left: 1px $uni-border-color solid; border-left: 1px #D2D2D2 solid;
/* #endif */ /* #endif */
} }
</style> </style>
uni_modules/uni-grid/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-grid", "id": "uni-grid",
"displayName": "uni-grid 宫格", "displayName": "uni-grid 宫格",
"version": "1.3.1", "version": "1.4.0",
"description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。", "description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。",
"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","uni-icons"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -75,8 +75,12 @@ ...@@ -75,8 +75,12 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
} }
} }
\ No newline at end of file
uni_modules/uni-grid/readme.md
浏览文件 @ 6f6e3846
...@@ -7,89 +7,5 @@ ...@@ -7,89 +7,5 @@
宫格组件。 宫格组件。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-grid)
#### 如使用过程中有任何问题，或者您对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)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
> - Grid 组件仅在自定义组件模式下支持
> - column 属性最大值最好不要超过 5 个，如果超过，需要注意内容显示
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： `详情 --> 项目配置 --> 启用 component2 编译`
> - 为了避免高度显示错误组件内必须要有内容
### 基本用法
在 ``template`` 中使用组件
```html
<!-- 一般用法 -->
<uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
<!-- 不带边框并矩形显示 -->
<uni-grid :column="3" :showBorder="false" :square="false">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
```
## API
### Grid Props
**uni-grid 属性说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|column |Number |3 |每列显示个数 |
|borderColor|String |#d0dee5|边框颜色 |
|showBorder |Boolean|true |是否显示边框 |
|square |Boolean|true |是否方形显示 |
|highlight |Boolean|true |点击背景是否高亮 |
### Grid Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|点击 grid 触发 |e={detail:{index:0}}，index 为当前点击 gird 下标|
### GridItem Props
|属性名|类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|index|Number |- |子组件的唯一标识 ，点击gird会返回当前的标识|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid](https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid)
\ No newline at end of file
uni_modules/uni-group/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.1（2021-11-22）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 修复 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-group](https://uniapp.dcloud.io/component/uniui/uni-group)
## 1.1.7（2021-11-08）
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 优化 组件文档
## 1.0.3（2021-05-12） ## 1.0.3（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.2（2021-02-05） ## 1.0.2（2021-02-05）
......
uni_modules/uni-group/components/uni-group/uni-group.vue
浏览文件 @ 6f6e3846
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
align-items: center; align-items: center;
padding-left: 15px; padding-left: 15px;
height: 40px; height: 40px;
background-color: $uni-bg-color-grey; background-color: #eee;
font-weight: normal; font-weight: normal;
color: $uni-text-color; color: #666;
} }
.uni-group__content { .uni-group__content {
...@@ -112,8 +112,8 @@ ...@@ -112,8 +112,8 @@
} }
.uni-group__title-text { .uni-group__title-text {
font-size: $uni-font-size-base; font-size: 14px;
color: $uni-text-color; color: #666;
} }
.distraction { .distraction {
......
uni_modules/uni-group/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-group", "id": "uni-group",
"displayName": "uni-group 分组", "displayName": "uni-group 分组",
"version": "1.1.0", "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-group/readme.md
浏览文件 @ 6f6e3846
## Group 分组
### Group 分组 > **组件名：uni-group**
> 代码块： `uGroup`
分组组件可用于将组件分组，添加间隔，以产生明显的区块，组件名：``uni-group``，代码块： uGroup。
分组组件可用于将组件分组，添加间隔，以产生明显的区块。
### 平台差异说明
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-group)
如无特殊说明，则全平台可用 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
### 组件使用注意事项
为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ，请自行手动安装
- 如使用过程中有任何问题，或者您对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-group title="分组1" top="20">
<view>分组1 的内容</view>
<view>分组1 的内容</view>
</uni-group>
<uni-group title="分组2">
<view>分组2 的内容</view>
<view>分组2 的内容</view>
</uni-group>
```
### 属性说明
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|title|String|-|主标题|
|top|Number|-|分组间隔|
|mode|String|''|模式 ，card 为卡片模式|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/group/group](https://hellouniapp.dcloud.net.cn/pages/extUI/group/group)
\ No newline at end of file
uni_modules/uni-icons/changelog.md
浏览文件 @ 6f6e3846
## 1.3.5（2022-01-24）
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4（2022-01-24）
- 优化 size 支持其他单位
## 1.3.3（2022-01-17）
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
## 1.3.2（2021-12-01） ## 1.3.2（2021-12-01）
- 优化 示例可复制图标名称 - 优化 示例可复制图标名称
## 1.3.1（2021-11-23） ## 1.3.1（2021-11-23）
......
uni_modules/uni-icons/components/uni-icons/icons.js
浏览文件 @ 6f6e3846
...@@ -173,6 +173,13 @@ export default { ...@@ -173,6 +173,13 @@ export default {
"unicode": "e6bb", "unicode": "e6bb",
"unicode_decimal": 59067 "unicode_decimal": 59067
}, },
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrowthinright",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{ {
"icon_id": "24923354", "icon_id": "24923354",
"name": "arrowthinleft", "name": "arrowthinleft",
...@@ -180,6 +187,13 @@ export default { ...@@ -180,6 +187,13 @@ export default {
"unicode": "e6bc", "unicode": "e6bc",
"unicode_decimal": 59068 "unicode_decimal": 59068
}, },
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrowthinleft",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{ {
"icon_id": "24923355", "icon_id": "24923355",
"name": "arrowthinup", "name": "arrowthinup",
...@@ -187,12 +201,25 @@ export default { ...@@ -187,12 +201,25 @@ export default {
"unicode": "e6bd", "unicode": "e6bd",
"unicode_decimal": 59069 "unicode_decimal": 59069
}, },
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrowthinup",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{ {
"icon_id": "24923356", "icon_id": "24923356",
"name": "arrowthindown", "name": "arrowthindown",
"font_class": "arrow-down", "font_class": "arrow-down",
"unicode": "e6be", "unicode": "e6be",
"unicode_decimal": 59070 "unicode_decimal": 59070
},{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrowthindown",
"unicode": "e6be",
"unicode_decimal": 59070
}, },
{ {
"icon_id": "24923349", "icon_id": "24923349",
...@@ -200,6 +227,12 @@ export default { ...@@ -200,6 +227,12 @@ export default {
"font_class": "bottom", "font_class": "bottom",
"unicode": "e6b8", "unicode": "e6b8",
"unicode_decimal": 59064 "unicode_decimal": 59064
},{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "arrowdown",
"unicode": "e6b8",
"unicode_decimal": 59064
}, },
{ {
"icon_id": "24923346", "icon_id": "24923346",
...@@ -208,6 +241,13 @@ export default { ...@@ -208,6 +241,13 @@ export default {
"unicode": "e6b5", "unicode": "e6b5",
"unicode_decimal": 59061 "unicode_decimal": 59061
}, },
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "arrowright",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{ {
"icon_id": "24923347", "icon_id": "24923347",
"name": "arrowup", "name": "arrowup",
...@@ -215,6 +255,13 @@ export default { ...@@ -215,6 +255,13 @@ export default {
"unicode": "e6b6", "unicode": "e6b6",
"unicode_decimal": 59062 "unicode_decimal": 59062
}, },
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "arrowup",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{ {
"icon_id": "24923348", "icon_id": "24923348",
"name": "arrowleft", "name": "arrowleft",
...@@ -222,6 +269,13 @@ export default { ...@@ -222,6 +269,13 @@ export default {
"unicode": "e6b7", "unicode": "e6b7",
"unicode_decimal": 59063 "unicode_decimal": 59063
}, },
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "arrowleft",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{ {
"icon_id": "24923334", "icon_id": "24923334",
"name": "eye", "name": "eye",
......
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
浏览文件 @ 6f6e3846
<template> <template>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" @click="_onClick">{{unicode}}</text> <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text> <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script> <script>
import icons from './icons.js'; import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE // #ifdef APP-NVUE
var domModule = weex.requireModule('dom'); var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf' import iconUrl from './uniicons.ttf'
...@@ -61,6 +65,9 @@ ...@@ -61,6 +65,9 @@
return unescape(`%u${code.unicode}`) return unescape(`%u${code.unicode}`)
} }
return '' return ''
},
iconSize(){
return getVal(this.size)
} }
}, },
methods: { methods: {
......
uni_modules/uni-icons/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-icons", "id": "uni-icons",
"displayName": "uni-icons 图标", "displayName": "uni-icons 图标",
"version": "1.3.2", "version": "1.3.5",
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。", "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
......
uni_modules/uni-id-cf/changelog.md
浏览文件 @ 6f6e3846
## 1.0.14（2022-01-26）
- 修复 uni-admin 的 'registerUser' 接口，注册用户含有多余字段 uid
## 1.0.13（2022-01-26） ## 1.0.13（2022-01-26）
新增逻辑:调用logout接口后刷新设备信息中token的有效期 - 新增逻辑:调用logout接口后刷新设备信息中token的有效期
## 1.0.12（2022-01-24） ## 1.0.12（2022-01-24）
- 优化设备信息存储逻辑 - 优化设备信息存储逻辑
- 新增刷新设备信息token有效期的API `renewDeviceTokenExpired` - 新增刷新设备信息token有效期的API `renewDeviceTokenExpired`
......
uni_modules/uni-id-cf/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-id-cf", "id": "uni-id-cf",
"displayName": "uni-id-cf", "displayName": "uni-id-cf",
"version": "1.0.13", "version": "1.0.14",
"description": "封装uni-id常用接口的云函数，快速实现简单、统一、可扩展的用户管理功能", "description": "封装uni-id常用接口的云函数，快速实现简单、统一、可扩展的用户管理功能",
"keywords": [ "keywords": [
"uni-id-cf", "uni-id-cf",
......
uni_modules/uni-id-cf/uniCloud/cloudfunctions/uni-id-cf/index.js
浏览文件 @ 6f6e3846
...@@ -166,10 +166,10 @@ exports.main = async (event, context) => { ...@@ -166,10 +166,10 @@ exports.main = async (event, context) => {
recordSize = 2; recordSize = 2;
const uniIdLogCollection = db.collection('uni-id-log') const uniIdLogCollection = db.collection('uni-id-log')
let recentRecord = await uniIdLogCollection.where({ let recentRecord = await uniIdLogCollection.where({
deviceId: params.deviceId || context.DEVICEID, deviceId: params.deviceId || context.DEVICEID,
create_date: dbCmd.gt(now - recordDate), create_date: dbCmd.gt(now - recordDate),
type: 'login' type: 'login'
}) })
.orderBy('create_date', 'desc') .orderBy('create_date', 'desc')
.limit(recordSize) .limit(recordSize)
.get(); .get();
...@@ -330,10 +330,10 @@ exports.main = async (event, context) => { ...@@ -330,10 +330,10 @@ exports.main = async (event, context) => {
} = uniIdConfig['app-plus'].oauth.weixin; } = uniIdConfig['app-plus'].oauth.weixin;
let wxRes = await uniCloud.httpclient.request( let wxRes = await uniCloud.httpclient.request(
`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&scope=snsapi_userinfo&appid=${appid}&secret=${secret}`, { `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&scope=snsapi_userinfo&appid=${appid}&secret=${secret}`, {
method: 'POST', method: 'POST',
contentType: 'json', // 指定以application/json发送data内的数据 contentType: 'json', // 指定以application/json发送data内的数据
dataType: 'json' // 指定返回值为json格式，自动进行parse dataType: 'json' // 指定返回值为json格式，自动进行parse
}) })
if (wxRes.status == 200) { if (wxRes.status == 200) {
let { let {
nickname, nickname,
...@@ -395,11 +395,11 @@ exports.main = async (event, context) => { ...@@ -395,11 +395,11 @@ exports.main = async (event, context) => {
res = await uniID.checkToken(uniIdToken); res = await uniID.checkToken(uniIdToken);
break; break;
case 'logout': case 'logout':
res = await uniID.logout(uniIdToken) res = await uniID.logout(uniIdToken)
await deviceDB.where({ await deviceDB.where({
"device_id": context.DEVICEID, "device_id": context.DEVICEID,
}).update({ }).update({
"tokenExpired": Date.now() "tokenExpired": Date.now()
}) })
break; break;
case 'sendSmsCode': case 'sendSmsCode':
...@@ -519,7 +519,7 @@ exports.main = async (event, context) => { ...@@ -519,7 +519,7 @@ exports.main = async (event, context) => {
}); });
break; break;
// =========================== admin api start ========================= // =========================== admin api start =========================
case 'registerAdmin': { case 'registerAdmin': {
var { var {
username, username,
...@@ -559,9 +559,9 @@ exports.main = async (event, context) => { ...@@ -559,9 +559,9 @@ exports.main = async (event, context) => {
} }
} }
}
break; break;
case 'registerUser': }
case 'registerUser': {
const { const {
userInfo userInfo
} = await uniID.getUserInfo({ } = await uniID.getUserInfo({
...@@ -576,6 +576,7 @@ exports.main = async (event, context) => { ...@@ -576,6 +576,7 @@ exports.main = async (event, context) => {
// 过滤 dcloud_appid，注册用户成功后再提交 // 过滤 dcloud_appid，注册用户成功后再提交
const dcloudAppidList = params.dcloud_appid const dcloudAppidList = params.dcloud_appid
delete params.dcloud_appid delete params.dcloud_appid
delete params.uid
res = await uniID.register({ res = await uniID.register({
autoSetDcloudAppid: false, autoSetDcloudAppid: false,
...params ...params
...@@ -590,6 +591,7 @@ exports.main = async (event, context) => { ...@@ -590,6 +591,7 @@ exports.main = async (event, context) => {
} }
} }
break; break;
}
case 'updateUser': { case 'updateUser': {
const { const {
userInfo userInfo
...@@ -693,4 +695,4 @@ exports.main = async (event, context) => { ...@@ -693,4 +695,4 @@ exports.main = async (event, context) => {
} }
//返回数据给客户端 //返回数据给客户端
return res return res
} }
\ No newline at end of file
uni_modules/uni-indexed-list/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.1（2021-11-22）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 修复 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-indexed-list](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.11（2021-05-12） ## 1.0.11（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.10（2021-04-21） ## 1.0.10（2021-04-21）
......
uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list-item.vue
浏览文件 @ 6f6e3846
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)"> <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}"> <view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
<view v-if="showSelect" style="margin-right: 20rpx;"> <view v-if="showSelect" style="margin-right: 20rpx;">
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" /> <uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
</view> </view>
<text class="uni-indexed-list__item-content">{{ item.name }}</text> <text class="uni-indexed-list__item-content">{{ item.name }}</text>
</view> </view>
...@@ -62,11 +62,11 @@ ...@@ -62,11 +62,11 @@
flex-direction: column; flex-direction: column;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
border-top-color: $uni-border-color; border-top-color: #DEDEDE;
} }
.uni-indexed-list__item { .uni-indexed-list__item {
font-size: $uni-font-size-lg; font-size: 14px;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
} }
.uni-indexed-list__item-container { .uni-indexed-list__item-container {
padding-left: $uni-spacing-row-lg; padding-left: 15px;
flex: 1; flex: 1;
position: relative; position: relative;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -103,11 +103,11 @@ ...@@ -103,11 +103,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 50px; height: 50px;
padding: $uni-spacing-row-lg; padding: 25px;
padding-left: 0; padding-left: 0;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-color: $uni-border-color; border-bottom-color: #DEDEDE;
} }
.uni-indexed-list__item-border--last { .uni-indexed-list__item-border--last {
...@@ -116,7 +116,8 @@ ...@@ -116,7 +116,8 @@
.uni-indexed-list__item-content { .uni-indexed-list__item-content {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: #191919;
} }
.uni-indexed-list { .uni-indexed-list {
...@@ -137,6 +138,7 @@ ...@@ -137,6 +138,7 @@
.uni-indexed-list__title { .uni-indexed-list__title {
padding: 6px 12px; padding: 6px 12px;
line-height: 24px; line-height: 24px;
font-size: $uni-font-size-sm; font-size: 16px;
font-weight: 500;
} }
</style> </style>
uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue
浏览文件 @ 6f6e3846
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y> <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx"> <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
<!-- #endif --> <!-- #endif -->
<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect" @itemClick="onClick"></indexed-list-item> <indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
@itemClick="onClick"></indexed-list-item>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
</view> </view>
</scroll-view> </scroll-view>
...@@ -17,11 +18,13 @@ ...@@ -17,11 +18,13 @@
</cell> </cell>
</list> </list>
<!-- #endif --> <!-- #endif -->
<view class="uni-indexed-list__menu" :class="touchmove ? 'uni-indexed-list__menu--active' : ''" @touchstart="touchStart" <view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
@touchmove.stop.prevent="touchMove" @touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove" @touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
@mouseleave.stop="mouseleave"> @mouseleave.stop="mouseleave">
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"> <view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text> :class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
<text class="uni-indexed-list__menu-text"
:class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
</view> </view>
</view> </view>
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper"> <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
...@@ -87,7 +90,7 @@ ...@@ -87,7 +90,7 @@
components: { components: {
indexedListItem indexedListItem
}, },
emits:['click'], emits: ['click'],
props: { props: {
options: { options: {
type: Array, type: Array,
...@@ -211,7 +214,7 @@ ...@@ -211,7 +214,7 @@
}, },
touchEnd() { touchEnd() {
this.touchmove = false this.touchmove = false
this.touchmoveIndex = -1 // this.touchmoveIndex = -1
}, },
/** /**
...@@ -298,7 +301,6 @@ ...@@ -298,7 +301,6 @@
.uni-indexed-list__menu { .uni-indexed-list__menu {
width: 24px; width: 24px;
background-color: lightgrey;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
...@@ -318,18 +320,24 @@ ...@@ -318,18 +320,24 @@
} }
.uni-indexed-list__menu-text { .uni-indexed-list__menu-text {
line-height: 20px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
} }
.uni-indexed-list__menu--active { .uni-indexed-list__menu--active {
background-color: rgb(200, 200, 200); // background-color: rgb(200, 200, 200);
} }
.uni-indexed-list__menu--active {}
.uni-indexed-list__menu-text--active { .uni-indexed-list__menu-text--active {
color: #007aff; border-radius: 16px;
width: 16px;
height: 16px;
line-height: 16px;
background-color: #007aff;
color: #fff;
} }
.uni-indexed-list__alert-wrapper { .uni-indexed-list__alert-wrapper {
......
uni_modules/uni-indexed-list/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-indexed-list", "id": "uni-indexed-list",
"displayName": "uni-indexed-list 索引列表", "displayName": "uni-indexed-list 索引列表",
"version": "1.1.0", "version": "1.2.1",
"description": "索引列表组件，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景", "description": "索引列表组件，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -77,6 +78,10 @@ ...@@ -77,6 +78,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-indexed-list/readme.md
浏览文件 @ 6f6e3846
...@@ -7,61 +7,5 @@ ...@@ -7,61 +7,5 @@
用于展示索引列表。 用于展示索引列表。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-indexed-list)
#### 如使用过程中有任何问题，或者您对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-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
```
## API
### IndexedList Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|options |Object |- |索引列表需要的数据对象 |
|showSelect |Boolean|- | 展示模式，true 为展示默认，false 为选择模式，默认为 false |
**options 数据格式说明**
```json
[{
"letter": "A",
"data": [
"阿克苏机场",
"阿拉山口机场",
"阿勒泰机场",
"阿里昆莎机场",
"安庆天柱山机场",
"澳门国际机场"
]
}, {
"letter": "B",
"data": [
"保山机场",
"包头机场",
"北海福成机场",
"北京南苑机场",
"北京首都国际机场"
]
}]
```
### IndexedList Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击列表事件 ，返回当前选择项的事件对象 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list](https://hellouniapp.dcloud.net.cn/pages/extUI/indexed-list/indexed-list)
\ No newline at end of file
uni_modules/uni-link/changelog.md
浏览文件 @ 6f6e3846
## 0.0.6（2021-07-30） ## 1.0.0（2021-11-19）
- 支持自定义插槽 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 0.0.5（2021-06-21） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-link](https://uniapp.dcloud.io/component/uniui/uni-link)
- 新增 download 属性，H5平台下载文件名 ## 1.1.7（2021-11-08）
## 0.0.4（2021-05-12） ## 0.0.7（2021-09-03）
- 新增 组件示例地址 - 修复 在 nvue 下不显示的 bug
## 0.0.3（2021-03-09） ## 0.0.6（2021-07-30）
- 新增 href 属性支持 tel:|mailto: - 新增 支持自定义插槽
## 0.0.5（2021-06-21）
## 0.0.2（2021-02-05） - 新增 download 属性，H5平台下载文件名
- 调整为uni_modules目录规范 ## 0.0.4（2021-05-12）
- 新增 组件示例地址
## 0.0.3（2021-03-09）
- 新增 href 属性支持 tel:|mailto:
## 0.0.2（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-link/components/uni-link/uni-link.vue
浏览文件 @ 6f6e3846
<template> <template>
<a v-if="isShowA" class="uni-link" :href="href" <a v-if="isShowA" class="uni-link" :href="href"
:class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
:style="{color,fontSize:fontSize+'px'}" :download="download"> :style="{color,fontSize:fontSize+'px'}" :download="download">
<slot>{{text}}</slot> <slot>{{text}}</slot>
</a> </a>
<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" <!-- #ifndef APP-NVUE -->
:style="{color,fontSize:fontSize+'px'}" @click="openURL"> <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
<slot>{{text}}</slot> :style="{color,fontSize:fontSize+'px'}" @click="openURL">
</text> <slot>{{text}}</slot>
</template> </text>
<!-- #endif -->
<script> <!-- #ifdef APP-NVUE -->
/** <text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}"
* Link 外部网页超链接组件 :style="{color,fontSize:fontSize+'px'}" @click="openURL">
* @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页 {{text}}
* @tutorial https://ext.dcloud.net.cn/plugin?id=1182 </text>
* @property {String} href 点击后打开的外部网页url <!-- #endif -->
* @property {String} text 显示的文字 </template>
* @property {String} downlaod H5平台下载文件名
* @property {Boolean} showUnderLine 是否显示下划线 <script>
* @property {String} copyTips 在小程序端复制链接时显示的提示语 /**
* @property {String} color 链接文字颜色 * Link 外部网页超链接组件
* @property {String} fontSize 链接文字大小 * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
* @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link> * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
*/ * @property {String} href 点击后打开的外部网页url
export default { * @property {String} text 显示的文字
name: 'uniLink', * @property {String} downlaod H5平台下载文件名
props: { * @property {Boolean} showUnderLine 是否显示下划线
href: { * @property {String} copyTips 在小程序端复制链接时显示的提示语
type: String, * @property {String} color 链接文字颜色
default: '' * @property {String} fontSize 链接文字大小
}, * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
text: { */
type: String, export default {
default: '' name: 'uniLink',
}, props: {
download: { href: {
type: String, type: String,
default: '' default: ''
}, },
showUnderLine: { text: {
type: [Boolean, String], type: String,
default: true default: ''
}, },
copyTips: { download: {
type: String, type: String,
default: '已自动复制网址，请在手机浏览器里粘贴该网址' default: ''
}, },
color: { showUnderLine: {
type: String, type: [Boolean, String],
default: '#999999' default: true
}, },
fontSize: { copyTips: {
type: [Number, String], type: String,
default: 14 default: '已自动复制网址，请在手机浏览器里粘贴该网址'
} },
}, color: {
computed: { type: String,
isShowA() { default: '#999999'
// #ifdef H5 },
this._isH5 = true; fontSize: {
// #endif type: [Number, String],
if ((this.isMail() || this.isTel()) && this._isH5 === true) { default: 14
return true; }
} },
return false; computed: {
} isShowA() {
}, // #ifdef H5
created() { this._isH5 = true;
this._isH5 = null; // #endif
}, if ((this.isMail() || this.isTel()) && this._isH5 === true) {
methods: { return true;
isMail() { }
return this.href.startsWith('mailto:'); return false;
}, }
isTel() { },
return this.href.startsWith('tel:'); created() {
}, this._isH5 = null;
openURL() { },
// #ifdef APP-PLUS methods: {
if (this.isTel()) { isMail() {
this.makePhoneCall(this.href.replace('tel:', '')); return this.href.startsWith('mailto:');
} else { },
plus.runtime.openURL(this.href); isTel() {
} return this.href.startsWith('tel:');
// #endif },
// #ifdef H5 openURL() {
window.open(this.href) // #ifdef APP-PLUS
// #endif if (this.isTel()) {
// #ifdef MP this.makePhoneCall(this.href.replace('tel:', ''));
uni.setClipboardData({ } else {
data: this.href plus.runtime.openURL(this.href);
}); }
uni.showModal({ // #endif
content: this.copyTips, // #ifdef H5
showCancel: false window.open(this.href)
}); // #endif
// #endif // #ifdef MP
}, uni.setClipboardData({
makePhoneCall(phoneNumber) { data: this.href
uni.makePhoneCall({ });
phoneNumber uni.showModal({
}) content: this.copyTips,
} showCancel: false
} });
} // #endif
</script> },
makePhoneCall(phoneNumber) {
<style> uni.makePhoneCall({
/* #ifndef APP-NVUE */ phoneNumber
.uni-link { })
cursor: pointer; }
} }
}
/* #endif */ </script>
.uni-link--withline {
text-decoration: underline; <style>
} /* #ifndef APP-NVUE */
</style> .uni-link {
cursor: pointer;
}
/* #endif */
.uni-link--withline {
text-decoration: underline;
}
</style>
uni_modules/uni-link/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-link", "id": "uni-link",
"displayName": "uni-link 超链接", "displayName": "uni-link 超链接",
"version": "0.0.6", "version": "1.0.0",
"description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打", "description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
"uniui", "uniui",
"link", "link",
"超链接", "超链接",
"" ""
], ],
"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-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"
}, },
"快应用": { "快应用": {
"华为": "y", "华为": "y",
"联盟": "y" "联盟": "y"
} },
} "Vue": {
} "vue2": "y",
} "vue3": "y"
}
}
}
}
} }
\ No newline at end of file
uni_modules/uni-link/readme.md
浏览文件 @ 6f6e3846
## Link 链接 ## Link 链接
> **组件名：uni-link** > **组件名：uni-link**
> 代码块： `uLink` > 代码块： `uLink`
uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。 uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-link)
#### 如使用过程中有任何问题，或者您对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-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
```
## API
### Link Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|href |String |- |链接地址 |
|text |String |- |显示文字 |
|download |String |- |H5平台下载文件名 |
|showUnderLine|Boolean|true |是否显示下划线 |
|copyTips |String |已自动复制网址，请在手机浏览器里粘贴该网址 |在小程序端复制链接时的提示语 |
|color |String |#999999 |链接文字颜色 |
|fontSize |String |14 |链接文字大小，单位px |
### Link Slots
|名称|说明|
|:-:|:-:|
|default|自定义内容，回覆盖原有的内容显示|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/link/link](https://hellouniapp.dcloud.net.cn/pages/extUI/link/link)
\ No newline at end of file
uni_modules/uni-list/changelog.md
浏览文件 @ 6f6e3846
## 1.1.3（2021-08-30） ## 1.2.0（2021-11-23）
- 修复 在vue3中to属性在发行应用的时候报错的bug - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
## 1.1.3（2021-08-30）
- 修复 在vue3中to属性在发行应用的时候报错的bug
## 1.1.2（2021-07-30） ## 1.1.2（2021-07-30）
- 优化 vue3下事件警告的问题 - 优化 vue3下事件警告的问题
## 1.1.1（2021-07-21） ## 1.1.1（2021-07-21）
......
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
浏览文件 @ 6f6e3846
...@@ -217,7 +217,11 @@ ...@@ -217,7 +217,11 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$uni-font-size-lg:16px;
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
$background-color: #fff; $background-color: #fff;
$divide-line-color: #e5e5e5; $divide-line-color: #e5e5e5;
$avatar-width: 45px; $avatar-width: 45px;
......
uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
浏览文件 @ 6f6e3846
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
default: '' default: ''
}, },
ellipsis: { ellipsis: {
type: [Number], type: [Number,String],
default: 0 default: 0
}, },
disabled: { disabled: {
...@@ -255,7 +255,18 @@ ...@@ -255,7 +255,18 @@
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
$uni-spacing-col-lg: 12px;
$uni-spacing-row-lg: 15px;
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
$uni-border-color:#e5e5e5;
$uni-bg-color-hover:#f1f1f1;
$uni-text-color-grey:#999;
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
.uni-list-item { .uni-list-item {
...@@ -441,7 +452,8 @@ ...@@ -441,7 +452,8 @@
text-overflow: ellipsis; text-overflow: ellipsis;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
lines: 1; lines: 1;
text-overflow:ellipsis;
/* #endif */ /* #endif */
} }
...@@ -455,7 +467,8 @@ ...@@ -455,7 +467,8 @@
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
lines: 2; lines: 2;
text-overflow:ellipsis;
/* #endif */ /* #endif */
} }
</style> </style>
uni_modules/uni-list/components/uni-list/uni-list - 副本.vue 0 → 100644
浏览文件 @ 6f6e3846
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>
uni_modules/uni-list/components/uni-list/uni-list.vue
浏览文件 @ 6f6e3846
...@@ -54,7 +54,9 @@ export default { ...@@ -54,7 +54,9 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list { .uni-list {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
......
uni_modules/uni-list/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-list", "id": "uni-list",
"displayName": "uni-list 列表", "displayName": "uni-list 列表",
"version": "1.1.3", "version": "1.2.0",
"description": "List 组件 ，帮助使用者快速构建列表。", "description": "List 组件 ，帮助使用者快速构建列表。",
"keywords": [ "keywords": [
"", "",
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-list/readme.md
浏览文件 @ 6f6e3846
## List 列表 ## List 列表
> **组件名：uni-list** > **组件名：uni-list**
> 代码块： `uList`、`uListItem` > 代码块： `uList`、`uListItem`
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad` > 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。 List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。 在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。 uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。 uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。 内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。 涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
下文均有样例给出。 下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式 ### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 本组件符合[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) 如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项** > **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 > - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件 > - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item` > - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后，会有点击选中效果 > - 只有开启点击反馈后，会有点击选中效果
> - 使用插槽时，可以完全自定义内容 > - 使用插槽时，可以完全自定义内容
> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展 > - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译 > - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义 > - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli` > - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 > - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法 ### 基本用法
- 设置 `title` 属性，可以显示列表标题 - 设置 `title` 属性，可以显示列表标题
- 设置 `disabled` 属性，可以禁用当前项 - 设置 `disabled` 属性，可以禁用当前项
```html ```html
<uni-list> <uni-list>
<uni-list-item title="列表文字" ></uni-list-item> <uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item> <uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list> </uni-list>
``` ```
### 多行内容显示 ### 多行内容显示
- 设置 `note` 属性 ，可以在第二行显示描述文本信息 - 设置 `note` 属性 ，可以在第二行显示描述文本信息
```html ```html
<uni-list> <uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item> <uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item> <uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list> </uni-list>
``` ```
### 右侧显示角标、switch ### 右侧显示角标、switch
- 设置 `show-badge` 属性 ，可以显示角标内容 - 设置 `show-badge` 属性 ，可以显示角标内容
- 设置 `show-switch` 属性，可以显示 switch 开关 - 设置 `show-switch` 属性，可以显示 switch 开关
```html ```html
<uni-list> <uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item> <uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item> <uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list> </uni-list>
``` ```
### 左侧显示略缩图、图标 ### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图 - 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标 - 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
```html ```html
<uni-list> <uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" <uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item> thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item> <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list> </uni-list>
``` ```
### 开启点击反馈和右侧箭头 ### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 - 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头 - 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` - 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
```html ```html
<uni-list> <uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item> <uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> <uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> <uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list> </uni-list>
``` ```
### 聊天列表示例 ### 聊天列表示例
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 - 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` - 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
- 设置 `to` 属性，可以跳转页面 - 设置 `to` 属性，可以跳转页面
- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示 - `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效 - `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容 - 可以通过默认插槽自定义列表右侧内容
```html ```html
<uni-list> <uni-list>
<uni-list :border="true"> <uni-list :border="true">
<!-- 显示圆形头像 --> <!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat> <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 --> <!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
<!-- 头像显示圆点 --> <!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 --> <!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 --> <!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 --> <!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right"> <view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text> <text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 --> <!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons> <uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view> </view>
</uni-list-chat> </uni-list-chat>
</uni-list> </uni-list>
</uni-list> </uni-list>
``` ```
```javascript ```javascript
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
avatarList: [{ avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, { }, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, { }, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}] }]
} }
} }
} }
``` ```
```css ```css
.chat-custom-right { .chat-custom-right {
flex: 1; flex: 1;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
} }
.chat-custom-text { .chat-custom-text {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
``` ```
## API ## API
### List Props ### List Props
属性名 |类型 |默认值 | 说明 属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-: :-: |:-: |:-: | :-:
border |Boolean |true | 是否显示边框 border |Boolean |true | 是否显示边框
### ListItem Props ### ListItem Props
属性名 |类型 |默认值 | 说明 属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-: :-: |:-: |:-: | :-:
title |String |- | 标题 title |String |- | 标题
note |String |- | 描述 note |String |- | 描述
ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】 ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标 thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图; thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
showBadge |Boolean |false | 是否显示数字角标 showBadge |Boolean |false | 是否显示数字角标
badgeText |String |- | 数字角标内容 badgeText |String |- | 数字角标内容
badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
rightText |String |- | 右侧文字内容 rightText |String |- | 右侧文字内容
disabled |Boolean |false | 是否禁用 disabled |Boolean |false | 是否禁用
showArrow |Boolean |true | 是否显示箭头图标 showArrow |Boolean |true | 是否显示箭头图标
link |String |navigateTo | 新页面跳转方式，可选值见下表 link |String |navigateTo | 新页面跳转方式，可选值见下表
to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功 to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable |Boolean |false | 是否开启点击反馈 clickable |Boolean |false | 是否开启点击反馈
showSwitch |Boolean |false | 是否显示Switch showSwitch |Boolean |false | 是否显示Switch
switchChecked |Boolean |false | Switch是否被选中 switchChecked |Boolean |false | Switch是否被选中
showExtraIcon |Boolean |false | 左侧是否显示扩展图标 showExtraIcon |Boolean |false | 左侧是否显示扩展图标
extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28) extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制 direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
#### Link Options #### Link Options
属性名 | 说明 属性名 | 说明
:-: | :-: :-: | :-:
navigateTo | 同 uni.navigateTo() navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch() redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch() reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab() switchTab | 同 uni.switchTab()
### ListItem Events ### ListItem Events
事件称名 |说明 |返回参数 事件称名 |说明 |返回参数
:-: |:-: |:-: :-: |:-: |:-:
click |点击 uniListItem 触发事件，需开启点击反馈 |- click |点击 uniListItem 触发事件，需开启点击反馈 |-
switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked} switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked}
### ListItem Slots ### ListItem Slots
名称 | 说明 名称 | 说明
:-: | :-: :-: | :-:
header | 左/上内容插槽，可完全自定义默认显示 header | 左/上内容插槽，可完全自定义默认显示
body | 中间内容插槽，可完全自定义中间内容 body | 中间内容插槽，可完全自定义中间内容
footer | 右/下内容插槽，可完全自定义右侧内容 footer | 右/下内容插槽，可完全自定义右侧内容
> **通过插槽扩展** > **通过插槽扩展**
> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 > 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 > 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer` > uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分 > - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分 > - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。 > 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
**示例** **示例**
```html ```html
<uni-list> <uni-list>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link> <uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template slot="header"> <template slot="header">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image> <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template> </template>
</uni-list-item> </uni-list-item>
<uni-list-item> <uni-list-item>
<!-- 自定义 header --> <!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view> <view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body --> <!-- 自定义 body -->
<text slot="body" class="slot-box slot-text">自定义插槽</text> <text slot="body" class="slot-box slot-text">自定义插槽</text>
<!-- 自定义 footer--> <!-- 自定义 footer-->
<template slot="footer"> <template slot="footer">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image> <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template> </template>
</uni-list-item> </uni-list-item>
</uni-list> </uni-list>
``` ```
### ListItemChat Props ### ListItemChat Props
属性名 |类型 |默认值 | 说明 属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-: :-: |:-: |:-: | :-:
title |String |- | 标题 title |String |- | 标题
note |String |- | 描述 note |String |- | 描述
clickable |Boolean |false | 是否开启点击反馈 clickable |Boolean |false | 是否开启点击反馈
badgeText |String |- | 数字角标内容，设置为 `dot` 将显示圆点 badgeText |String |- | 数字角标内容，设置为 `dot` 将显示圆点
badgePositon |String |right | 角标位置 badgePositon |String |right | 角标位置
link |String |navigateTo | 是否展示右侧箭头并开启点击反馈，可选值见下表 link |String |navigateTo | 是否展示右侧箭头并开启点击反馈，可选值见下表
clickable |Boolean |false | 是否开启点击反馈 clickable |Boolean |false | 是否开启点击反馈
to |String |- | 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 to |String |- | 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功
time |String |- | 右侧时间显示 time |String |- | 右侧时间显示
avatarCircle |Boolean |false | 是否显示圆形头像 avatarCircle |Boolean |false | 是否显示圆形头像
avatar |String |- | 头像地址，avatarCircle 不填时生效 avatar |String |- | 头像地址，avatarCircle 不填时生效
avatarList |Array |- | 头像组，格式为 [{url:''}] avatarList |Array |- | 头像组，格式为 [{url:''}]
#### Link Options #### Link Options
属性名 | 说明 属性名 | 说明
:-: | :-: :-: | :-:
navigateTo | 同 uni.navigateTo() navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch() redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch() reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab() switchTab | 同 uni.switchTab()
### ListItemChat Slots ### ListItemChat Slots
名称 | 说明 名称 | 说明
:- | :- :- | :-
default | 自定义列表右侧内容（包括时间和角标显示） default | 自定义列表右侧内容（包括时间和角标显示）
### ListItemChat Events ### ListItemChat Events
事件称名 | 说明 | 返回参数 事件称名 | 说明 | 返回参数
:-: | :-: | :-: :-: | :-: | :-:
@click | 点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息 @click | 点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息
## 基于uni-list扩展的页面模板 ## 基于uni-list扩展的页面模板
通过扩展插槽，可实现多种常见样式的列表 通过扩展插槽，可实现多种常见样式的列表
**新闻列表类** **新闻列表类**
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) 1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) 2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) 3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) 4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) 5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) 6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) 7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
**商品列表类** **商品列表类**
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) 1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) 2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) 3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
## 组件示例 ## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list) 点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
\ No newline at end of file
uni_modules/uni-load-more/changelog.md
浏览文件 @ 6f6e3846
## 1.3.3（2022-01-20）
- 新增 showText属性 ，是否显示文本
## 1.3.2（2022-01-19）
- 修复 nvue 平台下不显示文本的bug
## 1.3.1（2022-01-19）
- 修复 微信小程序平台样式选择器报警告的问题
## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
## 1.2.1（2021-08-24） ## 1.2.1（2021-08-24）
- 新增 支持国际化 - 新增 支持国际化
## 1.2.0（2021-07-30） ## 1.2.0（2021-07-30）
......
uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-load-more" @click="onClick"> <view class="uni-load-more" @click="onClick">
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator> <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
:style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<svg width="24" height="24" viewBox="25 25 50 50" v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" <svg width="24" height="24" viewBox="25 25 50 50"
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-H5"> v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
:style="{width:iconSize+'px',height:iconSize+'px'}"
class="uni-load-more__img uni-load-more__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle> <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
</svg> </svg>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE || H5 --> <!-- #ifndef APP-NVUE || H5 -->
<view v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" <view
:style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-MP"> v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> :style="{width:iconSize+'px',height:iconSize+'px'}"
<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> class="uni-load-more__img uni-load-more__img--android-MP">
<view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
<view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view v-else-if="!webviewHide && status === 'loading' && showIcon" :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5"> <view v-else-if="!webviewHide && status === 'loading' && showIcon"
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZVHb98LM+F5bHL8khA1iSeiyQBCRM+YGqKUnnJTDLGI0BGZlKDIU2MMglUiDApEZvSsZnQtBRJtKwQNKQMFYeRDR10WOLd8ljYXdh+v8v5fR3Od+797t1dnOnO/Ofce77z+J//+b/P+ZqtXbs2sJ9MJhNUV1cHJ06cCJo3bx7EPc2aNcvpy7pWrVoF+/fvDyoqKoI2bdoE9fX1F7TjN8a+EXBn/fkfvw942Tf+wYMHg9mzZwfjxo0LDhw4EPa1x2MbFw/fOGfPng1qa2tzcCkILsLDydq2bRsunpOTMM7TD/W/tZDZhPdeKD+yGxHhdu3aBV27dg3OnDlzMVANMheLAO3btw8KCwuDmpoaX5OxbgUIMEq7K8IcPnw4KCsrC/r37x8cP378/4cAXAB3vqSkJMuiDhTkw+XcuXNhOWbMmKBly5YhUT8xArhyFvP0BfwRsAuwxJZJsm/nzp2DTp06he/OU+cZ64K6o0ePBkOHDg2GDx8e6gEbJ5Q/NHNuAJQ1hgBeHUDlR7nVTkY8rQAvAi4z34vR/mPs1FoRsaCgIJThI0eOBC1atEiFGGV+5MiRoS45efJkqFjJFXV1dQuA012m2WcwTw98fy6CqBdsaiIO4CScrGPHjvk4odhavPquRtFWXEC25VgkREKOCh/qDSq+vn37htzD/mZTOmOc5U7zKzBPEedygWshcDyWvs30igAbU+6oyMgJBCFhwQE0fccxN60Ay9iebbjoDh06hMowjQxT4fXq1SskArmHZpkArvixp/kWzHdMeArExSJEaiXIjjRjRJ4DaAGWpibLzXN3Fm1vA5teBgh3j1Rv3bp1YgKwPdmf2p9zcyNYYgPKMfY0T5f5nNYdw158nJ8QawW4CLKwiOBSEgO/hok2eBydR+3dYH+PLxA5J8Vv0KBBwenTp0P2JWAx6+yFEBfs8lMY+y0SWMBNI9E4ThKi58VKTg3FQZS1RQF1cz27eC0QHMu+3E0SkUowjhVt5VdaWhp07949ZHv2Qd1EjDXM2cla1M0nl3GxAs3J9yREzyTdFVKVFOaE9qRA8GM0WebRuo9JGZKA7Mv2SeS/Z8+eoQ9BArMfFrLGo6jvxbhHbJZnKX2Rzz1O7QhJJ9Cs2ZMaWIyq/zhdeqPNfIoHd58clIQD+JSXl4dKlyIAuBdVXZwFVWKspSSoxE++h8x4k3uCnEhE4I5KwRiFWGOU0QWKiCYLbdoRMRKAu2kQ9vkfLU6dOhX06NEjlH+yMRZSinnuyWnYosVcji8CEA/6Cg2JF+IIUBqnGKUTCNwtwBN4f89RiK1R96DEgO2o0NDmtEdvVFdVVYV+P3UAPUEs6GFwV3PHmXkD4vh74iDFJysVI/MlaQhwKeBNTLYX5VuA8T4/gZxA4MRGFxDB6R7OmYPfyykGRJbyie+XnGYnQIC/coH9+vULiYrxrkL9ZA9+0ykaHIfEpM7ge8TiJ2CsHYwyMfafAF1yCGBHYIbCVDjDjKt7BeB51D+LgQa6OkG7IDYEEtvQ7lnXLKLtLdLuJBpE4gPUXcW2+PkZwOex+4cGDhwYDBkyRL7/HFcEwUGPo/8uWRUpYnfxGHco8HkewLHLyYmAawAPuIFZxhOpDfJQ8gbUv41yORAptMWBNr6oqMhWird5+u+iHmBb2nhjDV7HWBNQTgK8y11l5NetWzc5ULscAtSj7nbNI0skhWeUZCc0W4nyH/jO4Vz0u1IeYhbk4AiwM6tjxIWByHsoZ9qcIBPJd/y+DwPfBESOmCa/QF3WiZHucLlEDpNxcNhmheEOPgdQNx6/VZFQzFZ5TN08AHXQt2Ii3EdyFuUsPtTcGPhW5iMiCNELvz+Gdn9huG4HUJaW/w3g0wxV0XaG7arG2WeKiUWYM4Y7GO5ezshTARbbWGw/DvXkpp/ivVvE0JVoMxN4rpGzJMhE5Pl+xlATsDIqikP9F9D2z3h9nOksEUFhK+qO4rcPkoalMQ/HqJLIyb3F3JdjrCcw1yZ8joyJLR5gCo54etlag7qIoeNh1N1BRYj3DTFJ0elotxPlVzkGuYAmL0VSJVGAJA41c4Z6A3BzTLfn0HYwYKEI6CUAMzZEWvLsIcQOo1AmmyyM72nHJCfYsogflGV6jEk9vyQZXSuq6w4c16NsGcGZbwOPr+H1RkOk2LEzjNepxQkihHSCQ4ynAYNRx2zMKV92CQMWqj8J0BRE8EShxRFN6YrfCRhC0x3r/Zm4IbQCcmJoV0kMamllccR6FjHqUC5F2R/wS2dcymOlfAKOS4KmzQb5cpNC2MC7JhVn5wjXoJ44rYhLh8n0eXOCorJxa7POjbSlCGVczr34/RsAmrcvo9s+wGp3tzVhntxiXiJ4nvEYb4FJkf0O8HocAePmLvCxnL0AORraVekJk6TYjDabRVXfRE2lCN1h6ZQRN1+InUbsCpKwoBZHh0dODN9JBCUffItXxEavTQkUtnfTVAplCWL3JISz29h4NjotnuSsQKJCk8dF+kJR6RARjrqFVmfPnj3ZbK8cIJ0msd6jgHPGtfVTQ8VLmlvh4mct9sobRmPic0DyDQQnx/NlfYUgyz59+oScsH379pAwXABD32nTpoUHIToESeI5mnbE/UqDdyLcafEBf2MCqgC7NwxIbMREJQ0g4D4sfJwnD+AmRrII05cfMWJE+L1169bQr+fip06dGp4oJ83lmYd5wj/EmMa4TaHivo4EeCguYZBnkB5g2aWA69OIEnUHOaGysjIYMGBAMGnSpODYsWPZwCpFmm4lNq+4gSLQA7jcX8DwtjEyRC8wjabnXEx9kfWnTJkSJkAo90xpJVV+FmcVNeYAF5zWngS4C4O91MBxmAv8blLEpbjI5sz9MTdAhcgkCT1RO8mZkAjfiYpTEvStAS53Uw1vAiUGgZ3GpuQEYvoiBqlIan7kSDHnTwJQFNiPu0+5VxCVYhcZIjNrdXUDdp+Eq5AZ3Gkg8QAyVZRZIk4Tl4QAbF9cXJxNYZMAtAokgs4BrNxEpCtteXg7DDTMDKYNSuQdKsnJBek7HxewvxaosWxLYXtw+cJp18217wql4aKCfBNoEu0O5VU+PhctJ0YeXD4C6JQpyrlpSLTojpGGGN5YwNziChdIZLk4lvLcFJ9jMX3QdiImY9bmGQU+TRUL5CHITTRlgF8D9ouD1MfmLoEPl5xokIumZ2cfgMpHt47IW9N64Hsh7wQYYjyIugWuF5fCqYncXRd5vPMWyizzvhi/32+nvG0dZc9vR6fZOu0md5e+uC408FvKSIOZwXlGvxPv95izA2Vtvg1xKFWARI+vMX66HUhpQQb643uW1bSjuTWyw2SBvDrBvjFic1eGGlz5esq3ko9uSIlBRqPuFcCv8F4WIcN12nVaBd0SaYwI6PDDImR11JkqgHcPmQssjxIn6bUshygDFJUTxPMpHk+jfjPgupgdnYV2R/g7xSjtpah8RJBewhwf0gGK6XI92u4wXFEU40afJ4DN4h5LcAd+40HI3JgJecuT0c062W0i2hQJUTcxan3/CMW1PF2K6bbA+Daz4xRs1D3Br1Cm0OihKCqizW78/nXAF/G5TXrEcVzaNMH6CyMswqsAHqDyDLEyou8lwOXnKF8DjI6KjV3KzMBiXkDH8ij/H214J5A596ekrZ3F0zXlWeL7+P5eUrNo3/QwC15uxthuzidy7DzKRwEDaAViiDgKbTbz7CJnzo0bN7pIfIiid8SuPwn25o3QCmpnyjlZkyxPP8EomCJzrGb7GJMx7tNsq4MT2xMUYaiErZOluTzKsnz3gwCeCZyVRZJfYplNEokEjwrPtxlxjeYAk+F1F74VAzPxQRNYYdtpOUvWs8J1sGhBJMNsb7igN8plJs1eSmLIhLKE4rvaCX27gOhLpLOsIzJ7qn/i+wZzcvSOZ23/du8TZjwV8zHIXoP4R3ifBxiFz1dcVpa3aPntPE+c6TmIWE9EtcMmAcPdWAhYhAXxcLOQi9L1WhD1Sc8p1d2oL7XGiRKp8F4A2i8K/nfI+y/gsTDJ/YC/8+AD5Uh04KHiGl+cIFPnBDDrPMjwRGkLXyxO4VGbfQWnDH2v0bVWE3C9QOXlepbgjEfIJQI6XDG3z5ahD9cw2pS78ipB85wyScNTvsVzlzzhL8/jRrnmVjfFJK/m3m4nj9vbgQTguT8XZTjsm672R5uJKEaQmBI/c58gyus8ZDagLpEVSJBIyHp4jn++xqPV71OgQgJYEWOtZ/haxRtKmWOBu8xdBLftWltsY84zE6WIEy/eIOWL+BaayMx+KHtL7EAkqdNDLiEXmEMUHniedtJqg9HmZtfvt26vNi0BdG3Ft3g8ZOf7PAu59TxtzivLNIekyi+wD1i8CuUiD9FXAa8C+/xS3JPmZnomyc7H+fb4/Se0bk41Fel621r4cgVxbq91V4jVqwB7HTe2M7jgB+QWHavZkDRPmZcASoZEmBx6i75bGjPcMdL4/VKGFAGWZkGzPG0XAbdL9A81G5LOmUnC9hHKJeO7dcUMjblSl12867ElFTtaGl20xvvLGPdVz/8TVuU7y0x1PG7vtNg24oz9Uo/Z412++VFWI7Fcog9tu9Lm6gvRmIPv9x1xmQAu6RDkXtbOtlGEmpgD5Nvnyc0dcv0EE6cfdi1HmhMf9wDF3k3gtRvEedhxjpgfqPb9PU9iEJHnyOUA7bQUXh6kq/D7l2iTjWv7XOD530BDr8jIrus+srXjt4MzumJMHuTsBa63YKE1+RR5lBjEikCCnWKWiHdzOgKO+nRIBAF88za/IFmJ3eMZov4CYxGBabcpGL8EYx+SeMXJeRwHNsV/h+vdxeuhEpN3ZyNY78Gm2fknJxVGhyjixPiQvVkNzT1elD9Py/aTAL64Hb9vcYmC9zfdXdT/C1LeGbg4rnBaAihDFJH12W5ulfNCNe/xTsP3bp8ikzJs5BF+5PNfAQYAPaseTdsEcaYAAAAASUVORK5CYII=" :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
mode="widthFix"></image> <image :src="imgBase64" mode="widthFix"></image>
</view> </view>
<!-- #endif --> <!-- #endif -->
<text class="uni-load-more__text" :style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text> <text v-if="showText" class="uni-load-more__text"
:style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text>
</view> </view>
</template> </template>
<script> <script>
let platform let platform
setTimeout(() => { setTimeout(() => {
platform = uni.getSystemInfoSync().platform platform = uni.getSystemInfoSync().platform
}, 16) }, 16)
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)
/** /**
* LoadMore 加载更多 * LoadMore 加载更多
...@@ -59,7 +68,7 @@ ...@@ -59,7 +68,7 @@
*/ */
export default { export default {
name: 'UniLoadMore', name: 'UniLoadMore',
emits:['clickLoadMore'], emits: ['clickLoadMore'],
props: { props: {
status: { status: {
// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了 // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
...@@ -91,19 +100,23 @@ ...@@ -91,19 +100,23 @@
contentnomore: '' contentnomore: ''
} }
} }
},
showText: {
type: Boolean,
default: true
} }
}, },
data() { data() {
return { return {
webviewHide: false, webviewHide: false,
platform: platform platform: platform,
imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZVHb98LM+F5bHL8khA1iSeiyQBCRM+YGqKUnnJTDLGI0BGZlKDIU2MMglUiDApEZvSsZnQtBRJtKwQNKQMFYeRDR10WOLd8ljYXdh+v8v5fR3Od+797t1dnOnO/Ofce77z+J//+b/P+ZqtXbs2sJ9MJhNUV1cHJ06cCJo3bx7EPc2aNcvpy7pWrVoF+/fvDyoqKoI2bdoE9fX1F7TjN8a+EXBn/fkfvw942Tf+wYMHg9mzZwfjxo0LDhw4EPa1x2MbFw/fOGfPng1qa2tzcCkILsLDydq2bRsunpOTMM7TD/W/tZDZhPdeKD+yGxHhdu3aBV27dg3OnDlzMVANMheLAO3btw8KCwuDmpoaX5OxbgUIMEq7K8IcPnw4KCsrC/r37x8cP378/4cAXAB3vqSkJMuiDhTkw+XcuXNhOWbMmKBly5YhUT8xArhyFvP0BfwRsAuwxJZJsm/nzp2DTp06he/OU+cZ64K6o0ePBkOHDg2GDx8e6gEbJ5Q/NHNuAJQ1hgBeHUDlR7nVTkY8rQAvAi4z34vR/mPs1FoRsaCgIJThI0eOBC1atEiFGGV+5MiRoS45efJkqFjJFXV1dQuA012m2WcwTw98fy6CqBdsaiIO4CScrGPHjvk4odhavPquRtFWXEC25VgkREKOCh/qDSq+vn37htzD/mZTOmOc5U7zKzBPEedygWshcDyWvs30igAbU+6oyMgJBCFhwQE0fccxN60Ay9iebbjoDh06hMowjQxT4fXq1SskArmHZpkArvixp/kWzHdMeArExSJEaiXIjjRjRJ4DaAGWpibLzXN3Fm1vA5teBgh3j1Rv3bp1YgKwPdmf2p9zcyNYYgPKMfY0T5f5nNYdw158nJ8QawW4CLKwiOBSEgO/hok2eBydR+3dYH+PLxA5J8Vv0KBBwenTp0P2JWAx6+yFEBfs8lMY+y0SWMBNI9E4ThKi58VKTg3FQZS1RQF1cz27eC0QHMu+3E0SkUowjhVt5VdaWhp07949ZHv2Qd1EjDXM2cla1M0nl3GxAs3J9yREzyTdFVKVFOaE9qRA8GM0WebRuo9JGZKA7Mv2SeS/Z8+eoQ9BArMfFrLGo6jvxbhHbJZnKX2Rzz1O7QhJJ9Cs2ZMaWIyq/zhdeqPNfIoHd58clIQD+JSXl4dKlyIAuBdVXZwFVWKspSSoxE++h8x4k3uCnEhE4I5KwRiFWGOU0QWKiCYLbdoRMRKAu2kQ9vkfLU6dOhX06NEjlH+yMRZSinnuyWnYosVcji8CEA/6Cg2JF+IIUBqnGKUTCNwtwBN4f89RiK1R96DEgO2o0NDmtEdvVFdVVYV+P3UAPUEs6GFwV3PHmXkD4vh74iDFJysVI/MlaQhwKeBNTLYX5VuA8T4/gZxA4MRGFxDB6R7OmYPfyykGRJbyie+XnGYnQIC/coH9+vULiYrxrkL9ZA9+0ykaHIfEpM7ge8TiJ2CsHYwyMfafAF1yCGBHYIbCVDjDjKt7BeB51D+LgQa6OkG7IDYEEtvQ7lnXLKLtLdLuJBpE4gPUXcW2+PkZwOex+4cGDhwYDBkyRL7/HFcEwUGPo/8uWRUpYnfxGHco8HkewLHLyYmAawAPuIFZxhOpDfJQ8gbUv41yORAptMWBNr6oqMhWird5+u+iHmBb2nhjDV7HWBNQTgK8y11l5NetWzc5ULscAtSj7nbNI0skhWeUZCc0W4nyH/jO4Vz0u1IeYhbk4AiwM6tjxIWByHsoZ9qcIBPJd/y+DwPfBESOmCa/QF3WiZHucLlEDpNxcNhmheEOPgdQNx6/VZFQzFZ5TN08AHXQt2Ii3EdyFuUsPtTcGPhW5iMiCNELvz+Gdn9huG4HUJaW/w3g0wxV0XaG7arG2WeKiUWYM4Y7GO5ezshTARbbWGw/DvXkpp/ivVvE0JVoMxN4rpGzJMhE5Pl+xlATsDIqikP9F9D2z3h9nOksEUFhK+qO4rcPkoalMQ/HqJLIyb3F3JdjrCcw1yZ8joyJLR5gCo54etlag7qIoeNh1N1BRYj3DTFJ0elotxPlVzkGuYAmL0VSJVGAJA41c4Z6A3BzTLfn0HYwYKEI6CUAMzZEWvLsIcQOo1AmmyyM72nHJCfYsogflGV6jEk9vyQZXSuq6w4c16NsGcGZbwOPr+H1RkOk2LEzjNepxQkihHSCQ4ynAYNRx2zMKV92CQMWqj8J0BRE8EShxRFN6YrfCRhC0x3r/Zm4IbQCcmJoV0kMamllccR6FjHqUC5F2R/wS2dcymOlfAKOS4KmzQb5cpNC2MC7JhVn5wjXoJ44rYhLh8n0eXOCorJxa7POjbSlCGVczr34/RsAmrcvo9s+wGp3tzVhntxiXiJ4nvEYb4FJkf0O8HocAePmLvCxnL0AORraVekJk6TYjDabRVXfRE2lCN1h6ZQRN1+InUbsCpKwoBZHh0dODN9JBCUffItXxEavTQkUtnfTVAplCWL3JISz29h4NjotnuSsQKJCk8dF+kJR6RARjrqFVmfPnj3ZbK8cIJ0msd6jgHPGtfVTQ8VLmlvh4mct9sobRmPic0DyDQQnx/NlfYUgyz59+oScsH379pAwXABD32nTpoUHIToESeI5mnbE/UqDdyLcafEBf2MCqgC7NwxIbMREJQ0g4D4sfJwnD+AmRrII05cfMWJE+L1169bQr+fip06dGp4oJ83lmYd5wj/EmMa4TaHivo4EeCguYZBnkB5g2aWA69OIEnUHOaGysjIYMGBAMGnSpODYsWPZwCpFmm4lNq+4gSLQA7jcX8DwtjEyRC8wjabnXEx9kfWnTJkSJkAo90xpJVV+FmcVNeYAF5zWngS4C4O91MBxmAv8blLEpbjI5sz9MTdAhcgkCT1RO8mZkAjfiYpTEvStAS53Uw1vAiUGgZ3GpuQEYvoiBqlIan7kSDHnTwJQFNiPu0+5VxCVYhcZIjNrdXUDdp+Eq5AZ3Gkg8QAyVZRZIk4Tl4QAbF9cXJxNYZMAtAokgs4BrNxEpCtteXg7DDTMDKYNSuQdKsnJBek7HxewvxaosWxLYXtw+cJp18217wql4aKCfBNoEu0O5VU+PhctJ0YeXD4C6JQpyrlpSLTojpGGGN5YwNziChdIZLk4lvLcFJ9jMX3QdiImY9bmGQU+TRUL5CHITTRlgF8D9ouD1MfmLoEPl5xokIumZ2cfgMpHt47IW9N64Hsh7wQYYjyIugWuF5fCqYncXRd5vPMWyizzvhi/32+nvG0dZc9vR6fZOu0md5e+uC408FvKSIOZwXlGvxPv95izA2Vtvg1xKFWARI+vMX66HUhpQQb643uW1bSjuTWyw2SBvDrBvjFic1eGGlz5esq3ko9uSIlBRqPuFcCv8F4WIcN12nVaBd0SaYwI6PDDImR11JkqgHcPmQssjxIn6bUshygDFJUTxPMpHk+jfjPgupgdnYV2R/g7xSjtpah8RJBewhwf0gGK6XI92u4wXFEU40afJ4DN4h5LcAd+40HI3JgJecuT0c062W0i2hQJUTcxan3/CMW1PF2K6bbA+Daz4xRs1D3Br1Cm0OihKCqizW78/nXAF/G5TXrEcVzaNMH6CyMswqsAHqDyDLEyou8lwOXnKF8DjI6KjV3KzMBiXkDH8ij/H214J5A596ekrZ3F0zXlWeL7+P5eUrNo3/QwC15uxthuzidy7DzKRwEDaAViiDgKbTbz7CJnzo0bN7pIfIiid8SuPwn25o3QCmpnyjlZkyxPP8EomCJzrGb7GJMx7tNsq4MT2xMUYaiErZOluTzKsnz3gwCeCZyVRZJfYplNEokEjwrPtxlxjeYAk+F1F74VAzPxQRNYYdtpOUvWs8J1sGhBJMNsb7igN8plJs1eSmLIhLKE4rvaCX27gOhLpLOsIzJ7qn/i+wZzcvSOZ23/du8TZjwV8zHIXoP4R3ifBxiFz1dcVpa3aPntPE+c6TmIWE9EtcMmAcPdWAhYhAXxcLOQi9L1WhD1Sc8p1d2oL7XGiRKp8F4A2i8K/nfI+y/gsTDJ/YC/8+AD5Uh04KHiGl+cIFPnBDDrPMjwRGkLXyxO4VGbfQWnDH2v0bVWE3C9QOXlepbgjEfIJQI6XDG3z5ahD9cw2pS78ipB85wyScNTvsVzlzzhL8/jRrnmVjfFJK/m3m4nj9vbgQTguT8XZTjsm672R5uJKEaQmBI/c58gyus8ZDagLpEVSJBIyHp4jn++xqPV71OgQgJYEWOtZ/haxRtKmWOBu8xdBLftWltsY84zE6WIEy/eIOWL+BaayMx+KHtL7EAkqdNDLiEXmEMUHniedtJqg9HmZtfvt26vNi0BdG3Ft3g8ZOf7PAu59TxtzivLNIekyi+wD1i8CuUiD9FXAa8C+/xS3JPmZnomyc7H+fb4/Se0bk41Fel621r4cgVxbq91V4jVqwB7HTe2M7jgB+QWHavZkDRPmZcASoZEmBx6i75bGjPcMdL4/VKGFAGWZkGzPG0XAbdL9A81G5LOmUnC9hHKJeO7dcUMjblSl12867ElFTtaGl20xvvLGPdVz/8TVuU7y0x1PG7vtNg24oz9Uo/Z412++VFWI7Fcog9tu9Lm6gvRmIPv9x1xmQAu6RDkXtbOtlGEmpgD5Nvnyc0dcv0EE6cfdi1HmhMf9wDF3k3gtRvEedhxjpgfqPb9PU9iEJHnyOUA7bQUXh6kq/D7l2iTjWv7XOD530BDr8jIrus+srXjt4MzumJMHuTsBa63YKE1+RR5lBjEikCCnWKWiHdzOgKO+nRIBAF88za/IFmJ3eMZov4CYxGBabcpGL8EYx+SeMXJeRwHNsV/h+vdxeuhEpN3ZyNY78Gm2fknJxVGhyjixPiQvVkNzT1elD9Py/aTAL64Hb9vcYmC9zfdXdT/C1LeGbg4rnBaAihDFJH12W5ulfNCNe/xTsP3bp8ikzJs5BF+5PNfAQYAPaseTdsEcaYAAAAASUVORK5CYII='
} }
}, },
// #ifndef APP-NVUE computed: {
computed:{ iconSnowWidth() {
iconSnowWidth(){ return (Math.floor(this.iconSize / 24) || 1) * 2
return (Math.floor(this.iconSize/24)||1)*2 },
},
contentdownText() { contentdownText() {
return this.contentText.contentdown || t("uni-load-more.contentdown") return this.contentText.contentdown || t("uni-load-more.contentdown")
}, },
...@@ -114,7 +127,6 @@ ...@@ -114,7 +127,6 @@
return this.contentText.contentnomore || t("uni-load-more.contentnomore") return this.contentText.contentnomore || t("uni-load-more.contentnomore")
} }
}, },
// #endif
mounted() { mounted() {
// #ifdef APP-PLUS // #ifdef APP-PLUS
var pages = getCurrentPages(); var pages = getCurrentPages();
...@@ -140,8 +152,7 @@ ...@@ -140,8 +152,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-load-more { .uni-load-more {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -153,13 +164,14 @@ ...@@ -153,13 +164,14 @@
} }
.uni-load-more__text { .uni-load-more__text {
font-size: 15px; font-size: 14px;
margin-left: 8px;
} }
.uni-load-more__img { .uni-load-more__img {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 8px; // margin-right: 8px;
} }
.uni-load-more__img--nvue { .uni-load-more__img--nvue {
...@@ -193,7 +205,7 @@ ...@@ -193,7 +205,7 @@
animation: loading-ios-H5 1s 0s step-end infinite; animation: loading-ios-H5 1s 0s step-end infinite;
} }
.uni-load-more__img--ios-H5>image { .uni-load-more__img--ios-H5 image {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -263,7 +275,7 @@ ...@@ -263,7 +275,7 @@
transform-origin: center center; transform-origin: center center;
} }
.uni-load-more__img--android-H5>circle { .uni-load-more__img--android-H5 circle {
display: inline-block; display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite; animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor; stroke: currentColor;
...@@ -308,7 +320,7 @@ ...@@ -308,7 +320,7 @@
animation: loading-ios 1s 0s ease infinite; animation: loading-ios 1s 0s ease infinite;
} }
.uni-load-more__img--android-MP>view { .uni-load-more__img--android-MP .uni-load-more__img-icon {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
...@@ -319,15 +331,15 @@ ...@@ -319,15 +331,15 @@
transform-origin: center; transform-origin: center;
} }
.uni-load-more__img--android-MP>view:nth-child(1){ .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
animation: loading-android-MP-1 1s 0s linear infinite; animation: loading-android-MP-1 1s 0s linear infinite;
} }
.uni-load-more__img--android-MP>view:nth-child(2){ .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
animation: loading-android-MP-2 1s 0s linear infinite; animation: loading-android-MP-2 1s 0s linear infinite;
} }
.uni-load-more__img--android-MP>view:nth-child(3){ .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
animation: loading-android-MP-3 1s 0s linear infinite; animation: loading-android-MP-3 1s 0s linear infinite;
} }
...@@ -341,38 +353,47 @@ ...@@ -341,38 +353,47 @@
} }
} }
@keyframes loading-android-MP-1{ @keyframes loading-android-MP-1 {
0%{ 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{
50% {
transform: rotate(90deg); transform: rotate(90deg);
} }
100%{
100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes loading-android-MP-2{
0%{ @keyframes loading-android-MP-2 {
0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{
50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
100%{
100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes loading-android-MP-3{
0%{ @keyframes loading-android-MP-3 {
0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{
50% {
transform: rotate(270deg); transform: rotate(270deg);
} }
100%{
100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/* #endif */ /* #endif */
</style> </style>
uni_modules/uni-load-more/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-load-more", "id": "uni-load-more",
"displayName": "uni-load-more 加载更多", "displayName": "uni-load-more 加载更多",
"version": "1.2.1", "version": "1.3.3",
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。", "description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
"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-load-more/readme.md
浏览文件 @ 6f6e3846
...@@ -7,64 +7,8 @@ ...@@ -7,64 +7,8 @@
用于列表中，做滚动加载使用，展示 loading 的各种状态。 用于列表中，做滚动加载使用，展示 loading 的各种状态。
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 使用方式
在 ``template`` 中使用组件
```html
<uni-load-more :status="more"></uni-load-more>
```
## API
### LoadMore Props
|属性名 |类型 | 可选值 |默认值 |说明 |
|:-: |:-: |:-: |:-: |:-: |
|iconSize |Number |- |24 |指定图标大小 |
|status |String |more/loading/noMore |more |loading 的状态 |
|showIcon |Boolean|- |true |是否显示 loading 图标 |
|iconType |String |snow/circle/auto |auto |指定图标样式|
|color |String |- |#777777 |图标和文字颜色 |
|contentText|Object|- |{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}|各状态文字说明 |
#### Status Options
|参数名称 |说明 |
|:-: |:-: |
|more |loading前 |
|loading|loading前中 |
|more |没有更多数据 |
#### IconType Options
|参数名称 |说明 |
|:-: |:-: |
|snow |ios雪花加载样式 |
|circle |安卓环形加载样式 |
|auto |根据平台自动选择加载样式 |
> **说明**
> `iconType`为`snow`时，在`APP-NVUE`平台不可设置大小，在非`APP-NVUE`平台不可设置颜色
### 事件说明
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|clickLoadMore |点击加载更多时触发 |e.detail={status:'loading'}|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more](https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more)
\ No newline at end of file
uni_modules/uni-nav-bar/changelog.md
浏览文件 @ 6f6e3846
## 1.3.4（2022-01-24）
- 更新 组件示例
## 1.3.3（2022-01-24）
- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
## 1.3.2（2022-01-18）
- 修复 在vue下，标题不垂直居中的bug
## 1.3.1（2022-01-18）
- 修复 height 属性类型错误
## 1.3.0（2022-01-18）
- 新增 height 属性,可修改组件高度
- 新增 dark 属性可可开启暗黑模式
- 优化 标题字数过多显示省略号
- 优化 插槽，插入内容可完全覆盖
## 1.2.1（2022-01-10）
- 修复 color 属性不生效的bug
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
## 1.1.0（2021-07-30） ## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.11（2021-05-12） ## 1.0.11（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.10（2021-04-30） ## 1.0.10（2021-04-30）
- 修复 在nvue下fixed为true，宽度不能撑满的Bug - 修复 在nvue下fixed为true，宽度不能撑满的Bug
## 1.0.9（2021-04-21） ## 1.0.9（2021-04-21）
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 - 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.8（2021-04-14） ## 1.0.8（2021-04-14）
- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug - uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
## 1.0.7（2021-02-25） ## 1.0.7（2021-02-25）
- 修复 easycom 下，找不到 uni-status-bar 的bug - 修复 easycom 下，找不到 uni-status-bar 的bug
## 1.0.6（2021-02-05） ## 1.0.6（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件 - 优化 组件引用关系，通过uni_modules引用组件
## 1.0.5（2021-02-05） ## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-navbar"> <view class="uni-navbar" :class="{'uni-dark':dark}">
<view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }" <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
class="uni-navbar__content"> :style="{ 'background-color': themeBgColor }" class="uni-navbar__content">
<status-bar v-if="statusBar" /> <status-bar v-if="statusBar" />
<view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view"> <view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view"> class="uni-navbar__header">
<view class="uni-navbar__content_view" v-if="leftIcon.length"> <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
<uni-icons :color="color" :type="leftIcon" size="24" /> :style="{width:leftIconWidth}">
</view> <slot name="left">
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view" <view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
v-if="leftText.length"> <uni-icons :color="themeColor" :type="leftIcon" size="20" />
<text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text> </view>
</view> <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
<slot name="left" /> v-if="leftText.length">
<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
</view>
</slot>
</view> </view>
<view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle"> <view class="uni-navbar__header-container " @tap="onClickTitle">
<view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length"> <slot>
<text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text> <view class="uni-navbar__header-container-inner" v-if="title.length>0">
</view> <text class="uni-nav-bar-text uni-ellipsis-1"
<!-- 标题插槽 --> :style="{color: themeColor }">{{ title }}</text>
<slot /> </view>
</slot>
</view> </view>
<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view"> <view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
<view class="uni-navbar__content_view" v-if="rightIcon.length"> :style="{width:rightIconWidth}">
<uni-icons :color="color" :type="rightIcon" size="24" /> <slot name="right">
</view> <view v-if="rightIcon.length">
<!-- 优先显示图标 --> <uni-icons :color="themeColor" :type="rightIcon" size="22" />
<view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length"> </view>
<text class="uni-nav-bar-right-text">{{ rightText }}</text> <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
</view> <text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
<slot name="right" /> </view>
</slot>
</view> </view>
</view> </view>
</view> </view>
<view class="uni-navbar__placeholder" v-if="fixed"> <view class="uni-navbar__placeholder" v-if="fixed">
<status-bar v-if="statusBar" /> <status-bar v-if="statusBar" />
<view class="uni-navbar__placeholder-view" /> <view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import statusBar from "./uni-status-bar.vue"; import statusBar from "./uni-status-bar.vue";
const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
/** /**
* NavBar 自定义导航栏 * NavBar 自定义导航栏
* @description 导航栏组件，主要用于头部导航 * @description 导航栏组件，主要用于头部导航
* @tutorial https://ext.dcloud.net.cn/plugin?id=52 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
* @property {Boolean} dark 开启黑暗模式
* @property {String} title 标题文字 * @property {String} title 标题文字
* @property {String} leftText 左侧按钮文本 * @property {String} leftText 左侧按钮文本
* @property {String} rightText 右侧按钮文本 * @property {String} rightText 右侧按钮文本
...@@ -66,8 +73,12 @@ ...@@ -66,8 +73,12 @@
components: { components: {
statusBar statusBar
}, },
emits:['clickLeft','clickRight','clickTitle'], emits: ['clickLeft', 'clickRight', 'clickTitle'],
props: { props: {
dark: {
type: Boolean,
default: false
},
title: { title: {
type: String, type: String,
default: "" default: ""
...@@ -94,11 +105,11 @@ ...@@ -94,11 +105,11 @@
}, },
color: { color: {
type: String, type: String,
default: "#000000" default: ""
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: "#FFFFFF" default: ""
}, },
statusBar: { statusBar: {
type: [Boolean, String], type: [Boolean, String],
...@@ -111,13 +122,58 @@ ...@@ -111,13 +122,58 @@
border: { border: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true
},
height: {
type: [Number, String],
default: 44
},
leftWidth: {
type: [Number, String],
default: 60
},
rightWidth: {
type: [Number, String],
default: 60
},
},
computed: {
themeBgColor() {
if (this.dark) {
// 默认值
if (this.backgroundColor) {
return this.backgroundColor
} else {
return this.dark ? '#333' : '#FFF'
}
}
return this.backgroundColor || '#FFF'
},
themeColor() {
if (this.dark) {
// 默认值
if (this.color) {
return this.color
} else {
return this.dark ? '#fff' : '#333'
}
}
return this.color || '#333'
},
navbarHeight() {
return getVal(this.height)
},
leftIconWidth() {
return getVal(this.leftWidth)
},
rightIconWidth() {
return getVal(this.rightWidth)
}
},
mounted() {
if (uni.report && this.title !== '') {
uni.report('title', this.title)
} }
}, },
mounted() {
if(uni.report && this.title !== '') {
uni.report('title', this.title)
}
},
methods: { methods: {
onClickLeft() { onClickLeft() {
this.$emit("clickLeft"); this.$emit("clickLeft");
...@@ -134,57 +190,68 @@ ...@@ -134,57 +190,68 @@
<style lang="scss" scoped> <style lang="scss" scoped>
$nav-height: 44px; $nav-height: 44px;
.uni-navbar {
// box-sizing: border-box;
}
.uni-nav-bar-text { .uni-nav-bar-text {
/* #ifdef APP-PLUS */ /* #ifdef APP-PLUS */
font-size: 34rpx; font-size: 34rpx;
/* #endif */ /* #endif */
/* #ifndef APP-PLUS */ /* #ifndef APP-PLUS */
font-size: $uni-font-size-lg; font-size: 14px;
/* #endif */ /* #endif */
} }
.uni-nav-bar-right-text { .uni-nav-bar-right-text {
font-size: $uni-font-size-base; font-size: 12px;
} }
.uni-navbar__content { .uni-navbar__content {
position: relative; position: relative;
background-color: $uni-bg-color; // background-color: #fff;
overflow: hidden; // box-sizing: border-box;
// width: 750rpx; background-color: transparent;
} }
.uni-navbar__content_view { .uni-navbar__content_view {
// box-sizing: border-box;
}
.uni-navbar-btn-text {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: column;
justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: row; line-height: 12px;
// background-color: #FFFFFF;
} }
.uni-navbar__header { .uni-navbar__header {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
padding: 0 10px;
flex-direction: row; flex-direction: row;
height: $nav-height; height: $nav-height;
line-height: $nav-height; font-size: 12px;
font-size: 16px;
// background-color: #ffffff;
} }
.uni-navbar__header-btns { .uni-navbar__header-btns {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
overflow: hidden;
display: flex; display: flex;
/* #endif */ /* #endif */
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row;
width: 120rpx; width: 120rpx;
padding: 0 6px; // padding: 0 6px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
...@@ -192,21 +259,29 @@ ...@@ -192,21 +259,29 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
width: 150rpx; width: 120rpx;
justify-content: flex-start; justify-content: flex-start;
align-items: center;
} }
.uni-navbar__header-btns-right { .uni-navbar__header-btns-right {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
width: 150rpx; flex-direction: row;
padding-right: 30rpx; // width: 150rpx;
// padding-right: 30rpx;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
} }
.uni-navbar__header-container { .uni-navbar__header-container {
flex: 1; /* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
padding: 0 10px;
overflow: hidden;
} }
.uni-navbar__header-container-inner { .uni-navbar__header-container-inner {
...@@ -214,9 +289,12 @@ ...@@ -214,9 +289,12 @@
display: flex; display: flex;
/* #endif */ /* #endif */
flex: 1; flex: 1;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: $uni-font-size-base; font-size: 12px;
overflow: hidden;
// box-sizing: border-box;
} }
...@@ -226,27 +304,40 @@ ...@@ -226,27 +304,40 @@
.uni-navbar--fixed { .uni-navbar--fixed {
position: fixed; position: fixed;
z-index: 998; z-index: 998;
/* #ifdef H5 */ /* #ifdef H5 */
left: var(--window-left); left: var(--window-left);
right: var(--window-right); right: var(--window-right);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
left:0; left: 0;
right: 0; right: 0;
/* #endif */ /* #endif */
} }
.uni-navbar--shadow { .uni-navbar--shadow {
/* #ifndef APP-NVUE */
box-shadow: 0 1px 6px #ccc; box-shadow: 0 1px 6px #ccc;
/* #endif */
} }
.uni-navbar--border { .uni-navbar--border {
border-bottom-width: 1rpx; border-bottom-width: 1rpx;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-color: $uni-border-color; border-bottom-color: #eee;
}
.uni-ellipsis-1 {
overflow: hidden;
/* #ifndef APP-NVUE */
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow: ellipsis;
/* #endif */
} }
</style>
// 暗主题配置
.uni-dark {}
</style>
uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue
浏览文件 @ 6f6e3846
...@@ -11,17 +11,17 @@ ...@@ -11,17 +11,17 @@
return { return {
statusBarHeight: 20 statusBarHeight: 20
} }
}, },
mounted() { mounted() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px' this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-status-bar { .uni-status-bar {
// width: 750rpx; // width: 750rpx;
height: 20px; height: 20px;
// height: var(--status-bar-height); // height: var(--status-bar-height);
} }
</style> </style>
uni_modules/uni-nav-bar/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-nav-bar", "id": "uni-nav-bar",
"displayName": "uni-nav-bar 自定义导航栏", "displayName": "uni-nav-bar 自定义导航栏",
"version": "1.1.0", "version": "1.3.4",
"description": "自定义导航栏组件，主要用于头部导航。", "description": "自定义导航栏组件，主要用于头部导航。",
"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",
"vue3": "y"
}
}
}
}
} }
\ No newline at end of file
uni_modules/uni-nav-bar/readme.md
浏览文件 @ 6f6e3846
### NavBar 导航栏 ## NavBar 导航栏
*已经支持在nvue页面中使用* > **组件名：uni-nav-bar**
> 代码块： `uNavBar`
导航栏组件，主要用于头部导航，组件名：``uni-nav-bar``，代码块： uNavBar。 导航栏组件，主要用于头部导航。
### 使用方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
在 ``script`` 中引用组件
```javascript
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
components: {uniNavBar}
}
```
在 ``template`` 中使用组件
```html
<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
```
### 属性说明
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|title |String |- |标题文字 |
|leftText |String |- |左侧按钮文本 |
|rightText |String |- |右侧按钮文本 |
|leftIcon |String |- |左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|rightIcon |String |- |右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性） |
|color |String |#000000|图标和文字颜色 |
|backgroundColor |String |#FFFFFF|导航栏背景颜色 |
|fixed |Boolean|false |是否固定顶部 |
|statusBar |Boolean|false |是否包含状态栏 |
|shadow |Boolean|false |导航栏下是否有阴影 |
### 插槽说明
开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
|slot名 |说明 |
|:-: |:-: |
|left |向导航栏左侧插入 |
|right |向导航栏右侧插入 |
|default|向导航栏中间插入 |
```html
<uni-nav-bar>
<view>标题栏</view>
<view slot="left">left</view>
<view slot="right">right</view>
</uni-nav-bar>
```
### 事件说明
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@clickLeft |左侧按钮点击时触发 |- |
|@clickRight |右侧按钮点击时触发 |- |
### 插件预览地址
[https://uniapp.dcloud.io/h5/pages/extUI/nav-bar/nav-bar](https://uniapp.dcloud.io/h5/pages/extUI/nav-bar/nav-bar)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar)
\ No newline at end of file
uni_modules/uni-notice-bar/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.0（2021-11-19）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-notice-bar](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
## 1.1.1（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.9（2021-05-12） ## 1.0.9（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.8（2021-04-21） ## 1.0.8（2021-04-21）
......
uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
浏览文件 @ 6f6e3846
<template> <template>
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick"> <view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
<!-- #ifdef MP-ALIPAY --> <uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" @click="close"> :color="color" size="22" />
<uni-icons type="closeempty" :color="color" size="12" /> <view ref="textBox" class="uni-noticebar__content-wrapper"
</view> :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon"> <view :id="elIdBox" class="uni-noticebar__content"
<uni-icons type="sound" :color="color" size="14" /> :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
</view> <text :id="elId" ref="animationEle" class="uni-noticebar__content-text"
<!-- #endif --> :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || showGetMore)}"
<!-- #ifndef MP-ALIPAY --> :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" type="closeempty" :color="color"
size="12" @click="close" />
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color"
size="14" />
<!-- #endif -->
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
</view> </view>
</view> </view>
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point" @click="clickMore"> <view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point"
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text> @click="clickMore">
<uni-icons type="arrowright" :color="moreColor" size="14" /> <text v-if="moreText.length > 0" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
<uni-icons v-else type="right" :color="moreColor" size="16" />
</view>
<view class="uni-noticebar-close uni-cursor-point" v-if="(showClose === true || showClose === 'true') && (showGetMore === false || showGetMore === 'false')">
<uni-icons
type="closeempty" :color="color" size="16" @click="close" />
</view> </view>
</view> </view>
</template> </template>
...@@ -31,31 +27,31 @@ ...@@ -31,31 +27,31 @@
// #ifdef APP-NVUE // #ifdef APP-NVUE
const dom = weex.requireModule('dom'); const dom = weex.requireModule('dom');
const animation = weex.requireModule('animation'); const animation = weex.requireModule('animation');
// #endif // #endif
/** /**
* NoticeBar 自定义导航栏 * NoticeBar 自定义导航栏
* @description 通告栏组件 * @description 通告栏组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=30 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
* @property {Number} speed 文字滚动的速度，默认100px/秒 * @property {Number} speed 文字滚动的速度，默认100px/秒
* @property {String} text 显示文字 * @property {String} text 显示文字
* @property {String} backgroundColor 背景颜色 * @property {String} backgroundColor 背景颜色
* @property {String} color 文字颜色 * @property {String} color 文字颜色
* @property {String} moreColor 查看更多文字的颜色 * @property {String} moreColor 查看更多文字的颜色
* @property {String} moreText 设置“查看更多”的文本 * @property {String} moreText 设置“查看更多”的文本
* @property {Boolean} single = [true|false] 是否单行 * @property {Boolean} single = [true|false] 是否单行
* @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
* @event {Function} click 点击 NoticeBar 触发事件 * @event {Function} click 点击 NoticeBar 触发事件
* @event {Function} close 关闭 NoticeBar 触发事件 * @event {Function} close 关闭 NoticeBar 触发事件
* @event {Function} getmore 点击”查看更多“时触发事件 * @event {Function} getmore 点击”查看更多“时触发事件
*/ */
export default { export default {
name: 'UniNoticeBar', name: 'UniNoticeBar',
emits:['click','getmore','close'], emits: ['click', 'getmore', 'close'],
props: { props: {
text: { text: {
type: String, type: String,
...@@ -67,7 +63,7 @@ ...@@ -67,7 +63,7 @@
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: '#fffbe8' default: '#FFF9EA'
}, },
speed: { speed: {
// 默认1s滚动100px // 默认1s滚动100px
...@@ -76,11 +72,11 @@ ...@@ -76,11 +72,11 @@
}, },
color: { color: {
type: String, type: String,
default: '#de8c17' default: '#FF9A43'
}, },
moreColor: { moreColor: {
type: String, type: String,
default: '#999999' default: '#FF9A43'
}, },
single: { single: {
// 是否单行 // 是否单行
...@@ -132,10 +128,10 @@ ...@@ -132,10 +128,10 @@
var pages = getCurrentPages(); var pages = getCurrentPages();
var page = pages[pages.length - 1]; var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview(); var currentWebview = page.$getAppWebview();
currentWebview.addEventListener('hide',()=>{ currentWebview.addEventListener('hide', () => {
this.webviewHide = true this.webviewHide = true
}) })
currentWebview.addEventListener('show',()=>{ currentWebview.addEventListener('show', () => {
this.webviewHide = false this.webviewHide = false
}) })
// #endif // #endif
...@@ -156,9 +152,9 @@ ...@@ -156,9 +152,9 @@
boxWidth = 0, boxWidth = 0,
textWidth = 0; textWidth = 0;
let textQuery = new Promise((resolve, reject) => { let textQuery = new Promise((resolve, reject) => {
uni.createSelectorQuery() uni.createSelectorQuery()
// #ifndef MP-ALIPAY // #ifndef MP-ALIPAY
.in(this) .in(this)
// #endif // #endif
.select(`#${this.elId}`) .select(`#${this.elId}`)
.boundingClientRect() .boundingClientRect()
...@@ -168,9 +164,9 @@ ...@@ -168,9 +164,9 @@
}) })
}) })
let boxQuery = new Promise((resolve, reject) => { let boxQuery = new Promise((resolve, reject) => {
uni.createSelectorQuery() uni.createSelectorQuery()
// #ifndef MP-ALIPAY // #ifndef MP-ALIPAY
.in(this) .in(this)
// #endif // #endif
.select(`#${this.elIdBox}`) .select(`#${this.elIdBox}`)
.boundingClientRect() .boundingClientRect()
...@@ -267,7 +263,6 @@ ...@@ -267,7 +263,6 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.uni-noticebar { .uni-noticebar {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -276,17 +271,18 @@ ...@@ -276,17 +271,18 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 6px 12px; padding: 10px 12px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.uni-cursor-point { .uni-cursor-point {
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
.uni-noticebar-close { .uni-noticebar-close {
margin-left: 8px;
margin-right: 5px; margin-right: 5px;
} }
...@@ -316,6 +312,7 @@ ...@@ -316,6 +312,7 @@
position: relative; position: relative;
height: 18px; height: 18px;
} }
/* #endif */ /* #endif */
.uni-noticebar__content--scrollable { .uni-noticebar__content--scrollable {
...@@ -395,4 +392,4 @@ ...@@ -395,4 +392,4 @@
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
} }
</style> </style>
uni_modules/uni-notice-bar/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-notice-bar", "id": "uni-notice-bar",
"displayName": "uni-notice-bar 通告栏", "displayName": "uni-notice-bar 通告栏",
"version": "1.1.0", "version": "1.2.0",
"description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告", "description": "NoticeBar 通告栏组件，常用于展示公告信息，可设为滚动公告",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -78,6 +79,10 @@ ...@@ -78,6 +79,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-notice-bar/readme.md
浏览文件 @ 6f6e3846
...@@ -7,65 +7,7 @@ ...@@ -7,65 +7,7 @@
通告栏组件 。 通告栏组件 。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-notice-bar)
#### 如使用过程中有任何问题，或者您对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-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 文字滚动 -->
<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示图标 -->
<uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示关闭按钮 -->
<uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 查看更多 -->
<uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
```
> **注意**
> 如果需要异步获取内容后展示需要使用`v-if`进行控制，`<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>`
## NoticeBar API
### NoticeBar Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|speed |Number |100 |文字滚动的速度，默认100px/秒 |
|text |String |- |显示文字 |
|background-color |String |#fffbe8|背景颜色 |
|color |String |#de8c17|文字颜色 |
|moreColor |String |#999999|查看更多文字的颜色 |
|moreText |String |- |设置“查看更多”的文本 |
|single |Boolean|false |是否单行 |
|scrollable |Boolean|false |是否滚动，为true时，NoticeBar为单行 |
|showIcon |Boolean|false |是否显示左侧喇叭图标 |
|showClose |Boolean|false |是否显示左侧关闭按钮 |
|showGetMore |Boolean|false |是否显示右侧查看更多图标，为true时，NoticeBar为单行|
### NoticeBar Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |点击 NoticeBar 触发事件 |- |
|@close |关闭 NoticeBar 触发事件 |- |
|@getmore |点击”查看更多“时触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar)
\ No newline at end of file
uni_modules/uni-number-box/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-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
## 1.1.2（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 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-number-box/components/uni-number-box/uni-number-box.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-numbox"> <view class="uni-numbox">
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point"> <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text> <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
</view> </view>
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue"/> <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point"> v-model="inputValue" :style="{background, color}" />
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text> <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
</view> </view>
</view> </view>
</template> </template>
...@@ -18,19 +19,23 @@ ...@@ -18,19 +19,23 @@
* @property {Number} min 最小值 * @property {Number} min 最小值
* @property {Number} max 最大值 * @property {Number} max 最大值
* @property {Number} step 每次点击改变的间隔大小 * @property {Number} step 每次点击改变的间隔大小
* @property {String} background 背景色
* @property {String} color 字体颜色（前景色）
* @property {Boolean} disabled = [true|false] 是否为禁用状态 * @property {Boolean} disabled = [true|false] 是否为禁用状态
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
* @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
* @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
*/ */
export default { export default {
name: "UniNumberBox", name: "UniNumberBox",
emits:['change','input','update:modelValue','blur','focus'], emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
props: { props: {
value: { value: {
type: [Number, String], type: [Number, String],
default: 1 default: 1
}, },
modelValue:{ modelValue: {
type: [Number, String], type: [Number, String],
default: 1 default: 1
}, },
...@@ -45,6 +50,14 @@ ...@@ -45,6 +50,14 @@
step: { step: {
type: Number, type: Number,
default: 1 default: 1
},
background: {
type: String,
default: '#f5f5f5'
},
color: {
type: String,
default: '#333'
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
...@@ -60,15 +73,15 @@ ...@@ -60,15 +73,15 @@
value(val) { value(val) {
this.inputValue = +val; this.inputValue = +val;
}, },
modelValue(val){ modelValue(val) {
this.inputValue = +val; this.inputValue = +val;
} }
}, },
created() { created() {
if(this.value === 1){ if (this.value === 1) {
this.inputValue = +this.modelValue; this.inputValue = +this.modelValue;
} }
if(this.modelValue === 1){ if (this.modelValue === 1) {
this.inputValue = +this.value; this.inputValue = +this.value;
} }
}, },
...@@ -141,91 +154,67 @@ ...@@ -141,91 +154,67 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$box-height: 35px; $box-height: 26px;
/* #ifdef APP-NVUE */ $bg: #f5f5f5;
$box-line-height: 35px; $br: 2px;
/* #endif */ $color: #333;
$box-line-height: 26px;
$box-width: 35px;
.uni-numbox { .uni-numbox {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
height: $box-height;
line-height: $box-height;
width: 120px;
} }
.uni-cursor-point { .uni-numbox-btns {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
background-color: $bg;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
.uni-numbox__value { .uni-numbox__value {
background-color: $uni-bg-color; margin: 0 2px;
width: 50px; background-color: $bg;
width: 40px;
height: $box-height; height: $box-height;
text-align: center; text-align: center;
font-size: $uni-font-size-lg; font-size: 14px;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-left-width: 0; border-left-width: 0;
border-right-width: 0; border-right-width: 0;
color: $color;
} }
.uni-numbox__minus { .uni-numbox__minus {
/* #ifndef APP-NVUE */ border-top-left-radius: $br;
display: flex; border-bottom-left-radius: $br;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: $box-width;
height: $box-height;
// line-height: $box-line-height;
// text-align: center;
font-size: 20px;
color: $uni-text-color;
background-color: $uni-bg-color-grey;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-top-left-radius: $uni-border-radius-base;
border-bottom-left-radius: $uni-border-radius-base;
border-right-width: 0;
} }
.uni-numbox__plus { .uni-numbox__plus {
/* #ifndef APP-NVUE */ border-top-right-radius: $br;
display: flex; border-bottom-right-radius: $br;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: $box-width;
height: $box-height;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-top-right-radius: $uni-border-radius-base;
border-bottom-right-radius: $uni-border-radius-base;
background-color: $uni-bg-color-grey;
border-left-width: 0;
} }
.uni-numbox--text { .uni-numbox--text {
font-size: 20px; // fix nvue
color: $uni-text-color; line-height: 20px;
font-size: 20px;
font-weight: 300;
color: $color;
} }
.uni-numbox--disabled { .uni-numbox .uni-numbox--disabled {
color: $uni-text-color-disable; color: #c0c0c0 !important;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: not-allowed; cursor: not-allowed;
/* #endif */ /* #endif */
} }
</style> </style>
uni_modules/uni-number-box/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-number-box", "id": "uni-number-box",
"displayName": "uni-number-box 数字输入框", "displayName": "uni-number-box 数字输入框",
"version": "1.1.1", "version": "1.2.1",
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。", "description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,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": {
...@@ -74,6 +74,10 @@ ...@@ -74,6 +74,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-number-box/readme.md
浏览文件 @ 6f6e3846
## NumberBox 数字输入框 ## NumberBox 数字输入框
> **组件名：uni-number-box** > **组件名：uni-number-box**
> 代码块： `uNumberBox` > 代码块： `uNumberBox`
带加减按钮的数字输入框。 带加减按钮的数字输入框。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
#### 如使用过程中有任何问题，或者您对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-number-box></uni-number-box>
<uni-number-box v-model = "vModelValue" />
<uni-number-box :min="0" :max="9"></uni-number-box>
<uni-number-box @change="bindChange"></uni-number-box>
```
## API
### NumberBox Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|value/v-model|Number |0 |输入框当前值 |
|min |Number |0 |最小值 |
|max |Number |100 |最大值 |
|step |Number |1 |每次点击改变的间隔大小 |
|disabled |Boolean|false |是否为禁用状态 |
### NumberBox Events
|事件名称 |说明 |返回值 |
|:-: |:-: |:-: |
|change |输入框值改变时触发的事件，参数为输入框当前的 value |- |
|focus |输入框聚焦时触发的事件，参数为 event 对象 |- |
|blur |输入框失焦时触发的事件，参数为 event 对象 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box](https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box)
\ No newline at end of file
uni_modules/uni-pagination/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.1（2021-11-22）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 修复 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-pagination](https://uniapp.dcloud.io/component/uniui/uni-pagination)
## 1.1.2（2021-10-08）
- 修复 current 、value 属性未监听，导致高亮样式失效的 bug
## 1.1.1（2021-08-20）
- 新增 支持国际化
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12） ## 1.0.7（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.0.6（2021-04-12） ## 1.0.6（2021-04-12）
......
uni_modules/uni-pagination/components/uni-pagination/i18n/en.json 0 → 100644
浏览文件 @ 6f6e3846
{
"uni-pagination.prevText": "prev",
"uni-pagination.nextText": "next"
}
uni_modules/uni-pagination/components/uni-pagination/i18n/es.json 0 → 100644
浏览文件 @ 6f6e3846
{
"uni-pagination.prevText": "anterior",
"uni-pagination.nextText": "próxima"
}
uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json 0 → 100644
浏览文件 @ 6f6e3846
{
"uni-pagination.prevText": "précédente",
"uni-pagination.nextText": "suivante"
}
uni_modules/uni-pagination/components/uni-pagination/i18n/index.js 0 → 100644
浏览文件 @ 6f6e3846
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
es,
fr,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json 0 → 100644
浏览文件 @ 6f6e3846
{
"uni-pagination.prevText": "上一页",
"uni-pagination.nextText": "下一页"
}
uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json 0 → 100644
浏览文件 @ 6f6e3846
{
"uni-pagination.prevText": "上一頁",
"uni-pagination.nextText": "下一頁"
}
uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-pagination"> <view class="uni-pagination">
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view> <view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
<!-- #endif --> <!-- #endif -->
<view <view class="uni-pagination__btn"
class="uni-pagination__btn"
:class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'" :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
:hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20"
:hover-start-time="20" :hover-stay-time="70" @click="clickLeft">
:hover-stay-time="70"
@click="clickLeft"
>
<template v-if="showIcon === true || showIcon === 'true'"> <template v-if="showIcon === true || showIcon === 'true'">
<uni-icons color="#666" size="16" type="arrowleft" /> <uni-icons color="#666" size="16" type="left" />
</template> </template>
<template v-else> <template v-else>
<text class="uni-pagination__child-btn">{{ prevText }}</text> <text class="uni-pagination__child-btn">{{ prevPageText }}</text>
</template> </template>
</view> </view>
<view class="uni-pagination__num uni-pagination__num-flex-none"> <view class="uni-pagination__num uni-pagination__num-flex-none">
<view class="uni-pagination__num-current"> <view class="uni-pagination__num-current">
<text class="uni-pagination__num-current-text is-pc-hide" style="color:#409EFF">{{ currentIndex }}</text> <text class="uni-pagination__num-current-text is-pc-hide"
style="color:#409EFF">{{ currentIndex }}</text>
<text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text> <text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view <view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
v-for="(item, index) in paper" class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
:key="index" <text>{{ item }}</text>
:class="{ 'page--active': item === currentIndex }" </view>
class="uni-pagination__num-tag tag--active is-phone-hide"
@click.top="selectPage(item, index)"
>
<text>{{ item }}</text>
</view>
<!-- #endif --> <!-- #endif -->
</view> </view>
</view> </view>
<view <view class="uni-pagination__btn"
class="uni-pagination__btn"
:class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'" :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
:hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20"
:hover-start-time="20" :hover-stay-time="70" @click="clickRight">
:hover-stay-time="70"
@click="clickRight"
>
<template v-if="showIcon === true || showIcon === 'true'"> <template v-if="showIcon === true || showIcon === 'true'">
<uni-icons color="#666" size="16" type="arrowright" /> <uni-icons color="#666" size="16" type="right" />
</template> </template>
<template v-else> <template v-else>
<text class="uni-pagination__child-btn">{{ nextText }}</text> <text class="uni-pagination__child-btn">{{ nextPageText }}</text>
</template> </template>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
/** /**
* Pagination 分页器 * Pagination 分页器
* @description 分页器组件，用于展示页码、请求数据等 * @description 分页器组件，用于展示页码、请求数据等
* @tutorial https://ext.dcloud.net.cn/plugin?id=32 * @tutorial https://ext.dcloud.net.cn/plugin?id=32
* @property {String} prevText 左侧按钮文字 * @property {String} prevText 左侧按钮文字
* @property {String} nextText 右侧按钮文字 * @property {String} nextText 右侧按钮文字
* @property {Number} current 当前页 * @property {Number} current 当前页
* @property {Number} total 数据总量 * @property {Number} total 数据总量
* @property {Number} pageSize 每页数据量 * @property {Number} pageSize 每页数据量
* @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮 * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
* @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个 * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
*/ */
export default { import {
name: 'UniPagination', initVueI18n
emits:['update:modelValue','input','change'], } from '@dcloudio/uni-i18n'
props: { import messages from './i18n/index.js'
value: { const {
type: [Number, String], t
default: 1 } = initVueI18n(messages)
}, export default {
modelValue: { name: 'UniPagination',
type: [Number, String], emits: ['update:modelValue', 'input', 'change'],
default: 1 props: {
}, value: {
prevText: { type: [Number, String],
type: String, default: 1
default: '上一页' },
}, modelValue: {
nextText: { type: [Number, String],
type: String, default: 1
default: '下一页' },
}, prevText: {
current: { type: String,
type: [Number, String], },
default: 1 nextText: {
}, type: String,
total: { },
// 数据总量 current: {
type: [Number, String], type: [Number, String],
default: 0 default: 1
}, },
pageSize: { total: {
// 每页数据量 // 数据总量
type: [Number, String], type: [Number, String],
default: 10 default: 0
}, },
showIcon: { pageSize: {
// 是否以 icon 形式展示按钮 // 每页数据量
type: [Boolean, String], type: [Number, String],
default: false default: 10
}, },
pagerCount: { showIcon: {
type: Number, // 是否以 icon 形式展示按钮
default: 7 type: [Boolean, String],
} default: false
}, },
data() { pagerCount: {
return { type: Number,
currentIndex: 1, default: 7
paperData: []
}
},
computed: {
maxPage() {
let maxPage = 1
let total = Number(this.total)
let pageSize = Number(this.pageSize)
if (total && pageSize) {
maxPage = Math.ceil(total / pageSize)
} }
return maxPage
}, },
paper() { data() {
const num = this.currentIndex return {
// TODO 最大页数 currentIndex: 1,
const pagerCount = this.pagerCount paperData: []
// const total = 181
const total = this.total
const pageSize = this.pageSize
let totalArr = []
let showPagerArr = []
let pagerNum = Math.ceil(total / pageSize)
for (let i = 0; i < pagerNum; i++) {
totalArr.push(i + 1)
} }
showPagerArr.push(1) },
const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2] computed: {
totalArr.forEach((item, index) => { prevPageText() {
if ((pagerCount + 1) / 2 >= num) { return this.prevText || t('uni-pagination.prevText')
if (item < pagerCount + 1 && item > 1) { },
showPagerArr.push(item) nextPageText() {
return this.nextText || t('uni-pagination.nextText')
},
maxPage() {
let maxPage = 1
let total = Number(this.total)
let pageSize = Number(this.pageSize)
if (total && pageSize) {
maxPage = Math.ceil(total / pageSize)
}
return maxPage
},
paper() {
const num = this.currentIndex
// TODO 最大页数
const pagerCount = this.pagerCount
// const total = 181
const total = this.total
const pageSize = this.pageSize
let totalArr = []
let showPagerArr = []
let pagerNum = Math.ceil(total / pageSize)
for (let i = 0; i < pagerNum; i++) {
totalArr.push(i + 1)
}
showPagerArr.push(1)
const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
totalArr.forEach((item, index) => {
if ((pagerCount + 1) / 2 >= num) {
if (item < pagerCount + 1 && item > 1) {
showPagerArr.push(item)
}
} else if (num + 2 <= totalNum) {
if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
showPagerArr.push(item)
}
} else {
if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[
totalArr.length - 1]) {
showPagerArr.push(item)
}
} }
} else if (num + 2 <= totalNum) { })
if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) { if (pagerNum > pagerCount) {
showPagerArr.push(item) if ((pagerCount + 1) / 2 >= num) {
showPagerArr[showPagerArr.length - 1] = '...'
} else if (num + 2 <= totalNum) {
showPagerArr[1] = '...'
showPagerArr[showPagerArr.length - 1] = '...'
} else {
showPagerArr[1] = '...'
} }
showPagerArr.push(totalArr[totalArr.length - 1])
} else { } else {
if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[totalArr.length - 1]) { if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
showPagerArr.push(item) showPagerArr.shift()
showPagerArr.push(totalArr[totalArr.length - 1])
} }
} }
})
if (pagerNum > pagerCount) {
if ((pagerCount + 1) / 2 >= num) {
showPagerArr[showPagerArr.length - 1] = '...'
} else if (num + 2 <= totalNum) {
showPagerArr[1] = '...'
showPagerArr[showPagerArr.length - 1] = '...'
} else {
showPagerArr[1] = '...'
}
showPagerArr.push(totalArr[totalArr.length - 1])
} else {
if ((pagerCount + 1) / 2 >= num) {
} else if (num + 2 <= totalNum) {
} else {
showPagerArr.shift()
showPagerArr.push(totalArr[totalArr.length - 1])
}
}
return showPagerArr return showPagerArr
}
},
watch: {
current(val) {
this.currentIndex = val
},
value(val) {
if (val < 1) {
this.currentIndex = 1
} else {
this.currentIndex = val
} }
}, },
modelValue(val) { watch: {
if (val < 1) { current: {
this.currentIndex = 1 immediate: true,
} else { handler(val, old) {
this.currentIndex = val if (val < 1) {
} this.currentIndex = 1
} } else {
}, this.currentIndex = val
created() {
this.currentIndex = +this.value
},
methods: {
// 选择标签
selectPage(e, index) {
if (parseInt(e)) {
this.currentIndex = e
this.change('current')
} else {
let pagerNum = Math.ceil(this.total / this.pageSize)
// let pagerNum = Math.ceil(181 / this.pageSize)
// 上一页
if (index <= 1) {
if (this.currentIndex - 5 > 1) {
this.currentIndex -= 5
} else {
this.currentIndex = 1
} }
return
} }
// 下一页 },
if (index >= 6) { value: {
if (this.currentIndex + 5 > pagerNum) { immediate: true,
this.currentIndex = pagerNum handler(val) {
if (Number(this.current) !== 1) return
if (val < 1) {
this.currentIndex = 1
} else { } else {
this.currentIndex += 5 this.currentIndex = val
} }
return
} }
} }
}, },
clickLeft() { methods: {
if (Number(this.currentIndex) === 1) { // 选择标签
return selectPage(e, index) {
} if (parseInt(e)) {
this.currentIndex -= 1 this.currentIndex = e
this.change('prev') this.change('current')
}, } else {
clickRight() { let pagerNum = Math.ceil(this.total / this.pageSize)
if (Number(this.currentIndex) >= this.maxPage) { // let pagerNum = Math.ceil(181 / this.pageSize)
return // 上一页
if (index <= 1) {
if (this.currentIndex - 5 > 1) {
this.currentIndex -= 5
} else {
this.currentIndex = 1
}
return
}
// 下一页
if (index >= 6) {
if (this.currentIndex + 5 > pagerNum) {
this.currentIndex = pagerNum
} else {
this.currentIndex += 5
}
return
}
}
},
clickLeft() {
if (Number(this.currentIndex) === 1) {
return
}
this.currentIndex -= 1
this.change('prev')
},
clickRight() {
if (Number(this.currentIndex) >= this.maxPage) {
return
}
this.currentIndex += 1
this.change('next')
},
change(e) {
this.$emit('input', this.currentIndex)
this.$emit('update:modelValue', this.currentIndex)
this.$emit('change', {
type: e,
current: this.currentIndex
})
} }
this.currentIndex += 1
this.change('next')
},
change(e) {
this.$emit('input', this.currentIndex)
this.$emit('update:modelValue', this.currentIndex)
this.$emit('change', {
type: e,
current: this.currentIndex
})
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.uni-pagination { $uni-primary: #2979ff;
/* #ifndef APP-NVUE */ .uni-pagination {
display: flex; /* #ifndef APP-NVUE */
/* #endif */ display: flex;
position: relative; /* #endif */
overflow: hidden; position: relative;
flex-direction: row; overflow: hidden;
justify-content: center; flex-direction: row;
align-items: center; justify-content: center;
} align-items: center;
}
.uni-pagination__total {
font-size: 14px;
color: #999;
margin-right: 15px;
}
.uni-pagination__btn {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
padding: 0 8px;
line-height: 30px;
font-size: $uni-font-size-base;
position: relative;
background-color: #f4f4f5;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
// border-width: 1px;
// border-style: solid;
// border-color: $uni-border-color;
}
.uni-pagination__child-btn { .uni-pagination__total {
/* #ifndef APP-NVUE */ font-size: 14px;
display: flex; color: #999;
/* #endif */ margin-right: 15px;
font-size: $uni-font-size-base; }
position: relative;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.uni-pagination__num { .uni-pagination__btn {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ cursor: pointer;
flex: 1; /* #endif */
flex-direction: row; padding: 0 8px;
justify-content: center; line-height: 30px;
align-items: center; font-size: 12px;
height: 30px; position: relative;
line-height: 30px; background-color: #F0F0F0;
font-size: $uni-font-size-base; flex-direction: row;
color: $uni-text-color; justify-content: center;
margin: 0 5px; align-items: center;
} text-align: center;
border-radius: 5px;
// border-width: 1px;
// border-style: solid;
// border-color: $uni-border-color;
}
.uni-pagination__num-tag { .uni-pagination__child-btn {
/* #ifdef H5 */ /* #ifndef APP-NVUE */
cursor: pointer; display: flex;
min-width: 30px; /* #endif */
/* #endif */ font-size: 12px;
margin: 0 5px; position: relative;
height: 30px; flex-direction: row;
text-align: center; justify-content: center;
line-height: 30px; align-items: center;
// border: 1px red solid; text-align: center;
color: #666; color: #666;
// border-width: 1px; font-size: 12px;
// border-style: solid; }
// border-color: $uni-border-color;
}
.uni-pagination__num-current { .uni-pagination__num {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex: 1;
} flex-direction: row;
justify-content: center;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
margin: 0 5px;
}
.uni-pagination__num-current-text { .uni-pagination__num-tag {
font-size: 15px; /* #ifdef H5 */
} cursor: pointer;
min-width: 30px;
/* #endif */
margin: 0 5px;
height: 30px;
text-align: center;
line-height: 30px;
// border: 1px red solid;
color: #999;
border-radius: 4px;
// border-width: 1px;
// border-style: solid;
// border-color: $uni-border-color;
}
.uni-pagination--enabled { .uni-pagination__num-current {
color: #333333; /* #ifndef APP-NVUE */
opacity: 1; display: flex;
} /* #endif */
flex-direction: row;
}
.uni-pagination--disabled { .uni-pagination__num-current-text {
opacity: 0.5; font-size: 15px;
/* #ifdef H5 */ }
cursor: default;
/* #endif */
}
.uni-pagination--hover { .uni-pagination--enabled {
color: rgba(0, 0, 0, 0.6); color: #333333;
background-color: $uni-bg-color-hover; opacity: 1;
} }
.tag--active:hover { .uni-pagination--disabled {
color: $uni-color-primary; opacity: 0.5;
} /* #ifdef H5 */
cursor: default;
/* #endif */
}
.page--active { .uni-pagination--hover {
color: #fff; color: rgba(0, 0, 0, 0.6);
background-color: $uni-color-primary; background-color: #eee;
} }
.page--active:hover { .tag--active:hover {
color: #fff; color: $uni-primary;
} }
/* #ifndef APP-NVUE */ .page--active {
.is-pc-hide { color: #fff;
display: block; background-color: $uni-primary;
} }
.is-phone-hide { .page--active:hover {
display: none; color: #fff;
} }
@media screen and (min-width: 450px) { /* #ifndef APP-NVUE */
.is-pc-hide { .is-pc-hide {
display: none; display: block;
} }
.is-phone-hide { .is-phone-hide {
display: block; display: none;
} }
.uni-pagination__num-flex-none { @media screen and (min-width: 450px) {
flex: none; .is-pc-hide {
display: none;
}
.is-phone-hide {
display: block;
}
.uni-pagination__num-flex-none {
flex: none;
}
} }
}
/* #endif */ /* #endif */
</style> </style>
uni_modules/uni-pagination/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-pagination", "id": "uni-pagination",
"displayName": "uni-pagination 分页器", "displayName": "uni-pagination 分页器",
"version": "1.1.0", "version": "1.2.1",
"description": "Pagination 分页器组件，用于展示页码、请求数据等。", "description": "Pagination 分页器组件，用于展示页码、请求数据等。",
"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": ["uni-icons"], "dependencies": ["uni-scss","uni-icons"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -75,6 +75,10 @@ ...@@ -75,6 +75,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-pagination/readme.md
浏览文件 @ 6f6e3846
## Pagination 分页器 ## Pagination 分页器
> **组件名：uni-pagination** > **组件名：uni-pagination**
> 代码块： `uPagination` > 代码块： `uPagination`
分页器组件，用于展示页码、请求数据等。 分页器组件，用于展示页码、请求数据等。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-pagination)
#### 如使用过程中有任何问题，或者您对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-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|prevText |String |上一页 |左侧按钮文字 |
|nextText |String |下一页 |右侧按钮文字 |
|current |Number |1 |当前页 |
|total |Number |0 |数据总量 |
|pageSize |Number |10 |每页数据量 |
|showIcon |Boolean|false |是否以 icon 形式展示按钮 |
### Pagination Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@change|点击页码按钮时触发 |e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination](https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination)
\ No newline at end of file
uni_modules/uni-popup/changelog.md
浏览文件 @ 6f6e3846
## 1.7.6（2022-02-14）
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5（2022-01-19）
- 修复 isMaskClick 失效的bug
## 1.7.4（2022-01-19）
- 新增 cancelText \ confirmText 属性 ，可自定义文本
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26） ## 1.7.2（2021-11-26）
- 优化 组件示例 - 优化 组件示例
## 1.7.1（2021-11-26） ## 1.7.1（2021-11-26）
- 修复 vuedoc 文字错误 - 修复 vuedoc 文字错误
## 1.7.0（2021-11-19） ## 1.7.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup) - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2（2021-08-24） ## 1.6.2（2021-08-24）
- 新增 支持国际化 - 新增 支持国际化
## 1.6.1（2021-07-30） ## 1.6.1（2021-07-30）
- 优化 vue3下事件警告的问题 - 优化 vue3下事件警告的问题
## 1.6.0（2021-07-13） ## 1.6.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.5.0（2021-06-23） ## 1.5.0（2021-06-23）
- 新增 mask-click 遮罩层点击事件 - 新增 mask-click 遮罩层点击事件
## 1.4.5（2021-06-22） ## 1.4.5（2021-06-22）
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug - 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.4（2021-06-18） ## 1.4.4（2021-06-18）
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug - 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.3（2021-06-08） ## 1.4.3（2021-06-08）
- 修复 错误的 watch 字段 - 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题 - 修复 safeArea 属性不生效的问题
- 修复 点击内容，再点击遮罩无法关闭的Bug - 修复 点击内容，再点击遮罩无法关闭的Bug
## 1.4.2（2021-05-12） ## 1.4.2（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 1.4.1（2021-04-29） ## 1.4.1（2021-04-29）
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题 - 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
## 1.4.0 （2021-04-29） ## 1.4.0 （2021-04-29）
- 新增 type 属性的 left\right 值，支持左右弹出 - 新增 type 属性的 left\right 值，支持左右弹出
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗 - 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色 - 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性，是否适配底部安全区 - 新增 safeArea 属性，是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug - 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug - 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能，优化动画卡顿问题 - 优化 提升低配设备性能，优化动画卡顿问题
- 优化 更简单的组件自定义方式 - 优化 更简单的组件自定义方式
## 1.2.9（2021-02-05） ## 1.2.9（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件 - 优化 组件引用关系，通过uni_modules引用组件
## 1.2.8（2021-02-05） ## 1.2.8（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
## 1.2.7（2021-02-05） ## 1.2.7（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
- 新增 支持 PC 端 - 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 - 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
浏览文件 @ 6f6e3846
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</view> </view>
<view class="uni-dialog-button-group"> <view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog"> <view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{cancelText}}</text> <text class="uni-dialog-button-text">{{closeText}}</text>
</view> </view>
<view class="uni-dialog-button uni-border-left" @click="onOk"> <view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text> <text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
initVueI18n initVueI18n
} from '@dcloudio/uni-i18n' } from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js' import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages) const { t } = initVueI18n(messages)
/** /**
* PopUp 弹出层-对话框样式 * PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式 * @description 弹出层-对话框样式
...@@ -84,6 +84,14 @@ ...@@ -84,6 +84,14 @@
beforeClose: { beforeClose: {
type: Boolean, type: Boolean,
default: false default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
} }
}, },
data() { data() {
...@@ -95,10 +103,10 @@ ...@@ -95,10 +103,10 @@
}, },
computed: { computed: {
okText() { okText() {
return t("uni-popup.ok") return this.confirmText || t("uni-popup.ok")
}, },
cancelText() { closeText() {
return t("uni-popup.cancel") return this.cancelText || t("uni-popup.cancel")
}, },
placeholderText() { placeholderText() {
return this.placeholder || t("uni-popup.placeholder") return this.placeholder || t("uni-popup.placeholder")
...@@ -162,7 +170,7 @@ ...@@ -162,7 +170,7 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-dialog { .uni-popup-dialog {
width: 300px; width: 300px;
border-radius: 11px; border-radius: 11px;
...@@ -227,7 +235,7 @@ ...@@ -227,7 +235,7 @@
} }
.uni-dialog-button-text { .uni-dialog-button-text {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }
......
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
浏览文件 @ 6f6e3846
<template> <template>
<view class="uni-popup-message"> <view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type"> <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot> <slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text> <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot> </slot>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import popup from '../uni-popup/popup.js' import popup from '../uni-popup/popup.js'
/** /**
* PopUp 弹出层-消息提示 * PopUp 弹出层-消息提示
...@@ -21,10 +21,10 @@ ...@@ -21,10 +21,10 @@
* @value error 错误 * @value error 错误
* @property {String} message 消息提示文字 * @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/ */
export default { export default {
name: 'uniPopupMessage', name: 'uniPopupMessage',
mixins:[popup], mixins:[popup],
props: { props: {
/** /**
...@@ -47,31 +47,31 @@ ...@@ -47,31 +47,31 @@
duration: { duration: {
type: Number, type: Number,
default: 3000 default: 3000
}, },
maskShow:{ maskShow:{
type:Boolean, type:Boolean,
default:false default:false
} }
}, },
data() { data() {
return {} return {}
}, },
created() { created() {
this.popup.maskShow = this.maskShow this.popup.maskShow = this.maskShow
this.popup.messageChild = this this.popup.messageChild = this
}, },
methods: { methods: {
timerClose(){ timerClose(){
if(this.duration === 0) return if(this.duration === 0) return
clearTimeout(this.timer) clearTimeout(this.timer)
this.timer = setTimeout(()=>{ this.timer = setTimeout(()=>{
this.popup.close() this.popup.close()
},this.duration) },this.duration)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-message { .uni-popup-message {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
浏览文件 @ 6f6e3846
...@@ -103,9 +103,9 @@ ...@@ -103,9 +103,9 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-share { .uni-popup-share {
background-color: #fff; background-color: #fff;
border-top-left-radius: 11px; border-top-left-radius: 11px;
border-top-right-radius: 11px; border-top-right-radius: 11px;
} }
......
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
浏览文件 @ 6f6e3846
<template> <template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear"> <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
<view @touchstart="touchstart" > <view @touchstart="touchstart" >
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" /> <uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap"> <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view> <view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view>
</uni-transition> </uni-transition>
</view> </view>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" /> <keypress v-if="maskShow" @esc="onTap" />
...@@ -31,10 +31,12 @@ import keypress from './keypress.js' ...@@ -31,10 +31,12 @@ import keypress from './keypress.js'
* @value dialog 对话框 * @value dialog 对话框
* @value share 底部分享示例 * @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画 * @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {String} backgroundColor 主窗口背景色 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {Boolean} safeArea 是否适配底部安全区 * @property {String} backgroundColor 主窗口背景色
* @event {Function} change 打开关闭弹窗触发，e={show: false} * @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发 * @event {Function} maskClick 点击遮罩触发
*/ */
...@@ -59,18 +61,27 @@ export default { ...@@ -59,18 +61,27 @@ export default {
default: 'center' default: 'center'
}, },
// maskClick // maskClick
maskClick: { isMaskClick: {
type: Boolean, type: Boolean,
default: true default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'none' default: 'none'
},
safeArea:{
type: Boolean,
default: true
}, },
safeArea:{ maskBackgroundColor: {
type: Boolean, type: String,
default: true default: 'rgba(0, 0, 0, 0.4)'
} },
}, },
watch: { watch: {
...@@ -100,6 +111,19 @@ export default { ...@@ -100,6 +111,19 @@ export default {
this.mkclick = val this.mkclick = val
}, },
immediate: true immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
} }
}, },
data() { data() {
...@@ -151,14 +175,19 @@ export default { ...@@ -151,14 +175,19 @@ export default {
}, },
mounted() { mounted() {
const fixSize = () => { const fixSize = () => {
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync() const { windowWidth, windowHeight, windowTop, safeArea,screenHeight ,safeAreaInsets } = uni.getSystemInfoSync()
this.popupWidth = windowWidth this.popupWidth = windowWidth
this.popupHeight = windowHeight + windowTop this.popupHeight = windowHeight + windowTop
// 是否适配底部安全区 // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if(this.safeArea){ if(safeArea && this.safeArea){
this.safeAreaInsets = safeAreaInsets // #ifdef MP-WEIXIN
}else{ this.safeAreaInsets = screenHeight - safeArea.bottom
this.safeAreaInsets = 0 // #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
}else{
this.safeAreaInsets = 0
} }
} }
fixSize() fixSize()
...@@ -170,16 +199,22 @@ export default { ...@@ -170,16 +199,22 @@ export default {
// #endif // #endif
}, },
created() { created() {
this.mkclick = this.maskClick // this.mkclick = this.isMaskClick || this.maskClick
if(this.isMaskClick === null && this.maskClick === null){
this.mkclick = true
}else{
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) { if (this.animation) {
this.duration = 300 this.duration = 300
} else { } else {
this.duration = 0 this.duration = 0
} }
// TODO 处理 message 组件生命周期异常的问题 // TODO 处理 message 组件生命周期异常的问题
this.messageChild = null this.messageChild = null
// TODO 解决头条冒泡的问题 // TODO 解决头条冒泡的问题
this.clearPropagation = false this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
}, },
methods: { methods: {
/** /**
...@@ -187,20 +222,20 @@ export default { ...@@ -187,20 +222,20 @@ export default {
*/ */
closeMask() { closeMask() {
this.maskShow = false this.maskShow = false
}, },
/** /**
* 公用方法，遮罩层禁止点击 * 公用方法，遮罩层禁止点击
*/ */
disableMask() { disableMask() {
this.mkclick = false this.mkclick = false
}, },
// TODO nvue 取消冒泡 // TODO nvue 取消冒泡
clear(e) { clear(e) {
// #ifndef APP-NVUE // #ifndef APP-NVUE
e.stopPropagation() e.stopPropagation()
// #endif // #endif
this.clearPropagation = true this.clearPropagation = true
}, },
open(direction) { open(direction) {
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
...@@ -229,19 +264,19 @@ export default { ...@@ -229,19 +264,19 @@ export default {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.showPopup = false this.showPopup = false
}, 300) }, 300)
}, },
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容 // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart(){ touchstart(){
this.clearPropagation = false this.clearPropagation = false
}, },
onTap() { onTap() {
if (this.clearPropagation) { if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue // fix by mehaotian 兼容 nvue
this.clearPropagation = false this.clearPropagation = false
return return
} }
this.$emit('maskClick') this.$emit('maskClick')
if (!this.mkclick) return if (!this.mkclick) return
this.close() this.close()
}, },
...@@ -273,15 +308,14 @@ export default { ...@@ -273,15 +308,14 @@ export default {
bottom(type) { bottom(type) {
this.popupstyle = 'bottom' this.popupstyle = 'bottom'
this.ani = ['slide-bottom'] this.ani = ['slide-bottom']
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0, paddingBottom: this.safeAreaInsets+'px',
backgroundColor: this.bg backgroundColor: this.bg
} }
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
if (type) return if (type) return
this.showPopup = true this.showPopup = true
...@@ -352,7 +386,7 @@ export default { ...@@ -352,7 +386,7 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup { .uni-popup {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
...@@ -400,4 +434,4 @@ export default { ...@@ -400,4 +434,4 @@ export default {
.fixforpc-top { .fixforpc-top {
top: 0; top: 0;
} }
</style> </style>
uni_modules/uni-popup/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-popup", "id": "uni-popup",
"displayName": "uni-popup 弹出层", "displayName": "uni-popup 弹出层",
"version": "1.7.2", "version": "1.7.6",
"description": " Popup 组件，提供常用的弹层", "description": " Popup 组件，提供常用的弹层",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
"弹出层", "弹出层",
"弹窗", "弹窗",
"popup", "popup",
"弹框" "弹框"
], ],
"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-scss", "uni-scss",
"uni-transition" "uni-transition"
], ],
"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": "y" "vue3": "y"
} }
} }
} }
} }
} }
uni_modules/uni-popup/readme.md
浏览文件 @ 6f6e3846
## Popup 弹出层 ## Popup 弹出层
> **组件名：uni-popup** > **组件名：uni-popup**
> 代码块： `uPopup` > 代码块： `uPopup`
> 关联组件：`uni-transition` > 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等 弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
uni_modules/uni-rate/changelog.md
浏览文件 @ 6f6e3846
## 1.2.1（2021-07-30） ## 1.3.0（2021-11-19）
- 优化 vue3下事件警告的问题 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-rate](https://uniapp.dcloud.io/component/uniui/uni-rate)
## 1.2.2（2021-09-10）
- 优化 默认值修改为 0 颗星
## 1.2.1（2021-07-30）
- 优化 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.2（2021-05-12） ## 1.1.2（2021-05-12）
......
uni_modules/uni-rate/components/uni-rate/uni-rate.vue
浏览文件 @ 6f6e3846
<template> <template>
<view> <view>
<view <view ref="uni-rate" class="uni-rate">
ref="uni-rate" <view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
class="uni-rate" :style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
> @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
<view @mousemove.stop="mousemove" @mouseleave="mouseleave">
class="uni-rate__icon" <uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
:class="{'uni-cursor-not-allowed': disabled}"
:style="{ 'margin-right': marginNumber + 'px' }"
v-for="(star, index) in stars"
:key="index"
@touchstart.stop="touchstart"
@touchmove.stop="touchmove"
@mousedown.stop="mousedown"
@mousemove.stop="mousemove"
@mouseleave="mouseleave"
>
<uni-icons
:color="color"
:size="size"
:type="isFill ? 'star-filled' : 'star'"
/>
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view <view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
:style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" <uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size"
class="uni-rate__icon-on" type="star-filled" />
>
<uni-icons
style="text-align: left;"
:color="disabled?'#ccc':activeColor"
:size="size"
type="star-filled"
/>
</view> </view>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<view <view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
:style="{ width: star.activeWitch}" <uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
class="uni-rate__icon-on"
>
<uni-icons
:color="disabled?disabledColor:activeColor"
:size="size"
type="star-filled"
/>
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
...@@ -105,12 +76,12 @@ ...@@ -105,12 +76,12 @@
value: { value: {
// 当前评分 // 当前评分
type: [Number, String], type: [Number, String],
default: 1 default: 0
}, },
modelValue: { modelValue: {
// 当前评分 // 当前评分
type: [Number, String], type: [Number, String],
default: 1 default: 0
}, },
max: { max: {
// 最大评分 // 最大评分
...@@ -145,15 +116,15 @@ ...@@ -145,15 +116,15 @@
}, },
data() { data() {
return { return {
valueSync: "", valueSync: "",
userMouseFristMove: true, userMouseFristMove: true,
userRated: false, userRated: false,
userLastRate: 1 userLastRate: 1
}; };
}, },
watch: { watch: {
value(newVal) { value(newVal) {
this.valueSync = Number(newVal); this.valueSync = Number(newVal);
}, },
modelValue(newVal) { modelValue(newVal) {
this.valueSync = Number(newVal); this.valueSync = Number(newVal);
...@@ -181,30 +152,30 @@ ...@@ -181,30 +152,30 @@
} }
} }
return starList; return starList;
}, },
marginNumber() { marginNumber() {
return Number(this.margin) return Number(this.margin)
} }
}, },
created() { created() {
this.valueSync = Number(this.value||this.modelValue); this.valueSync = Number(this.value || this.modelValue);
this._rateBoxLeft = 0 this._rateBoxLeft = 0
this._oldValue = null this._oldValue = null
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this._getSize() this._getSize()
}, 100) }, 100)
// #ifdef H5 // #ifdef H5
this.PC = this.IsPC() this.PC = this.IsPC()
// #endif // #endif
}, },
methods: { methods: {
touchstart(e) { touchstart(e) {
// #ifdef H5 // #ifdef H5
if( this.IsPC() ) return if (this.IsPC()) return
// #endif // #endif
if (this.readonly || this.disabled) return if (this.readonly || this.disabled) return
const { const {
clientX, clientX,
...@@ -213,92 +184,92 @@ ...@@ -213,92 +184,92 @@
// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX // TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
this._getRateCount(clientX || screenX) this._getRateCount(clientX || screenX)
}, },
touchmove(e) { touchmove(e) {
// #ifdef H5 // #ifdef H5
if( this.IsPC() ) return if (this.IsPC()) return
// #endif // #endif
if (this.readonly || this.disabled || !this.touchable) return if (this.readonly || this.disabled || !this.touchable) return
const { const {
clientX, clientX,
screenX screenX
} = e.changedTouches[0] } = e.changedTouches[0]
this._getRateCount(clientX || screenX) this._getRateCount(clientX || screenX)
}, },
/** /**
* 兼容 PC @tian * 兼容 PC @tian
*/ */
mousedown(e) { mousedown(e) {
// #ifdef H5 // #ifdef H5
if( !this.IsPC() ) return if (!this.IsPC()) return
if (this.readonly || this.disabled) return if (this.readonly || this.disabled) return
const { const {
clientX, clientX,
} = e } = e
this.userLastRate = this.valueSync this.userLastRate = this.valueSync
this._getRateCount(clientX) this._getRateCount(clientX)
this.userRated = true this.userRated = true
// #endif // #endif
}, },
mousemove(e) { mousemove(e) {
// #ifdef H5 // #ifdef H5
if( !this.IsPC() ) return if (!this.IsPC()) return
if( this.userRated ) return if (this.userRated) return
if( this.userMouseFristMove ) { if (this.userMouseFristMove) {
console.log('---mousemove----', this.valueSync); console.log('---mousemove----', this.valueSync);
this.userLastRate = this.valueSync this.userLastRate = this.valueSync
this.userMouseFristMove = false this.userMouseFristMove = false
} }
if (this.readonly || this.disabled || !this.touchable) return if (this.readonly || this.disabled || !this.touchable) return
const { const {
clientX, clientX,
} = e } = e
this._getRateCount(clientX) this._getRateCount(clientX)
// #endif // #endif
}, },
mouseleave(e) { mouseleave(e) {
// #ifdef H5 // #ifdef H5
if( !this.IsPC() ) return if (!this.IsPC()) return
if (this.readonly || this.disabled || !this.touchable) return if (this.readonly || this.disabled || !this.touchable) return
if( this.userRated ) { if (this.userRated) {
this.userRated = false this.userRated = false
return return
} }
this.valueSync = this.userLastRate this.valueSync = this.userLastRate
// #endif // #endif
}, },
// #ifdef H5 // #ifdef H5
IsPC() { IsPC() {
var userAgentInfo = navigator.userAgent; var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true; var flag = true;
for (let v = 0; v < Agents.length - 1; v++) { for (let v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false; flag = false;
break; break;
} }
} }
return flag; return flag;
}, },
// #endif // #endif
/** /**
* 获取星星个数 * 获取星星个数
*/ */
_getRateCount(clientX) { _getRateCount(clientX) {
this._getSize() this._getSize()
const size = Number(this.size) const size = Number(this.size)
if(size === NaN){ if (size === NaN) {
return new Error('size 属性只能设置为数字') return new Error('size 属性只能设置为数字')
} }
const rateMoveRange = clientX - this._rateBoxLeft const rateMoveRange = clientX - this._rateBoxLeft
let index = parseInt(rateMoveRange / (size + this.marginNumber)) let index = parseInt(rateMoveRange / (size + this.marginNumber))
index = index < 0 ? 0 : index; index = index < 0 ? 0 : index;
index = index > this.max ? this.max : index; index = index > this.max ? this.max : index;
const range = parseInt(rateMoveRange - (size + this.marginNumber) * index); const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
let value = 0; let value = 0;
if (this._oldValue === index && !this.PC) return; if (this._oldValue === index && !this.PC) return;
this._oldValue = index; this._oldValue = index;
if (this.allowHalf) { if (this.allowHalf) {
if (range > (size / 2)) { if (range > (size / 2)) {
...@@ -309,9 +280,9 @@ ...@@ -309,9 +280,9 @@
} else { } else {
value = index + 1 value = index + 1
} }
value = Math.max(0.5, Math.min(value, this.max)) value = Math.max(0.5, Math.min(value, this.max))
this.valueSync = value this.valueSync = value
this._onChange() this._onChange()
}, },
...@@ -354,19 +325,16 @@ ...@@ -354,19 +325,16 @@
}; };
</script> </script>
<style <style lang="scss">
lang="scss"
scoped
>
.uni-rate { .uni-rate {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
line-height: 1; line-height: 1;
font-size: 0; font-size: 0;
flex-direction: row; flex-direction: row;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
...@@ -383,11 +351,11 @@ ...@@ -383,11 +351,11 @@
left: 0; left: 0;
line-height: 1; line-height: 1;
text-align: left; text-align: left;
} }
.uni-cursor-not-allowed { .uni-cursor-not-allowed {
/* #ifdef H5 */ /* #ifdef H5 */
cursor: not-allowed !important; cursor: not-allowed !important;
/* #endif */ /* #endif */
} }
</style> </style>
uni_modules/uni-rate/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-rate", "id": "uni-rate",
"displayName": "uni-rate 评分", "displayName": "uni-rate 评分",
"version": "1.2.1", "version": "1.3.0",
"description": "Rate 评分组件，可自定义评分星星图标的大小、间隔、评分数。", "description": "Rate 评分组件，可自定义评分星星图标的大小、间隔、评分数。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -76,6 +77,10 @@ ...@@ -76,6 +77,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-rate/readme.md
浏览文件 @ 6f6e3846
## Rate 评分 ## Rate 评分
> **组件名：uni-rate** > **组件名：uni-rate**
> 代码块： `uRate` > 代码块： `uRate`
> 关联组件：`uni-icons` > 关联组件：`uni-icons`
评分组件，多用于购买商品后，对商品进行评价等场景 评分组件，多用于购买商品后，对商品进行评价等场景
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-rate)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 暂时不支持零星选择 \ No newline at end of file
> - 当前版本暂不支持修改图标，后续版本会继续优化
> - 绑定值推荐使用 `v-model` 的方式
> - 如需设置一个星星表示多分，如：显示5个星星，最高分10分。这种情况请在 change 事件监听中自行处理，获取到的值乘以你的基数就可以，默认组件是一星一分
### 安装方式
本组件符合[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)
## 基本用法
```html
<!-- 基本用法 -->
<!-- 需要在 script 中绑定 value 变量 -->
<uni-rate v-model="value" @change="onChange"/>
<!-- 不支持滑动手势选择评分 -->
<uni-rate :touchable="false" :value="5"/>
<!-- 设置尺寸大小 -->
<uni-rate :size="18" :value="5"/>
<!-- 设置评分数 -->
<uni-rate :max="10" :value="5" />
<!-- 设置星星间隔 -->
<uni-rate :value="4" :margin="20" />
<!-- 设置颜色 -->
<uni-rate :value="3" color="#bbb" active-color="red" />
<!-- 选择半星 -->
<uni-rate allow-half :value="3.5" />
<!-- 只读状态 -->
<uni-rate :readonly="true" :value="2" />
<!-- 禁用状态 -->
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
<!-- 未选中的星星为镂空状态 -->
<uni-rate :value="3" :is-fill="false" />
```
```javascript
export default {
components: {},
data() {
return {
value: 2
}
},
methods: {
onChange(e) {
console.log('rate发生改变:' + JSON.stringify(e))
}
}
}
```
## API
### Rate Props
属性名 | 类型 | 默认值 | 说明
:-: | :-: | :-: | :-:
value/v-model | Number | 1 | 当前评分
color | String | #ececec | 未选中状态的星星颜色
activeColor | String | #ffca3e | 选中状态的星星颜色
disabledColor | String | #c0c0c0 | 禁用状态的星星颜色
size | Number | 24 | 星星的大小
max | Number | 5 | 最大评分评分数量，目前一分一颗星
margin | Number | 0 | 星星的间距，单位 px
isFill | Boolean | true | 星星的类型，是否为实心类型
disabled | Boolean | false | 是否为禁用状态 (之前版本为已读状态，现更正为禁用状态)
readonly | Boolean | false | 是否为只读状态
allowHalf | Boolean | false | 是否展示半星
touchable | Boolean | true | 是否支持滑动手势
### Rate Events
事件称名 | 说明 | 返回参数
:-: | :-: | :-:
@change | 改变 value 的值返回 | e = { value:number }
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate](https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate)
\ No newline at end of file
uni_modules/uni-row/changelog.md
浏览文件 @ 6f6e3846
## 0.1.0（2021-07-13） ## 1.0.0（2021-11-19）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-row](https://uniapp.dcloud.io/component/uniui/uni-row)
## 0.1.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.4（2021-05-12） ## 0.0.4（2021-05-12）
- 新增 组件示例地址 - 新增 组件示例地址
## 0.0.3（2021-02-05） ## 0.0.3（2021-02-05）
......
uni_modules/uni-row/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-row", "id": "uni-row",
"displayName": "uni-row 布局-行", "displayName": "uni-row 布局-行",
"version": "0.1.0", "version": "1.0.0",
"description": "流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。", "description": "流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。",
"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": "u"
} }
} }
} }
......
uni_modules/uni-row/readme.md
浏览文件 @ 6f6e3846
...@@ -6,178 +6,5 @@ ...@@ -6,178 +6,5 @@
流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-row)
#### 如使用过程中有任何问题，或者您对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)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 如使用过程中有任何问题，或者您对 uni-ui 有一些好的建议，欢迎加入 uni-ui 交流群：871950839
>
### 基本用法
###### 使用单一分栏创建基础的栅格布局
```html
<uni-row class="demo-uni-row">
<uni-col>
<view class="demo-uni-col dark_deep"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-col :span="12">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="12">
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
```
### 分栏偏移
###### 支持偏移指定的栏数
```html
<uni-row class="demo-uni-row">
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="8" :offset="6">
<view class="demo-uni-col dark"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-col :span="12" :pull="6">
<view class="demo-uni-col dark"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-col :span="12" :push="6">
<view class="demo-uni-col dark"></view>
</uni-col>
</uni-row>
```
### 响应式布局
###### 共五个响应尺寸：xs、sm、md、lg 和 xl
```html
<uni-row class="demo-uni-row">
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<view class="demo-uni-col light"></view>
</uni-col>
<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
```
###### 使用到的 CSS
```css
.demo-uni-row {
margin-bottom: 10px;
/* QQ、字节小程序文档写有 :host，但实测不生效 */
/* 百度小程序没有 :host，需要设置block */
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
display: block;
/* #endif */
}
/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
margin-bottom: 10px;
}
/* #endif */
.demo-uni-col {
height: 36px;
border-radius: 4px;
}
.dark_deep {
background-color: #99a9bf;
}
.dark {
background-color: #d3dce6;
}
.light {
background-color: #e5e9f2;
}
```
### 平台差异说明
### `uni-row`
| 属性名 | App(nvue) | App(vue) | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ 小程序 |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| gutter | - | √ | √ | √ | √ | √ | √ | √ |
### `uni-col`
| 属性名 | App(nvue) | App(vue) | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ 小程序 |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| span | √ | √ | √ | √ | √ | √ | √ | √ |
| offset | √ | √ | √ | √ | √ | √ | √ | √ |
| push | √ | √ | √ | √ | √ | √ | √ | √ |
| pull | √ | √ | √ | √ | √ | √ | √ | √ |
| xs | - | √ | √ | √ | √ | √ | √ | √ |
| sm | - | √ | √ | √ | √ | √ | √ | √ |
| md | - | √ | √ | √ | √ | √ | √ | √ |
| lg | - | √ | √ | √ | √ | √ | √ | √ |
| xl | - | √ | √ | √ | √ | √ | √ | √ |
## API
### Row Props
`其他平台`
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| gutter | Number | - | 0 | 否 | 栅格间隔 |
`nvue平台`
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| width | Number/String | - | `750rpx` | 否 | nvue 中无百分比 width，使用 span 等属性时，需配置此项`rpx值`。此项不会影响其他平台展示效果 |
### Col Props
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| span | Number | - | 24 | 否 | 栅格占据的列数 |
| offset | Number | - | - | 否 | 栅格左侧间隔格数 |
| push | Number | - | - | 否 | 栅格向右偏移格数 |
| pull | Number | - | - | 否 | 栅格向左偏移格数 |
| xs | Number/object | - | - | 否 | 屏幕宽度`<768px`时，要显示的栅格规则，如：`:xs="8"`或`:xs="{span: 8, pull: 4}"` |
| sm | Number/object | - | - | 否 | 屏幕宽度`≥768px`时，要显示的栅格规则 |
| md | Number/object | - | - | 否 | 屏幕宽度`≥992px`时，要显示的栅格规则 |
| lg | Number/object | - | - | 否 | 屏幕宽度`≥1200px`时，要显示的栅格规则 |
| xl | Number/object | - | - | 否 | 屏幕宽度`≥1920px`时，要显示的栅格规则 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/row/row](https://hellouniapp.dcloud.net.cn/pages/extUI/row/row)
\ No newline at end of file
uni_modules/uni-scss/changelog.md
浏览文件 @ 6f6e3846
## 1.0.3（2022-01-21）
- 优化 组件示例
## 1.0.2（2021-11-22） ## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22） ## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题 - 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18） ## 1.0.0（2021-11-18）
- init - init
uni_modules/uni-scss/index.scss
浏览文件 @ 6f6e3846
@import './styles/index.scss'; @import './styles/index.scss';
uni_modules/uni-scss/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-scss", "id": "uni-scss",
"displayName": "uni-scss 辅助样式", "displayName": "uni-scss 辅助样式",
"version": "1.0.2", "version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
"keywords": [ "keywords": [
"uni-scss", "uni-scss",
"uni-ui", "uni-ui",
"辅助样式" "辅助样式"
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "^3.1.0" "HBuilderX": "^3.1.0"
}, },
"dcloudext": { "dcloudext": {
"category": [ "category": [
"uni-app前端模板", "JS SDK",
"前端页面模板" "通用 SDK"
], ],
"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": "u" "app-nvue": "u"
}, },
"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"
}, },
"快应用": { "快应用": {
"华为": "n", "华为": "n",
"联盟": "n" "联盟": "n"
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "y" "vue3": "y"
} }
} }
} }
} }
} }
uni_modules/uni-scss/styles/index.scss
浏览文件 @ 6f6e3846
@import './setting/_variables.scss'; @import './setting/_variables.scss';
@import './setting/_border.scss'; @import './setting/_border.scss';
@import './setting/_color.scss'; @import './setting/_color.scss';
@import './setting/_space.scss'; @import './setting/_space.scss';
@import './setting/_radius.scss'; @import './setting/_radius.scss';
@import './setting/_text.scss'; @import './setting/_text.scss';
@import './setting/_styles.scss'; @import './setting/_styles.scss';
uni_modules/uni-scss/styles/setting/_border.scss
浏览文件 @ 6f6e3846
.uni-border { .uni-border {
border: 1px $uni-border-1 solid; border: 1px $uni-border-1 solid;
} }
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss
浏览文件 @ 6f6e3846
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 // TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
// @mixin get-styles($k,$c) { // @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{ // @if $k == size or $k == weight{
// font-#{$k}:#{$c} // font-#{$k}:#{$c}
// }@else{ // }@else{
// #{$k}:#{$c} // #{$k}:#{$c}
// } // }
// } // }
$uni-ui-color:( $uni-ui-color:(
// 主色 // 主色
primary: $uni-primary, primary: $uni-primary,
primary-disable: $uni-primary-disable, primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light, primary-light: $uni-primary-light,
// 辅助色 // 辅助色
success: $uni-success, success: $uni-success,
success-disable: $uni-success-disable, success-disable: $uni-success-disable,
success-light: $uni-success-light, success-light: $uni-success-light,
warning: $uni-warning, warning: $uni-warning,
warning-disable: $uni-warning-disable, warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light, warning-light: $uni-warning-light,
error: $uni-error, error: $uni-error,
error-disable: $uni-error-disable, error-disable: $uni-error-disable,
error-light: $uni-error-light, error-light: $uni-error-light,
info: $uni-info, info: $uni-info,
info-disable: $uni-info-disable, info-disable: $uni-info-disable,
info-light: $uni-info-light, info-light: $uni-info-light,
// 中性色 // 中性色
main-color: $uni-main-color, main-color: $uni-main-color,
base-color: $uni-base-color, base-color: $uni-base-color,
secondary-color: $uni-secondary-color, secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color, extra-color: $uni-extra-color,
// 背景色 // 背景色
bg-color: $uni-bg-color, bg-color: $uni-bg-color,
// 边框颜色 // 边框颜色
border-1: $uni-border-1, border-1: $uni-border-1,
border-2: $uni-border-2, border-2: $uni-border-2,
border-3: $uni-border-3, border-3: $uni-border-3,
border-4: $uni-border-4, border-4: $uni-border-4,
// 黑色 // 黑色
black:$uni-black, black:$uni-black,
// 白色 // 白色
white:$uni-white, white:$uni-white,
// 透明 // 透明
transparent:$uni-transparent transparent:$uni-transparent
) !default; ) !default;
@each $key, $child in $uni-ui-color { @each $key, $child in $uni-ui-color {
.uni-#{"" + $key} { .uni-#{"" + $key} {
color: $child; color: $child;
} }
.uni-#{"" + $key}-bg { .uni-#{"" + $key}-bg {
background-color: $child; background-color: $child;
} }
} }
.uni-shadow-sm { .uni-shadow-sm {
box-shadow: $uni-shadow-sm; box-shadow: $uni-shadow-sm;
} }
.uni-shadow-base { .uni-shadow-base {
box-shadow: $uni-shadow-base; box-shadow: $uni-shadow-base;
} }
.uni-shadow-lg { .uni-shadow-lg {
box-shadow: $uni-shadow-lg; box-shadow: $uni-shadow-lg;
} }
.uni-mask { .uni-mask {
background-color:$uni-mask; background-color:$uni-mask;
} }
uni_modules/uni-scss/styles/setting/_radius.scss
浏览文件 @ 6f6e3846
@mixin radius($r,$d:null ,$important: false){ @mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null); $radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable // Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){ @if (map-has-key($uni-radius, $r) and $d){
@if $d == t { @if $d == t {
border-top-left-radius:$radius-value; border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value; border-top-right-radius:$radius-value;
}@else if $d == r { }@else if $d == r {
border-top-right-radius:$radius-value; border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value; border-bottom-right-radius:$radius-value;
}@else if $d == b { }@else if $d == b {
border-bottom-left-radius:$radius-value; border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value; border-bottom-right-radius:$radius-value;
}@else if $d == l { }@else if $d == l {
border-top-left-radius:$radius-value; border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value; border-bottom-left-radius:$radius-value;
}@else if $d == tl { }@else if $d == tl {
border-top-left-radius:$radius-value; border-top-left-radius:$radius-value;
}@else if $d == tr { }@else if $d == tr {
border-top-right-radius:$radius-value; border-top-right-radius:$radius-value;
}@else if $d == br { }@else if $d == br {
border-bottom-right-radius:$radius-value; border-bottom-right-radius:$radius-value;
}@else if $d == bl { }@else if $d == bl {
border-bottom-left-radius:$radius-value; border-bottom-left-radius:$radius-value;
} }
}@else{ }@else{
border-radius:$radius-value; border-radius:$radius-value;
} }
} }
@each $key, $child in $uni-radius { @each $key, $child in $uni-radius {
@if($key){ @if($key){
.uni-radius-#{"" + $key} { .uni-radius-#{"" + $key} {
@include radius($key) @include radius($key)
} }
}@else{ }@else{
.uni-radius { .uni-radius {
@include radius($key) @include radius($key)
} }
} }
} }
@each $direction in t, r, b, l,tl, tr, br, bl { @each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius { @each $key, $child in $uni-radius {
@if($key){ @if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} { .uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false) @include radius($key,$direction,false)
} }
}@else{ }@else{
.uni-radius-#{$direction} { .uni-radius-#{$direction} {
@include radius($key,$direction,false) @include radius($key,$direction,false)
} }
} }
} }
} }
uni_modules/uni-scss/styles/setting/_space.scss
浏览文件 @ 6f6e3846
@mixin fn($space,$direction,$size,$n) { @mixin fn($space,$direction,$size,$n) {
@if $n { @if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px #{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else { } @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px #{$space}-#{$direction}: #{-$size*$uni-space-root}px
} }
} }
@mixin get-styles($direction,$i,$space,$n){ @mixin get-styles($direction,$i,$space,$n){
@if $direction == t { @if $direction == t {
@include fn($space, top,$i,$n); @include fn($space, top,$i,$n);
} }
@if $direction == r { @if $direction == r {
@include fn($space, right,$i,$n); @include fn($space, right,$i,$n);
} }
@if $direction == b { @if $direction == b {
@include fn($space, bottom,$i,$n); @include fn($space, bottom,$i,$n);
} }
@if $direction == l { @if $direction == l {
@include fn($space, left,$i,$n); @include fn($space, left,$i,$n);
} }
@if $direction == x { @if $direction == x {
@include fn($space, left,$i,$n); @include fn($space, left,$i,$n);
@include fn($space, right,$i,$n); @include fn($space, right,$i,$n);
} }
@if $direction == y { @if $direction == y {
@include fn($space, top,$i,$n); @include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n); @include fn($space, bottom,$i,$n);
} }
@if $direction == a { @if $direction == a {
@if $n { @if $n {
#{$space}:#{$i*$uni-space-root}px; #{$space}:#{$i*$uni-space-root}px;
} @else { } @else {
#{$space}:#{-$i*$uni-space-root}px; #{$space}:#{-$i*$uni-space-root}px;
} }
} }
} }
@each $orientation in m,p { @each $orientation in m,p {
$space: margin; $space: margin;
@if $orientation == m { @if $orientation == m {
$space: margin; $space: margin;
} @else { } @else {
$space: padding; $space: padding;
} }
@for $i from 0 through 16 { @for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a { @each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} { .uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true); @include get-styles($direction,$i,$space,true);
} }
.uni-#{$orientation}#{$direction}-n#{$i} { .uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false); @include get-styles($direction,$i,$space,false);
} }
} }
} }
} }
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_styles.scss
浏览文件 @ 6f6e3846
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
$-color-white:#fff; $-color-white:#fff;
$-color-black:#000; $-color-black:#000;
@mixin base-style($color) { @mixin base-style($color) {
color: #fff; color: #fff;
background-color: $color; background-color: $color;
border-color: mix($-color-black, $color, 8%); border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active { &:not([hover-class]):active {
background: mix($-color-black, $color, 10%); background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%); border-color: mix($-color-black, $color, 20%);
color: $-color-white; color: $-color-white;
outline: none; outline: none;
} }
} }
@mixin is-color($color) { @mixin is-color($color) {
@include base-style($color); @include base-style($color);
&[loading] { &[loading] {
@include base-style($color); @include base-style($color);
&::before { &::before {
margin-right:5px; margin-right:5px;
} }
} }
&[disabled] { &[disabled] {
&, &,
&[loading], &[loading],
&:not([hover-class]):active { &:not([hover-class]):active {
color: $-color-white; color: $-color-white;
border-color: mix(darken($color,10%), $-color-white); border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white); background-color: mix($color, $-color-white);
} }
} }
} }
@mixin base-plain-style($color) { @mixin base-plain-style($color) {
color:$color; color:$color;
background-color: mix($-color-white, $color, 90%); background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%); border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active { &:not([hover-class]):active {
background: mix($-color-white, $color, 80%); background: mix($-color-white, $color, 80%);
color: $color; color: $color;
outline: none; outline: none;
border-color: mix($-color-white, $color, 50%); border-color: mix($-color-white, $color, 50%);
} }
} }
@mixin is-plain($color){ @mixin is-plain($color){
&[plain] { &[plain] {
@include base-plain-style($color); @include base-plain-style($color);
&[loading] { &[loading] {
@include base-plain-style($color); @include base-plain-style($color);
&::before { &::before {
margin-right:5px; margin-right:5px;
} }
} }
&[disabled] { &[disabled] {
&, &,
&:active { &:active {
color: mix($-color-white, $color, 40%); color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%); background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%); border-color: mix($-color-white, $color, 80%);
} }
} }
} }
} }
.uni-btn { .uni-btn {
margin: 5px; margin: 5px;
color: #393939; color: #393939;
border:1px solid #ccc; border:1px solid #ccc;
font-size: 16px; font-size: 16px;
font-weight: 200; font-weight: 200;
background-color: #F9F9F9; background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题 // TODO 暂时处理边框隐藏一边的问题
overflow: visible; overflow: visible;
&::after{ &::after{
border: none; border: none;
} }
&:not([type]),&[type=default] { &:not([type]),&[type=default] {
color: #999; color: #999;
&[loading] { &[loading] {
background: none; background: none;
&::before { &::before {
margin-right:5px; margin-right:5px;
} }
} }
&[disabled]{ &[disabled]{
color: mix($-color-white, #999, 60%); color: mix($-color-white, #999, 60%);
&, &,
&[loading], &[loading],
&:active { &:active {
color: mix($-color-white, #999, 60%); color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%); background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%); border-color: mix($-color-white, #999, 85%);
} }
} }
&[plain] { &[plain] {
color: #999; color: #999;
background: none; background: none;
border-color: $uni-border-1; border-color: $uni-border-1;
&:not([hover-class]):active { &:not([hover-class]):active {
background: none; background: none;
color: mix($-color-white, $-color-black, 80%); color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%); border-color: mix($-color-white, $-color-black, 90%);
outline: none; outline: none;
} }
&[disabled]{ &[disabled]{
&, &,
&[loading], &[loading],
&:active { &:active {
background: none; background: none;
color: mix($-color-white, #999, 60%); color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%); border-color: mix($-color-white, #999, 85%);
} }
} }
} }
} }
&:not([hover-class]):active { &:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%); color: mix($-color-white, $-color-black, 50%);
} }
&[size=mini] { &[size=mini] {
font-size: 16px; font-size: 16px;
font-weight: 200; font-weight: 200;
border-radius: 8px; border-radius: 8px;
} }
&.uni-btn-small { &.uni-btn-small {
font-size: 14px; font-size: 14px;
} }
&.uni-btn-mini { &.uni-btn-mini {
font-size: 12px; font-size: 12px;
} }
&.uni-btn-radius { &.uni-btn-radius {
border-radius: 999px; border-radius: 999px;
} }
&[type=primary] { &[type=primary] {
@include is-color($uni-primary); @include is-color($uni-primary);
@include is-plain($uni-primary) @include is-plain($uni-primary)
} }
&[type=success] { &[type=success] {
@include is-color($uni-success); @include is-color($uni-success);
@include is-plain($uni-success) @include is-plain($uni-success)
} }
&[type=error] { &[type=error] {
@include is-color($uni-error); @include is-color($uni-error);
@include is-plain($uni-error) @include is-plain($uni-error)
} }
&[type=warning] { &[type=warning] {
@include is-color($uni-warning); @include is-color($uni-warning);
@include is-plain($uni-warning) @include is-plain($uni-warning)
} }
&[type=info] { &[type=info] {
@include is-color($uni-info); @include is-color($uni-info);
@include is-plain($uni-info) @include is-plain($uni-info)
} }
} }
/* #endif */ /* #endif */
uni_modules/uni-scss/styles/setting/_text.scss
浏览文件 @ 6f6e3846
@mixin get-styles($k,$c) { @mixin get-styles($k,$c) {
@if $k == size or $k == weight{ @if $k == size or $k == weight{
font-#{$k}:#{$c} font-#{$k}:#{$c}
}@else{ }@else{
#{$k}:#{$c} #{$k}:#{$c}
} }
} }
@each $key, $child in $uni-headings { @each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
.uni-#{$key} { .uni-#{$key} {
@each $k, $c in $child { @each $k, $c in $child {
@include get-styles($k,$c) @include get-styles($k,$c)
} }
} }
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ /* #ifdef APP-NVUE */
.container .uni-#{$key} { .container .uni-#{$key} {
@each $k, $c in $child { @each $k, $c in $child {
@include get-styles($k,$c) @include get-styles($k,$c)
} }
} }
/* #endif */ /* #endif */
} }
uni_modules/uni-scss/styles/setting/_variables.scss
浏览文件 @ 6f6e3846
// @use "sass:math"; // @use "sass:math";
@import '../tools/functions.scss'; @import '../tools/functions.scss';
// 间距基础倍数 // 间距基础倍数
$uni-space-root: 2 !default; $uni-space-root: 2 !default;
// 边框半径默认值 // 边框半径默认值
$uni-radius-root:5px !default; $uni-radius-root:5px !default;
$uni-radius: () !default; $uni-radius: () !default;
// 边框半径断点 // 边框半径断点
$uni-radius: map-deep-merge( $uni-radius: map-deep-merge(
( (
0: 0, 0: 0,
// TODO 当前版本暂时不支持 sm 属性 // TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2), // 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root, null: $uni-radius-root,
'lg': $uni-radius-root * 2, 'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6, 'xl': $uni-radius-root * 6,
'pill': 9999px, 'pill': 9999px,
'circle': 50% 'circle': 50%
), ),
$uni-radius $uni-radius
); );
// 字体家族 // 字体家族
$body-font-family: 'Roboto', sans-serif !default; $body-font-family: 'Roboto', sans-serif !default;
// 文本 // 文本
$heading-font-family: $body-font-family !default; $heading-font-family: $body-font-family !default;
$uni-headings: () !default; $uni-headings: () !default;
$letterSpacing: -0.01562em; $letterSpacing: -0.01562em;
$uni-headings: map-deep-merge( $uni-headings: map-deep-merge(
( (
'h1': ( 'h1': (
size: 32px, size: 32px,
weight: 300, weight: 300,
line-height: 50px, line-height: 50px,
// letter-spacing:-0.01562em // letter-spacing:-0.01562em
), ),
'h2': ( 'h2': (
size: 28px, size: 28px,
weight: 300, weight: 300,
line-height: 40px, line-height: 40px,
// letter-spacing: -0.00833em // letter-spacing: -0.00833em
), ),
'h3': ( 'h3': (
size: 24px, size: 24px,
weight: 400, weight: 400,
line-height: 32px, line-height: 32px,
// letter-spacing: normal // letter-spacing: normal
), ),
'h4': ( 'h4': (
size: 20px, size: 20px,
weight: 400, weight: 400,
line-height: 30px, line-height: 30px,
// letter-spacing: 0.00735em // letter-spacing: 0.00735em
), ),
'h5': ( 'h5': (
size: 16px, size: 16px,
weight: 400, weight: 400,
line-height: 24px, line-height: 24px,
// letter-spacing: normal // letter-spacing: normal
), ),
'h6': ( 'h6': (
size: 14px, size: 14px,
weight: 500, weight: 500,
line-height: 18px, line-height: 18px,
// letter-spacing: 0.0125em // letter-spacing: 0.0125em
), ),
'subtitle': ( 'subtitle': (
size: 12px, size: 12px,
weight: 400, weight: 400,
line-height: 20px, line-height: 20px,
// letter-spacing: 0.00937em // letter-spacing: 0.00937em
), ),
'body': ( 'body': (
font-size: 14px, font-size: 14px,
font-weight: 400, font-weight: 400,
line-height: 22px, line-height: 22px,
// letter-spacing: 0.03125em // letter-spacing: 0.03125em
), ),
'caption': ( 'caption': (
'size': 12px, 'size': 12px,
'weight': 400, 'weight': 400,
'line-height': 20px, 'line-height': 20px,
// 'letter-spacing': 0.03333em, // 'letter-spacing': 0.03333em,
// 'text-transform': false // 'text-transform': false
) )
), ),
$uni-headings $uni-headings
); );
// 主色 // 主色
$uni-primary: #2979ff !default; $uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default; $uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default; $uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色 // 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 // 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37 !default; $uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default; $uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default; $uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default; $uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default; $uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default; $uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default; $uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default; $uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default; $uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default; $uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default; $uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default; $uni-info-light: lighten($uni-info,25%) !default;
// 中性色 // 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 // 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字 $uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字 $uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字 $uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明 $uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色 // 边框颜色
$uni-border-1: #F0F0F0 !default; $uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default; $uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default; $uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default; $uni-border-4: #B9B9B9 !default;
// 常规色 // 常规色
$uni-black: #000000 !default; $uni-black: #000000 !default;
$uni-white: #ffffff !default; $uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; $uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色 // 背景色
$uni-bg-color: #f7f7f7 !default; $uni-bg-color: #f7f7f7 !default;
/* 水平间距 */ /* 水平间距 */
$uni-spacing-sm: 8px !default; $uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default; $uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default; $uni-spacing-lg: 30px !default;
// 阴影 // 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版 // 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; $uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
uni_modules/uni-scss/styles/tools/functions.scss
浏览文件 @ 6f6e3846
// 合并 map // 合并 map
@function map-deep-merge($parent-map, $child-map){ @function map-deep-merge($parent-map, $child-map){
$result: $parent-map; $result: $parent-map;
@each $key, $child in $child-map { @each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key); $parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key); $parent-value: map-get($result, $key);
$parent-type: type-of($parent-value); $parent-type: type-of($parent-value);
$child-type: type-of($child); $child-type: type-of($child);
$parent-is-map: $parent-type == map; $parent-is-map: $parent-type == map;
$child-is-map: $child-type == map; $child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child )); $result: map-merge($result, ( $key: $child ));
}@else { }@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
} }
} }
@return $result; @return $result;
}; };
uni_modules/uni-scss/theme.scss
浏览文件 @ 6f6e3846
// 间距基础倍数 // 间距基础倍数
$uni-space-root: 2; $uni-space-root: 2;
// 边框半径默认值 // 边框半径默认值
$uni-radius-root:5px; $uni-radius-root:5px;
// 主色 // 主色
$uni-primary: #2979ff; $uni-primary: #2979ff;
// 辅助色 // 辅助色
$uni-success: #4cd964; $uni-success: #4cd964;
// 警告色 // 警告色
$uni-warning: #f0ad4e; $uni-warning: #f0ad4e;
// 错误色 // 错误色
$uni-error: #dd524d; $uni-error: #dd524d;
// 描述色 // 描述色
$uni-info: #909399; $uni-info: #909399;
// 中性色 // 中性色
$uni-main-color: #303133; $uni-main-color: #303133;
$uni-base-color: #606266; $uni-base-color: #606266;
$uni-secondary-color: #909399; $uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC; $uni-extra-color: #C0C4CC;
// 背景色 // 背景色
$uni-bg-color: #f5f5f5; $uni-bg-color: #f5f5f5;
// 边框颜色 // 边框颜色
$uni-border-1: #DCDFE6; $uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED; $uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5; $uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC; $uni-border-4: #F2F6FC;
// 常规色 // 常规色
$uni-black: #000000; $uni-black: #000000;
$uni-white: #ffffff; $uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0); $uni-transparent: rgba($color: #000000, $alpha: 0);
uni_modules/uni-scss/variables.scss
浏览文件 @ 6f6e3846
@import './styles/setting/_variables.scss'; @import './styles/setting/_variables.scss';
// 间距基础倍数 // 间距基础倍数
$uni-space-root: 2; $uni-space-root: 2;
// 边框半径默认值 // 边框半径默认值
$uni-radius-root:5px; $uni-radius-root:5px;
// 主色 // 主色
$uni-primary: #2979ff; $uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%); $uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%); $uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色 // 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 // 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37; $uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%); $uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%); $uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f; $uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%); $uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%); $uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33; $uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%); $uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%); $uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c; $uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%); $uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%); $uni-info-light: mix(#fff,$uni-info,80%);
// 中性色 // 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 // 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字 $uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字 $uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字 $uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明 $uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色 // 边框颜色
$uni-border-1: #F0F0F0; $uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED; $uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC; $uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9; $uni-border-4: #B9B9B9;
// 常规色 // 常规色
$uni-black: #000000; $uni-black: #000000;
$uni-white: #ffffff; $uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0); $uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色 // 背景色
$uni-bg-color: #f7f7f7; $uni-bg-color: #f7f7f7;
/* 水平间距 */ /* 水平间距 */
$uni-spacing-sm: 8px; $uni-spacing-sm: 8px;
$uni-spacing-base: 15px; $uni-spacing-base: 15px;
$uni-spacing-lg: 30px; $uni-spacing-lg: 30px;
// 阴影 // 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版 // 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4); $uni-mask: rgba($color: #000000, $alpha: 0.4);
uni_modules/uni-search-bar/changelog.md
浏览文件 @ 6f6e3846
## 1.1.1（2021-08-24） ## 1.2.0（2021-11-19）
- 新增 支持国际化 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.1.0（2021-07-30） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) ## 1.1.2（2021-08-30）
## 1.0.9（2021-05-12） - 修复 value 属性与 modelValue 属性不兼容的Bug
- 新增 项目示例地址 ## 1.1.1（2021-08-24）
## 1.0.8（2021-04-21） - 新增 支持国际化
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 ## 1.1.0（2021-07-30）
## 1.0.7（2021-04-15） - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- uni-ui 新增 uni-search-bar 的 focus 事件 ## 1.0.9（2021-05-12）
- 新增 项目示例地址
## 1.0.6（2021-02-05） ## 1.0.8（2021-04-21）
- 优化 组件引用关系，通过uni_modules引用组件 - 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.7（2021-04-15）
## 1.0.5（2021-02-05） - uni-ui 新增 uni-search-bar 的 focus 事件
- 调整为uni_modules目录规范
- 新增 支持双向绑定 ## 1.0.6（2021-02-05）
- 更改 input 事件的返回值，e={value:Number} --> e=value - 优化 组件引用关系，通过uni_modules引用组件
- 新增 支持图标插槽
- 新增 支持 clear、blur 事件 ## 1.0.5（2021-02-05）
- 新增 支持 focus 属性 - 调整为uni_modules目录规范
- 去掉组件背景色 - 新增 支持双向绑定
- 更改 input 事件的返回值，e={value:Number} --> e=value
- 新增 支持图标插槽
- 新增 支持 clear、blur 事件
- 新增 支持 focus 属性
- 去掉组件背景色
uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
浏览文件 @ 6f6e3846
<template> s<template>
<view class="uni-searchbar"> <view class="uni-searchbar">
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick"> <view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
<view class="uni-searchbar__box-icon-search"> <view class="uni-searchbar__box-icon-search">
<slot name="searchIcon"> <slot name="searchIcon">
<uni-icons color="#999999" size="18" type="search" /> <uni-icons color="#c0c4cc" size="18" type="search" />
</slot> </slot>
</view> </view>
<input v-if="show || searchVal" :focus="showSync" :placeholder="placeholderText" :maxlength="maxlength" class="uni-searchbar__box-search-input" <input v-if="show || searchVal" :focus="showSync" :placeholder="placeholderText" :maxlength="maxlength" class="uni-searchbar__box-search-input"
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" <view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear"
@click="clear"> @click="clear">
<slot name="clearIcon"> <slot name="clearIcon">
<uni-icons color="#c0c4cc" size="15" type="clear" /> <uni-icons color="#c0c4cc" size="20" type="clear" />
</slot> </slot>
</view> </view>
</view> </view>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
/** /**
* SearchBar 搜索栏 * SearchBar 搜索栏
* @description 评分组件 * @description 搜索栏组件，通常用于搜索商品、文章等
* @tutorial https://ext.dcloud.net.cn/plugin?id=866 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
* @property {Number} radius 搜索栏圆角 * @property {Number} radius 搜索栏圆角
* @property {Number} maxlength 输入最大长度 * @property {Number} maxlength 输入最大长度
...@@ -112,25 +112,29 @@ ...@@ -112,25 +112,29 @@
return this.placeholder || t("uni-search-bar.placeholder") return this.placeholder || t("uni-search-bar.placeholder")
} }
}, },
watch: { watch: {
value: { // #ifndef VUE3
immediate: true, value: {
handler(newVal) { immediate: true,
this.searchVal = newVal handler(newVal) {
if (newVal) { this.searchVal = newVal
this.show = true if (newVal) {
} this.show = true
} }
}, }
modelValue: { },
immediate: true, // #endif
handler(newVal) { // #ifdef VUE3
this.searchVal = newVal modelValue: {
if (newVal) { immediate: true,
this.show = true handler(newVal) {
} this.searchVal = newVal
} if (newVal) {
}, this.show = true
}
}
},
// #endif
focus: { focus: {
immediate: true, immediate: true,
handler(newVal) { handler(newVal) {
...@@ -142,9 +146,13 @@ ...@@ -142,9 +146,13 @@
} }
} }
}, },
searchVal(newVal, oldVal) { searchVal(newVal, oldVal) {
this.$emit("input", newVal) // #ifndef VUE3
this.$emit("update:modelValue", newVal) this.$emit("input", newVal)
// #endif
// #ifdef VUE3
this.$emit("update:modelValue", newVal)
// #endif
} }
}, },
methods: { methods: {
...@@ -215,8 +223,8 @@ ...@@ -215,8 +223,8 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
position: relative; position: relative;
padding: $uni-spacing-col-base; padding: 10px;
// background-color: $uni-bg-color; // background-color: #fff;
} }
.uni-searchbar__box { .uni-searchbar__box {
...@@ -232,9 +240,6 @@ ...@@ -232,9 +240,6 @@
align-items: center; align-items: center;
height: $uni-searchbar-height; height: $uni-searchbar-height;
padding: 5px 8px 5px 0px; padding: 5px 8px 5px 0px;
border-width: 0.5px;
border-style: solid;
border-color: $uni-border-color;
} }
.uni-searchbar__box-icon-search { .uni-searchbar__box-icon-search {
...@@ -246,13 +251,13 @@ ...@@ -246,13 +251,13 @@
padding: 0 8px; padding: 0 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $uni-text-color-placeholder; color: #B3B3B3;
} }
.uni-searchbar__box-search-input { .uni-searchbar__box-search-input {
flex: 1; flex: 1;
font-size: $uni-font-size-base; font-size: 14px;
color: $uni-text-color; color: #333;
} }
.uni-searchbar__box-icon-clear { .uni-searchbar__box-icon-clear {
...@@ -265,8 +270,8 @@ ...@@ -265,8 +270,8 @@
} }
.uni-searchbar__text-placeholder { .uni-searchbar__text-placeholder {
font-size: $uni-font-size-base; font-size: 14px;
color: $uni-text-color-placeholder; color: #B3B3B3;
margin-left: 5px; margin-left: 5px;
} }
...@@ -274,7 +279,7 @@ ...@@ -274,7 +279,7 @@
padding-left: 10px; padding-left: 10px;
line-height: $uni-searchbar-height; line-height: $uni-searchbar-height;
font-size: 14px; font-size: 14px;
color: $uni-text-color; color: #333333;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
......
uni_modules/uni-search-bar/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-search-bar", "id": "uni-search-bar",
"displayName": "uni-search-bar 搜索栏", "displayName": "uni-search-bar 搜索栏",
"version": "1.1.1", "version": "1.2.0",
"description": "搜索栏组件，通常用于搜索商品、文章等", "description": "搜索栏组件，通常用于搜索商品、文章等",
"keywords": [ "keywords": [
"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": [
"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-search-bar/readme.md
浏览文件 @ 6f6e3846
...@@ -8,79 +8,7 @@ ...@@ -8,79 +8,7 @@
评分组件 评分组件
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
#### 如使用过程中有任何问题，或者您对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-search-bar @confirm="search" @input="input" ></uni-search-bar>
<!-- v-model 用法 -->
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear">
<!-- 自定义Placeholder -->
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
<!-- 设置圆角 -->
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
```
## API
### SearchBar Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|value/v-model |StringNumber | |搜索栏绑定值 |
|placeholder |String |搜索 |搜索栏Placeholder |
|radius |Number |10 |搜索栏圆角，单位px |
|clearButton |String |auto |是否显示清除按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|cancelButton |String |auto |是否显示取消按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|cancelText |String |取消 |取消按钮的文字 |
|bgColor |String |#F8F8F8|输入框背景颜色 |
|maxlength |Number |100 |输入最大长度 |
|focus |Boolean |false | |
### SearchBar Events
|事件称名 |说明 |返回参数 |
|:-: |:-: |:-: |
|@confirm |uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value |e={value:Number} |
|@input |uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value|e=value |
|@cancel |点击取消按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|@clear |点击清除按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|@focus |input 获取焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|@blur |input 失去焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
### 替换 icon 的 slot 插槽
|插槽称名 |说明 |
|:-: |:-: |
|searchIcon |替换组件的搜索图标|
|clearIcon |替换组件的清除图标|
```html
<!-- 替换组件的搜索图标 -->
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
</uni-search-bar>
<!-- 替换组件的清除图标 -->
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
<view slot="clearIcon" style="color: #999999" >X</view>
</uni-search-bar>
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar)
\ No newline at end of file
uni_modules/uni-segmented-control/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.0（2021-11-19）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5（2021-05-12） ## 1.0.5（2021-05-12）
- 新增 项目示例地址 - 新增 项目示例地址
## 1.0.4（2021-02-05） ## 1.0.4（2021-02-05）
......
uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue
浏览文件 @ 6f6e3846
<template> <template>
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }" <view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
class="segmented-control"> :style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]" <view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
:key="index" :style="{ index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
}" index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
class="segmented-control__item" @click="_onClick(index)"> :style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
<text :style="{color: class="segmented-control__item" @click="_onClick(index)">
index === currentIndex <view>
? styleType === 'text' <text :style="{color:
? activeColor index === currentIndex
: '#fff' ? styleType === 'text'
: styleType === 'text' ? activeColor
? '#000' : '#fff'
: activeColor}" : styleType === 'text'
class="segmented-control__text">{{ item }}</text> ? '#000'
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -27,7 +30,7 @@ ...@@ -27,7 +30,7 @@
* @property {Number} current 当前选中的tab索引值，从0计数 * @property {Number} current 当前选中的tab索引值，从0计数
* @property {String} styleType = [button|text] 分段器样式类型 * @property {String} styleType = [button|text] 分段器样式类型
* @value button 按钮类型 * @value button 按钮类型
* @value text 文字类型 * @value text 文字类型
* @property {String} activeColor 选中的标签背景色与边框颜色 * @property {String} activeColor 选中的标签背景色与边框颜色
* @property {Array} values 选项数组 * @property {Array} values 选项数组
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex} * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
...@@ -35,7 +38,7 @@ ...@@ -35,7 +38,7 @@
export default { export default {
name: 'UniSegmentedControl', name: 'UniSegmentedControl',
emits:['clickItem'], emits: ['clickItem'],
props: { props: {
current: { current: {
type: Number, type: Number,
...@@ -49,7 +52,7 @@ ...@@ -49,7 +52,7 @@
}, },
activeColor: { activeColor: {
type: String, type: String,
default: '#007aff' default: '#2979FF'
}, },
styleType: { styleType: {
type: String, type: String,
...@@ -85,7 +88,6 @@ ...@@ -85,7 +88,6 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.segmented-control { .segmented-control {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -93,9 +95,9 @@ ...@@ -93,9 +95,9 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
height: 36px; height: 36px;
overflow: hidden; overflow: hidden;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
} }
...@@ -131,11 +133,12 @@ ...@@ -131,11 +133,12 @@
.segmented-control__item--text { .segmented-control__item--text {
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 3px; border-bottom-width: 2px;
padding: 6px 0;
} }
.segmented-control__text { .segmented-control__text {
font-size: 16px; font-size: 14px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
......
uni_modules/uni-segmented-control/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-segmented-control", "id": "uni-segmented-control",
"displayName": "uni-segmented-control 分段器", "displayName": "uni-segmented-control 分段器",
"version": "1.1.0", "version": "1.2.0",
"description": "分段器由至少 2 个分段控件组成，用作不同视图的显示", "description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
"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-segmented-control/readme.md
浏览文件 @ 6f6e3846
...@@ -7,54 +7,7 @@ ...@@ -7,54 +7,7 @@
用作不同视图的显示 用作不同视图的显示
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
#### 如使用过程中有任何问题，或者您对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
<template>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
<view class="content">
<view v-show="current === 0">
选项卡1的内容
</view>
<view v-show="current === 1">
选项卡2的内容
</view>
<view v-show="current === 2">
选项卡3的内容
</view>
</view>
</view>
</template>
```
## API
### SegmentedControl Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|current |Number |0 |当前选中的tab索引值，从0计数 |
|styleType |String |button |分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|activeColor |String |#007aff|选中的标签背景色与边框颜色 |
|values |Array |- |选项数组 |
### SegmentedControl Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@clickItem |组件触发点击事件时触发 |e={currentIndex} |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control](https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control)
\ No newline at end of file
uni_modules/uni-steps/changelog.md
浏览文件 @ 6f6e3846
## 1.0.8（2021-05-12） ## 1.1.1（2021-11-22）
- 新增 项目示例地址 - 修复 vue3中某些scss变量无法找到的问题
## 1.1.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-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
## 1.0.8（2021-05-12）
- 新增 项目示例地址
## 1.0.7（2021-05-06） ## 1.0.7（2021-05-06）
- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug - 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
## 1.0.6（2021-04-21） ## 1.0.6（2021-04-21）
......
uni_modules/uni-steps/components/uni-steps/uni-steps.vue
浏览文件 @ 6f6e3846
...@@ -2,22 +2,31 @@ ...@@ -2,22 +2,31 @@
<view class="uni-steps"> <view class="uni-steps">
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']"> <view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']"> <view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']"> <view v-for="(item,index) in options" :key="index"
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text> :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text> <text :style="{color:index === active?activeColor:deactiveColor}"
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
<text :style="{color: deactiveColor}"
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
</view> </view>
</view> </view>
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']"> <view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options" <view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
:key="index"> v-for="(item,index) in options" :key="index">
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']" <view
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view> :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active"> :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons> </view>
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
v-if="index === active">
<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
</view>
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
<view
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
</view> </view>
<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
</view> </view>
</view> </view>
</view> </view>
...@@ -25,18 +34,17 @@ ...@@ -25,18 +34,17 @@
</template> </template>
<script> <script>
/**
/** * Steps 步骤条
* Steps 步骤条 * @description 评分组件
* @description 评分组件 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
* @tutorial https://ext.dcloud.net.cn/plugin?id=34 * @property {Number} active 当前步骤
* @property {Number} active 当前步骤 * @property {String} direction = [row|column] 当前步骤
* @property {String} direction = [row|column] 当前步骤 * @value row 横向
* @value row 横向 * @value column 纵向
* @value column 纵向 * @property {String} activeColor 选中状态的颜色
* @property {String} activeColor 选中状态的颜色 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}] */
*/
export default { export default {
name: 'UniSteps', name: 'UniSteps',
...@@ -49,18 +57,23 @@ ...@@ -49,18 +57,23 @@
activeColor: { activeColor: {
// 激活状态颜色 // 激活状态颜色
type: String, type: String,
default: '#1aad19' default: '#2979FF'
}, },
deactiveColor: { deactiveColor: {
// 未激活状态颜色 // 未激活状态颜色
type: String, type: String,
default: '#999999' default: '#B7BDC6'
}, },
active: { active: {
// 当前步骤 // 当前步骤
type: Number, type: Number,
default: 0 default: 0
}, },
activeIcon: {
// 当前步骤
type: String,
default: 'checkbox-filled'
},
options: { options: {
type: Array, type: Array,
default () { default () {
...@@ -74,7 +87,9 @@ ...@@ -74,7 +87,9 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
$uni-primary: #2979ff !default;
$uni-border-color:#EDEDED;
.uni-steps { .uni-steps {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
...@@ -104,8 +119,8 @@ ...@@ -104,8 +119,8 @@
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
margin-bottom: 8px; margin-bottom: 8px;
} }
...@@ -137,13 +152,13 @@ ...@@ -137,13 +152,13 @@
} }
.uni-steps__row-title { .uni-steps__row-title {
font-size: $uni-font-size-base; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
} }
.uni-steps__column-title { .uni-steps__column-title {
font-size: $uni-font-size-base; font-size: 14px;
text-align: left; text-align: left;
line-height: 18px; line-height: 18px;
} }
...@@ -155,7 +170,7 @@ ...@@ -155,7 +170,7 @@
} }
.uni-steps__column-desc { .uni-steps__column-desc {
font-size: $uni-font-size-sm; font-size: 12px;
text-align: left; text-align: left;
line-height: 18px; line-height: 18px;
} }
...@@ -200,12 +215,12 @@ ...@@ -200,12 +215,12 @@
.uni-steps__row-line { .uni-steps__row-line {
flex: 1; flex: 1;
height: 1px; height: 1px;
background-color: $uni-text-color-grey; background-color: #B7BDC6;
} }
.uni-steps__column-line { .uni-steps__column-line {
width: 1px; width: 1px;
background-color: $uni-text-color-grey; background-color: #B7BDC6;
} }
.uni-steps__row-line--after { .uni-steps__row-line--after {
...@@ -223,22 +238,22 @@ ...@@ -223,22 +238,22 @@
.uni-steps__column-line--before { .uni-steps__column-line--before {
height: 6px; height: 6px;
transform: translate(0px, -1px); transform: translate(0px, -13px);
} }
.uni-steps__row-circle { .uni-steps__row-circle {
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 100px; border-radius: 50%;
background-color: $uni-text-color-grey; background-color: #B7BDC6;
margin: 0px 3px; margin: 0px 3px;
} }
.uni-steps__column-circle { .uni-steps__column-circle {
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 100px; border-radius: 50%;
background-color: $uni-text-color-grey; background-color: #B7BDC6;
margin: 4px 0px 5px 0px; margin: 4px 0px 5px 0px;
} }
...@@ -251,4 +266,4 @@ ...@@ -251,4 +266,4 @@
line-height: 14px; line-height: 14px;
margin: 2px 0px; margin: 2px 0px;
} }
</style> </style>
uni_modules/uni-steps/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-steps", "id": "uni-steps",
"displayName": "uni-steps 步骤条", "displayName": "uni-steps 步骤条",
"version": "1.0.8", "version": "1.1.1",
"description": "步骤条组件，提供横向和纵向两种布局格式。", "description": "步骤条组件，提供横向和纵向两种布局格式。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-icons" "uni-icons"
], ],
"encrypt": [], "encrypt": [],
...@@ -77,6 +78,10 @@ ...@@ -77,6 +78,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-steps/readme.md
浏览文件 @ 6f6e3846
## Steps 步骤条 ## Steps 步骤条
> **组件名：uni-steps** > **组件名：uni-steps**
> 代码块： `uSteps` > 代码块： `uSteps`
步骤条，常用于显示进度 步骤条，常用于显示进度
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
#### 如使用过程中有任何问题，或者您对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-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>
<!-- 纵向排列 -->
<uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps>
```
## API
### Steps Props
|属性名 |类型 | 可选值 |默认值 |说明 |
|:-: |:-: | :-: |:-: |:-: |
|active |Number | - |0 |当前步骤 |
|**direction** |String | row/column |row |排列方向|
|active-color |String | - |#1aad19|选中状态的颜色 |
|options |Array | - | - |数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]|
#### Direction Options
| 属性名 | 说明 |
| :-: | :-: |
| row | 横向 |
| column | 纵向 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/steps/steps](https://hellouniapp.dcloud.net.cn/pages/extUI/steps/steps)
\ No newline at end of file
uni_modules/uni-swipe-action/changelog.md
浏览文件 @ 6f6e3846
## 1.2.4（2021-08-20） ## 1.3.0（2021-11-19）
- 优化 close-all 方法 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.2.3（2021-08-20） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
- 新增 close-all 方法，关闭所有已打开的组件 ## 1.2.4（2021-08-20）
- 优化 close-all 方法
## 1.2.3（2021-08-20）
- 新增 close-all 方法，关闭所有已打开的组件
## 1.2.2（2021-08-17） ## 1.2.2（2021-08-17）
- 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件 - 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题 - 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
......
uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx.js
浏览文件 @ 6f6e3846
let bindIngXMixins = {}
// #ifdef APP-NVUE // #ifdef APP-NVUE
const BindingX = uni.requireNativePlugin('bindingx'); const BindingX = uni.requireNativePlugin('bindingx');
const dom = uni.requireNativePlugin('dom'); const dom = uni.requireNativePlugin('dom');
const animation = uni.requireNativePlugin('animation'); const animation = uni.requireNativePlugin('animation');
export default { bindIngXMixins = {
data() { data() {
return {} return {}
}, },
...@@ -11,7 +13,7 @@ export default { ...@@ -11,7 +13,7 @@ export default {
watch: { watch: {
show(newVal) { show(newVal) {
if (this.autoClose) return if (this.autoClose) return
if (this.stop) return if (this.stop) return
this.stop = true this.stop = true
if (newVal) { if (newVal) {
this.open(newVal) this.open(newVal)
...@@ -70,10 +72,10 @@ export default { ...@@ -70,10 +72,10 @@ export default {
// 每次只触发一次，避免多次监听造成闪烁 // 每次只触发一次，避免多次监听造成闪烁
if (this.stop) return if (this.stop) return
this.stop = true this.stop = true
if (this.autoClose) { if (this.autoClose) {
this.swipeaction.closeOther(this) this.swipeaction.closeOther(this)
} }
const leftWidth = this.button.left.width const leftWidth = this.button.left.width
const rightWidth = this.button.right.width const rightWidth = this.button.right.width
let expression = this.range(this.x, -rightWidth, leftWidth) let expression = this.range(this.x, -rightWidth, leftWidth)
...@@ -291,10 +293,8 @@ export default { ...@@ -291,10 +293,8 @@ export default {
}) })
} }
} }
} }
// #endif // #endif
// #ifndef APP-NVUE export default bindIngXMixins
export default {}
// #endif
\ No newline at end of file
uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpother.js
浏览文件 @ 6f6e3846
let otherMixins = {}
// #ifndef APP-PLUS|| MP-WEIXIN || H5 // #ifndef APP-PLUS|| MP-WEIXIN || H5
const MIN_DISTANCE = 10; const MIN_DISTANCE = 10;
export default { otherMixins = {
data() { data() {
// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug // TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
...@@ -50,7 +51,7 @@ export default { ...@@ -50,7 +51,7 @@ export default {
this.left = 0 this.left = 0
this.x = 0 this.x = 0
}, },
closeSwipe(e) { closeSwipe(e) {
if (!this.autoClose) return if (!this.autoClose) return
this.swipeaction.closeOther(this) this.swipeaction.closeOther(this)
...@@ -253,6 +254,4 @@ export default { ...@@ -253,6 +254,4 @@ export default {
// #endif // #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5 export default otherMixins
export default { }
// #endif
\ No newline at end of file
uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js
浏览文件 @ 6f6e3846
let mpMixins = {}
// #ifdef APP-VUE|| MP-WEIXIN || H5 // #ifdef APP-VUE|| MP-WEIXIN || H5
import { isPC } from "./isPC" import {
export default { isPC
} from "./isPC"
mpMixins = {
data() { data() {
return { return {
is_show:'none' is_show: 'none'
} }
}, },
watch: { watch: {
show(newVal){ show(newVal) {
this.is_show = this.show this.is_show = this.show
} }
}, },
...@@ -17,7 +20,7 @@ export default { ...@@ -17,7 +20,7 @@ export default {
this.swipeaction.children.push(this) this.swipeaction.children.push(this)
} }
}, },
mounted(){ mounted() {
this.is_show = this.show this.is_show = this.show
}, },
methods: { methods: {
...@@ -34,9 +37,9 @@ export default { ...@@ -34,9 +37,9 @@ export default {
} }
}, },
appTouchStart(e) { appTouchStart(e) {
// #ifdef H5 // #ifdef H5
if(isPC()) return if (isPC()) return
// #endif // #endif
const { const {
clientX clientX
...@@ -44,9 +47,9 @@ export default { ...@@ -44,9 +47,9 @@ export default {
this.clientX = clientX this.clientX = clientX
this.timestamp = new Date().getTime() this.timestamp = new Date().getTime()
}, },
appTouchEnd(e, index, item, position) { appTouchEnd(e, index, item, position) {
// #ifdef H5 // #ifdef H5
if(isPC()) return if (isPC()) return
// #endif // #endif
const { const {
clientX clientX
...@@ -60,22 +63,20 @@ export default { ...@@ -60,22 +63,20 @@ export default {
index, index,
position position
}) })
} }
}, },
onClickForPC(index, item, position) { onClickForPC(index, item, position) {
// #ifdef H5 // #ifdef H5
if(!isPC()) return if (!isPC()) return
this.$emit('click', { this.$emit('click', {
content: item, content: item,
index, index,
position position
}) })
// #endif // #endif
} }
} }
} }
// #endif // #endif
// #ifndef APP-VUE|| MP-WEIXIN || H5 export default mpMixins
export default {}
// #endif
\ No newline at end of file
uni_modules/uni-swipe-action/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-swipe-action", "id": "uni-swipe-action",
"displayName": "uni-swipe-action 滑动操作", "displayName": "uni-swipe-action 滑动操作",
"version": "1.2.4", "version": "1.3.0",
"description": "SwipeAction 滑动操作操作组件", "description": "SwipeAction 滑动操作操作组件",
"keywords": [ "keywords": [
"", "",
...@@ -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": {
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-swipe-action/readme.md
浏览文件 @ 6f6e3846
## SwipeAction 滑动操作 ## SwipeAction 滑动操作
> **组件名：uni-swipe-action** > **组件名：uni-swipe-action**
> 代码块： `uSwipeAction`、`uSwipeActionItem` > 代码块： `uSwipeAction`、`uSwipeActionItem`
通过滑动触发选项的容器 通过滑动触发选项的容器
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - swipeAction的跟手联动是非常考验性能的。为了提高交互体验，本组件在 app 端 vue 页面、h5、微信小程序使用了wxs 技术，nvue 页面使用 bindingx 技术，可以达到流畅的体验。在其他小程序平台由于底层不支持优化技术，只能使用使用普通 js ，此时性能一般。 \ No newline at end of file
> - `uni-swipe-action` 和 `uni-swipe-action-item` 需要同时使用
> - `uni-swipe-action` 不能嵌套在 `swiper` 中使用
> - 长列表不建议使用 autoClose属性，会影响组件性能，造成卡顿，原因是打开之后要通知其他已经打开的组件关闭，会导致多个组件重新渲染
> - 事件中传入 `$event` 获取额外参数
> - 向下兼容，需要将 `options` 属性替换成 `right-options`
> - 如使用过程中有任何问题，或者您对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-swipe-action>
<!-- 基础用法 -->
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
<view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
<!-- 使用插槽 （请自行给定插槽内容宽度）-->
<uni-swipe-action-item>
<template v-slot:left>
<view><text>置顶</text></view>
</template>
<view>
<text >使用插槽</text>
</view>
<template v-slot:right>
<view><text>删除</text></view>
</template>
</uni-swipe-action-item>
<!-- 混合用法 -->
<uni-swipe-action-item :right-options="options">
<template v-slot:left>
<view><text>置顶</text></view>
</template>
<view><text>混合使用</text></view>
</uni-swipe-action-item>
</uni-swipe-action>
<!-- 禁止滑动 -->
<uni-swipe-action>
<uni-swipe-action-item :disabled="true" :right-options="options">
<view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
</uni-swipe-action>
<!-- 按组使用 -->
<uni-swipe-action>
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
<view >item1</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
<view>item2</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
<view>item3</view>
</uni-swipe-action-item>
</uni-swipe-action>
```
```javascript
export default {
data(){
return {
options:[
{
text: '取消',
style: {
backgroundColor: '#007aff'
}
}, {
text: '确认',
style: {
backgroundColor: '#dd524d'
}
}
]
}
},
methods:{
onClick(e){
console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
},
swipeChange(e,index){
console.log('当前状态：'+ e +'，下标：' + index)
}
}
}
```
## API
### SwipeAciton Props
|属性名|类型|可选值|默认值|是否必填|说明|
|:-:|:-:|:-:|:-:|:-:|:-:|
|show|String|left/right/none|none |否|开启关闭组件，auto-close = false 时生效|
|threshold|Number|-|20|否|滑动阙值|
|disabled|Boolean|-|false|否|是否禁止滑动|
|autoClose|Boolean|-|true|否|其他组件开启的时候，当前组件是否自动关闭，**注意：长列表使用会有性能问题**|
|left-options|Array/Object |-|-|否|左侧选项内容及样式|
|right-options|Array/Object |-|-|否|右侧选项内容及样式|
#### LeftOptions & RightOptions Options
|参数|类型|是否必填 |说明|
|:-:|:-:|:-:|:-:|
|text|String|是|按钮的文字 |
|style|Object|否|按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：14px |
### SwipeAction Events
|事件称名 |说明|返回值|
|:-:|:-:|:-:|
|@click|点击选项按钮时触发事件|e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) |
|@change|组件打开或关闭时触发|left:左侧 ，right：右侧，none：关闭|
### SwipeAction Methods
方法通过 ref 调用
|方法称名 |说明|
|:-:|:-:|
|resize()|动态添加数据后，如不能正常滑动，需要主动调用此方法，微信小程序、h5、app-vue 不生效|
|close-all()|关闭所有已经打开的组件|
### SwipeAction Slots
|名称|说明|
|:-:|:-:|
|-|默认插槽自定义显示内容|
|default|默认内容插槽|
|left|左侧滑动内容 ，会覆盖 leftOptions 内容|
|right|右侧滑动内容 ，会覆盖 rightOptions 内容|
> **提示**
> - iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下：
> ```javascript
> {
> "path": "swipe-action/swipe-action",
> "style": {
> "navigationBarTitleText": "SwipeAction 滑动操作",
> "disableScroll":true,
> "app-plus":{
> "bounce":"none"
> }
> }
> }
> ```
### Q&A
1. Q：动态加载数据，组件滑动失效是怎么回事
- A：是因为组件会在加载的时候获取相应的节点信息数据 ，获取需要滑动的距离，所以有时候动态加载数据之后，可能是时机的问题，导致节点信息获取失败 ，那么组件就不能正常滑动。
- A：如果是在其他页面通过 vuex 或者uni.$emit 等手段来更新其他页面 uni-swipe-action 数据 ，同样会发生不能滑动的现象，原因是页面隐藏后是不能获取到页面信息的，所以回到 uni-swipe-action 页面后，新增的组件节点信息获取肯定是错误的，所以不能滑动。
- A：值的高兴的是在 1.2.2 版本中重构了组件滑动逻辑 ，在微信小程序、h5、app-vue 中使用了 wxs 优化滑动性能，并且不需要担心动态新增组件导致组件无法滑动的问题，节点信息在滑动时实时获取。
- A：因为其他平台无法使用 wxs ，所以还是会出现无法滑动的问题怎么处理？1.2.2 版本提供了 resize() 方法，无法滑动时调用 resize() 方法重新渲染组件即可，调用方法时要保证节点已经渲染完毕。
2. Q：运行到 nvue 下没有样式
- A：因为 nvue 下样式默认不能使用复杂的css选择器，所以需要在 manifest.json 中配置 "nvueStyleCompiler" 属性
```json
// manifest.json
{
"nvueStyleCompiler" : "uni-app",
}
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action](https://hellouniapp.dcloud.net.cn/pages/extUI/swipe-action/swipe-action)
\ No newline at end of file
uni_modules/uni-swiper-dot/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.0（2021-11-19）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.6（2021-05-12） ## 1.0.6（2021-05-12）
- 新增 示例地址 - 新增 示例地址
- 修复 示例项目缺少组件的Bug - 修复 示例项目缺少组件的Bug
......
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
浏览文件 @ 6f6e3846
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<slot /> <slot />
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'> <view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}" 'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" /> :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
</view> </view>
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'> <view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
...@@ -79,8 +79,8 @@ ...@@ -79,8 +79,8 @@
data() { data() {
return { return {
dots: { dots: {
width: 8, width: 6,
height: 8, height: 6,
bottom: 10, bottom: 10,
color: '#fff', color: '#fff',
backgroundColor: 'rgba(0, 0, 0, .3)', backgroundColor: 'rgba(0, 0, 0, .3)',
...@@ -96,19 +96,19 @@ ...@@ -96,19 +96,19 @@
}, },
mode(newVal) { mode(newVal) {
if (newVal === 'indexes') { if (newVal === 'indexes') {
this.dots.width = 20 this.dots.width = 14
this.dots.height = 20 this.dots.height = 14
} else { } else {
this.dots.width = 8 this.dots.width = 6
this.dots.height = 8 this.dots.height = 6
} }
} }
}, },
created() { created() {
if (this.mode === 'indexes') { if (this.mode === 'indexes') {
this.dots.width = 20 this.dots.width = 12
this.dots.height = 20 this.dots.height = 12
} }
this.dots = Object.assign(this.dots, this.dotsStyles) this.dots = Object.assign(this.dots, this.dotsStyles)
}, },
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
width: 8px; width: 8px;
border-radius: 100px; border-radius: 100px;
margin-left: 6px; margin-left: 6px;
background-color: $uni-bg-color-mask; background-color: rgba(0, 0, 0, 0.4);
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
...@@ -180,7 +180,8 @@ ...@@ -180,7 +180,8 @@
.uni-swiper__dots-nav { .uni-swiper__dots-nav {
bottom: 0px; bottom: 0px;
height: 40px; // height: 26px;
padding: 8px 0;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
...@@ -195,7 +196,7 @@ ...@@ -195,7 +196,7 @@
/* overflow: hidden; /* overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; */ white-space: nowrap; */
font-size: $uni-font-size-base; font-size: 14px;
color: #fff; color: #fff;
margin: 0 15px; margin: 0 15px;
} }
...@@ -211,6 +212,7 @@ ...@@ -211,6 +212,7 @@
.uni-swiper__dots-indexes-text { .uni-swiper__dots-indexes-text {
color: #fff; color: #fff;
font-size: $uni-font-size-sm; font-size: 12px;
line-height: 14px;
} }
</style> </style>
uni_modules/uni-swiper-dot/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-swiper-dot", "id": "uni-swiper-dot",
"displayName": "uni-swiper-dot 轮播图指示点", "displayName": "uni-swiper-dot 轮播图指示点",
"version": "1.1.0", "version": "1.2.0",
"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-swiper-dot/readme.md
浏览文件 @ 6f6e3846
...@@ -7,85 +7,5 @@ ...@@ -7,85 +7,5 @@
自定义轮播图指示点 自定义轮播图指示点
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用 \ No newline at end of file
> - `width` 与 `height` 如非必要，请勿设置过大，或者过小
> - `swiper-item` 尽量控制在一定数量之内，否则指示点可能会超出屏幕
> - 暂不支持垂直方向的指示点
### 安装方式
本组件符合[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-swiper-dot :info="info" :current="current" field="content" :mode="mode">
<swiper class="swiper-box" @change="change">
<swiper-item v-for="(item ,index) in info" :key="index">
<view class="swiper-item">
{{item.content}}
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
```
```javascript
export default {
data() {
return {
info: [{
content: '内容 A'
}, {
content: '内容 B'
}, {
content: '内容 C'
}],
current: 0,
mode: 'round',
}
},
methods: {
change(e) {
this.current = e.detail.current;
}
}
}
```
## API
### SwiperDod Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|current |Number |0 |当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`|
|mode |String |default|指示点的类型，可选值：default 、round 、nav 、 indexes |
|field |String |- | mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
|info |Array |- |轮播图的数据，通过数组长度决定指示点个数 |
|dotsStyles |Object |- |指示点样式 |
#### dotsStyles Options
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|width |Number | 8 |指示点宽度 **在 mode = nav、mode = indexes 时不生效** |
|bottom |Number | 10 |指示点距 `swiper` 底部的高度 |
|color |Color | '#fff' |指示点前景色，**只在 mode = nav ，mode = indexes 时生效** |
|backgroundColor |Color | 'rgba(0, 0, 0, .3)' |未选择指示点背景色 |
|border |Border | '1px rgba(0, 0, 0, .3) solid' |未选择指示点边框样式 |
|selectedBackgroundColor|Color | '#333' |已选择指示点背景色，**在 mode = nav 时不生效** |
|selectedBorder |Border | '1px rgba(0, 0, 0, .9) solid' |已选择指示点边框样式，**在 mode = nav 时不生效** |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot)
\ No newline at end of file
uni_modules/uni-table/changelog.md
浏览文件 @ 6f6e3846
## 1.1.0（2021-07-30） ## 1.2.0（2021-11-19）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-table](https://uniapp.dcloud.io/component/uniui/uni-table)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-07-08） ## 1.0.7（2021-07-08）
- 新增 uni-th 支持 date 日期筛选范围 - 新增 uni-th 支持 date 日期筛选范围
## 1.0.6（2021-07-05） ## 1.0.6（2021-07-05）
......
uni_modules/uni-table/components/uni-tr/uni-tr.vue
浏览文件 @ 6f6e3846
...@@ -74,11 +74,20 @@ export default { ...@@ -74,11 +74,20 @@ export default {
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
} }
}, },
// #ifndef VUE3
destroyed() { destroyed() {
const index = this.root.trChildren.findIndex(i => i === this) const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1) this.root.trChildren.splice(index, 1)
this.root.isNodata() this.root.isNodata()
}, },
// #endif
// #ifdef VUE3
unmounted() {
const index = this.root.trChildren.findIndex(i => i === this)
this.root.trChildren.splice(index, 1)
this.root.isNodata()
},
// #endif
methods: { methods: {
minWidthUpdate(width) { minWidthUpdate(width) {
this.widthThArr.push(width) this.widthThArr.push(width)
......
uni_modules/uni-table/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-table", "id": "uni-table",
"displayName": "uni-table 表格", "displayName": "uni-table 表格",
"version": "1.1.0", "version": "1.2.0",
"description": "表格组件，多用于展示多条结构类似的数据，如", "description": "表格组件，多用于展示多条结构类似的数据，如",
"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": ["uni-datetime-picker"], "dependencies": ["uni-scss","uni-datetime-picker"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -75,6 +75,10 @@ ...@@ -75,6 +75,10 @@
"快应用": { "快应用": {
"华为": "n", "华为": "n",
"联盟": "n" "联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-table/readme.md
浏览文件 @ 6f6e3846
...@@ -5,144 +5,9 @@ ...@@ -5,144 +5,9 @@
用于展示多条结构类似的数据 用于展示多条结构类似的数据
### 平台差异说明 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-table)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
目前仅支持pc端
### 组件使用注意事项
为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ，请自行手动安装
- 如使用过程中有任何问题，或者您对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)
### 基本用法
表格是由4个组件： `uni-table`表格组件、`uni-tr`表格行 、`uni-th` 表格头、`uni-td` 单元格组成
需要注意的是：
- `uni-table` 的根节点一定是 `uni-tr`
- `uni-tr` 的根节点一定是 `uni-th` 或者 `uni-td`
- 一个表格内理论上只能包含表头行
- 目前只能在 `uni-th` 中设置 width 属性，`uni-td` 的宽度跟随 `uni-th` 宽度变化
```html
<uni-table border stripe emptyText="暂无更多数据" >
<!-- 表头行 -->
<uni-tr>
<uni-th align="center">日期</uni-th>
<uni-th align="center">姓名</uni-th>
<uni-th align="left">地址</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>2020-10-20</uni-td>
<uni-td>Jeson</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-21</uni-td>
<uni-td>HanMeiMei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-22</uni-td>
<uni-td>LiLei</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
<uni-tr>
<uni-td>2020-10-23</uni-td>
<uni-td>Danner</uni-td>
<uni-td>北京市海淀区</uni-td>
</uni-tr>
</uni-table>
</script>
```
## API
### Table Props
|属性名 | 类型 |默认值 | 可选值 | 说明|
|:-: | :-: |:-: | :-: | :-: |
|border | Boolean | false | - | 是否带有纵向边框 |
|stripe | Boolean | false | - | 是否显示斑马线样式 |
|type | String | '' | - | 值为type="selection" 时开启多选|
|emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|loading | Boolean | false | - | 显示加载中|
### Table Events
事件称名 |说明 | 返回参数
:-: |:-: | :-:
selection-change | 开启多选时，当选择项发生变化时会触发该事件 | Function(Object)
### Table Methods
**Tips: 因微信小程序框架问题，暂不支持如下方法**
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|selectionAll |选中全部行 |- |
|toggleRowSelection |用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | Function(Array:[行索引],Boolean:selected) |
|clearSelection |用于多选表格，清空用户的选择 |- |
|toggleAllSelection |用于多选表格，切换所有行的选中状态 |- |
### Th Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: | :-: |:-:|
|width |String | - |- | 单元格宽度|
|align |String | left |left/center/right | 表头对齐方式|
|filter-type |String | |search/select/range/date | 筛选类型，search关键字搜索，select类别选择|
|filter-data |Array | || 筛选数据|
|sortable |Boolean| false |- | 是否启用排序|
filter-data 示例
```json
[{
text: "", //显示
value: "" // 值
}]
```
### Th Events
|事件称名 |说明 | 返回参数 |
|:-: |:-: | :-: |
||sort-change | 点击排序时会触发该事件 | Function(Object)|
||filter-change | 筛选数据时会触发该事件 | Function(Object)|
filter-change(e) 说明
```json
e = {
filterType: "", //筛选类型 search/select/range 和传入的相同
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
}
```
### Td Props
|属性名 |类型 |默认值 |可选值 |说明|
|:-: |:-: |:-: |:-: |:-:|
|align |Boolean| left |left/center/right | 单元格对齐方式|
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/table/table](https://hellouniapp.dcloud.net.cn/pages/extUI/table/table)
\ No newline at end of file
uni_modules/uni-tag/changelog.md
浏览文件 @ 6f6e3846
## 1.1.1（2021-08-11） ## 2.1.0（2021-11-19）
- type 不是 default 时，size 为 small 字体大小显示不正确 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
## 1.1.0（2021-07-30） - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-tag](https://uniapp.dcloud.io/component/uniui/uni-tag)
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) ## 2.0.0（2021-11-09）
## 1.0.7（2021-06-18） - 新增 提供组件设计资源，组件样式调整
- 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug - 移除 插槽
## 1.0.6（2021-06-04） - 移除 type 属性的 royal 选项
- 修复 未定义 sass 变量 "$uni-color-royal" 的bug ## 1.1.1（2021-08-11）
## 1.0.5（2021-05-10） - type 不是 default 时，size 为 small 字体大小显示不正确
- 修复 royal 类型无效的bug ## 1.1.0（2021-07-30）
- 修复 uni-tag 宽度不自适应的bug - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 新增 uni-tag 支持属性 custom-style 自定义样式 ## 1.0.7（2021-06-18）
## 1.0.4（2021-02-05） - 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
- 调整为uni_modules目录规范 ## 1.0.6（2021-06-04）
- 修复 未定义 sass 变量 "$uni-color-royal" 的bug
## 1.0.5（2021-05-10）
- 修复 royal 类型无效的bug
- 修复 uni-tag 宽度不自适应的bug
- 新增 uni-tag 支持属性 custom-style 自定义样式
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-tag/components/uni-tag/uni-tag.vue
浏览文件 @ 6f6e3846
<template> <template>
<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick" ><slot/>{{text}}<slot name="right" /></text> <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
</template> </template>
<script> <script>
...@@ -8,16 +8,16 @@ ...@@ -8,16 +8,16 @@
* @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
* @tutorial https://ext.dcloud.net.cn/plugin?id=35 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
* @property {String} text 标签内容 * @property {String} text 标签内容
* @property {String} size = [normal|small] 大小尺寸 * @property {String} size = [default|small|mini] 大小尺寸
* @value normal 正常 * @value default 正常
* @value small 小尺寸 * @value small 小尺寸
* @property {String} type = [default|primary|success｜warning｜error｜royal] 颜色类型 * @value mini 迷你尺寸
* @property {String} type = [default|primary|success｜warning｜error] 颜色类型
* @value default 灰色 * @value default 灰色
* @value primary 蓝色 * @value primary 蓝色
* @value success 绿色 * @value success 绿色
* @value warning 黄色 * @value warning 黄色
* @value error 红色 * @value error 红色
* @value royal 紫色
* @property {Boolean} disabled = [true|false] 是否为禁用状态 * @property {Boolean} disabled = [true|false] 是否为禁用状态
* @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签） * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
* @property {Boolean} circle = [true|false] 是否为圆角 * @property {Boolean} circle = [true|false] 是否为圆角
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
export default { export default {
name: "UniTag", name: "UniTag",
emits:['click'], emits: ['click'],
props: { props: {
type: { type: {
// 标签类型default、primary、success、warning、error、royal // 标签类型default、primary、success、warning、error、royal
...@@ -62,32 +62,41 @@ ...@@ -62,32 +62,41 @@
// 是否为标记样式 // 是否为标记样式
type: [Boolean, String], type: [Boolean, String],
default: false default: false
}, },
customStyle: { customStyle: {
type: String, type: String,
default: '' default: ''
} }
}, },
computed: { computed: {
classes() { classes() {
const { type, disabled, inverted, circle, mark, size, isTrue } = this const {
const classArr = [ type,
disabled,
inverted,
circle,
mark,
size,
isTrue
} = this
const classArr = [
'uni-tag--' + type, 'uni-tag--' + type,
'uni-tag--' + size,
isTrue(disabled) ? 'uni-tag--disabled' : '', isTrue(disabled) ? 'uni-tag--disabled' : '',
isTrue(inverted) ? type + '-uni-tag--inverted' : '', isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
isTrue(circle) ? 'uni-tag--circle' : '', isTrue(circle) ? 'uni-tag--circle' : '',
isTrue(mark) ? 'uni-tag--mark' : '', isTrue(mark) ? 'uni-tag--mark' : '',
'uni-tag--' + size,
// type === 'default' ? 'uni-tag--default' : 'uni-tag-text', // type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
isTrue(inverted) ? 'uni-tag-text--' + type : '', isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
size === 'small' ? 'uni-tag-text--small' : '' size === 'small' ? 'uni-tag-text--small' : ''
] ]
// 返回类的字符串，兼容字节小程序
return classArr.join(' ') return classArr.join(' ')
} }
}, },
methods: { methods: {
isTrue(value) { isTrue(value) {
return value === true || value === 'true' return value === true || value === 'true'
}, },
onClick() { onClick() {
if (this.isTrue(this.disabled)) return if (this.isTrue(this.disabled)) return
...@@ -98,182 +107,146 @@ ...@@ -98,182 +107,146 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$tag-pd: 0px 16px; $uni-primary: #2979ff !default;
$tag-small-pd: 0px 8px; $uni-success: #18bc37 !default;
$uni-color-royal: #4335d6; $uni-warning: #f3a73f !default;
$uni-error: #e43d33 !default;
$uni-info: #8f939c !default;
$tag-default-pd: 4px 7px;
$tag-small-pd: 2px 5px;
$tag-mini-pd: 1px 3px;
.uni-tag { .uni-tag {
/* #ifndef APP-NVUE */ line-height: 14px;
display: inline-block; font-size: 12px;
/* #endif */ font-weight: 200;
/* #ifdef APP-NVUE */ padding: $tag-default-pd;
align-self: flex-start; color: #fff;
/* #endif */ border-radius: 3px;
padding: $tag-pd; background-color: $uni-info;
line-height: 30px;
color: $uni-text-color;
border-radius: $uni-border-radius-base;
background-color: $uni-bg-color-grey;
border-width: 1rpx; border-width: 1rpx;
border-style: solid; border-style: solid;
border-color: $uni-bg-color-grey; border-color: $uni-info;
/* #ifdef H5 */ /* #ifdef H5 */
cursor: pointer; cursor: pointer;
/* #endif */ /* #endif */
}
.uni-tag--circle {
border-radius: 15px;
}
.uni-tag--mark {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.uni-tag--disabled {
opacity: 0.5;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.uni-tag--small {
height: 20px;
padding: $tag-small-pd;
line-height: 20px;
font-size: $uni-font-size-sm;
}
.uni-tag--default {
color: $uni-text-color;
font-size: $uni-font-size-base;
}
.uni-tag--royal { // size attr
color: $uni-text-color; &--default {
font-size: $uni-font-size-base; font-size: 12px;
} }
.uni-tag-text--small { &--default--inverted {
font-size: $uni-font-size-sm; color: $uni-info;
} border-color: $uni-info;
}
&--small {
padding: $tag-small-pd;
font-size: 12px;
border-radius: 2px;
}
.uni-tag-text { &--mini {
color: $uni-text-color-inverse; padding: $tag-mini-pd;
font-size: $uni-font-size-base; font-size: 12px;
} border-radius: 2px;
}
.uni-tag-text--primary { // type attr
color: $uni-color-primary; &--primary {
} background-color: $uni-primary;
border-color: $uni-primary;
color: #fff;
}
.uni-tag-text--success { &--success {
color: $uni-color-success; color: #fff;
} background-color: $uni-success;
border-color: $uni-success;
}
.uni-tag-text--warning { &--warning {
color: $uni-color-warning; color: #fff;
} background-color: $uni-warning;
border-color: $uni-warning;
}
.uni-tag-text--error { &--error {
color: $uni-color-error; color: #fff;
} background-color: $uni-error;
border-color: $uni-error;
}
&--primary--inverted {
color: $uni-primary;
border-color: $uni-primary;
}
.uni-tag-text--royal { &--success--inverted {
color: $uni-color-royal; color: $uni-success;
} border-color: $uni-success;
}
&--warning--inverted {
color: $uni-warning;
border-color: $uni-warning;
}
.uni-tag--primary { &--error--inverted {
color: $uni-text-color-inverse; color: $uni-error;
background-color: $uni-color-primary; border-color: $uni-error;
border-width: 1rpx; }
border-style: solid;
border-color: $uni-color-primary; &--inverted {
} background-color: #fff;
}
.primary-uni-tag--inverted { // other attr
color: $uni-color-primary; &--circle {
background-color: $uni-bg-color; border-radius: 15px !important;
border-width: 1rpx; }
border-style: solid;
border-color: $uni-color-primary;
}
.uni-tag--success { &--mark {
color: $uni-text-color-inverse; border-top-left-radius: 0 !important;
background-color: $uni-color-success; border-bottom-left-radius: 0 !important;
border-width: 1rpx; border-top-right-radius: 15px !important;
border-style: solid; border-bottom-right-radius: 15px !important;
border-color: $uni-color-success; }
}
.success-uni-tag--inverted { &--disabled {
color: $uni-color-success; opacity: 0.5;
background-color: $uni-bg-color; /* #ifdef H5 */
border-width: 1rpx; cursor: not-allowed;
border-style: solid; /* #endif */
border-color: $uni-color-success; }
} }
.uni-tag--warning {
color: $uni-text-color-inverse;
background-color: $uni-color-warning;
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-warning;
}
.warning-uni-tag--inverted { .uni-tag-text {
color: $uni-color-warning; color: #fff;
background-color: $uni-bg-color; font-size: 14px;
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-warning;
}
.uni-tag--error { &--primary {
color: $uni-text-color-inverse; color: $uni-primary;
background-color: $uni-color-error; }
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-error;
}
.error-uni-tag--inverted { &--success {
color: $uni-color-error; color: $uni-success;
background-color: $uni-bg-color; }
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-error;
}
.uni-tag--royal { &--warning {
color: $uni-text-color-inverse; color: $uni-warning;
background-color: $uni-color-royal; }
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-royal;
}
.royal-uni-tag--inverted { &--error {
color: $uni-color-royal; color: $uni-error;
background-color: $uni-bg-color; }
border-width: 1rpx;
border-style: solid;
border-color: $uni-color-royal;
}
.uni-tag--inverted { &--small {
color: $uni-text-color; font-size: 12px;
background-color: $uni-bg-color; }
border-width: 1rpx;
border-style: solid;
border-color: $uni-bg-color-grey;
} }
</style> </style>
uni_modules/uni-tag/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-tag", "id": "uni-tag",
"displayName": "uni-tag 标签", "displayName": "uni-tag 标签",
"version": "1.1.1", "version": "2.1.0",
"description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。", "description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
"uniui", "uniui",
"", "",
"tag", "tag",
"标签" "标签"
], ],
"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-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"
} }
} }
} }
} }
} }
\ No newline at end of file
uni_modules/uni-tag/readme.md
浏览文件 @ 6f6e3846
## Tag 标签 ## Tag 标签
> **组件名：uni-tag** > **组件名：uni-tag**
> 代码块： `uTag` > 代码块： `uTag`
用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。 用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag)
#### 如使用过程中有任何问题，或者您对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-tag text="标签"></uni-tag>
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
<uni-tag text="标签" @click="bindClick"></uni-tag>
```
## API
### Tag Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |标签内容 |
|size |String |normal |大小尺寸，可选值：normal、small |
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)、royal(紫色) |
|disabled |Boolean|false |是否为禁用状态 |
|inverted |Boolean|false |是否无需背景颜色（空心标签） |
|circle |Boolean|false |是否为圆角 |
### Tag Events
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |点击 Tag 触发事件 |- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag](https://hellouniapp.dcloud.net.cn/pages/extUI/tag/tag)
\ No newline at end of file
uni_modules/uni-title/changelog.md
浏览文件 @ 6f6e3846
## 1.0.2（2021-05-12） ## 1.1.0（2021-11-19）
- 新增 示例地址 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 修复 示例项目缺少组件的Bug - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-title](https://uniapp.dcloud.io/component/uniui/uni-title)
## 1.0.2（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.1（2021-02-05） ## 1.0.1（2021-02-05）
- 调整为uni_modules目录规范 - 调整为uni_modules目录规范
uni_modules/uni-title/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-title", "id": "uni-title",
"displayName": "uni-title 章节标题", "displayName": "uni-title 章节标题",
"version": "1.0.2", "version": "1.1.0",
"description": "章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题", "description": "章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题",
"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 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-title/readme.md
浏览文件 @ 6f6e3846
## Title 章节标题 ## Title 章节标题
> **组件名：uni-title** > **组件名：uni-title**
> 代码块： `uTitle` > 代码块： `uTitle`
章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。 章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
### 安装方式 ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-title)
#### 如使用过程中有任何问题，或者您对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-title title="上报统计数据"></uni-title>
<uni-title type="h1" title="h1 一级标题 "></uni-title>
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
```
### 标题统计
title 组件可以与 uni统计集合使用，只要开启uni统计，即可自动采集标题
- 如果不写 type 属性， 为上报标题。这是标题统计的默认用法，页面会优先上报组件传入的title值为统计上报数据
- 页面统计上报只会上报一次，如多个组件开启，则只上报最后一个组件的内容，所以如非必要请不要多个组件同时开启统计，避免上报错误标题统计
- 为避免上报错误标题统计， uni.report() API 与章节标题组件请勿一起使用
> **注意事项**
> - 在使用 align 属性时，在非 nvue 页面下不生效，或者组件宽度不对，请在组件外层设置一个元素的 display为block 即可解决问题。
>
> **示例：**
>
> ```html
> <template>
> <view class="box">
> <uni-title type="h1" title="h1 一级标题 "></uni-title>
> </view>
> </template>
> <style>
> .box {
> /* #ifndef APP-NVUE */
> display: block;
> /* #endif */
> }
> </style>
> ```
## API
### Title Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|type |String |- |标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|title |String |- |章节标题内容 |
|align |String |- |对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|color |String |- |字体颜色 |
|stat |Boolean|- |是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/title/title](https://hellouniapp.dcloud.net.cn/pages/extUI/title/title)
\ No newline at end of file
uni_modules/uni-ui/changelog.md
浏览文件 @ 6f6e3846
## 1.4.1（2021-08-20） ## 1.4.11（2022-01-21）
- uni-collapse 修复 微信小程序resize后组件收起的bug
- uni-countdown 修复 在微信小程序中样式不生效的bug
- uni-countdown 新增 update 方法 ，在动态更新时间后，刷新组件
- uni-load-more 新增 showText属性 ，是否显示文本
- uni-load-more 修复 nvue 平台下不显示文本的bug
- uni-load-more 修复 微信小程序平台样式选择器报警告的问题
- uni-nav-bar 修复 在vue下，标题不垂直居中的bug
- uni-nav-bar 修复 height 属性类型错误
- uni-nav-bar 新增 height 属性,可修改组件高度
- uni-nav-bar 新增 dark 属性可可开启暗黑模式
- uni-nav-bar 优化 标题字数过多显示省略号
- uni-nav-bar 优化 插槽，插入内容可完全覆盖
- uni-popup 修复 isMaskClick 失效的bug
- uni-popup 新增 cancelText \ confirmText 属性 ，可自定义文本
- uni-popup 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- uni-popup 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.4.10（2022-01-17）
- uni-card 修复 在vue页面下略缩图显示不正常的bug
- uni-datetime-picker 修复 clear-icon 属性在小程序平台不生效的 bug
- uni-datetime-picker 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的 bug
- uni-fab 更新 组件依赖
-
- uni-icons 修复 nvue 有些图标不显示的bug，兼容老版本图标
- uni-icons 优化 示例可复制图标名称
- uni-nav-bar 修复 color 属性不生效的bug
- uni-popup 修复 设置 safeArea 属性不生效的bug
- uni-popup 优化 组件示例
- uni-popup 修复 vuedoc 文字错误
## 1.4.9（2021-11-23）
- uni-ui 修复 vue3中某些scss变量无法找到的问题
- uni-combox 优化 label、label-width 属性
- uni-data-picker 修复 由上个版本引发的map、v-model等属性不生效的bug
- uni-file-picker 修复 参数为对象的情况下，url在某些情况显示错误的bug
- uni-icons 优化 兼容旧组件 type 值
- uni-list 修复 在vue3中to属性在发行应用的时候报错的bug
- uni-scss 修复 vue3中scss语法兼容问题
- uni-transition 修复 init 方法初始化问题
## 1.4.8（2021-11-19）
- uni-fab 修复 阴影颜色不正确的bug
## 1.4.7（2021-11-19）
- uni-ui 新增 支持国际化
- uni-ui 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- uni-ui 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui)
- uni-badge 修改 size 属性默认值调整为 small
- uni-badge 修改 type 属性，默认值调整为 error，info 替换 default
- uni-badge 修复 在字节小程序上样式不生效的 bug
- uni-calendar 修复 弹出层被 tabbar 遮盖 bug
- uni-card 重构插槽的用法 ，header 替换为 title
- uni-card 新增 actions 插槽
- uni-card 新增 cover 封面图属性和插槽
- uni-card 新增 padding 内容默认内边距离
- uni-card 新增 margin 卡片默认外边距离
- uni-card 新增 spacing 卡片默认内边距
- uni-card 新增 shadow 卡片阴影属性
- uni-card 取消 mode 属性，可使用组合插槽代替
- uni-card 取消 note 属性 ，使用actions插槽代替
- uni-collapse 优化 show-arrow 属性默认为true
- uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头
- uni-countdown 新增 font-size 支持自定义字体大小
- uni-data-checkbox 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
- uni-data-checkbox 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
- uni-data-checkbox 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
- uni-dateformat 优化 默认时间不再是当前时间，而是显示'-'字符
- uni-datetime-picker 修复 hide-second 在移动端的 bug
- uni-datetime-picker 修复 单选赋默认值时，赋值日期未高亮的 bug
- uni-datetime-picker 修复 赋默认值时，移动端未正确显示时间的 bug
- uni-datetime-picker 新增 hide-second 属性，支持只使用时分，隐藏秒
- uni-datetime-picker 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
- uni-datetime-picker 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
- uni-datetime-picker 优化 调整字号大小，美化日历界面
- uni-datetime-picker 优化 范围选择器在 pc 端过宽的问题
- uni-datetime-picker 新增 支持作为 uni-forms 子组件相关功能
- uni-datetime-picker 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的 bug
- uni-datetime-picker 修复 type 属性动态赋值无效的 bug
- uni-datetime-picker 修复 ‘确认’按钮被 tabbar 遮盖 bug
- uni-datetime-picker 修复 组件未赋值时范围选左、右日历相同的 bug
- uni-datetime-picker 修复 范围选未正确显示当前值的 bug
- uni-datetime-picker 修复 h5 平台（移动端）报错 'cale' of undefined 的 bug
- uni-easyinput 修复 在 uni-forms 的动态表单中默认值校验不通过的 bug
- uni-easyinput 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
- uni-file-picker 新增 参数中返回 fileID 字段
- uni-file-picker 修复 腾讯云传入fileID 不能回显的bug
- uni-file-picker 修复 选择图片后，不能放大的问题
- uni-file-picker 修复 由于 0.2.11 版本引起的不能回显图片的Bug
- uni-file-picker 新增 clearFiles(index) 方法，可以手动删除指定文件
- uni-file-picker 修复 v-model 值设为 null 报错的Bug
- uni-file-picker 修复 return-type="object" 时，无法删除文件的Bug
- uni-file-picker 修复 auto-upload 属性失效的Bug
- uni-forms 修复 label 插槽不生效的bug
- uni-forms 修复 没有添加校验规则的字段依然报错的Bug
- uni-forms 修复 重置表单错误信息无法清除的问题
- uni-forms 修复 表单验证只生效一次的问题
- uni-icons 新增 更多图标
- uni-icons 优化 自定义图标使用方式
- uni-link 修复 在 nvue 下不显示的 bug
- uni-pagination 修复 current 、value 属性未监听，导致高亮样式失效的 bug
- uni-rate 优化 默认值修改为 0 颗星
- uni-search-bar 修复 value 属性与 modelValue 属性不兼容的Bug
- uni-swipe-action 新增 close-all 方法，关闭所有已打开的组件
- uni-swipe-action 新增 resize() 方法，在非微信小程序、h5、app-vue端出现不能滑动的问题的时候，重置组件
- uni-swipe-action 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
- uni-swipe-action 优化 微信小程序、h5、app-vue 滑动逻辑，避免出现动态新增组件后不能滑动的问题
- uni-tag 新增 提供组件设计资源，组件样式调整
- uni-tag 移除 插槽
- uni-tag 移除 type 属性的 royal 选项
- uni-tag type 不是 default 时，size 为 small 字体大小显示不正确
## 1.4.2（2021-08-20）
- 新增 uni-ui 组件支持国际化 i18n - 新增 uni-ui 组件支持国际化 i18n
- uni-collapse 优化 show-arrow 属性默认为true - uni-collapse 优化 show-arrow 属性默认为true
- uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头 - uni-collapse 新增 show-arrow 属性，控制是否显示右侧箭头
......
uni_modules/uni-ui/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-ui", "id": "uni-ui",
"displayName": "uni-ui", "displayName": "uni-ui",
"version": "1.4.1", "version": "1.4.11",
"description": "uni-ui 是一个基于uni-app全端兼容的高性能UI框架", "description": "uni-ui 是一个基于uni-app全端兼容的高性能UI框架",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
], ],
"repository": "https://github.com/dcloudio/uni-ui", "repository": "https://github.com/dcloudio/uni-ui",
"engines": { "engines": {
"HBuilderX": "" "HBuilderX": "^3.2.10"
}, },
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-ui/readme.md
浏览文件 @ 6f6e3846
> 当前插件不包含示例页面 ,如需示例请在 HBuiderX 中新建 `hello uni-app > 扩展组件` 中查看
>
> 代码示例地址 ：[https://ext.dcloud.net.cn/plugin?id=4941](https://ext.dcloud.net.cn/plugin?id=4941)
>
> 组件演示地址：[https://hellouniapp.dcloud.net.cn](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
>
> 组件文档地址：[https://uniapp.dcloud.io/component/uniui/uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui)
# uni-ui 介绍 # uni-ui 介绍
## uni-ui产品特点 ## uni-ui产品特点
......
uni_modules/uni-upgrade-center-app/changelog.md
浏览文件 @ 6f6e3846
## 0.3.2（2022-01-12）
- 优化显示逻辑
## 0.3.1（2021-11-24）
- 修复 vue3 上图片不显示的Bug
## 0.3.0（2021-11-18）
- 移除 wgt 安装成功后提示，防止重启过快弹框不消失
## 0.2.2（2021-08-25）
- 兼容vue3.0
## 0.2.1（2021-07-26） ## 0.2.1（2021-07-26）
- 修复 使用腾讯云并手动填写地址时，导致下载链接失效的bug - 修复 使用腾讯云并手动填写地址时，导致下载链接失效的bug
## 0.2.0（2021-07-13） ## 0.2.0（2021-07-13）
......
uni_modules/uni-upgrade-center-app/package.json
浏览文件 @ 6f6e3846
{ {
"id": "uni-upgrade-center-app", "id": "uni-upgrade-center-app",
"displayName": "升级中心 uni-upgrade-center - App", "displayName": "升级中心 uni-upgrade-center - App",
"version": "0.2.1", "version": "0.3.2",
"description": "升级中心前台检查更新", "description": "uni升级中心 - 客户端检查更新",
"keywords": [ "keywords": [
"uniCloud", "uniCloud",
"admin",
"update", "update",
"升级", "升级",
"wgt" "wgt"
...@@ -47,21 +46,21 @@ ...@@ -47,21 +46,21 @@
}, },
"client": { "client": {
"App": { "App": {
"app-vue": "u", "app-vue": "y",
"app-nvue": "u" "app-nvue": "u"
}, },
"H5-mobile": { "H5-mobile": {
"Safari": "u", "Safari": "y",
"Android Browser": "u", "Android Browser": "y",
"微信浏览器(Android)": "u", "微信浏览器(Android)": "y",
"QQ浏览器(Android)": "u" "QQ浏览器(Android)": "y"
}, },
"H5-pc": { "H5-pc": {
"Chrome": "u", "Chrome": "y",
"IE": "u", "IE": "y",
"Edge": "u", "Edge": "y",
"Firefox": "u", "Firefox": "y",
"Safari": "u" "Safari": "y"
}, },
"小程序": { "小程序": {
"微信": "u", "微信": "u",
...@@ -73,6 +72,10 @@ ...@@ -73,6 +72,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-upgrade-center-app/pages/upgrade-popup.vue
浏览文件 @ 6f6e3846
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="content botton-radius"> <view class="content botton-radius">
<view class="content-top"> <view class="content-top">
<text class="content-top-text">{{title}}</text> <text class="content-top-text">{{title}}</text>
<image class="content-top" style="top: 0;" width="100%" height="100%" src="../static/bg_top.png"> <image class="content-top" style="top: 0;" width="100%" height="100%" src="../images/bg_top.png">
</image> </image>
</view> </view>
<view class="content-header"></view> <view class="content-header"></view>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</view> </view>
</view> </view>
<image v-if="!is_mandatory" class="close-img" src="../static/app_update_close.png" <image v-if="!is_mandatory" class="close-img" src="../images/app_update_close.png"
@click.stop="closeUpdate"></image> @click.stop="closeUpdate"></image>
</view> </view>
</view> </view>
...@@ -299,12 +299,6 @@ ...@@ -299,12 +299,6 @@
uni.hideLoading() uni.hideLoading()
this.restart(); this.restart();
}, 1000) }, 1000)
} else {
uni.showLoading({
icon: 'none',
title: '安装成功，重启应用体验新版',
duration: 1000
})
} }
} else { } else {
const localFilePathRecord = uni.getStorageSync(localFilePathKey) const localFilePathRecord = uni.getStorageSync(localFilePathKey)
......
uni_modules/uni-upgrade-center-app/readme.md
浏览文件 @ 6f6e3846
...@@ -4,19 +4,21 @@ ...@@ -4,19 +4,21 @@
> 统一管理App及App在`Android`、`iOS`平台上`App安装包`和`wgt资源包`的发布升级 > 统一管理App及App在`Android`、`iOS`平台上`App安装包`和`wgt资源包`的发布升级
> 本插件为升级中心前台检查更新，后台Admin管理系统请点击查看 [uni-upgrade-center](https://ext.dcloud.net.cn/plugin?id=4470) > 本插件为uni升级中心客户端检查更新，后台管理系统请点击查看 [uni-upgrade-center - Admin](https://ext.dcloud.net.cn/plugin?id=4470)
### 基于uni-upgrade-center的App前台检查升级插件 ### uni升级中心 - 客户端检查更新插件
- 一键式检查更新，统一整包与wgt资源包更新 - 一键式检查更新，同时支持整包升级与wgt资源包更新
- 好看、实用、可自定义、可拓展的前台更新弹框 - 好看、实用、可自定义的客户端提示框
## 安装指引 ## 安装指引
0. 依赖数据库`opendb-app-versions`，如果没有此库，请在云服务空间中创建。 1. 依赖数据库`opendb-app-versions`，如果没有此库，请在云服务空间中创建。
1. 使用`HBuilderX 3.1.0+`，因为要使用到`uni_modules` 2. 使用`HBuilderX 3.1.0+`，因为要使用到`uni_modules`
3. 在插件市场打开本插件页面，在右侧点击`使用 HBuilderX 导入插件`，选择要导入的项目点击确定 3. 在插件市场打开本插件页面，在右侧点击`使用 HBuilderX 导入插件`，选择要导入的项目点击确定
4. 绑定一个服务空间
5. 找到`/uni_modules/uni-upgrade-center-app/uniCloud/cloudfunctions/check-version`，右键上传部署 5. 找到`/uni_modules/uni-upgrade-center-app/uniCloud/cloudfunctions/check-version`，右键上传部署
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或