// 头像
{
type: "avatar",
options: {
// 行数(默认:1)
row: 1,
// 列数(默认:1)
column: 1,
// 每个元素宽(默认40)
width: "40px",
// 每个元素的高(默认40)
height: "40px",
// 背景颜色(有默认)
backgroundColor: "#ccc",
// 水平对齐方式(默认:左)
justifyContent: "flex-start",
// 垂直对齐方式(默认:center)
alignItems: "center",
// 是否动画(默认:无)
active: true,
// 行间距(默认: 10)
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
},
},
// 分割线
{
type: "line",
options: {
// 行
row: 2,
// 列
column: 2,
width: "120px",
height: "20px",
backgroundColor: "#ccc",
justifyContent: "flex-start",
// 垂直对齐方式(默认:center)
alignItems: "center",
// 是否动画
active: true,
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
},
},
API |
内容 |
类型 |
默认值 |
row |
|
Number |
4 |
column |
|
Number |
1 |
width |
|
String |
600px |
height |
|
String |
20px |
backgroundColor |
|
String |
#F2F2F2 |
justifyContent |
|
String |
flex-start |
active |
|
Boolean |
false |
itemRowMargin |
|
String |
10px |
itemColumnMargin |
|
String |
0px |
firstWidth |
|
String |
200px |
lastWidth |
|
String |
'' |
alignItems |
|
String |
center |
使用
options: {
active: true,
}
// 卡片
{
type: "card",
options: {
// 行数(默认:1)
row: 2,
// 列数(默认:1)
column: 2,
// 每个元素宽(默认:30)
width: "30px",
// 每个元素的高(默认:30)
height: "30px",
// 背景颜色(有默认)
backgroundColor: "#ccc",
// 对齐方式(默认:左)
justifyContent: "flex-start",
// 是否动画(默认:无)
active: true,
// 行间距(默认:10)
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
// 垂直对齐方式(默认:center)
alignItems: "center",
},
},
<WangSkeleton height="500px" :options="options" />
API |
内容 |
类型 |
值 |
默认值 |
type |
显示类型 |
String |
avatar/line/list/card/custom |
list |
options |
全局设置项 |
Object |
{} |
{} |
childrenOption |
设置子组件类型 |
Array |
[] |
[] |
isUseSlot |
是否使用插槽 |
Boolean |
false/true |
false |
width |
模块宽 |
String |
100px |
'' |
height |
模块高 |
String |
100px |
'' |
backgroundColor |
背景颜色(调试用) |
String |
red |
'' |
API |
内容 |
类型 |
值 |
默认值 |
type |
显示类型 |
String |
avatar/line/list/card/custom |
|
options |
全局设置项 |
Object |
{} |
{} |
childrenOption |
设置子组件类型 |
Array |
[] |
|
isUseSlot |
是否使用插槽 |
Boolean |
false/true |
false |
|
|
|
|
|
<WangSkeleton :childrenOption="childrenOption" type="custom" />
- 全局配置项可以全部不设置,在每个子组件中都有默认值使用
- 传全局的配置就使用全局的配置,没有就用单独的每个item的配置(每个item的配置优先级高)
API |
内容 |
类型 |
backgroundColor |
背景颜色 |
String |
active |
|
|
itemRowMargin |
|
|
itemColumnMargin |
|
|
alignItems |
|
|
justifyContent |
|
|
height |
|
|
width |
|
|
row |
|
|
// 全局配置
options: {
// 背景颜色
backgroundColor: "red",
// 是否动画
active: false,
},
childrenOption: [
// 头像
{
type: "avatar",
options: {
// 行数(默认:1)
row: 1,
// 列数(默认:1)
column: 1,
// 每个元素宽(默认40)
width: "40px",
// 每个元素的高(默认40)
height: "40px",
// 背景颜色(有默认)
backgroundColor: "#ccc",
// 水平对齐方式(默认:左)
justifyContent: "flex-start",
// 垂直对齐方式(默认:center)
alignItems: "center",
// 是否动画(默认:无)
active: true,
// 行间距(默认: 10)
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
},
},
// 分割线
{
type: "line",
options: {
// 行
row: 2,
// 列
column: 2,
width: "120px",
height: "20px",
backgroundColor: "#ccc",
justifyContent: "flex-start",
// 垂直对齐方式(默认:center)
alignItems: "center",
// 是否动画
active: true,
// 行间距(默认:10)
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
},
},
// 卡片
{
type: "card",
options: {
// 行数(默认:1)
row: 2,
// 列数(默认:1)
column: 2,
// 每个元素宽(默认:30)
width: "30px",
// 每个元素的高(默认:30)
height: "30px",
// 背景颜色(有默认)
backgroundColor: "#ccc",
// 对齐方式(默认:左)
justifyContent: "flex-start",
// 是否动画(默认:无)
active: true,
// 行间距(默认:10)
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
// 垂直对齐方式(默认:center)
alignItems: "center",
},
},
// 列表
{
type: "list",
options: {
// 行数(默认:1)
row: 3,
// 列数(默认:1)
column: 1,
// 每个元素宽(默认600)
width: "600px",
// 每个元素的高(默认20)
height: "20px",
// 背景颜色(默认: #F2F2F2)
backgroundColor: "#ccc",
// item 对齐方式(默认:左)
justifyContent: "center",
// 是否动画(默认:无)
active: true,
// 行间距
itemRowMargin: "10px",
// 列间距(默认: 0)
itemColumnMargin: "0px",
// 首条宽度(默认100)
firstWidth: "300px",
// 末条宽度(默认 '')
// lastWidth: "300px",
// 垂直对齐方式(默认:center)
alignItems: "center",
},
},
],