Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 b3834314 编写于 作者: D Drjingfubo 提交者： GitHub
浏览文件
操作

docs(actionsheet,toast): edit (#1635)

上级 66a7c5d2
隐藏空白更改
内联 并排
Showing with 113 addition and 16 deletion
src/packages/__VUE/actionsheet/doc.en-US.md
浏览文件 @ b3834314
......@@ -13,7 +13,8 @@ import { ActionSheet, Popup } from '@nutui/nutui';
import { ActionSheet, Popup } from '@nutui/nutui-taro';
const app = createApp();
app.use(ActionSheet).use(Popup);
app.use(ActionSheet);
app.use(Popup);
```
## Basic Usage
......@@ -259,7 +260,53 @@ export default {
```
:::
## Prop
## Custom Content
:::demo
``` html
<template>
<div>
<nut-cell
:show-icon="true"
:isLink="true"
@click="switchActionSheet('isVisible')"
>
<span><label>Custom Content</label></span>
</nut-cell>
<nut-actionsheet v-model:visible="state.isVisible" title="title">
<div class="custom-content">Custom Content</div>
</nut-actionsheet>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
isVisible: false,
val: '',
});
const switchActionSheet = ( param ) => {
state.isVisible = !state.isVisible;
};
return {
state,
switchActionSheet,
};
}
}
</script>
<style lang="scss" scoped>
.custom-content {
padding: 10px 10px 160px;
}
</style>
```
:::
## Props
| Attribute | Description | Type | Default |
|------------------|----------------------------------------|---------|-----------|
......@@ -271,7 +318,7 @@ export default {
| color | selected item color，when choose-tag-value == option-tag | String | '#ee0a24' |
| title | set list item title | String | '' |
| description | set list item description | String | '' |
| cancel-txt | Text of cancel button | String | '取消' |
| cancel-txt | Text of cancel button | String | 'cancel' |
| close-abled | Whether the mask layer can be closed | Boolean | true |
## menu-items
......@@ -284,7 +331,7 @@ export default {
| loading | Whether to be loading status | Boolean |
| disable | Whether to be disabled | Boolean |
## Event
## Events
| Event | Description | Arguments |
|--------|--------------------|-----------------------------------|
......
src/packages/__VUE/actionsheet/doc.md
浏览文件 @ b3834314
......@@ -13,7 +13,8 @@ import { ActionSheet, Popup } from '@nutui/nutui';
import { ActionSheet, Popup } from '@nutui/nutui-taro';
const app = createApp();
app.use(ActionSheet).use(Popup);
app.use(ActionSheet);
app.use(Popup);
```
## 基本用法
......@@ -260,7 +261,56 @@ export default {
```
:::
## Prop
## 自定义内容
:::demo
``` html
<template>
<div>
<nut-cell
:show-icon="true"
:isLink="true"
@click="switchActionSheet('isVisible')"
>
<span><label>自定义内容</label></span>
</nut-cell>
<nut-actionsheet v-model:visible="state.isVisible" title="标题">
<div class="custom-content">自定义内容</div>
</nut-actionsheet>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
isVisible: false,
val: '',
});
const switchActionSheet = ( param ) => {
state.isVisible = !state.isVisible;
};
return {
state,
switchActionSheet,
};
}
}
</script>
<style lang="scss" scoped>
.custom-content {
padding: 10px 10px 160px;
}
</style>
```
:::
## Props
| 字段 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------|---------|-----------|
......@@ -285,7 +335,7 @@ export default {
| loading | 是否为loading状态 | Boolean |
| disable | 是否为禁用状态 | Boolean |
## Event
## Events
| 字段 | 说明 | 回调参数 |
|--------|--------------------|-----------------------------------|
......
src/packages/__VUE/toast/doc.en-US.md
浏览文件 @ b3834314
......@@ -275,15 +275,15 @@ toast.hide();
| title | title | String | - |
| center | Whether to display in the middle of the page (display at the bottom when false) | Boolean| true |
| bottom | The distance from the bottom of the page (px or %), which takes effect when option.center is false | String| 30px |
| textAlignCenter | Whether the multi-line copy is centered | Boolean | true |
| text-align-center | Whether the multi-line copy is centered | Boolean | true |
| bgColor | background color (transparency) | String | rgba(0, 0, 0, 0.8) |
| customClass | Custom Class | String | - |
| custom-class | Custom Class | String | - |
| icon | Custom Icon | String | - |
| iconSize | Custom iconSize | String | 20 |
| icon-size | Custom iconSize | String | 20 |
| size | Text Size **small**/**base**/**large** | String | base |
| cover | Whether to show the mask layer | Boolean | false |
| cover-color | Cover Color | String | rgba(0,0,0,0) |
| loadingRotate | Whether the loading icon is rotated, only valid for the loading type | Boolean | true |
| loading-rotate | Whether the loading icon is rotated, only valid for the loading type | Boolean | true |
| close | Callback function after close | function | null |
| close-on-click-overlay | Whether to close when overlay is clicked | Boolean | false |
| custom-class | Custom Class | String | - |
......
src/packages/__VUE/toast/doc.md
浏览文件 @ b3834314
......@@ -275,15 +275,15 @@ toast.hide();
| title | 标题 | String | - |
| center | 是否展示在页面中部（为false时展示在底部） | Boolean | true |
| bottom | 距页面底部的距离（像素或者百分比），option.center为false时生效 | String | 30px |
| textAlignCenter | 多行文案是否居中 | Boolean | true |
| bgColor | 背景颜色（透明度） | String | rgba(0, 0, 0, 0.8) |
| customClass | 自定义类名 | String | - |
| text-align-center | 多行文案是否居中 | Boolean | true |
| bg-color | 背景颜色（透明度） | String | rgba(0, 0, 0, 0.8) |
| custom-class | 自定义类名 | String | - |
| icon | 自定义图标，**支持图片链接或base64格式** | String | - |
| iconSize | 自定义图标尺寸 | String | 20 |
| icon-size | 自定义图标尺寸 | String | 20 |
| size | 文案尺寸，**small**/**base**/**large**三选一 | String | base |
| cover | 是否显示遮罩层 | Boolean | false |
| cover-color | 遮罩层颜色，默认透明 | String | rgba(0,0,0,0) |
| loadingRotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true |
| loading-rotate | loading图标是否旋转，仅对loading类型生效 | Boolean | true |
| close | 关闭时触发的事件 | function | null |
| close-on-click-overlay | 是否在点击遮罩层后关闭提示 | Boolean | false |
| custom-class | 提示框class | String | - |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或