<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 {ListTheme, ListItem, ListOther} from 'vue-ydui/dist/lib.rem/list';<br />/* 使用px：import {ListTheme, ListItem, ListOther} from 'vue-ydui/dist/lib.px/list'; */<br /><br />Vue.component(ListTheme.name, ListTheme);<br />Vue.component(ListItem.name, ListItem);<br />Vue.component(ListOther.name, ListOther);</code></pre>
        </docs-import>

        <h2>代码示例</h2>
        <div class="fuck cell-demo">
            <docs-demo title="列表样式">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-list theme="3"&gt; /* 这里可选1/2/3/4/5五种样式 */<br />        &lt;yd-list-item v-for="item in list"&gt;<br />            &lt;img slot="img" :src="item.img"&gt;<br />            &lt;span slot="title"&gt;{<span>{</span>item.title<span>}</span>}&lt;/span&gt;<br />            &lt;yd-list-other slot="other"&gt;<br />                &lt;div&gt;<br />                    &lt;span class="list-price"&gt;&lt;em&gt;¥&lt;/em&gt;{<span>{</span>item.price}}&lt;/span&gt;<br />                    &lt;span class="list-del-price"&gt;¥{<span>{</span>item.w_price<span>}</span>}&lt;/span&gt;<br />                &lt;/div&gt;<br />                &lt;div&gt;content&lt;/div&gt;<br />            &lt;/yd-list-other&gt;<br />        &lt;/yd-list-item&gt;<br />    &lt;/yd-list&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                list: [<br />                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg", title: "标题111标题标题标题标题", price: 156.23, w_price: 89.36},<br />                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg", title: "标题222标题标题标题标题", price: 256.23, w_price: 89.36},<br />                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg", title: "标题333标题标题标题标题", price: 356.23, w_price: 89.36},<br />                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg", title: "标题444标题标题标题标题", price: 456.23, w_price: 89.36},<br />                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg", title: "标题555标题标题标题标题", price: 556.23, w_price: 89.36},<br />                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg", title: "标题666标题标题标题标题", price: 656.23, w_price: 89.36}<br />                ]<br />            }<br />        }<br />    }<br />&lt;/script&gt;<br /></code></pre>
                <div slot="demo">
                    <yd-list theme="3">
                        <yd-list-item v-for="item in list">
                            <img slot="img" :src="item.img">
                            <span slot="title">{{item.title}}</span>
                            <yd-list-other slot="other">
                                <div>
                                    <span class="list-price"><em>¥</em>{{item.price}}</span>
                                    <span class="list-del-price">¥{{item.w_price}}</span>
                                </div>
                                <div>content</div>
                            </yd-list-other>
                        </yd-list-item>
                    </yd-list>
                </div>
                <div slot="interpre">
                    <p>设置<span>theme</span>参数为<span>1/2/3/4/5</span>即可生成<a target="_blank" href="http://vue.ydui.org/demo/#/list">这里</a>对应的五种列表样式。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-list</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>
        <h3><strong>yd-list</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>theme</td>
                <td>列表主题样式</td>
                <td>String || Number</td>
                <td><span>1</span>, <span>2</span>, <span>3</span>, <span>4</span>, <span>5</span></td>
                <td>1</td>
            </tr>
        </docs-table>
        <h3><strong>yd-list-item</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>img</td>
                <td>列表的主图</td>
            </tr>
            <tr>
                <td>title</td>
                <td>列表的标题</td>
            </tr>
            <tr>
                <td>other</td>
                <td>列表的其他信息；采用flex布局，使用 <span>justify-content: space-between;</span>将内容分为左右结构</td>
            </tr>
        </docs-table>

        <h3><strong>yd-list-item</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>type</td>
                <td>列表的类型，<span>type="link"</span>的href将会解析为路由，<span>type="a"</span>是普通&lt;a&gt;</td>
                <td>String</td>
                <td><span>link</span>,<span>a</span></td>
                <td>a</td>
            </tr>
            <tr>
                <td>href</td>
                <td>跳转链接</td>
                <td>String || Object</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

        <h3><strong>yd-list-other</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                list: [
                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg", title: "标题111标题标题标题标题", price: 156.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg", title: "标题222标题标题标题标题", price: 256.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg", title: "标题333标题标题标题标题", price: 356.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg", title: "标题444标题标题标题标题", price: 456.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg", title: "标题555标题标题标题标题", price: 556.23, w_price: 89.36},
                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg", title: "标题666标题标题标题标题", price: 656.23, w_price: 89.36}
                ]
            }
        }
    }
</script>
