
<style scoped>
    .source{
        padding:20px; width: 800px !important;
    }
</style>
<script>
    import avatar from '../../logo-hexagon.png'
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    text        : '春光竞媚江两岸，暖风轻舞花艳彩。花开花落年年复，开门不见古人来。',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    text        : '去年元夜时，花市灯如昼。月上柳梢头，人约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪湿春衫袖。',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterDefault(item){
                return {
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },
            filterDisabled(item){
                return {
                    disabled    : true,
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },
            filterRound(item){
                return {
                    isImgRound  : true,
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },
            filterText(item){
                return {
                    text        : item.text,
                    title       : item.title,
                    imgUrl      : item.imgUrl,
                }
            },

            filterBtn(item){
                return {
                    btnText     : '操作',
                    title       : item.title,
                    text        : item.text,
                    imgUrl      : item.imgUrl,
                }
            },
        }
    }
</script>
## CardPoker 竖列卡片

## 基础用法

:::demo `title`属性为标题文本. `time`属性为时间文本 `imgUrl`属性为图片资源
```html
    <mc-row :gutter="8" >
        <mc-col
                :span="6"
                v-for="item in cardList">
            <mc-card-poker v-bind="filterDefault(item)">
            </mc-card-poker>
        </mc-col>
    </mc-row>


<script>
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterDefault(item){
                return {
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },
        }
    }
</script>
```
:::


## 禁用状态

:::demo `disabled`属性 设为 `true`
```html

    <mc-row :gutter="8" >
        <mc-col
                :span="6"
                v-for="item in cardList">
            <mc-card-poker v-bind="filterDisabled(item)">
            </mc-card-poker>
        </mc-col>
    </mc-row>

<script>
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterDisabled(item){
                return {
                    disabled    : true,
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },

        }
    }
</script>
```
:::


## 圆形图片

:::demo `isImgRound`属性 设为 `true`
```html

<mc-row :gutter="8" >
    <mc-col
            :span="6"
            v-for="item in cardList">
        <mc-card-poker v-bind="filterRound(item)">
        </mc-card-poker>
    </mc-col>
</mc-row>

<script>
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterRound(item){
                return {
                    isImgRound  : true,
                    title       : item.title,
                    time        : item.time,
                    imgUrl      : item.imgUrl,
                }
            },

        }
    }
</script>
```
:::


## 描述文本

:::demo `text`属性 传入描述文本
```html

<mc-row :gutter="8" >
    <mc-col
            :span="6"
            v-for="item in cardList">
        <mc-card-poker v-bind="filterText(item)">
        </mc-card-poker>
    </mc-col>
</mc-row>

<script>
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    text        : '春光竞媚江两岸，暖风轻舞花艳彩。花开花落年年复，开门不见古人来。',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    text        : '去年元夜时，花市灯如昼。月上柳梢头，人约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪湿春衫袖。',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterText(item){
                return {
                    text        : item.text,
                    title       : item.title,
                    imgUrl      : item.imgUrl,
                }
            },

        }
    }
</script>
```
:::


## 带按钮样式

:::demo `btnText`属性 传入按钮文本，`clickTarget`属性 需传入指定参数'customBtn'。
```html

<mc-row :gutter="8" >
    <mc-col
            :span="6"
            v-for="item in cardList">
        <mc-card-poker v-bind="filterBtn(item)">
        </mc-card-poker>
    </mc-col>
</mc-row>

<script>
    export default {
        data() {
            return {
                cardList: [{
                    title       : '春暖花开',
                    time        : '2018-10-10',
                    text        : '春光竞媚江两岸，暖风轻舞花艳彩。花开花落年年复，开门不见古人来。',
                    imgUrl      : avatar,
                }, {
                    title       : '生查子·元夕',
                    time        : '2018-11-11',
                    text        : '去年元夜时，花市灯如昼。月上柳梢头，人约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪湿春衫袖。',
                    imgUrl      : avatar,
                }]
            }
        },
        methods:{
            filterBtn(item){
                return {
                    btnText     : '操作',
                    title       : item.title,
                    text        : item.text,
                    imgUrl      : item.imgUrl,
                }
            },

        }
    }
</script>
```
:::



### mcCardPoker 属性

|参数		|说明		|类型		|可选值		|默认值		|
|-----------|-----------|-----------|-----------|-----------|
|btnText		| — 		|String		| — 		| — 		|
|isImgRound		| — 		|Boolean		| — 		| — 		|
|imgUrl		| — 		|String		| — 		| — 		|
|title		| — 		|String		| — 		| — 		|
|time		| — 		|String		| — 		| — 		|
|text		| — 		|String		| — 		| — 		|
|disabled		| — 		|Boolean		| — 		| — 		|