mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,309 @@
|
||||
# uni-badge
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-badge
|
||||
|
||||
代码块： uBadge
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-badge />`（或 `<uni-badge></uni-badge>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | String | - | 角标内容 |
|
||||
| type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) |
|
||||
| size | String | small | 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]） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Badge 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="无底色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary"
|
||||
:customStyle="{background: '#4335d6'}" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="定位: aboslute 属性" subTitle="注：在安卓端不支持 nvue" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">圆点</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
customStyle: {
|
||||
backgroundColor: '#62ed0d',
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const timer = setInterval(() => {
|
||||
if (this.value >= 199) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
this.value++
|
||||
}, 100)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-badge-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.uni-badge-absolute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #DCDFE6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="无底色" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="1" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="2" type="primary" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="34" type="success" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="45" type="warning" />
|
||||
<uni-badge class="uni-badge-left-margin" :inverted="true" text="123" type="info" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary"
|
||||
:customStyle="{background: '#4335d6'}" />
|
||||
<uni-badge class="uni-badge-left-margin" text="2" type="primary" :customStyle="customStyle" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="定位: aboslute 属性" subTitle="注：在安卓端不支持 nvue" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="small">
|
||||
<view class="box"><text class="box-text">右上</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
<uni-section title="仅显示点: is-dot 属性" type="line" padding>
|
||||
<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="value" absolute="rightTop" size="small">
|
||||
<view class="box"><text class="box-text">圆点</text></view>
|
||||
</uni-badge>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
customStyle: {
|
||||
backgroundColor: '#62ed0d',
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const timer = setInterval(() => {
|
||||
if (this.value >= 199) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
this.value++
|
||||
}, 100)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.example-body {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-badge-left-margin {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.uni-badge-absolute {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #DCDFE6;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-badge.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=badge)
|
||||
- [Local Example](examples/uni-ui/uni-badge.vue)
|
||||
@@ -0,0 +1,216 @@
|
||||
# uni-breadcrumb
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-breadcrumb
|
||||
|
||||
代码块： uBreadcrumb
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-breadcrumb />`（或 `<uni-breadcrumb></uni-breadcrumb>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| separator | String | 斜杠'/' | 分隔符 |
|
||||
| separatorClass | String | | 图标分隔符 class |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
name: "uni-stat-breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/A",
|
||||
name: "A页面",
|
||||
},
|
||||
{
|
||||
to: "/B",
|
||||
name: "B页面",
|
||||
},
|
||||
{
|
||||
to: "/C",
|
||||
name: "C页面",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
name: "uni-stat-breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/A",
|
||||
name: "A页面",
|
||||
},
|
||||
{
|
||||
to: "/B",
|
||||
name: "B页面",
|
||||
},
|
||||
{
|
||||
to: "/C",
|
||||
name: "C页面",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"
|
||||
>面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text
|
||||
>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
<uni-section title="自定义分隔符" type="line" padding>
|
||||
<uni-breadcrumb separator=">">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/pages/index/index",
|
||||
name: "首页",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 A",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 B",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"
|
||||
>面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text
|
||||
>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-breadcrumb separator="/">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
<uni-section title="自定义分隔符" type="line" padding>
|
||||
<uni-breadcrumb separator=">">
|
||||
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
|
||||
{{route.name}}
|
||||
</uni-breadcrumb-item>
|
||||
</uni-breadcrumb>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: "/pages/index/index",
|
||||
name: "首页",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 A",
|
||||
},
|
||||
{
|
||||
to: "",
|
||||
name: "菜单 B",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-breadcrumb.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=breadcrumb)
|
||||
- [Local Example](examples/uni-ui/uni-breadcrumb.vue)
|
||||
@@ -0,0 +1,137 @@
|
||||
# uni-calendar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-calendar
|
||||
|
||||
代码块： uCalendar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-calendar />`（或 `<uni-calendar></uni-calendar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| date | String | - | 自定义当前时间，默认为今天 |
|
||||
| lunar | Boolean | false | 显示农历 |
|
||||
| startDate | String | - | 日期选择范围-开始日期 |
|
||||
| endDate | String | - | 日期选择范围-结束日期 |
|
||||
| range | Boolean | false | 范围选择 |
|
||||
| insert | Boolean | true | 插入模式，可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|
||||
| clearDate | Boolean | true | 弹窗模式是否清空上次选择内容 |
|
||||
| selected | Array | - | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|
||||
| showMonth | Boolean | true | 是否显示月份为背景 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 仅插入模式时生效 日期改变时触发 | {"year":2024,"month":2,"date":24} |
|
||||
| @confirm | 仅弹出模式时生效 确认选择时触发 | {"year":2024,"month":2,"date":24} |
|
||||
| @monthSwitch | 切换月份时触发 | {"year":2024,"month":2} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<view>
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="true"
|
||||
:start-date="'2019-3-2'"
|
||||
:end-date="'2019-5-20'"
|
||||
@change="change"
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<view>
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="true"
|
||||
:start-date="'2019-3-2'"
|
||||
:end-date="'2019-5-20'"
|
||||
@change="change"
|
||||
/>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<view>
|
||||
<uni-calendar
|
||||
ref="calendar"
|
||||
:insert="false"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
<button @click="open">打开日历</button>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<view>
|
||||
<uni-calendar
|
||||
ref="calendar"
|
||||
:insert="false"
|
||||
@confirm="confirm"
|
||||
/>
|
||||
<button @click="open">打开日历</button>
|
||||
</view>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.$refs.calendar.open();
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.$refs.calendar.open();
|
||||
},
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-calendar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=calendar)
|
||||
- [Local Example](examples/uni-ui/uni-calendar.vue)
|
||||
@@ -0,0 +1,98 @@
|
||||
# uni-card
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-card
|
||||
|
||||
代码块： uCard
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-card />`（或 `<uni-card></uni-card>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 标题文字 |
|
||||
| sub-title | String | - | 副标题文字 |
|
||||
| extra | String | - | 标题额外信息 |
|
||||
| thumbnail | String | - | 标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如： /static/xxx.png |
|
||||
| cover | String | - | 封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如： /static/xxx.png |
|
||||
| is-full | Boolean | false | 卡片内容是否通栏，为true时将去除padding值 |
|
||||
| is-shadow | Boolean | false | 卡片内容是否开启阴影 |
|
||||
| shadow | String | 0px 0px 3px 1px rgba(0, 0, 0, 0.08) | 卡片阴影,需符合 css 值 |
|
||||
| margin | String | 10px | 卡片外边距 |
|
||||
| spacing | String | 10px | 卡片内边距 |
|
||||
| padding | String | 10px | 卡片内容内边距 |
|
||||
| border | Boolean | true | 卡片边框 |
|
||||
| mode[弃用] | String | basic | 卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片 |
|
||||
| note[弃用] | String | - | 底部信息 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Card 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-card.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-card>
|
||||
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-card>
|
||||
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-card title="基础卡片" extra="额外信息">
|
||||
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-card title="基础卡片" extra="额外信息">
|
||||
<text>这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
||||
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
||||
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
|
||||
</uni-card>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-card.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=card)
|
||||
- [Local Example](examples/uni-ui/uni-card.vue)
|
||||
@@ -0,0 +1,134 @@
|
||||
# uni-collapse
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-collapse
|
||||
|
||||
代码块： uCollapse
|
||||
|
||||
关联组件： uni-collapse-item 、 uni-icons 。
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-collapse />`（或 `<uni-collapse></uni-collapse>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | String/Array | - | 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array) |
|
||||
| accordion | Boolean | false | 是否开启手风琴效果 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 切换面板时触发 | 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=collapse)
|
||||
- [Local Example](examples/uni-ui/uni-collapse.vue)
|
||||
@@ -0,0 +1,151 @@
|
||||
# uni-combox
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-combox
|
||||
|
||||
代码块： uCombox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-combox />`（或 `<uni-combox></uni-combox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| label | String | - | 标签文字 |
|
||||
| value | String | - | combox的值 |
|
||||
| labelWidth | String | auto | 标签宽度，有单位字符串，如:'100px' |
|
||||
| placeholder | String | - | 输入框占位符 |
|
||||
| candidates | Array/String | [] | 候选字段 |
|
||||
| emptyTips | String | 无匹配项 | 无匹配项时的提示语 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @input | combox输入事件 | 返回combox值 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-combox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
<view class="result-box">
|
||||
<text>所选城市为：{{city}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox emptyTips="这里啥都没有" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">组合框一般用于可以选择也可以输入的表单项。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
|
||||
<view class="result-box">
|
||||
<text>所选城市为：{{city}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="无边框" subTitle="使用 border = false 取消边框" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox :border="false" :candidates="candidates" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="设置无匹配项时的提示语" subTitle="使用 emptyTips 属性设置无匹配项时的提示语" type="line">
|
||||
<view class="example-body">
|
||||
<uni-combox emptyTips="这里啥都没有" placeholder="请选择所在城市"></uni-combox>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
|
||||
city: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 12px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
text-align: center;
|
||||
padding: 20px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-combox.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=combox)
|
||||
- [Local Example](examples/uni-ui/uni-combox.vue)
|
||||
@@ -0,0 +1,190 @@
|
||||
# uni-countdown
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-countdown
|
||||
|
||||
代码块： uCountDown
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-countdown />`（或 `<uni-countdown></uni-countdown>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| backgroundColor | String | #FFFFFF | 背景色 |
|
||||
| color | String | #000000 | 文字颜色 |
|
||||
| splitorColor | String | #000000 | 分割符号颜色 |
|
||||
| day | Number | 0 | 天数 |
|
||||
| hour | Number | 0 | 小时 |
|
||||
| minute | Number | 0 | 分钟 |
|
||||
| second | Number | 0 | 秒 |
|
||||
| showDay | Boolean | true | 是否显示天数 |
|
||||
| showHour | Boolean | true | 是否显示小时 |
|
||||
| showMinute | Boolean | true | 是否显示分钟 |
|
||||
| showColon | Boolean | true | 是否以冒号为分隔符 |
|
||||
| start | Boolean | true | 是否初始化组件后就开始倒计时 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @timeup | 倒计时时间到触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 一般用法 -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="一般用法" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="不显示天数" subTitle="设置 show-day = false 不显示天" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
|
||||
</uni-section>
|
||||
<uni-section title="文字分隔符" subTitle="设置 show-colon 属性设置分隔符样式" type="line" padding>
|
||||
<uni-countdown :minute="30" :second="0" :show-colon="false" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="修改字体大小" subTitle="设置 font-size 属性设置组件大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色 + 字体大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="自由控制开始/暂停" subTitle="设置 start 属性控制是否自动开启" type="line" padding>
|
||||
<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="倒计时回调事件" type="line" padding>
|
||||
<uni-countdown :show-day="false" :second="timeupSecond" @timeup="timeup" />
|
||||
</uni-section>
|
||||
<uni-section title="动态赋值" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="一般用法" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="不显示天数" subTitle="设置 show-day = false 不显示天" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" />
|
||||
</uni-section>
|
||||
<uni-section title="文字分隔符" subTitle="设置 show-colon 属性设置分隔符样式" type="line" padding>
|
||||
<uni-countdown :minute="30" :second="0" :show-colon="false" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding>
|
||||
<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="修改字体大小" subTitle="设置 font-size 属性设置组件大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" />
|
||||
</uni-section>
|
||||
<uni-section title="修改颜色 + 字体大小" type="line" padding>
|
||||
<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
|
||||
</uni-section>
|
||||
<uni-section title="自由控制开始/暂停" subTitle="设置 start 属性控制是否自动开启" type="line" padding>
|
||||
<uni-countdown :start="start" :day="1" :hour="1" :minute="12" :second="40" />
|
||||
</uni-section>
|
||||
<uni-section title="倒计时回调事件" type="line" padding>
|
||||
<uni-countdown :show-day="false" :second="timeupSecond" @timeup="timeup" />
|
||||
</uni-section>
|
||||
<uni-section title="动态赋值" type="line" padding>
|
||||
<uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
testHour: 1,
|
||||
testMinute: 0,
|
||||
testSecond: 0,
|
||||
start: false,
|
||||
timeupSecond: 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.testHour = 1
|
||||
this.testMinute = 1
|
||||
this.testSecond = 0
|
||||
this.start = true
|
||||
}, 3000)
|
||||
setTimeout(() => {
|
||||
this.start = false
|
||||
}, 10000)
|
||||
},
|
||||
methods: {
|
||||
timeup() {
|
||||
uni.showToast({
|
||||
title: '时间到'
|
||||
})
|
||||
this.timeupSecond = 29
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-countdown.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=countdown)
|
||||
- [Local Example](examples/uni-ui/uni-countdown.vue)
|
||||
@@ -0,0 +1,198 @@
|
||||
# uni-data-checkbox
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-checkbox
|
||||
|
||||
代码块： uDataCheckbox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-checkbox />`（或 `<uni-data-checkbox></uni-data-checkbox>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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映射到数据中的其他字段 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 选中状态改变时触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-checkbox.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-checkbox min="1" max="2" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-checkbox.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-checkbox)
|
||||
- [Local Example](examples/uni-ui/uni-data-checkbox.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-data-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-picker
|
||||
|
||||
代码块： uDataPicker 关联组件： uni-data-pickerview 、 uni-load-more 。
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-picker />`（或 `<uni-data-picker></uni-data-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model | String/ Number | - | - | 绑定数据 |
|
||||
| spaceInfo | Object | - | - | 服务空间配置， 详情 |
|
||||
| localdata | Array | - | - | 数据， 详情 |
|
||||
| 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 | 分步查询时，点击节点请求数据 |
|
||||
| self-field | String | - | - | 分步查询时当前字段名称 |
|
||||
| parent-field | String | - | - | 分步查询时父字段名称 |
|
||||
| collection | String | - | - | 表名。支持输入多个表名，用 , 分割 |
|
||||
| field | String | - | - | 查询字段，多个字段用 , 分割 |
|
||||
| where | String | - | - | 查询条件，内容较多，另见jql文档： 详情 |
|
||||
| orderby | String | - | - | 排序字段及正序倒叙设置 |
|
||||
| popup-title | String | | | 弹出层标题 |
|
||||
| map | Object | - | {text:'text',value:'value'} | 字段映射，将text/value映射到数据中的其他字段 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| @change | EventHandle | 选择完成时触发 {detail: {value}} |
|
||||
| @nodeclick | EventHandle | 节点被点击时触发 |
|
||||
| @popupopened | EventHandle | 弹出层弹出时触发 |
|
||||
| @popupclosed | EventHandle | 弹出层关闭时触发 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onchange(e) {
|
||||
const value = e.detail.value
|
||||
},
|
||||
onnodeclick(node) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onchange(e) {
|
||||
const value = e.detail.value
|
||||
},
|
||||
onnodeclick(node) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-picker)
|
||||
- [Local Example](examples/uni-ui/uni-data-picker.vue)
|
||||
@@ -0,0 +1,175 @@
|
||||
# uni-data-select
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-data-select
|
||||
|
||||
代码块： uDataSelect
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-data-select />`（或 `<uni-data-select></uni-data-select>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 | 兼容说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| value/v-model | String/Number | - | - | 已选择数据的 value 值（当其值为0时不进行初始化赋值） | |
|
||||
| localdata | Array | - | - | 本地渲染数据 | |
|
||||
| clear | Boolean | - | - | 是否可以清空已选项 | |
|
||||
| label | String | | | 左侧标题 | |
|
||||
| placeholder | String | - | 请选择 | 输入框的提示文字 | |
|
||||
| disabled | Boolean | - | false | 是否开启禁用 | |
|
||||
| emptyTips | String | - | 暂无数据 | 没有数据时显示的文字 ，本地数据无效 | |
|
||||
| placement | String | bottom,top | bottom | 弹出时位置 | |
|
||||
| page-size | Number | - | 20 | 返回的数据量（云端请求时有效，更多云端属性详见下方） | |
|
||||
| multiple | Boolean | - | false | 是否开启多选 | 1.1.0 新增 |
|
||||
| wrap | Boolean | - | false | 是否开启换行展示(默认展示 1 行) | 1.1.0 新增 |
|
||||
| align | String | left,center,right | left | 选择文字的位置 | 1.1.0 新增 |
|
||||
| hideRight | Boolean | - | false | 是否隐藏右侧按钮 | 1.1.0 新增 |
|
||||
| mode | String | default,underline,none | default | 边框样式,default(四周边框),underline(下边框),none(无边框) | 1.1.0 新增 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 | 兼容性说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @change | 选中状态改变时触发事件 | - | - |
|
||||
| @open | 选择框开启时触发 | - | 1.1.0 新增 |
|
||||
| @close | 选择框关闭时触发 | - | 1.1.0 新增 |
|
||||
| @clear | 点击清除按钮之后触发 | - | 1.1.0 新增 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="range"
|
||||
@change="change"
|
||||
></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="range"
|
||||
@change="change"
|
||||
></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
range: [
|
||||
{ value: 0, text: "篮球" },
|
||||
{ value: 1, text: "足球" },
|
||||
{ value: 2, text: "游泳" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1,
|
||||
range: [
|
||||
{ value: 0, text: "篮球" },
|
||||
{ value: 1, text: "足球" },
|
||||
{ value: 2, text: "游泳" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select multiple v-model="value" :localdata="range" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-data-select multiple v-model="value" :localdata="range" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [0,2],
|
||||
range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e){
|
||||
console.log('e:',e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=data-select)
|
||||
- [Local Example](examples/uni-ui/uni-data-select.vue)
|
||||
@@ -0,0 +1,146 @@
|
||||
# uni-dateformat
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-dateformat
|
||||
|
||||
代码块： uDateformat
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-dateformat />`（或 `<uni-dateformat></uni-dateformat>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| date | Object|String|Number | Date.now() | 要格式化的日期对象/日期字符串/时间戳 |
|
||||
| threshold | Array | [0, 0] | 转化类型阈值 |
|
||||
| format | String | 'yyyy/MM/dd hh:mm:ss' | 格式字符串 |
|
||||
| locale | String | zh | 格式化使用的语言，目前支持zh（中文）、en（英文） |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 一般用法 -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">日期格式化组件，通常用于需要展示友好的日期格式的场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 7200000"></uni-dateformat>
|
||||
<uni-dateformat date="2020/12/12"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="设置阈值" subTitle="阈值用于控制什么时候显示刚刚|马上，什么时候显示xx分钟前|xx分钟后" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,0]"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="使用英文" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 1200000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 80000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">日期格式化组件，通常用于需要展示友好的日期格式的场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 7200000"></uni-dateformat>
|
||||
<uni-dateformat date="2020/12/12"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="设置阈值" subTitle="阈值用于控制什么时候显示刚刚|马上，什么时候显示xx分钟前|xx分钟后" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[0,0]"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="使用英文" type="line" padding>
|
||||
<view class="example-body">
|
||||
<uni-dateformat :date="now - 1200000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 30000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
<uni-dateformat :date="now - 80000" :threshold="[60000,3600000]" locale="en"></uni-dateformat>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
now: Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-dateformat.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=dateformat)
|
||||
- [Local Example](examples/uni-ui/uni-dateformat.vue)
|
||||
@@ -0,0 +1,469 @@
|
||||
# uni-datetime-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
重要通知
|
||||
|
||||
组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载 非uni_modules版本 ，旧版本将不再维护
|
||||
|
||||
组件名：uni-datetime-picker
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-datetime-picker />`（或 `<uni-datetime-picker></uni-datetime-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 值域 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 是否显示秒，只显示时分 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 确定日期时间时触发的事件，参数为当前选择的日期对象 | 单选返回日期字符串，如：'2010-02-3'；范围选返回日期字符串数组，如：['2020-10-1', '2021-4-1'] |
|
||||
| maskClick | 点击遮罩层触发 | - |
|
||||
| show | 弹窗弹出时触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-datetime-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||||
</uni-card>
|
||||
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
|
||||
</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="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||||
</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 returnType="timestamp" v-model="single" @change="changeLog($event)" />
|
||||
</view>
|
||||
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
|
||||
</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="'隐藏清除按钮用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" :clearIcon="false" />
|
||||
</view>
|
||||
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="page container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||||
</uni-card>
|
||||
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
|
||||
</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="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||||
</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 returnType="timestamp" v-model="single" @change="changeLog($event)" />
|
||||
</view>
|
||||
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
|
||||
</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="'隐藏清除按钮用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" :clearIcon="false" />
|
||||
</view>
|
||||
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="single" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
single: '',
|
||||
datetimesingle: '',
|
||||
range: ['2021-02-1', '2021-3-28'],
|
||||
datetimerange: [],
|
||||
start: Date.now() - 1000000000,
|
||||
end: Date.now() + 1000000000
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
datetimesingle(newval) {
|
||||
console.log('单选:', this.datetimesingle);
|
||||
},
|
||||
range(newval) {
|
||||
console.log('范围选:', this.range);
|
||||
},
|
||||
datetimerange(newval) {
|
||||
console.log('范围选:', this.datetimerange);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.datetimesingle = Date.now() - 2*24*3600*1000
|
||||
this.single = '2021-2-12'
|
||||
this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
|
||||
},3000)
|
||||
},
|
||||
|
||||
methods:{
|
||||
change(e) {
|
||||
this.single = e
|
||||
console.log('change事件:', this.single = e);
|
||||
},
|
||||
changeLog(e) {
|
||||
console.log('change事件:', e);
|
||||
},
|
||||
maskClick(e){
|
||||
console.log('maskClick事件:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-datetime-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=datetime-picker)
|
||||
- [Local Example](examples/uni-ui/uni-datetime-picker.vue)
|
||||
@@ -0,0 +1,285 @@
|
||||
# uni-drawer
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-drawer
|
||||
|
||||
代码块： uDrawer
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-drawer />`（或 `<uni-drawer></uni-drawer>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| mask | Boolean | true | 是否显示遮罩 |
|
||||
| maskClick | Boolean | true | 点击遮罩是否可以关闭抽屉 |
|
||||
| mode | String | left | Drawer滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出） |
|
||||
| width | Number | 220 | Drawer 宽度，仅vue页面设置生效 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 抽屉状态发生变化触发事件 | true：抽屉已经打开；false：抽屉已经关闭； |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="左侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="右侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view class="info">
|
||||
<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
<view class="info-content" v-for="item in 100" :key="item">
|
||||
<text>可滚动内容 {{item}}</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">这是抽屉式导航组件使用示例，可以指定菜单左侧或者右侧弹出（仅初始化生效），组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="左侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="右侧滑出" type="line">
|
||||
<view class="example-body">
|
||||
<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
|
||||
</button>
|
||||
<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
|
||||
<view class="scroll-view">
|
||||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||||
<view class="info">
|
||||
<text class="info-text">右侧遮罩只能通过按钮关闭，不能通过点击遮罩关闭</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
<view class="info-content" v-for="item in 100" :key="item">
|
||||
<text>可滚动内容 {{item}}</text>
|
||||
</view>
|
||||
<view class="close">
|
||||
<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showRight: false,
|
||||
showLeft: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {},
|
||||
// 打开窗口
|
||||
showDrawer(e) {
|
||||
this.$refs[e].open()
|
||||
},
|
||||
// 关闭窗口
|
||||
closeDrawer(e) {
|
||||
this.$refs[e].close()
|
||||
},
|
||||
// 抽屉状态发生变化触发
|
||||
change(e, type) {
|
||||
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
||||
this[type] = e
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
if (this.showLeft) {
|
||||
this.$refs.showLeft.close()
|
||||
} else {
|
||||
this.$refs.showLeft.open()
|
||||
}
|
||||
},
|
||||
// app端拦截返回事件 ，仅app端生效
|
||||
onBackPress() {
|
||||
if (this.showRight || this.showLeft) {
|
||||
this.$refs.showLeft.close()
|
||||
this.$refs.showRight.close()
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
}
|
||||
.scroll-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex:1
|
||||
}
|
||||
// 处理抽屉内容滚动
|
||||
.scroll-view-box {
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.info {
|
||||
padding: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.info-content {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.close {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=drawer)
|
||||
- [Local Example](examples/uni-ui/uni-drawer.vue)
|
||||
@@ -0,0 +1,113 @@
|
||||
# uni-easyinput
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-easyinput
|
||||
|
||||
代码块： uEasyinput
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-easyinput />`（或 `<uni-easyinput></uni-easyinput>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 24 | 清除图标的大小，单位px |
|
||||
| prefixIcon | String | - | - | 输入框头部图标 |
|
||||
| suffixIcon | String | - | - | 输入框尾部图标 |
|
||||
| trim | Boolean/String | 见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格 |
|
||||
| inputBorder | Boolean | - | true | 是否显示input输入框的边框 |
|
||||
| styles | Object | - | - | 样式自定义 |
|
||||
| passwordIcon | Boolean | - | true | type=password 时，是否显示小眼睛图标 |
|
||||
| adjust-position | Boolean | - | true | 弹起键盘时，是否上推页面，平台差异性与内置input组件一致 |
|
||||
| primaryColor | String | - | #2979ff | 设置清除按钮focus时的颜色 |
|
||||
| cursorSpacing | Number | - | 0 | 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见 textarea / input |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 | 兼容说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| @input | 输入框内容发生变化时触发 | - | |
|
||||
| @clear | 点击右侧叉号图标时触发 | - | 1.1.0新增 |
|
||||
| @focus | 输入框获得焦点时触发 | - | |
|
||||
| @blur | 输入框失去焦点时触发 | - | |
|
||||
| @confirm | 点击完成按钮时触发 | - | |
|
||||
| @iconClick | 点击图标时触发 | prefix/suffix | |
|
||||
| @change | 仅在输入框失去焦点或用户按下回车时触发 | | 1.1.0新增 |
|
||||
| @keyboardheightchange | 键盘高度发生变化时触发 | | 1.1.6新增 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<!-- 输入框头部图标 -->
|
||||
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||||
<!-- 展示输入框尾部图标 -->
|
||||
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-easyinput>
|
||||
<template #right>
|
||||
<view>密码</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-easyinput>
|
||||
<template #right>
|
||||
<view>密码</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=easyinput)
|
||||
- [Local Example](examples/uni-ui/uni-easyinput.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-fab
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-fab
|
||||
|
||||
代码块： uFab
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-fab />`（或 `<uni-fab></uni-fab>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| pattern | Object | - | 可选样式配置项 |
|
||||
| horizontal | String | 'left' | 水平对齐方式。 left :左对齐， right ：右对齐 |
|
||||
| vertical | String | 'bottom' | 垂直对齐方式。 bottom :下对齐， top ：上对齐 |
|
||||
| direction | String | 'horizontal' | 展开菜单显示方式。 horizontal :水平显示， vertical ：垂直显示 |
|
||||
| popMenu | Boolean | true | 是否使用弹出菜单 |
|
||||
| content | Array | - | 展开菜单内容配置项 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| @trigger | Function | 展开菜单点击事件，返回点击信息 |
|
||||
| @fabClick | Function | 悬浮按钮点击事件 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-fab
|
||||
:pattern="pattern"
|
||||
:content="content"
|
||||
:horizontal="horizontal"
|
||||
:vertical="vertical"
|
||||
:direction="direction"
|
||||
@trigger="trigger"
|
||||
></uni-fab>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-fab
|
||||
:pattern="pattern"
|
||||
:content="content"
|
||||
:horizontal="horizontal"
|
||||
:vertical="vertical"
|
||||
:direction="direction"
|
||||
@trigger="trigger"
|
||||
></uni-fab>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
|
||||
<view class="warp">
|
||||
<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
|
||||
<button class="button" type="primary" @click="switchColor">修改颜色</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">uni-ui 规范颜色色板，通过内置样式快速指定元素前景和背景色。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
|
||||
<view class="warp">
|
||||
<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
|
||||
<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
|
||||
<button class="button" type="primary" @click="switchColor">修改颜色</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
title: 'uni-fab',
|
||||
directionStr: '垂直',
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal',
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#007AFF',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
is_color_type: false,
|
||||
content: [{
|
||||
iconPath: '/static/image.png',
|
||||
selectedIconPath: '/static/image-active.png',
|
||||
text: '相册',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
iconPath: '/static/home.png',
|
||||
selectedIconPath: '/static/home-active.png',
|
||||
text: '首页',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
iconPath: '/static/star.png',
|
||||
selectedIconPath: '/static/star-active.png',
|
||||
text: '收藏',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.$refs.fab.isShow) {
|
||||
this.$refs.fab.close()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
methods: {
|
||||
trigger(e) {
|
||||
console.log(e)
|
||||
this.content[e.index].active = !e.item.active
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定')
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fabClick() {
|
||||
uni.showToast({
|
||||
title: '点击了悬浮按钮',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
switchBtn(hor, ver) {
|
||||
if (hor === 0) {
|
||||
this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
|
||||
this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
|
||||
} else {
|
||||
this.horizontal = hor
|
||||
this.vertical = ver
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
switchColor() {
|
||||
this.is_color_type = !this.is_color_type
|
||||
if (this.is_color_type) {
|
||||
this.pattern.iconColor = '#aaa'
|
||||
this.pattern.buttonColor = '#fff'
|
||||
} else {
|
||||
this.pattern.iconColor = '#fff'
|
||||
this.pattern.buttonColor = '#007AFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.warp {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=fab)
|
||||
- [Local Example](examples/uni-ui/uni-fab.vue)
|
||||
@@ -0,0 +1,204 @@
|
||||
# uni-fav
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-fav
|
||||
|
||||
代码块： uFav
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-fav />`（或 `<uni-fav></uni-fav>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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: '已收藏'} | 收藏按钮文字 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击 fav按钮 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-fav.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-fav :checked="checked" @click="onClick"/>
|
||||
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-fav :checked="checked" @click="onClick"/>
|
||||
<uni-fav :checked="checked" class="favBtn" circle="true" bgColor="#dd524d" bgColorChecked="#007aff" @click="onClick"/>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">用于收藏功能，可点击切换选中、不选中的状态。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[0]" class="favBtn" @click="favClick(0)" />
|
||||
<uni-fav :checked="checkList[1]" :star="false" class="favBtn" @click="favClick(1)" />
|
||||
<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#dd524d"
|
||||
bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
|
||||
<uni-fav :checked="checkList[3]" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
|
||||
fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义文字" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="在自定义导航栏使用" type="line">
|
||||
<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333"
|
||||
background-color="#FFFFFF">
|
||||
<template v-slot:right>
|
||||
<uni-fav :checked="checkList[5]" :circle="true" @click="favClick(5)" />
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</uni-section>
|
||||
<view class="example-body example-body-fullWidth">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">用于收藏功能，可点击切换选中、不选中的状态。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[0]" class="favBtn" @click="favClick(0)" />
|
||||
<uni-fav :checked="checkList[1]" :star="false" class="favBtn" @click="favClick(1)" />
|
||||
<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#dd524d"
|
||||
bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick(2)" />
|
||||
<uni-fav :checked="checkList[3]" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
|
||||
fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义文字" type="line">
|
||||
<view class="example-body">
|
||||
<uni-fav :checked="checkList[4]" :content-text="contentText" @click="favClick(4)" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="在自定义导航栏使用" type="line">
|
||||
<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333"
|
||||
background-color="#FFFFFF">
|
||||
<template v-slot:right>
|
||||
<uni-fav :checked="checkList[5]" :circle="true" @click="favClick(5)" />
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
</uni-section>
|
||||
<view class="example-body example-body-fullWidth">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
checkList: [false, false, false, false, false, false],
|
||||
contentText: {
|
||||
contentDefault: '追番',
|
||||
contentFav: '已追番'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
favClick(index) {
|
||||
this.checkList[index] = !this.checkList[index]
|
||||
console.log(this.checkList[index]);
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.uni-fav {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
|
||||
.favBtn {
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
}
|
||||
|
||||
|
||||
.example-body-fullWidth {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.example-body-first {
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.favBtn-nav {
|
||||
// left:-50rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-fav.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=fav)
|
||||
- [Local Example](examples/uni-ui/uni-fav.vue)
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni-file-picker
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-file-picker
|
||||
|
||||
代码块： uFilePicker
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-file-picker />`（或 `<uni-file-picker></uni-file-picker>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | - | 是否自动上传，值为 false 则只触发@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 时的样式 |
|
||||
| sizeType | Array | ['original', 'compressed'] | 'original', 'compressed' | original 原图，compressed 压缩图，默认二者都有 |
|
||||
| sourceType | Array | ['album', 'camera'] | 'album', 'camera' | album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 |
|
||||
| dir | String | "/" | - | 需要上传到的文件夹，默认为 "/" ,即上传到根目录 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @select | 选择文件后触发 | 见下文 |
|
||||
| @progress | 文件上传时触发 | 见下文 |
|
||||
| @success | 上传成功触发 | 见下文 |
|
||||
| @fail | 上传失败触发 | 见下文 |
|
||||
| @delete | 文件从列表移除时触发 | 见下文 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-file-picker
|
||||
v-model="imageValue"
|
||||
fileMediatype="image"
|
||||
mode="grid"
|
||||
@select="select"
|
||||
@progress="progress"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
/>
|
||||
<script>
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-file-picker
|
||||
v-model="imageValue"
|
||||
fileMediatype="image"
|
||||
mode="grid"
|
||||
@select="select"
|
||||
@progress="progress"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
/>
|
||||
<script>
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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"
|
||||
/>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-file-picker ref="files" :auto-upload="false"/>
|
||||
<button @click="upload">上传文件</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
methods:{
|
||||
upload(){
|
||||
this.$refs.files.upload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-file-picker ref="files" :auto-upload="false"/>
|
||||
<button @click="upload">上传文件</button>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {},
|
||||
methods:{
|
||||
upload(){
|
||||
this.$refs.files.upload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=file-picker)
|
||||
- [Local Example](examples/uni-ui/uni-file-picker.vue)
|
||||
@@ -0,0 +1,139 @@
|
||||
# uni-forms
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-forms
|
||||
|
||||
代码块： uForms 、 uni-forms-item 关联组件： uni-forms-item 、 uni-easyinput 、 uni-data-checkbox 、 uni-group 。
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-forms />`（或 `<uni-forms></uni-forms>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| required | Boolean | - | - | 是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置 uni-forms-item 组件的的required为true |
|
||||
| range | Array | - | - | 数组至少要有一个元素，且数组内的每一个元素都是唯一的。 |
|
||||
| format | String | - | - | 内置校验规则，如这些规则无法满足需求，可以使用正则匹配或者自定义规则 |
|
||||
| pattern | RegExp | - | - | 正则表达式，注意事项见下方说明 |
|
||||
| maximum | Number | - | - | 校验最大值(大于) |
|
||||
| minimum | Number | - | - | 校验最小值(小于) |
|
||||
| maxLength | Number | - | - | 校验数据最大长度 |
|
||||
| errorMessage | String | - | - | 校验失败提示信息语，可添加属性占位符，当前表格内属性都可用作占位符 |
|
||||
| validateFunction | Function | - | - | 自定义校验规则 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 |
|
||||
| --- | --- |
|
||||
| @validate | 任意表单项被校验后触发，返回表单校验信息 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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 label="年龄" name="age">
|
||||
<input type="text" v-model="formData.age" 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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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 label="年龄" name="age">
|
||||
<input type="text" v-model="formData.age" 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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<!-- rules 内容详见下方完整示例 -->
|
||||
<uni-forms ref="form" :rules="rules">
|
||||
...
|
||||
</uni-forms>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<!-- rules 内容详见下方完整示例 -->
|
||||
<uni-forms ref="form" :rules="rules">
|
||||
...
|
||||
</uni-forms>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-forms.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=forms)
|
||||
- [Local Example](examples/uni-ui/uni-forms.vue)
|
||||
@@ -0,0 +1,296 @@
|
||||
# uni-goods-nav
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-goods-nav
|
||||
|
||||
代码块： uGoodsNav
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-goods-nav />`（或 `<uni-goods-nav></uni-goods-nav>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| options | Array | - | 组件参数 |
|
||||
| buttonGroup | Array | - | 组件按钮组参数 |
|
||||
| fill | Boolean | false | 按钮是否平铺 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 左侧点击事件 | e = {index,content} |
|
||||
| @buttonClick | 右侧按钮组点击事件 | e = {index,content} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
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++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
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++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line">
|
||||
<uni-goods-nav @click="onClick" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义用法" type="line">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
|
||||
@buttonClick="buttonClick" style="margin-top: 20px;" />
|
||||
</uni-section>
|
||||
<view class="goods-carts">
|
||||
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line">
|
||||
<uni-goods-nav @click="onClick" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义用法" type="line">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
|
||||
@buttonClick="buttonClick" style="margin-top: 20px;" />
|
||||
</uni-section>
|
||||
<view class="goods-carts">
|
||||
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
icon: 'chat',
|
||||
text: '客服'
|
||||
}, {
|
||||
icon: 'shop',
|
||||
text: '店铺',
|
||||
info: 2,
|
||||
infoBackgroundColor: '#007aff',
|
||||
infoColor: "#f5f5f5"
|
||||
}, {
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 2
|
||||
}],
|
||||
buttonGroup: [{
|
||||
text: '加入购物车',
|
||||
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup: [{
|
||||
text: '加入购物车',
|
||||
backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup1: [{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
uni.showToast({
|
||||
title: `点击${e.content.text}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
buttonClick(e) {
|
||||
console.log(e)
|
||||
this.options[2].info++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
padding: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.goods-carts {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifdef H5 */
|
||||
left: var(--window-left);
|
||||
right: var(--window-right);
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=goods-nav)
|
||||
- [Local Example](examples/uni-ui/uni-goods-nav.vue)
|
||||
@@ -0,0 +1,383 @@
|
||||
# uni-grid
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-grid
|
||||
|
||||
代码块： uGrid
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-grid />`（或 `<uni-grid></uni-grid>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| column | Number | 3 | 每列显示个数 |
|
||||
| borderColor | String | #d0dee5 | 边框颜色 |
|
||||
| showBorder | Boolean | true | 是否显示边框 |
|
||||
| square | Boolean | true | 是否方形显示 |
|
||||
| highlight | Boolean | true | 点击背景是否高亮 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 点击 grid 触发 | e={detail:{index:0}}，index 为当前点击 grid下标 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="warp">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础样式" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="自定义列数" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="滑动视图" type="line" padding>
|
||||
<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
|
||||
<swiper class="swiper" :indicator-dots="true">
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-section>
|
||||
<uni-section title="动态加载" type="line" padding>
|
||||
<view class="grid-dynamic-box">
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
|
||||
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
<button type="primary" @click="add">点击添加一个宫格</button>
|
||||
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
|
||||
@click="del">点击删除一个宫格</button>
|
||||
</uni-section>
|
||||
<uni-section title="无边框带角标（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
|
||||
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" :src="item.url" mode="aspectFill" />
|
||||
<text class="text">{{item.text}}</text>
|
||||
<view v-if="item.badge" class="grid-dot">
|
||||
<uni-badge :text="item.badge" :type="item.type" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="矩形宫格（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="边框颜色（4列 无文字）" type="line" padding>
|
||||
<uni-grid :column="4" border-color="#03a9f4" @change="change">
|
||||
<uni-grid-item :index="0">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c1.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="1">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c2.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="2">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c3.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="3">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c4.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="warp">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">宫格组件主要使用场景如：商品推荐列表、热门内容等</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础样式" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="自定义列数" type="line" padding>
|
||||
<uni-grid :column="4" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
|
||||
<view class="grid-item-box" style="background-color: #fff;">
|
||||
<uni-icons type="image" :size="30" color="#777" />
|
||||
<text class="text">文本信息</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="滑动视图" type="line" padding>
|
||||
<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
|
||||
<swiper class="swiper" :indicator-dots="true">
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-section>
|
||||
<uni-section title="动态加载" type="line" padding>
|
||||
<view class="grid-dynamic-box">
|
||||
<uni-grid :column="3" :highlight="true" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in dynamicList" :index="index" :key="index">
|
||||
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
<button type="primary" @click="add">点击添加一个宫格</button>
|
||||
<button v-if="dynamicList.length !== 0" type="primary" style="margin-top: 15px;"
|
||||
@click="del">点击删除一个宫格</button>
|
||||
</uni-section>
|
||||
<uni-section title="无边框带角标（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
|
||||
<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" :src="item.url" mode="aspectFill" />
|
||||
<text class="text">{{item.text}}</text>
|
||||
<view v-if="item.badge" class="grid-dot">
|
||||
<uni-badge :text="item.badge" :type="item.type" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="矩形宫格（3列）" type="line" padding>
|
||||
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
|
||||
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
||||
<view class="grid-item-box">
|
||||
<image :src="item.url" class="image" mode="aspectFill" />
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
<uni-section title="边框颜色（4列 无文字）" type="line" padding>
|
||||
<uni-grid :column="4" border-color="#03a9f4" @change="change">
|
||||
<uni-grid-item :index="0">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c1.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="1">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c2.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="2">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c3.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item :index="3">
|
||||
<view class="grid-item-box">
|
||||
<image class="image" src="/static/c4.png" mode="aspectFill" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=grid)
|
||||
- [Local Example](examples/uni-ui/uni-grid.vue)
|
||||
@@ -0,0 +1,149 @@
|
||||
# uni-group
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-group
|
||||
|
||||
代码块： uGroup
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-group />`（或 `<uni-group></uni-group>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 主标题 |
|
||||
| top | Number | - | 分组间隔 |
|
||||
| mode | String | '' | 模式 ，card 为卡片模式 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-group.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-group.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础分组" type="line">
|
||||
<uni-group>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
<uni-group title="基本模式" margin-top="20">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
<uni-section title="卡片分组" type="line">
|
||||
<uni-group mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
|
||||
<uni-group title="card 模式" mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">分组组件可用于将组件分组，添加间隔，以产生明显的区块。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础分组" type="line">
|
||||
<uni-group>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
<uni-group title="基本模式" margin-top="20">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
<uni-section title="卡片分组" type="line">
|
||||
<uni-group mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
|
||||
<uni-group title="card 模式" mode="card">
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
<view> 分组内容 </view>
|
||||
</uni-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-group.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=group)
|
||||
- [Local Example](examples/uni-ui/uni-group.vue)
|
||||
@@ -0,0 +1,83 @@
|
||||
# uni-icons
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-icons（已支持 uni-app x）
|
||||
|
||||
代码块： uIcons
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-icons />`（或 `<uni-icons></uni-icons>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| size | Number | 24 | 图标大小 |
|
||||
| type | String | - | 图标图案，参考示例 |
|
||||
| color | String | - | 图标颜色 |
|
||||
| customPrefix [即将废弃] | String | - | 自定义图标 |
|
||||
| fontFamily | String | - | 自定义图标 2.0.0+支持 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Icon 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-icons type="contact" size="30"></uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
@font-face {
|
||||
font-family: CustomFont;
|
||||
src: url('./iconfont.ttf');
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```vue
|
||||
@font-face {
|
||||
font-family: CustomFont;
|
||||
src: url('./iconfont.ttf');
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=icons)
|
||||
- [Local Example](examples/uni-ui/uni-icons.vue)
|
||||
@@ -0,0 +1,116 @@
|
||||
# uni-indexed-list
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-indexed-list
|
||||
|
||||
代码块： uIndexedList
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-indexed-list />`（或 `<uni-indexed-list></uni-indexed-list>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| options | Object | - | 索引列表需要的数据对象 |
|
||||
| showSelect | Boolean | false | 展示模式，true 为展示默认，false 为选择模式，默认为 false |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击列表事件 ，返回当前选择项的事件对象 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-indexed-list.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
[{
|
||||
"letter": "A",
|
||||
"data": [
|
||||
"阿克苏机场",
|
||||
"阿拉山口机场",
|
||||
"阿勒泰机场",
|
||||
"阿里昆莎机场",
|
||||
"安庆天柱山机场",
|
||||
"澳门国际机场"
|
||||
]
|
||||
}, {
|
||||
"letter": "B",
|
||||
"data": [
|
||||
"保山机场",
|
||||
"包头机场",
|
||||
"北海福成机场",
|
||||
"北京南苑机场",
|
||||
"北京首都国际机场"
|
||||
]
|
||||
}]
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
[{
|
||||
"letter": "A",
|
||||
"data": [
|
||||
"阿克苏机场",
|
||||
"阿拉山口机场",
|
||||
"阿勒泰机场",
|
||||
"阿里昆莎机场",
|
||||
"安庆天柱山机场",
|
||||
"澳门国际机场"
|
||||
]
|
||||
}, {
|
||||
"letter": "B",
|
||||
"data": [
|
||||
"保山机场",
|
||||
"包头机场",
|
||||
"北海福成机场",
|
||||
"北京南苑机场",
|
||||
"北京首都国际机场"
|
||||
]
|
||||
}]
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-indexed-list.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=indexed-list)
|
||||
- [Local Example](examples/uni-ui/uni-indexed-list.vue)
|
||||
@@ -0,0 +1,113 @@
|
||||
# uni-link
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-link
|
||||
|
||||
代码块： uLink
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-link />`（或 `<uni-link></uni-link>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| href | String | - | 链接地址 |
|
||||
| text | String | - | 显示文字 |
|
||||
| download | String | - | H5平台下载文件名 |
|
||||
| showUnderLine | Boolean | true | 是否显示下划线 |
|
||||
| copyTips | String | 已自动复制网址，请在手机浏览器里粘贴该网址 | 在小程序端复制链接时的提示语 |
|
||||
| color | String | #999999 | 链接文字颜色 |
|
||||
| fontSize | String | 14 | 链接文字大小，单位px |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-link.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-link.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义下划线" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
|
||||
</uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义字体大小" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
font-size="20"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义插槽" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
color="red">点击跳转</uni-link>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本示例" subTitle="打开外部连接" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义颜色" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" color="#007BFF"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义下划线" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false">
|
||||
</uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义字体大小" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
font-size="20"></uni-link>
|
||||
</uni-section>
|
||||
<uni-section title="自定义插槽" type="line" padding>
|
||||
<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
|
||||
color="red">点击跳转</uni-link>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-link.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=link)
|
||||
- [Local Example](examples/uni-ui/uni-link.vue)
|
||||
@@ -0,0 +1,92 @@
|
||||
# uni-list
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-list
|
||||
|
||||
代码块： uList 、 uListItem 关联组件： uni-list-item 、 uni-badge 、 uni-icons 、 uni-list-chat
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-list />`（或 `<uni-list></uni-list>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| border | Boolean | true | 是否显示边框 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击 uniListItem 触发事件，需开启点击反馈 | - |
|
||||
| switchChange | 点击切换 Switch 时触发，需显示 switch | e={value:checked} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-list.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" ></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||
</uni-list>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-list>
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-list>
|
||||
<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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-list.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=list)
|
||||
- [Local Example](examples/uni-ui/uni-list.vue)
|
||||
@@ -0,0 +1,217 @@
|
||||
# uni-load-more
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-load-more
|
||||
|
||||
代码块： uLoadMore
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-load-more />`（或 `<uni-load-more></uni-load-more>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| iconSize | Number | - | 24 | 指定图标大小 |
|
||||
| status | String | more/loading/noMore | more | loading 的状态 |
|
||||
| showIcon | Boolean | - | true | 是否显示 loading 图标 |
|
||||
| showText | Boolean | - | true | **[1.3.3新增]**是否显示文本 |
|
||||
| iconType | String | snow/circle/auto | auto | 指定图标样式 |
|
||||
| color | String | - | #777777 | 图标和文字颜色 |
|
||||
| contentText | Object | - | {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"} | 各状态文字说明 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| clickLoadMore | 点击加载更多时触发 | e.detail={status:'loading'} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-load-more.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-load-more status="more"></uni-load-more>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-load-more status="more"></uni-load-more>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-load-more :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="修改默认文字" type="line">
|
||||
<uni-load-more :status="status" :content-text="contentText" />
|
||||
</uni-section>
|
||||
<uni-section title="改变颜色" type="line">
|
||||
<uni-load-more color="#007AFF" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
|
||||
<uni-load-more iconType="auto" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 环形" type="line">
|
||||
<uni-load-more iconType="circle" :status="status" />
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变组件状态" type="line">
|
||||
<radio-group class="uni-list" @change="onChange">
|
||||
<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-load-more :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="修改默认文字" type="line">
|
||||
<uni-load-more :status="status" :content-text="contentText" />
|
||||
</uni-section>
|
||||
<uni-section title="改变颜色" type="line">
|
||||
<uni-load-more color="#007AFF" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
|
||||
<uni-load-more iconType="auto" :status="status" />
|
||||
</uni-section>
|
||||
<uni-section title="指定加载图标样式 - 环形" type="line">
|
||||
<uni-load-more iconType="circle" :status="status" />
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变组件状态" type="line">
|
||||
<radio-group class="uni-list" @change="onChange">
|
||||
<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
status: 'more',
|
||||
statusTypes: [{
|
||||
value: 'more',
|
||||
text: '加载前',
|
||||
checked: true
|
||||
}, {
|
||||
value: 'loading',
|
||||
text: '加载中',
|
||||
checked: false
|
||||
}, {
|
||||
value: 'noMore',
|
||||
text: '没有更多',
|
||||
checked: false
|
||||
}],
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.status = e.detail.value
|
||||
},
|
||||
clickLoadMore(e) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: "当前状态：" + e.detail.status
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.uni-list-item {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-list-item__container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
padding: 12px 15px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-load-more.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=load-more)
|
||||
- [Local Example](examples/uni-ui/uni-load-more.vue)
|
||||
@@ -0,0 +1,90 @@
|
||||
# uni-nav-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-nav-bar
|
||||
|
||||
代码块： uNavBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-nav-bar />`（或 `<uni-nav-bar></uni-nav-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | String | - | 标题文字 |
|
||||
| leftText | String | - | 左侧按钮文本 |
|
||||
| rightText | String | - | 右侧按钮文本 |
|
||||
| leftIcon | String | - | 左侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
||||
| rightIcon | String | - | 右侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
||||
| color | String | #000000 | 图标和文字颜色 |
|
||||
| backgroundColor | String | #FFFFFF | 导航栏背景颜色 |
|
||||
| fixed | Boolean | false | 是否固定顶部 |
|
||||
| statusBar | Boolean | false | 是否包含状态栏 |
|
||||
| shadow | Boolean | false | 导航栏下是否有阴影 |
|
||||
| border | Boolean | true | 导航栏下是否有边框 |
|
||||
| height | Number/String | 44 | 导航栏高度 |
|
||||
| dark | Boolean | false | 导航栏开启暗黑模式 |
|
||||
| leftWidth | Number/String | 120rpx | 导航栏左侧插槽宽度 |
|
||||
| rightWidth | Number/String | 120rpx | 导航栏右侧插槽宽度 |
|
||||
| stat | Boolean | | 是否开启统计标题功能。 注意：只有使用 title 属性 ，且开启了统计功能才生效 |
|
||||
| showMenuButtonWidth | Boolean | false | 微信小程序是否开启胶囊避让功能，fixed:true 下生效。 注意：开启后会导致标题不在页面水平居中，如需使用右插槽请开启，不开启下，右侧插槽或者内容会被胶囊按钮覆盖 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @clickLeft | 左侧按钮点击时触发 | - |
|
||||
| @clickRight | 右侧按钮点击时触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=nav-bar)
|
||||
- [Local Example](examples/uni-ui/uni-nav-bar.vue)
|
||||
@@ -0,0 +1,87 @@
|
||||
# uni-notice-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-notice-bar
|
||||
|
||||
代码块： uNoticeBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-notice-bar />`（或 `<uni-notice-bar></uni-notice-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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为单行 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 NoticeBar 触发事件 | - |
|
||||
| @close | 关闭 NoticeBar 触发事件 | - |
|
||||
| @getmore | 点击”查看更多“时触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=notice-bar)
|
||||
- [Local Example](examples/uni-ui/uni-notice-bar.vue)
|
||||
@@ -0,0 +1,159 @@
|
||||
# uni-number-box
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-number-box
|
||||
|
||||
代码块： uNumberBox
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-number-box />`（或 `<uni-number-box></uni-number-box>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | Number | 0 | 输入框当前值 |
|
||||
| min | Number | 0 | 最小值 |
|
||||
| max | Number | 100 | 最大值 |
|
||||
| step | Number | 1 | 每次点击改变的间隔大小 |
|
||||
| disabled | Boolean | false | 是否为禁用状态 |
|
||||
| width | Number | 40 | 宽度（单位：px） |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名称 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 输入框值改变时触发的事件，参数为输入框当前的 value | - |
|
||||
| focus | 输入框聚焦时触发的事件，参数为 event 对象 | - |
|
||||
| blur | 输入框失焦时触发的事件，参数为 event 对象 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-number-box></uni-number-box>
|
||||
<uni-number-box v-model="vModelValue" ></uni-number-box>
|
||||
<uni-number-box :min="0" :max="9"></uni-number-box>
|
||||
<uni-number-box @change="bindChange"></uni-number-box>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-number-box></uni-number-box>
|
||||
<uni-number-box v-model="vModelValue" ></uni-number-box>
|
||||
<uni-number-box :min="0" :max="9"></uni-number-box>
|
||||
<uni-number-box @change="bindChange"></uni-number-box>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">数字输入框组件多用于购物车加减商品等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-number-box @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section :title="'使用v-model : '+ vModelValue" subTitle="使用 v-model 显示默认值" type="line" padding>
|
||||
<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding>
|
||||
<uni-number-box :min="2" :max="9" :value="555" />
|
||||
</uni-section>
|
||||
<uni-section title="设置步长（步长0.1)" subTitle="使用 step 属性设置步长" type="line" padding>
|
||||
<uni-number-box :value="1.1" :step="0.1" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义背景" type="line" subTitle="使用 background 属性设置自定义背景色" padding>
|
||||
<uni-number-box :value="50" background="#2979FF" color="#fff" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-number-box :disabled="true" />
|
||||
</uni-section>
|
||||
<uni-section :title="'获取输入的值 : '+ numberValue" type="line" padding>
|
||||
<uni-number-box :value="numberValue" @change="change" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">数字输入框组件多用于购物车加减商品等场景</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-number-box @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section :title="'使用v-model : '+ vModelValue" subTitle="使用 v-model 显示默认值" type="line" padding>
|
||||
<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
|
||||
</uni-section>
|
||||
<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding>
|
||||
<uni-number-box :min="2" :max="9" :value="555" />
|
||||
</uni-section>
|
||||
<uni-section title="设置步长（步长0.1)" subTitle="使用 step 属性设置步长" type="line" padding>
|
||||
<uni-number-box :value="1.1" :step="0.1" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义背景" type="line" subTitle="使用 background 属性设置自定义背景色" padding>
|
||||
<uni-number-box :value="50" background="#2979FF" color="#fff" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-number-box :disabled="true" />
|
||||
</uni-section>
|
||||
<uni-section :title="'获取输入的值 : '+ numberValue" type="line" padding>
|
||||
<uni-number-box :value="numberValue" @change="change" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
numberValue: 0,
|
||||
vModelValue: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(value) {
|
||||
this.numberValue = value
|
||||
},
|
||||
changeValue(value) {
|
||||
console.log('返回数值：', value);
|
||||
},
|
||||
blur(e) {
|
||||
console.log('blur:', e);
|
||||
},
|
||||
focus(e) {
|
||||
console.log('focus:', e);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-number-box.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=number-box)
|
||||
- [Local Example](examples/uni-ui/uni-number-box.vue)
|
||||
@@ -0,0 +1,198 @@
|
||||
# uni-pagination
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-pagination
|
||||
|
||||
代码块： uPagination
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-pagination />`（或 `<uni-pagination></uni-pagination>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| prevText | String | 上一页 | 左侧按钮文字 |
|
||||
| nextText | String | 下一页 | 右侧按钮文字 |
|
||||
| value/v-model | Number | 1 | 当前页 |
|
||||
| current | Number | 1 | 当前页, 优先级高于 value |
|
||||
| total | Number | 0 | 数据总量 |
|
||||
| pageSize | Number | 10 | 每页数据量 |
|
||||
| showIcon | Boolean | false | 是否以 icon 形式展示按钮 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @change | 点击页码按钮时触发 | e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-pagination.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-pagination title="标题文字" total="20"></uni-pagination>
|
||||
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-pagination title="标题文字" total="20"></uni-pagination>
|
||||
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分页器组件，用于展示页码、请求数据等</text>
|
||||
</uni-card>
|
||||
<uni-section title="默认样式" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改按钮文字" subTitle="使用 prev-text / next-text 属性修改按钮文字" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" prev-text="前一页" next-text="后一页" />
|
||||
</uni-section>
|
||||
<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
|
||||
<uni-pagination :show-icon="true" :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改数据长度" type="line" padding>
|
||||
<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="change" />
|
||||
<view class="btn-view">
|
||||
<view>
|
||||
<text class="example-info">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
|
||||
</view>
|
||||
<view class="btn-flex">
|
||||
<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
|
||||
:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
|
||||
<button class="button" type="default" @click="reset">重置数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">分页器组件，用于展示页码、请求数据等</text>
|
||||
</uni-card>
|
||||
<uni-section title="默认样式" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改按钮文字" subTitle="使用 prev-text / next-text 属性修改按钮文字" type="line" padding>
|
||||
<uni-pagination :total="50" title="标题文字" prev-text="前一页" next-text="后一页" />
|
||||
</uni-section>
|
||||
<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
|
||||
<uni-pagination :show-icon="true" :total="50" title="标题文字" />
|
||||
</uni-section>
|
||||
<uni-section title="修改数据长度" type="line" padding>
|
||||
<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="change" />
|
||||
<view class="btn-view">
|
||||
<view>
|
||||
<text class="example-info">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
|
||||
</view>
|
||||
<view class="btn-flex">
|
||||
<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
|
||||
:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
|
||||
<button class="button" type="default" @click="reset">重置数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
current: 3,
|
||||
total: 10,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.current = 5
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.total += 10
|
||||
},
|
||||
reset() {
|
||||
this.total = 0
|
||||
this.current = 1
|
||||
},
|
||||
change(e) {
|
||||
console.log(e)
|
||||
this.current = e.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 20px;
|
||||
width: 150px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-pagination.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=pagination)
|
||||
- [Local Example](examples/uni-ui/uni-pagination.vue)
|
||||
@@ -0,0 +1,115 @@
|
||||
# uni-popup
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-popup
|
||||
|
||||
代码块： uPopup 关联组件： uni-popup-dialog , uni-popup-message , uni-popup-share , uni-transition
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-popup />`（或 `<uni-popup></uni-popup>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| animation | Boolean | true | 是否开启动画 |
|
||||
| type | String | 'center' | 弹出方式 |
|
||||
| mask-click [即将废弃] | Boolean | true | 蒙版点击是否关闭弹窗 |
|
||||
| is-mask-click [1.7.4新增] | Boolean | true | 蒙版点击是否关闭弹窗 |
|
||||
| mask-background-color [1.7.4新增] | rgba | rgba(0,0,0,0.4) | 蒙版颜色，建议使用 rgba 颜色值 |
|
||||
| background-color | String | 'none' | 主窗口背景色 |
|
||||
| borderRadius | String | - | 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px" |
|
||||
| safe-area | Boolean | true | 是否适配底部安全区 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| change | 组件状态发生变化触发 | e={show: true｜false,type:当前模式} |
|
||||
| maskClick | 点击遮罩层触发 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
open(){
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods:{
|
||||
open(){
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('top')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<button @click="open">打开弹窗</button>
|
||||
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=popup)
|
||||
- [Local Example](examples/uni-ui/uni-popup.vue)
|
||||
@@ -0,0 +1,236 @@
|
||||
# uni-rate
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-rate
|
||||
|
||||
代码块： uRate 关联组件： uni-icons
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-rate />`（或 `<uni-rate></uni-rate>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| value/v-model | Number | 0 | 当前评分 |
|
||||
| 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 | 是否支持滑动手势 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @change | 改变 value 的值返回 | e = { value:number } |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-rate.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<!-- 需要在 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" />
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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" />
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('rate发生改变:' + JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('rate发生改变:' + JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-rate v-model="rateValue" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
|
||||
<uni-rate :touchable="false" :value="5" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
|
||||
<uni-rate size="18" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
|
||||
<uni-rate :max="10" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
|
||||
<uni-rate :value="4" margin="20" />
|
||||
</uni-section>
|
||||
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
</uni-section>
|
||||
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
</uni-section>
|
||||
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
</uni-section>
|
||||
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
|
||||
</uni-card>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-rate v-model="rateValue" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="不支持滑动手势选择评分" subTitle="设置 touchable 属性控制是否开启手势选择" type="line" padding>
|
||||
<uni-rate :touchable="false" :value="5" @change="onChange" />
|
||||
</uni-section>
|
||||
<uni-section title="设置尺寸大小" subTitle="设置 size 属性控制组件大小" type="line" padding>
|
||||
<uni-rate size="18" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置评分数" subTitle="设置 max 属性控制组件最大星星数量" type="line" padding>
|
||||
<uni-rate :max="10" :value="5" />
|
||||
</uni-section>
|
||||
<uni-section title="设置星星间隔" subTitle="设置 margin 属性控制星星间隔" type="line" padding>
|
||||
<uni-rate :value="4" margin="20" />
|
||||
</uni-section>
|
||||
<uni-section title="设置颜色" subTitle="使用 color 属性设置星星颜色" type="line" padding>
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
</uni-section>
|
||||
<uni-section title="半星" subTitle="使用 allow-half 属性设置是否显示半星" type="line" padding>
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
</uni-section>
|
||||
<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
</uni-section>
|
||||
<uni-section title="禁用状态" subTitle="使用 disabled 属性设置组件禁用" type="line" padding>
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
</uni-section>
|
||||
<uni-section title="未选中的星星为镂空状态" subTitle="使用 is-fill 属性设置星星镂空" type="line" padding>
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-rate.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=rate)
|
||||
- [Local Example](examples/uni-ui/uni-rate.vue)
|
||||
@@ -0,0 +1,161 @@
|
||||
# uni-row
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名 uni-row、uni-col
|
||||
|
||||
代码块： uRow 、 uCol
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-row />`（或 `<uni-row></uni-row>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| gutter | Number | - | 0 | 否 | 栅格间隔 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-row.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-row.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-row.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=row)
|
||||
- [Local Example](examples/uni-ui/uni-row.vue)
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni-search-bar
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-search-bar
|
||||
|
||||
代码块： uSearchBar
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-search-bar />`（或 `<uni-search-bar></uni-search-bar>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 | 输入框背景颜色 |
|
||||
| textColor | String | #F8F8F8 | 输入时文字颜色 |
|
||||
| maxlength | Number | 100 | 输入最大长度 |
|
||||
| focus | Boolean | false | |
|
||||
|
||||
#### 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} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<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"></uni-search-bar>
|
||||
|
||||
<!-- 自定义Placeholder -->
|
||||
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
|
||||
|
||||
<!-- 设置圆角 -->
|
||||
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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"></uni-search-bar>
|
||||
|
||||
<!-- 自定义Placeholder -->
|
||||
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
|
||||
|
||||
<!-- 设置圆角 -->
|
||||
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<!-- 替换组件的搜索图标 -->
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<template v-slot:searchIcon>
|
||||
<uni-icons color="#999999" size="18" type="home" />
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
|
||||
<!-- 替换组件的清除图标 -->
|
||||
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
|
||||
<template v-slot:clearIcon>
|
||||
<view style="color: #999999" >X</view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<!-- 替换组件的搜索图标 -->
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<template v-slot:searchIcon>
|
||||
<uni-icons color="#999999" size="18" type="home" />
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
|
||||
<!-- 替换组件的清除图标 -->
|
||||
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
|
||||
<template v-slot:clearIcon>
|
||||
<view style="color: #999999" >X</view>
|
||||
</template>
|
||||
</uni-search-bar>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">搜索栏组件，通常用于搜索商品、文章等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
|
||||
@cancel="cancel" @clear="clear">
|
||||
</uni-search-bar>
|
||||
<view class="search-result">
|
||||
<text class="search-result-text">当前输入为：{{ searchValue }}</text>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
|
||||
<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义icon" type="line">
|
||||
<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-section>
|
||||
<uni-section title="控制清除/取消按钮" subTitle="使用 clearButton 属性设置清除按钮" type="line">
|
||||
<uni-search-bar radius="5" placeholder="一直显示" clearButton="always" cancelButton="always" @confirm="search"
|
||||
@cancel="cancel" />
|
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" />
|
||||
<uni-search-bar class="uni-mt-10" radius="100" placeholder="一直不显示" clearButton="none" cancelButton="none" @confirm="search" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">搜索栏组件，通常用于搜索商品、文章等。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="基本用法" type="line">
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
|
||||
@cancel="cancel" @clear="clear">
|
||||
</uni-search-bar>
|
||||
<view class="search-result">
|
||||
<text class="search-result-text">当前输入为：{{ searchValue }}</text>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
|
||||
<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义icon" type="line">
|
||||
<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-section>
|
||||
<uni-section title="控制清除/取消按钮" subTitle="使用 clearButton 属性设置清除按钮" type="line">
|
||||
<uni-search-bar radius="5" placeholder="一直显示" clearButton="always" cancelButton="always" @confirm="search"
|
||||
@cancel="cancel" />
|
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" />
|
||||
<uni-search-bar class="uni-mt-10" radius="100" placeholder="一直不显示" clearButton="none" cancelButton="none" @confirm="search" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=search-bar)
|
||||
- [Local Example](examples/uni-ui/uni-search-bar.vue)
|
||||
@@ -0,0 +1,220 @@
|
||||
# uni-section
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-section
|
||||
|
||||
代码块： uSection
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-section />`（或 `<uni-section></uni-section>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | - | 装饰类型，可选值：line（竖线）、circle（圆形）、square（方形） |
|
||||
| title | String | - | 主标题 |
|
||||
| titleFontSize | String | 14px | 主标题字体大小 |
|
||||
| titleColor | String | #333 | 主标题字体颜色 |
|
||||
| subTitle | String | - | 副标题 |
|
||||
| subTitleFontSize | String | 12px | 副标题字体大小 |
|
||||
| subTitleColor | String | #999 | 副标题字体颜色 |
|
||||
| padding | Boolean/String | false | 默认插槽容器的 padding 值，传入类型为 Boolean 时，设置为 10px 或 0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 事件说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Section 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-section.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题">默认插槽内容</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题">默认插槽内容</uni-section>
|
||||
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-wrap">
|
||||
<view class="example-info">
|
||||
<text class="example-info-text"> uni-section 组件主要用于文章、列表详情等标题展示 </text>
|
||||
</view>
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-success: #18bc37 !default;
|
||||
|
||||
.uni-wrap {
|
||||
flex-direction: column;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 44px);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $uni-success;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-wrap">
|
||||
<view class="example-info">
|
||||
<text class="example-info-text"> uni-section 组件主要用于文章、列表详情等标题展示 </text>
|
||||
</view>
|
||||
<uni-section class="mb-10" title="基础用法" sub-title="副标题"></uni-section>
|
||||
<uni-section class="mb-10" title="竖线装饰" sub-title="副标题" type="line"></uni-section>
|
||||
<uni-section class="mb-10" title="装饰器插槽" sub-title="副标题">
|
||||
<template v-slot:decoration>
|
||||
<view class="decoration"></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="默认插槽" sub-title="副标题" padding="0 0 5px 10px">默认插槽内容</uni-section>
|
||||
<uni-section class="mb-10" title="主标题">
|
||||
<template v-slot:right>
|
||||
right slot
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-success: #18bc37 !default;
|
||||
|
||||
.uni-wrap {
|
||||
flex-direction: column;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 44px);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: $uni-success;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-section.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=section)
|
||||
- [Local Example](examples/uni-ui/uni-section.vue)
|
||||
@@ -0,0 +1,359 @@
|
||||
# uni-segmented-control
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-segmented-control
|
||||
|
||||
代码块： uSegmentedControl
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-segmented-control />`（或 `<uni-segmented-control></uni-segmented-control>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| current | Number | 0 | 当前选中的tab索引值，从0计数 |
|
||||
| styleType | String | button | 分段器样式类型，可选值：button（按钮类型），text（文字类型） |
|
||||
| activeColor | String | #007aff | 选中的标签背景色与边框颜色 |
|
||||
| inActiveColor | String | transparent | 未激活时的颜色 |
|
||||
| values | Array | - | 选项数组 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @clickItem | 组件触发点击事件时触发 | e={currentIndex} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-segmented-control.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
...
|
||||
items: ['选项1', '选项2', '选项3'],
|
||||
current: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
...
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
...
|
||||
items: ['选项1', '选项2', '选项3'],
|
||||
current: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
...
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
||||
:active-color="activeColor" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
|
||||
<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
|
||||
<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="Style" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="styleChange">
|
||||
<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<uni-section title="Color" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="colorChange">
|
||||
<view v-for="(item, index) in colors" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<view :style="{ backgroundColor: item }" class="color-tag" />
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item" :checked="index === colorIndex" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line">
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
|
||||
:active-color="activeColor" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
|
||||
<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
|
||||
<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="Style" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="styleChange">
|
||||
<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<text class="uni-list-item__content-title">{{ item.text }}</text>
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
<uni-section title="Color" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<radio-group class="uni-list" @change="colorChange">
|
||||
<view v-for="(item, index) in colors" :key="index" class="uni-list-item">
|
||||
<view class="uni-list-item__container">
|
||||
<view class="uni-list-item__content">
|
||||
<view :style="{ backgroundColor: item }" class="color-tag" />
|
||||
</view>
|
||||
<view class="uni-list-item__extra">
|
||||
<radio :value="item" :checked="index === colorIndex" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
items: ['选项卡1', '选项卡2', '选项卡3'],
|
||||
styles: [{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#007aff', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#007aff',
|
||||
styleType: 'button'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickItem(e) {
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex
|
||||
}
|
||||
},
|
||||
styleChange(e) {
|
||||
if (this.styleType !== e.detail.value) {
|
||||
this.styleType = e.detail.value
|
||||
}
|
||||
},
|
||||
colorChange(e) {
|
||||
if (this.styleType !== e.detail.value) {
|
||||
console.log(e.detail.value);
|
||||
this.activeColor = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-common-mt {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
// width: 750rpx;
|
||||
padding: 0px 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.uni-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-list-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.uni-list-item__container {
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-segmented-control.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=segmented-control)
|
||||
- [Local Example](examples/uni-ui/uni-segmented-control.vue)
|
||||
@@ -0,0 +1,174 @@
|
||||
# uni-steps
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-steps
|
||||
|
||||
代码块： uSteps
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-steps />`（或 `<uni-steps></uni-steps>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Number | - | 0 | 当前步骤 |
|
||||
| direction | String | row/column | row | 排列方向 |
|
||||
| active-color | String | - | #1aad19 | 选中状态的颜色 |
|
||||
| options | Array | - | - | 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}] |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<!-- 基本用法 -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-steps :options="list1" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="checkbox" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="medal" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="纵向排列" type="line" padding>
|
||||
<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
|
||||
</uni-section>
|
||||
<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<uni-section title="基本用法" type="line" padding>
|
||||
<uni-steps :options="list1" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="checkbox" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义图标" type="line" padding>
|
||||
<uni-steps :options="list1" active-icon="medal" :active="active" />
|
||||
</uni-section>
|
||||
<uni-section title="纵向排列" type="line" padding>
|
||||
<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
|
||||
</uni-section>
|
||||
<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
list1: [{
|
||||
title: '事件一'
|
||||
}, {
|
||||
title: '事件二'
|
||||
}, {
|
||||
title: '事件三'
|
||||
}, {
|
||||
title: '事件四'
|
||||
}],
|
||||
list2: [{
|
||||
title: '买家下单',
|
||||
desc: '2018-11-11'
|
||||
}, {
|
||||
title: '卖家发货',
|
||||
desc: '2018-11-12'
|
||||
}, {
|
||||
title: '买家签收',
|
||||
desc: '2018-11-13'
|
||||
}, {
|
||||
title: '交易完成',
|
||||
desc: '2018-11-14'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
if (this.active < this.list1.length - 1) {
|
||||
this.active += 1
|
||||
} else {
|
||||
this.active = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
.status-btn {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 92rpx;
|
||||
margin: 30rpx;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
padding: 15px;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-steps.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=steps)
|
||||
- [Local Example](examples/uni-ui/uni-steps.vue)
|
||||
@@ -0,0 +1,239 @@
|
||||
# uni-swipe-action
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-swipe-action
|
||||
|
||||
代码块： uSwipeAction 、 uSwipeActionItem
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-swipe-action />`（或 `<uni-swipe-action></uni-swipe-action>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| 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 | - | - | 否 | 右侧选项内容及样式 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击选项按钮时触发事件 | e = {content,index} ，content（点击内容）、index（下标）、position (位置信息) |
|
||||
| @change | 组件打开或关闭时触发 | left:左侧 ，right：右侧，none：关闭 |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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="onClick" @change="swipeChange($event, 0)">
|
||||
<view>item1</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 1)">
|
||||
<view>item2</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 2)">
|
||||
<view>item3</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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="onClick" @change="swipeChange($event, 0)">
|
||||
<view>item1</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 1)">
|
||||
<view>item2</view>
|
||||
</uni-swipe-action-item>
|
||||
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 2)">
|
||||
<view>item3</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
}, {
|
||||
text: '确认',
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
|
||||
},
|
||||
change(event) {
|
||||
console.log('改变事件', event);
|
||||
},
|
||||
swipeChange(e, index) {
|
||||
console.log('当前状态：' + e + '，下标：' + index)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```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 + '按钮')
|
||||
},
|
||||
change(event) {
|
||||
console.log('改变事件', event);
|
||||
},
|
||||
swipeChange(e, index) {
|
||||
console.log('当前状态：' + e + '，下标：' + index)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
{
|
||||
"path": "swipe-action/swipe-action",
|
||||
"style": {
|
||||
"navigationBarTitleText": "SwipeAction 滑动操作",
|
||||
"disableScroll":true,
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```javascript
|
||||
{
|
||||
"path": "swipe-action/swipe-action",
|
||||
"style": {
|
||||
"navigationBarTitleText": "SwipeAction 滑动操作",
|
||||
"disableScroll":true,
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=swipe-action)
|
||||
- [Local Example](examples/uni-ui/uni-swipe-action.vue)
|
||||
@@ -0,0 +1,231 @@
|
||||
# uni-swiper-dot
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-swiper-dot
|
||||
|
||||
代码块： uSwiperDot
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-swiper-dot />`（或 `<uni-swiper-dot></uni-swiper-dot>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 | - | 指示点样式 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}, {
|
||||
content: '内容 B'
|
||||
}, {
|
||||
content: '内容 C'
|
||||
}],
|
||||
current: 0,
|
||||
mode: 'round',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}, {
|
||||
content: '内容 B'
|
||||
}, {
|
||||
content: '内容 C'
|
||||
}],
|
||||
current: 0,
|
||||
mode: 'round',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
|
||||
:dots-styles="dotsStyles" field="content">
|
||||
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="swiper-item" :class="'swiper-item' + index">
|
||||
<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<uni-section title="模式选择" type="line">
|
||||
<view class="example-body">
|
||||
<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
|
||||
<text class="example-body-item-text">default</text></view>
|
||||
<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
|
||||
class="example-body-item-text">dot</text></view>
|
||||
<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
|
||||
<text class="example-body-item-text">round</text></view>
|
||||
<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
|
||||
class="example-body-item-text">nav</text></view>
|
||||
<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
|
||||
<text class="example-body-item-text">indexes</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="颜色样式选择" type="line">
|
||||
<view class="example-body">
|
||||
<template v-if="mode !== 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
class="example-body-item" @click="selectStyle(index)">
|
||||
<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="mode === 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
|
||||
@click="selectStyle(index)">
|
||||
<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
|
||||
:dots-styles="dotsStyles" field="content">
|
||||
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(item, index) in 3" :key="index">
|
||||
<view class="swiper-item" :class="'swiper-item' + index">
|
||||
<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<uni-section title="模式选择" type="line">
|
||||
<view class="example-body">
|
||||
<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
|
||||
<text class="example-body-item-text">default</text></view>
|
||||
<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
|
||||
class="example-body-item-text">dot</text></view>
|
||||
<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
|
||||
<text class="example-body-item-text">round</text></view>
|
||||
<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
|
||||
class="example-body-item-text">nav</text></view>
|
||||
<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
|
||||
<text class="example-body-item-text">indexes</text></view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="颜色样式选择" type="line">
|
||||
<view class="example-body">
|
||||
<template v-if="mode !== 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
class="example-body-item" @click="selectStyle(index)">
|
||||
<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
|
||||
class="example-body-dots" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="mode === 'nav'">
|
||||
<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
|
||||
:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
|
||||
@click="selectStyle(index)">
|
||||
<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=swiper-dot)
|
||||
- [Local Example](examples/uni-ui/uni-swiper-dot.vue)
|
||||
@@ -0,0 +1,195 @@
|
||||
# uni-table
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-table
|
||||
|
||||
代码块： uTable
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-table />`（或 `<uni-table></uni-table>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| border | Boolean | false | - | 是否带有纵向边框 |
|
||||
| stripe | Boolean | false | - | 是否显示斑马线样式 |
|
||||
| type | String | '' | - | 值为type="selection" 时开启多选 |
|
||||
| emptyText | String | 没有更多数据 | - | 空数据时显示的文本内容 |
|
||||
| loading | Boolean | false | - | 显示加载中 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回参数 |
|
||||
| --- | --- | --- |
|
||||
| selection-change | 开启多选时，当选择项发生变化时会触发该事件 | Function(Object) |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-table.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
e = {
|
||||
filterType: "", //筛选类型 search/select/range 和传入的相同
|
||||
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
e = {
|
||||
filterType: "", //筛选类型 search/select/range 和传入的相同
|
||||
filter: "" // 值, filterType=search字符串类型，filterType=select数组类型，filterType=range数组类型，[0]开始值， [1]结束值
|
||||
}
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-container">
|
||||
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
|
||||
<uni-tr>
|
||||
<uni-th width="150" align="center">日期</uni-th>
|
||||
<uni-th width="150" align="center">姓名</uni-th>
|
||||
<uni-th align="center">地址</uni-th>
|
||||
<uni-th width="204" align="center">设置</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData" :key="index">
|
||||
<uni-td>{{ item.date }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</uni-td>
|
||||
<uni-td align="center">{{ item.address }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="uni-group">
|
||||
<button class="uni-button" size="mini" type="primary">修改</button>
|
||||
<button class="uni-button" size="mini" type="warn">删除</button>
|
||||
</view>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="uni-container">
|
||||
<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
|
||||
<uni-tr>
|
||||
<uni-th width="150" align="center">日期</uni-th>
|
||||
<uni-th width="150" align="center">姓名</uni-th>
|
||||
<uni-th align="center">地址</uni-th>
|
||||
<uni-th width="204" align="center">设置</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in tableData" :key="index">
|
||||
<uni-td>{{ item.date }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</uni-td>
|
||||
<uni-td align="center">{{ item.address }}</uni-td>
|
||||
<uni-td>
|
||||
<view class="uni-group">
|
||||
<button class="uni-button" size="mini" type="primary">修改</button>
|
||||
<button class="uni-button" size="mini" type="warn">删除</button>
|
||||
</view>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-table.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=table)
|
||||
- [Local Example](examples/uni-ui/uni-table.vue)
|
||||
@@ -0,0 +1,331 @@
|
||||
# uni-tag
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-tag
|
||||
|
||||
代码块： uTag
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-tag />`（或 `<uni-tag></uni-tag>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | String | - | 标签内容 |
|
||||
| size | String | normal | 大小尺寸，可选值：normal、small |
|
||||
| type | String | default | 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) |
|
||||
| disabled | Boolean | false | 是否为禁用状态 |
|
||||
| inverted | Boolean | false | 是否无需背景颜色（空心标签） |
|
||||
| customStyle | Boolean | false | 自定义颜色 ，同元素的 style 属性 |
|
||||
| circle | Boolean | false | 是否为圆角 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| @click | 点击 Tag 触发事件 | - |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-tag.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-tag text="标签"></uni-tag>
|
||||
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
|
||||
<uni-tag text="标签" @click="bindClick"></uni-tag>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-tag text="标签"></uni-tag>
|
||||
<uni-tag text="标签" type="error" :circle="true"></uni-tag>
|
||||
<uni-tag text="标签" @click="bindClick"></uni-tag>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标签尺寸" subTitle="使用 size 属性控制标签大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="normal" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="圆角样式" subTitle="使用 circle 属性控制标签圆角" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标记样式" subTitle="使用 mark 属性显示标记样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="default" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="不可点击状态" subTitle="使用 disabled 属性 显示禁用样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag disabled text="标签" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 custom-style 属性自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="自定义标签样式"
|
||||
custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :type="type" text="标签" @click="setType" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full>
|
||||
<text class="uni-h6">标签组件多用于商品分类、重点内容显示等场景。</text>
|
||||
</uni-card>
|
||||
|
||||
<uni-section title="实心标签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="success" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="warning" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" type="error" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" text="标签" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标签尺寸" subTitle="使用 size 属性控制标签大小" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="normal" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="圆角样式" subTitle="使用 circle 属性控制标签圆角" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="标记样式" subTitle="使用 mark 属性显示标记样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="default" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="small" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :mark="true" text="标签" type="primary" size="mini" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="不可点击状态" subTitle="使用 disabled 属性 显示禁用样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag disabled text="标签" type="primary" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="自定义样式" subTitle="使用 custom-style 属性自定义样式" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag text="自定义标签样式"
|
||||
custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;">
|
||||
</uni-tag>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击事件" type="line" padding>
|
||||
<view class="example-body">
|
||||
<view class="tag-view">
|
||||
<uni-tag :type="type" text="标签" @click="setType" />
|
||||
</view>
|
||||
<view class="tag-view">
|
||||
<uni-tag :circle="true" :inverted="inverted" text="标签" type="primary" @click="setInverted" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
type: "default",
|
||||
inverted: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setType() {
|
||||
let types = ["default", "primary", "success", "warning", "error"];
|
||||
let index = types.indexOf(this.type);
|
||||
types.splice(index, 1);
|
||||
let randomIndex = Math.floor(Math.random() * 4);
|
||||
this.type = types[randomIndex];
|
||||
},
|
||||
setInverted() {
|
||||
this.inverted = !this.inverted;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-tag.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=tag)
|
||||
- [Local Example](examples/uni-ui/uni-tag.vue)
|
||||
@@ -0,0 +1,235 @@
|
||||
# uni-title
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-title
|
||||
|
||||
代码块： uTitle
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-title />`（或 `<uni-title></uni-title>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | String | - | 标题类型，可选值 h1、h2、h3、h4、h5 ，章节标题字体会比正常字长字体粗，不指定 type 值，默认为上报统计数据 |
|
||||
| title | String | - | 章节标题内容 |
|
||||
| align | String | - | 对齐方式，可选值 left:左对齐；center:居中；right:右对齐； |
|
||||
| color | String | - | 字体颜色 |
|
||||
| stat | Boolean | - | 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭 |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-title.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="box">
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="box">
|
||||
<uni-title type="h1" title="h1 一级标题 "></uni-title>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="uni-content">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||||
</uni-card>
|
||||
<uni-section title="不同类型" type="line">
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变颜色" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="对齐方式" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="组合示例" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<view class="uni-box-head">
|
||||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||||
</view>
|
||||
<view>
|
||||
<text
|
||||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666"
|
||||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||||
</uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="uni-content">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6"> 章节标题，通常用于记录页面标题，使用当前组件在 uni-app 开启统计的情况下，将会自动统计页面标题.</text>
|
||||
</uni-card>
|
||||
<uni-section title="不同类型" type="line">
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="改变颜色" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
|
||||
<uni-title type="h2" title="h2 二级标题" color="#2490ff"></uni-title>
|
||||
<uni-title type="h3" title="h3 三级标题" color="#439ffc"></uni-title>
|
||||
<uni-title type="h4" title="h4 四级标题" color="#60adfb"></uni-title>
|
||||
<uni-title type="h5" title="h5 五级标题" color="#7db9f7"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="对齐方式" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<uni-title type="h1" title="h1 左对齐" align="left"></uni-title>
|
||||
<uni-title type="h2" title="h2 居中" align="center"></uni-title>
|
||||
<uni-title type="h3" title="h3 右对齐" align="right"></uni-title>
|
||||
<uni-title type="h4" title="h4 居中" align="center"></uni-title>
|
||||
<uni-title type="h5" title="h5 左对齐" align="left"></uni-title>
|
||||
</view>
|
||||
</uni-section>
|
||||
<uni-section title="组合示例" type="line">
|
||||
|
||||
<view class="example-body">
|
||||
<view class="uni-box-head">
|
||||
<uni-title type="h1" align="center" title="uni-app介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h3" type="h3" title="1 框架介绍"></uni-title>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.1 什么是uni-app"></uni-title>
|
||||
</view>
|
||||
<view>
|
||||
<text
|
||||
class="uni-text">uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户，旗下uni-app有5万+案例、900款插件、50+微信/qq群，并且被阿里小程序工具内置，开发者可以放心选择。</text>
|
||||
</view>
|
||||
<view class="uni-box">
|
||||
<uni-title class="h4" type="h4" title="1.2 开发规范"></uni-title>
|
||||
</view>
|
||||
<view class="">
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 页面文件遵循 Vue 单文件组件 (SFC) 规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 组件标签靠近小程序规范，详见uni-app 组件规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666"
|
||||
title="- 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范"></uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期">
|
||||
</uni-title>
|
||||
<uni-title class="h5" type="h5" color="#666" title="- 为兼容多端运行，建议使用flex布局进行开发"></uni-title>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-title.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=title)
|
||||
- [Local Example](examples/uni-ui/uni-title.vue)
|
||||
@@ -0,0 +1,172 @@
|
||||
# uni-tooltip
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-tooltip
|
||||
|
||||
代码块： utooltip
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-tooltip />`（或 `<uni-tooltip></uni-tooltip>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | String | | 弹出层显示的内容 |
|
||||
| placement | String | left | Tooltip 的出现位置, 支持 left,right,top,bottom |
|
||||
|
||||
#### Events
|
||||
|
||||
See official docs for full events list: `https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html`
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<uni-tooltip :content="tooltip显示的内容" placement="left">
|
||||
<button>被包裹的组件</button>
|
||||
</uni-tooltip>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<uni-tooltip :content="tooltip显示的内容" placement="left">
|
||||
<button>被包裹的组件</button>
|
||||
</uni-tooltip>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">常用于展示鼠标 hover 时的提示信息，注意：无法覆盖原生组件</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-tooltip content="提示文字" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义弹出层方向" type="line" padding>
|
||||
<view class="direction-container">
|
||||
<uni-tooltip content="示例文字" placement="top">
|
||||
<view class="item">上</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="bottom">
|
||||
<view class="item">下</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="left">
|
||||
<view class="item">左</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="right">
|
||||
<view class="item">右</view>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.direction-container {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card is-full :is-shadow="false">
|
||||
<text class="uni-h6">常用于展示鼠标 hover 时的提示信息，注意：无法覆盖原生组件</text>
|
||||
</uni-card>
|
||||
<uni-section title="基础用法" type="line" padding>
|
||||
<uni-tooltip content="提示文字" />
|
||||
</uni-section>
|
||||
<uni-section title="自定义弹出层方向" type="line" padding>
|
||||
<view class="direction-container">
|
||||
<uni-tooltip content="示例文字" placement="top">
|
||||
<view class="item">上</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="bottom">
|
||||
<view class="item">下</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="left">
|
||||
<view class="item">左</view>
|
||||
</uni-tooltip>
|
||||
<uni-tooltip class="item" content="示例文字" placement="right">
|
||||
<view class="item">右</view>
|
||||
</uni-tooltip>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.direction-container {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-tooltip.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=tooltip)
|
||||
- [Local Example](examples/uni-ui/uni-tooltip.vue)
|
||||
@@ -0,0 +1,210 @@
|
||||
# uni-transition
|
||||
|
||||
## Instructions
|
||||
|
||||
组件名：uni-transition
|
||||
|
||||
代码块： uTransition
|
||||
|
||||
点击下载&安装
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<uni-transition />`（或 `<uni-transition></uni-transition>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| show | Boolean | false | 控制组件显示或隐藏 |
|
||||
| mode-class | Array/String | - | 内置过渡动画类型 |
|
||||
| custom-class | String | - | 自定义类名 |
|
||||
| duration | Number | 300 | 过渡动画持续时间 |
|
||||
| styles | Object | - | 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如： backgroundColor:red |
|
||||
|
||||
#### Events
|
||||
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击组件触发 | - |
|
||||
| change | 过渡动画结束时触发 | e = {detail:true} |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
| 值 | 说明 | 平台差异 |
|
||||
| --- | --- | --- |
|
||||
| linear | 动画从头到尾的速度是相同的 | - |
|
||||
| ease | 动画以低速开始，然后加快，在结束前变慢 | - |
|
||||
| ease-in | 动画以低速开始 | - |
|
||||
| ease-in-out | 动画以低速开始和结束 | - |
|
||||
| ease-out | 动画以低速结束 | - |
|
||||
| step-start | 动画第一帧就跳至结束状态直到结束 | nvue不支持 |
|
||||
| step-end | 动画一直保持开始状态，最后一帧跳到结束状态 | nvue不支持 |
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="open">fade</button>
|
||||
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
open(mode) {
|
||||
this.show = !this.show
|
||||
},
|
||||
change() {
|
||||
console.log('触发动画')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<button type="primary" @click="open">fade</button>
|
||||
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
open(mode) {
|
||||
this.show = !this.show
|
||||
},
|
||||
change() {
|
||||
console.log('触发动画')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 常规样式覆盖 */
|
||||
.content >>> .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 如果使用 scss 需要使用 /deep/ */
|
||||
.content /deep/ .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 常规样式覆盖 */
|
||||
.content >>> .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 如果使用 scss 需要使用 /deep/ */
|
||||
.content /deep/ .custom-transition {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example (Example 5)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
styles:{
|
||||
'width':'100px',
|
||||
'height':'100px',
|
||||
'backgroundColor':'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 6)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
styles:{
|
||||
'width':'100px',
|
||||
'height':'100px',
|
||||
'backgroundColor':'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference:
|
||||
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html)
|
||||
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=transition)
|
||||
- [Local Example](examples/uni-ui/uni-transition.vue)
|
||||
Reference in New Issue
Block a user