应用平台

# 组件名cap4-horizontal-list

# 引入

import Cap4HorizontalList from 'cap4-pc-ui/lib/cap4-horizontal-list';
import 'cap4-pc-ui/lib/cap4-horizontal-list/css/cap4-horizontal-list.css';

# 基础用法

    {{ list[slotProps.index].display }}

/**/

export default {  
data() {  
return {  
list: [    
                {    
                    value: 1,    
                    display: '北京'    
                },    
                {    
                    value: 2,    
                    display: '上海'    
                },    
                {    
                    value: 3,    
                    display: '广州'    
                },    
                {    
                    value: 4,    
                    display: '北京1'    
                },    
                {    
                    value: 5,    
                    display: '上海1'    
                },    
                {    
                    value: 6,    
                    display: '广州1'    
                }    
            ],  
};  
}  
};  
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-horizontal-list :list="list">
        <template v-slot="slotProps">
            <li style="width:150px; height:80px; line-height:40px;">{{ list[slotProps.index].display }}</li>
        </template>
        </cap4-horizontal-list>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    value: 1,
                    display: '北京'
                },
                {
                    value: 2,
                    display: '上海'
                },
                {
                    value: 3,
                    display: '广州'
                },
                {
                    value: 4,
                    display: '北京1'
                },
                {
                    value: 5,
                    display: '上海1'
                },
                {
                    value: 6,
                    display: '广州1'
                }
            ],
        };
    }
};
</script>

:::

# Attributes

参数 说明 类型 可选值 默认值
list 参数 (选填)) Array — —

# Slot

参数 说明 类型 可选值 默认值
index 序号 (数组中的第几项)) Number — —
编撰人：yinyanting、admin

快速跳转

← (6) 选图标组件 →