m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/001-actionsheet/345/212/250/344/275/234/351/235/242/346/235/277.md

@@ -1,460 +0,0 @@
-# 组件使用
-
-## actionsheet 动作面板
-
-### 介绍
-
--   底部弹起的模态面板，包含与当前情境相关的多个选项。
-
-### 代码演示
-
-#### 基础用法
-
-动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列。
-
-::: ifdef M83
-
-```html
-<em-cell is-link title="基础用法" @click="showTop = true" />
-<em-actionsheet
-    title="标题"
-    @close="showTop = !showTop"
-    v-model="showTop"
-    :actions="actionsTop"
-    @select="onSelectTop"
-/>
-<em-toast ref="emToast"></em-toast>
-```
-
-```js
-export default {
-    data() {
-        return {
-            showTop: false,
-            actionsTop: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
-        };
-    },
-    methods: {
-        onSelectTop(item) {
-            // 默认情况下点击选项时不会自动收起
-            // 可以通过 close-on-click-action 属性开启自动收起
-            this.showTop = false;
-            Toast({
-                zIndex: 3000,
-                message: item.name
-            });
-        }
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```html
-<em-cell is-link title="基础用法" @click="showTop = true" />
-<em-actionsheet
-    title="标题"
-    @close="showTop = !showTop"
-    v-model="showTop"
-    :actions="actionsTop"
-    @select="onSelectTop"
-/>
-<em-toast ref="emToastRef"></em-toast>
-```
-
-```js
-import { ref } from 'vue';
-
-const showTop = ref(false);
-const actionsTop = [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }];
-
-function onSelectTop(item) {
-    // 默认情况下点击选项时不会自动收起
-    // 可以通过 close-on-click-action 属性开启自动收起
-    showTop.value = false;
-    Toast({
-        zIndex: 3000,
-        message: item.name
-    });
-}
-
-const emToastRef = ref(null);
-
-defineExpose({
-    emToastRef
-});
-```
-
-::: endif
-
-#### 展示取消按钮
-
-设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
-
-::: ifdef M83
-
-```html
-<em-actionsheet
-    v-model="showBottom"
-    :actions="actionsTop"
-    cancel-text="取消"
-    close-on-click-action
-    @cancel="onCancel1"
-    @close="showBottom = !showBottom"
-/>
-<em-toast ref="emToast"></em-toast>
-```
-
-```js
-export default {
-    data() {
-        return {
-            showBottom: false,
-            actionsTop: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
-        };
-    },
-    methods: {
-        onCancel1() {
-            Toast({
-                zIndex: 3000,
-                message: '取消'
-            });
-            this.showBottom = !this.showBottom;
-        }
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```html
-<em-actionsheet
-    v-model="showBottom"
-    :actions="actionsTop"
-    cancel-text="取消"
-    close-on-click-action
-    @cancel="onCancel1"
-    @close="showBottom = !showBottom"
-/>
-<em-toast ref="emToastRef"></em-toast>
-```
-
-```js
-import { ref } from 'vue';
-
-const showBottom = ref(false);
-const actionsTop = [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }];
-
-function onCancel1() {
-    Toast({
-        zIndex: 3000,
-        message: '取消'
-    });
-    showBottom.value = !showBottom.value;
-}
-
-const emToastRef = ref(null);
-
-defineExpose({
-    emToastRef
-});
-```
-
-::: endif
-
-#### 展示描述信息
-
-通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
-
-::: ifdef M83
-
-```html
-<em-actionsheet
-    v-model="showLeft"
-    :actions="actionsLeft"
-    cancel-text="取消"
-    description="这是一段描述信息"
-    close-on-click-action
-    @cancel="onCancel2"
-    @close="showLeft = !showLeft"
-/>
-<em-toast ref="emToast"></em-toast>
-```
-
-```js
-export default {
-    data() {
-        return {
-            showLeft: false,
-            actionsLeft: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三', subname: '描述信息' }]
-        };
-    },
-    methods: {
-        onCancel2() {
-            Toast({
-                zIndex: 3000,
-                message: '取消'
-            });
-            this.showLeft = !this.showLeft;
-        }
-    }
-};
-```
-
-::: endif
-
-::: ifdef M84
-
-```html
-<em-actionsheet
-    v-model="showLeft"
-    :actions="actionsLeft"
-    cancel-text="取消"
-    description="这是一段描述信息"
-    close-on-click-action
-    @cancel="onCancel2"
-    @close="showLeft = !showLeft"
-/>
-<em-toast ref="emToastRef"></em-toast>
-```
-
-```js
-import { ref } from 'vue';
-
-const showLeft = ref(false);
-const actionsLeft = [{ name: '选项一' }, { name: '选项二' }, { name: '选项三', subname: '描述信息' }];
-
-function onCancel2() {
-    Toast({
-        zIndex: 3000,
-        message: '取消'
-    });
-    showLeft.value = !showLeft.value;
-}
-
-const emToastRef = ref(null);
-
-defineExpose({
-    emToastRef
-});
-```
-
-::: endif
-
-#### 选项状态
-
-可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
-
-::: ifdef M83
-
-```html
-<em-actionsheet
-    v-model="showStatus"
-    :actions="actionsStatus"
-    @close="showStatus = !showStatus"
-    @cancel="showStatus = !showStatus"
-    @select="onSelectTop"
-    cancel-text="取消"
-    close-on-click-action
-/>
-<em-toast ref="emToast"></em-toast>
-```
-
-```js
-export default {
-    data() {
-        return {
-            showStatus: false,
-            actionsStatus: [
-                { name: '着色选项', color: '#ee0a24' },
-                { name: '禁用选项', disabled: true },
-                { name: '加载选项', loading: true }
-            ]
-        };
-    },
-    methods: {
-        onSelectTop(item) {
-            // 默认情况下点击选项时不会自动收起
-            // 可以通过 close-on-click-action 属性开启自动收起
-            this.showStatus = false;
-            Toast({
-                zIndex: 3000,
-                message: item.name
-            });
-        }
-    }
-};
-```
-
-::: endif
-
-::: ifdef M84
-
-```html
-<em-actionsheet
-    v-model="showStatus"
-    :actions="actionsStatus"
-    @close="showStatus = !showStatus"
-    @cancel="showStatus = !showStatus"
-    @select="onSelectTop"
-    cancel-text="取消"
-    close-on-click-action
-/>
-<em-toast ref="emToastRef"></em-toast>
-```
-
-```js
-import { ref } from 'vue';
-
-const showStatus = ref(false);
-const actionsStatus = [
-    { name: '着色选项', color: '#ee0a24' },
-    { name: '禁用选项', disabled: true },
-    { name: '加载选项', loading: true }
-];
-
-function onSelectTop(item) {
-    // 默认情况下点击选项时不会自动收起
-    // 可以通过 close-on-click-action 属性开启自动收起
-    showTop.value = false;
-    Toast({
-        zIndex: 3000,
-        message: item.name
-    });
-}
-
-const emToastRef = ref(null);
-
-defineExpose({
-    emToastRef
-});
-```
-
-::: endif
-
-#### 自定义面板
-
-通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏
-
-```html
-<em-actionsheet v-model="showZdy" @close="showZdy = !showZdy" title="标题">
-    <div class="content">内容</div>
-</em-actionsheet>
-```
-
-::: ifdef M83
-
-```js
-export default {
-    data() {
-        return {
-            showZdy: false
-        };
-    }
-};
-```
-
-::: endif
-::: ifdef M84
-
-```js
-import { ref } from 'vue';
-
-const showZdy = ref(false);
-```
-
-::: endif
-
-```html
-<style>
-    .content {
-        padding: 16px 16px 160px;
-    }
-</style>
-```
-
-### API
-
-#### Props
-
-| 参数                                                                         |          说明          | 类型            | 默认值  |
-| :--------------------------------------------------------------------------- | :--------------------: | :-------------- | :------ |
-| v-model ::: ifdef M83 (value) ::: endif ::: ifdef M84 (modelValue) ::: endif |    是否显示动作面板    | boolean         | `false` |
-| actions                                                                      |      面板选项列表      | Action[]        | `[]`    |
-| title                                                                        |        顶部标题        | string          | -       |
-| cancel-text                                                                  |      取消按钮文字      | string          | -       |
-| description                                                                  |   选项上方的描述信息   | string          | -       |
-| z-index                                                                      |      z-index 层级      | number          | 99      |
-| closeable                                                                    |    是否显示关闭图标    | boolean         | `true`  |
-| close-icon                                                                   | 关闭图标名称或图片链接 | string          | `cross` |
-| duration                                                                     |   动画时长，单位毫秒   | number / string | `300`   |
-| round                                                                        |      是否显示圆角      | boolean         | `true`  |
-| overlay                                                                      |     是否显示遮罩层     | boolean         | `true`  |
-| close-on-click-action                                                        |  是否在点击选项后关闭  | boolean         | `false` |
-| close-on-click-overlay                                                       | 是否在点击遮罩层后关闭 | boolean         | `true`  |
-| safe-area-inset-bottom                                                       | 是否开启底部安全区适配 | boolean         | `true`  |
-
-#### Action 数据结构
-
-`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
-
-| 键名      |            说明            | 类型    |
-| :-------- | :------------------------: | :------ |
-| name      |            标题            | string  |
-| subname   |          二级标题          | string  |
-| color     |        选项文字颜色        | string  |
-| className | 为对应列添加额外的 `class` | any     |
-| loading   |       是否为加载状态       | boolean |
-| disabled  |       是否为禁用状态       | boolean |
-
-#### Events
-
-| 事件          |                   说明                   | 回调参数                                     |
-| :------------ | :--------------------------------------: | :------------------------------------------- |
-| select        | 点击选项时触发，禁用或加载状态下不会触发 | action: Action 选项对应的对象, index: number |
-| cancel        |            点击取消按钮时触发            | -                                            |
-| open          |              打开面板时触发              | -                                            |
-| close         |              关闭面板时触发              | -                                            |
-| opened        |         打开面板且动画结束后触发         | -                                            |
-| closed        |         关闭面板且动画结束后触发         | -                                            |
-| click-overlay |             点击遮罩层时触发             | -                                            |
-
-#### Slots
-
-| 名称        |         说明         |
-| :---------- | :------------------: |
-| default     | 自定义面板的展示内容 |
-| description |    自定义描述文案    |
-
-::: ifdef M83
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-actionsheet"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-actionsheet"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-  </iframe>
-::: endif
-
- <style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>