50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<h2 class="demo-title">轮播列表</h2>
|
|
<custom-scroll-board :chart-config="boardOption" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const boardOption = ref({
|
|
attr: { w: 200, h: 200 },
|
|
option: {
|
|
header: ['列1', '列2', '列3'],
|
|
dataset: [
|
|
['行1列1', '行1列2', '行1列3'],
|
|
['行2列1', '行2列2', '行2列3'],
|
|
['行3列1', '行3列2', '行3列3'],
|
|
['行4列1', '行4列2', '行4列3'],
|
|
['行5列1', '行5列2', '行5列3'],
|
|
['行6列1', '行6列2', '行6列3'],
|
|
['行7列1', '行7列2', '行7列3'],
|
|
['行8列1', '行8列2', '行8列3'],
|
|
['行9列1', '行9列2', '行9列3'],
|
|
['行10列1', '行10列2', '行10列3'],
|
|
],
|
|
index: true,
|
|
columnWidth: [30, 100, 100],
|
|
align: ['center', 'right', 'right', 'right'],
|
|
rowNum: 5,
|
|
waitTime: 2,
|
|
headerHeight: 40,
|
|
carousel: 'single',
|
|
headerBGC: '#00BAFF',
|
|
oddRowBGC: '#003B51',
|
|
evenRowBGC: '#0A2732',
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.demo {
|
|
margin: 30px auto 0;
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: #ffffff;
|
|
&-title {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
</style>
|