ml-solar-system
v1.0.8
Published
css3 solar-system bar by vue
Downloads
4
Readme
ml-solar-system 类太阳系首页组件
基本用法
安装：
npm i ml-solar-system使用：
import solarSystem from 'ml-solar-system'
Vue.use(solarSystem);
<div class="solar-system" style="width:100%;height:500px;font-size:12px;">
<ml-solar-system :ball-group="ballGroup" :center-sun = "centerSun" @clickBall="clickCallback"></ml-solar-system>
</div>
<script>
export default {
name: 'App',
data () {
return {
centerSun: {
centerSunImg: require('../assets/images/solar/sun.png'),
centerSunLabel: '数据应用服务',
centerSunWidth: '30em',
centerSunHeight: '34em',
},
ballGroup: [
{
orbitR: '35%', // 轨道半径
ballPositionDeg: 30, // 球初始位置角度
ballLabel: '', // 球对应名称
ballSize: '2.7em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '10s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball21.png') // 球图片
},
{
orbitR: '50%', // 轨道半径
ballPositionDeg: 330, // 球初始位置角度
ballLabel: 'ball1', // 球对应名称
ballSize: '5em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '50s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball31.png') // 球图片
},
{
orbitR: '70%', // 轨道半径
ballPositionDeg: 60, // 球初始位置角度
ballLabel: 'ball2', // 球对应名称
ballSize: '8.5em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball41.png') // 球图片
},
{
orbitR: '70%', // 轨道半径
ballPositionDeg: 150, // 球初始位置角度
ballLabel: 'ball3', // 球对应名称
ballSize: '9.5em', // 球大小
ballLabelColor: '#fff', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball42.png') // 球图片
},
{
orbitR: '80%', // 轨道半径
ballPositionDeg: 210, // 球初始位置角度
ballLabel: 'ball4', // 球对应名称
ballSize: '12.5em', // 球大小
ballLabelColor: 'orange', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball51.png') // 球图片
},
{
orbitR: '80%', // 轨道半径
ballPositionDeg: 100, // 球初始位置角度
ballLabel: 'ball5', // 球对应名称
ballSize: '7.4em', // 球大小
ballLabelColor: '#55bef3', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball52.png') // 球图片
},
{
orbitR: '80%', // 轨道半径
ballPositionDeg: 270, // 球初始位置角度
ballLabel: 'ball6', // 球对应名称
ballSize: '5.8em', // 球大小
ballLabelColor: '#eeb364', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball53.png') // 球图片
},
{
orbitR: '80%', // 轨道半径
ballPositionDeg: 0, // 球初始位置角度
ballLabel: '', // 球对应名称
ballSize: '2.5em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball54.png') // 球图片
},
{
orbitR: '98%', // 轨道半径
ballPositionDeg: 320, // 球初始位置角度
ballLabel: 'ball7', // 球对应名称
ballSize: '10em', // 球大小
ballLabelColor: 'pink', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball61.png') // 球图片
},
{
orbitR: '98%', // 轨道半径
ballPositionDeg: 25, // 球初始位置角度
ballLabel: 'ball8', // 球对应名称
ballSize: '9em', // 球大小
ballLabelColor: 'yellow', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball62.png') // 球图片
},
{
orbitR: '98%', // 轨道半径
ballPositionDeg: 180, // 球初始位置角度
ballLabel: '', // 球对应名称
ballSize: '6em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball63.png') // 球图片
},
{
orbitR: '98%', // 轨道半径
ballPositionDeg: 240, // 球初始位置角度
ballLabel: '', // 球对应名称
ballSize: '1em', // 球大小
ballLabelColor: 'red', // 名称颜色
speed: '100s', // 每个轨道速度
ballImg: require('../assets/images/solar/ball55.png') // 球图片
}
]
}
},
methods: {
clickCallback ({item, index}) {
console.log(index);
console.log(item);
alert(index + ': ' + JSON.stringify(item));
}
}
}
</script>
:::
参数说明
| 参数 | 说明 | |------------------------------- |-------------------------------------------------------------| | centerSun | 中心球的数据配置，包括图片、宽、高以及中间文字（当然样式也可在css中配置）| | ballGroup | 球和轨道数据配置 （每个球以及其所在轨道为一项，同上，样式也可在css中配置）| { orbitR: '105em', // 轨道半径(轨道为长宽相等的圆）（需带单位，%,px，rem，em均可）reqiured ballPositionDeg: 180, // 球初始位置相对于中心点的夹角 ballLabel: 'ball1', // 球对应名称 ballSize: '2.5em', // 球大小 （需带单位，px，rem，em均可）reqiured ballLabelColor: 'red', // 名称颜色 默认为白色 speed: '100s', // 每个轨道速度 默认为100s ballImg: require('../assets/images/solar/ball63.png') // 球图片 reqiured }
事件
| 名称 | 说明 | |------------------------------- |-------------------------------------------------------------| | clickBall | 点击事件（item, index）参数分别为点击的此球的ballGroup配置项，以及index