提交 5b0115ff 编写于 作者: H HRK

更新示例

上级 3b2839f7
......@@ -88,14 +88,15 @@ export default {
### DataSelect Props
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
| :-----------: | :-----------: | :----: | :------: | :-----------------------------------------------------------------: |
| value/v-model | String/Number | - | - | 已选择数据的 value 值(当其值为0时不进行初始化赋值) |
| localdata | Array | - | - | 本地渲染数据 |
| clear | Boolean | - | - | 是否可以清空已选项 |
| label | String | | | 左侧标题 |
| placeholder | String | - | 请选择 | 输入框的提示文字 |
| emptyTips | String | - | 暂无数据 | 没有数据时显示的文字 ,本地数据无效 |
| 属性名 | 类型 | 可选值 | 默认值 | 说明 |
| :-----------: | :-----------: | :--------: | :------: | :--------------------------------------------------: |
| value/v-model | String/Number | - | - | 已选择数据的 value 值(当其值为0时不进行初始化赋值) |
| localdata | Array | - | - | 本地渲染数据 |
| clear | Boolean | - | - | 是否可以清空已选项 |
| label | String | | | 左侧标题 |
| placeholder | String | - | 请选择 | 输入框的提示文字 |
| emptyTips | String | - | 暂无数据 | 没有数据时显示的文字 ,本地数据无效 |
| placement | String | bottom,top | bottom | 弹出时位置 |
#### DataCom Props
......
......@@ -31,7 +31,7 @@
<template>
<view>
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
</view>
</template>
<script>
......@@ -113,6 +113,7 @@ export default {
|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|是否适配底部安全区|
#### Type Options
......@@ -241,6 +242,7 @@ export default {
|showClose **[1.8.5新增]**|Boolean|-|是否显示取消按钮|
|value| String\Number|-|输入框默认值,input模式下生效|
|placeholder|String|-|输入框提示文字,input模式下生效|
|borderRadius|String|-|四周圆角值(左上、右上、右下、左下) 示例:"20px 20px 20px 20px"|
|before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法|
#### PopupDialog Events
......
::: tip 组件名:uni-segmented-control
> 代码块: `uSegmentedControl`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)
:::
用作不同视图的显示
## 介绍
### 基本用法
```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>
```
## API
### SegmentedControl Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|current|Number|0|当前选中的tab索引值,从0计数|
|styleType|String|button|分段器样式类型,可选值:button(按钮类型),text(文字类型) |
|activeColor|String|#007aff|选中的标签背景色与边框颜色|
|values|Array|-|选项数组|
### SegmentedControl Events
|事件名|说明|返回值|
|:-:|:-:|:-:|
|@clickItem |组件触发点击事件时触发|e={currentIndex} |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control
> Template
``` html
::: tip 组件名:uni-segmented-control
> 代码块: `uSegmentedControl`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)
:::
用作不同视图的显示
## 介绍
### 基本用法
```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>
```
## API
### SegmentedControl Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-----------: | :----: | :---------: | :----------------------------------------------------------: |
| current | Number | 0 | 当前选中的tab索引值,从0计数 |
| styleType | String | button | 分段器样式类型,可选值:button(按钮类型),text(文字类型) |
| activeColor | String | #007aff | 选中的标签背景色与边框颜色 |
| inActiveColor | String | transparent | 未激活时的颜色 |
| values | Array | - | 选项数组 |
### SegmentedControl Events
| 事件名 | 说明 | 返回值 |
| :--------: | :--------------------: | :--------------: |
| @clickItem | 组件触发点击事件时触发 | e={currentIndex} |
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control
> Template
``` html
<template>
<view>
<uni-card is-full>
......@@ -127,8 +128,8 @@ export default {
</view>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -173,9 +174,9 @@ export default {
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.example-body {
......@@ -249,8 +250,8 @@ export default {
.uni-list-item__content-title {
font-size: 14px;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/segmented-control/segmented-control)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册