<template>
    <docs-layout title="上拉菜单">
        <h2>概述</h2>
        <h3>移动端常见操作表，从屏幕下方移入。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';<br />/* 使用px：import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet'; */<br /><br />Vue.component(ActionSheet.name, ActionSheet);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="带取消">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-button @click.native="show1 = true" size="large"&gt;带取消&lt;/yd-button&gt;<br />    <br />        &lt;yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"&gt;&lt;/yd-actionsheet&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                show1: false,<br />                myItems1: [<br />                    {<br />                        label: '拍照',<br />                        method: () =&gt; {<br />                            this.$dialog.toast({mes: '咔擦，此人太帅！'});<br />                            /* 注意： method: function() {} 和 method() {}  这样是无法正常使用当前this的 */<br />                        }<br />                    },<br />                    {<br />                        label: '从相册中偷取',<br />                        method: () =&gt; {<br />                            this.$dialog.toast({mes: '看到了不该看到的东西！'});<br />                        }<br />                    }<br />                ]<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-button @click.native="show1 = true" size="large">带取消</yd-button>

                    <yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>
                </div>
                <div slot="interpre">
                    <p>将<span>yd-actionsheet</span>组件的 v-model 绑定到一个本地变量<span>show1</span>，通过操作这个变量即可控制 actionsheet 的显示与隐藏。</p>
                </div>
            </docs-demo>
            <docs-demo title="不带取消">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-button @click.native="show2 = true" size="large" type="warning"&gt;不带取消&lt;/yd-button&gt;<br /><br />        &lt;yd-actionsheet :items="myItems2" v-model="show2"&gt;&lt;/yd-actionsheet&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                show2: false,<br />                myItems2: [<br />                    {<br />                        label: '示例菜单一 - 我是不会关闭的',<br />                        method: () =&gt; {<br />                            this.$dialog.toast({mes: 'Say: 我是不会关闭的！'});<br />                        },<br />                        stay: true /* 不关闭 */<br />                    },<br />                    {<br />                        label: '示例菜单二 - 自动关闭',<br />                        method: () =&gt; {<br />                            this.$dialog.toast({mes: 'Say: 我关闭啦啦啦！'});<br />                        }<br />                    },<br />                    {label: '示例菜单三 - 自动关闭'},<br />                    {label: '示例菜单四 - 自动关闭'}<br />                ]<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-button @click.native="show2 = true" size="large" type="warning">不带取消</yd-button>

                    <yd-actionsheet :items="myItems2" v-model="show2"></yd-actionsheet>
                </div>
                <div slot="interpre">
                    <p>将<span>items</span>属性绑定一个由对象组成的数组<span>myItems2</span>，每个对象有label，method 和 stay 三个键；</p>
                    <p><span>label</span> 菜单项的文本；</p>
                    <p><span>method</span> 点击该菜单项的回调函数；</p>
                    <p><span>stay</span> 是否关闭 actionsheet，默认false，直接关闭。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-actionsheet</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>items</td>
                <td>菜单项数组：<br/>
                    [{<br/>
                    &nbsp;&nbsp;label: String,  //菜单项的文本<br/>
                    &nbsp;&nbsp;method: Function, //点击该菜单项的回调函数<br/>
                    &nbsp;&nbsp;stay: Boolean,  //是否关闭 actionsheet（默认false，直接关闭）<br/>
                    }]</td>
                <td>Array</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>cancel</td>
                <td>取消按钮的文本，为空则不显示取消按钮</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                show1: false,
                show2: false,
                myItems1: [
                    {
                        label: '拍照',
                        method: () => {
                            this.$dialog.toast({mes: '咔擦，此人太帅！'});
                            //注意： method: function() {} 和 method() {}  这样是无法正常使用当前this的
                        }
                    },
                    {
                        label: '从相册中偷取',
                        method: () => {
                            this.$dialog.toast({mes: '看到了不该看到的东西！'});
                        }
                    }
                ],
                myItems2: [
                    {
                        label: '示例菜单一 - 我是不会关闭的',
                        method: () => {
                            this.$dialog.toast({mes: 'Say: 我是不会关闭的！'});
                        },
                        stay: true // 不关闭
                    },
                    {
                        label: '示例菜单二 - 自动关闭',
                        method: () => {
                            this.$dialog.toast({mes: 'Say: 我关闭啦啦啦！'});
                        }
                    },
                    {label: '示例菜单三 - 自动关闭'},
                    {label: '示例菜单四 - 自动关闭'}
                ]
            }
        }
    }
</script>
