Magic 魔方

基本用法

  1.     <nut-magic @click="click" :data="dataArr"></nut-magic>
  1. export default {
  2.     data() {
  3.         return {
  4.             dataArr: [
  5.                 {
  6.                     type:'rank',
  7.                     name:'name1',
  8.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  9.                     desc:'desc',
  10.                     link:'link'
  11.                 },
  12.                 {
  13.                     type:'rank',
  14.                     name:'name2',
  15.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  16.                     desc:'desc',
  17.                     link:'link'
  18.                 },
  19.                 {
  20.                     type:'lbs',
  21.                     name:'name3',
  22.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  23.                     desc:'desc',
  24.                     link:'link'
  25.                 },
  26.                 {
  27.                     type:'lbs',
  28.                     name:'name4',
  29.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  30.                     desc:'desc',
  31.                     link:'link'
  32.                 },
  33.                 {
  34.                     type:'act',
  35.                     name:'name5',
  36.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  37.                     desc:'desc',
  38.                     link:'link'
  39.                 },
  40.                 {
  41.                     type:'act',
  42.                     name:'name6',
  43.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  44.                     desc:'desc',
  45.                     link:'link'
  46.                 },
  47.                 {
  48.                     type:'rank',
  49.                     name:'name7',
  50.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  51.                     desc:'desc',
  52.                     link:'link'
  53.                 },
  54.                 {
  55.                     type:'rank',
  56.                     name:'name8',
  57.                     pictureUrl:'https://img10.360buyimg.com/n5/s54x54_jfs/t1/164065/10/8839/39628/603ee7edE9dee283f/e56acfa461919177.jpg',
  58.                     desc:'desc',
  59.                     link:'link'
  60.                 }
  61.           ]
  62.         };
  63.     },
  64.     methods: {
  65.         click(item) {
  66.             console.log('clicked now', item);
  67.         }
  68.     }
  69. }

Prop

字段说明类型默认值
type样式类型Stringrank
autoplay自动轮播Booleantrue
data传入数据Array[]
data[].type样式类型String‘’
data[].name名称String‘’
data[].pictureUrl上半部分背景图片String‘’
data[].desc描述String‘’
data[].link跳转链接String‘’

事件

字段说明类型默认值
click点击魔方触发事件function-

Magic 魔方 - 图1