Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3317
Star 107
Fork 842
unidocs-zh
unidocs-zh
提交 5b0115ff 编写于 作者: H HRK
浏览文件
操作

更新示例

上级 3b2839f7
隐藏空白更改
内联 并排
Showing with 101 addition and 97 deletion
docs/component/uniui/uni-data-select.md
浏览文件 @ 5b0115ff
......@@ -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
......
docs/component/uniui/uni-popup.md
浏览文件 @ 5b0115ff
......@@ -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
......
docs/component/uniui/uni-segmented-control.md
浏览文件 @ 5b0115ff
::: 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.
先完成此消息的编辑！
想要评论请 注册 或