1.1.1 • Published 3 years ago
db-schedulemap v1.1.1
db-schedulemap
用于渲染赛程图的包,使用DOM渲染
安装
# install dependencies -S
npm install db-schedulemap
# install node-sass sass-loader 依赖
npm install node-sass sass-loader
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
参数
名称 | 作用 | 类型 | 默认 |
---|---|---|---|
title | 标题 | String | 赛程图 |
show | 列标题 | Boolean | true |
info | 渲染数据 | Array | [] |
config | 样式设置 | Object | 如下 |
info
数据格式
[
{
title: "8进4",// 标题
list:[
[
{
name: "EDG",// 名称
win: true,// 胜负
id: 1,
},
{
name: "DWG",
win: false,
id: 2,
},
],
],
}
]
例子:
[
{
title: "8进4",// 标题
list: [
[
{
name: "EDG",
win: true,
id: 1,
},
{
name: "RNG",
win: false,
id: 2,
},
],
[
{
name: "IG",
win: true,
id: 1,
},
{
name: "JDG",
win: false,
id: 2,
},
],
[
{
name: "DWG",
win: true,
id: 1,
},
{
name: "T1",
win: false,
id: 2,
},
],
[
{
name: "VG",
win: true,
id: 1,
},
{
name: "TES",
win: false,
id: 2,
},
],
],
},
{
title: "4进2",
list: [
[
{
name: "EDG",
win: true,
id: 1,
},
{
name: "IG",
win: false,
id: 2,
},
],
[
{
name: "DWG",
win: true,
id: 1,
},
{
name: "VG",
win: false,
id: 2,
},
],
],
},
{
title: "决赛",
list: [
[
{
name: "EDG",
win: true,
id: 1,
},
{
name: "DWG",
win: false,
id: 2,
},
],
],
},
{
title: "冠军",
list: [
{
name: "EDG",
win: true,
id: 1,
},
],
},
],
config
{
initheight: 50, // 对垒单元格高度
itemHeight: 40, // 单元格高度
mb: 10, // 相邻对垒单元格距离
justify: "flex-start", //文本对其 center flex-end flex-start
borderWidth: 2, // border宽度
borderColor: "#f05b5b", // 连接线颜色
win: {
// 胜利单元格样式
backgroundColor: "rgb(250, 224, 224)",
color: "#f05b5b",
borderColor: "#f05b5b",
},
lose: {
// 失败单元格样式
backgroundColor: "#f2f2f2",
color: "rgba(0, 0, 0, 0.65)",
borderColor: "#ccc",
},
};
插槽
header
顶部title插槽
<template v-slot:header>
<span>顶部插槽</span>
</template>
none
暂无数据插槽
<template v-slot:none>
<h1>暂无数据</h1>
</template>