``` **yarn add wanghaoUI
npm install wanghaoui``
`
yarn add wanghaoUI
main.js:
import wanghaoUI from 'wanghaoUI'
Vue.use(wanghaoUI)
`
组件：
列表滚动 whScrollList：
浏览器全屏功能 whScreenfull：
饼图组件 whPie：
#####
列表滚动 whScrollList：
`
:class-option="classOption"
:max="50"
class="warp"
>
export default {
name: 'ScrollList',
data() {
return {
listData: [{
'name': '无缝滚动1',
}, {
'name': '无缝滚动2',
}, {
'name': '无缝滚动3',
}, {
'name': '无缝滚动4',
}, {
'name': '无缝滚动5',
}, {
'name': '无缝滚动6',
}, {
'name': '无缝滚动7',
}, {
'name': '无缝滚动8',
}, {
'name': '无缝滚动9',
}],
classOption: {
limitMoveNum: 5, //启动无缝滚动最小数据数
hoverStop: true, //是否启用鼠标hover控制
direction: 1, // 0 往下 1 往上 2向左 3向右
openTouch: true, //开启移动端touch
autoPlay: true,
isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量
}
}
},
mounted() {
},
methods: {
}
}
`
浏览器全屏功能 whScreenfull：
`
{{ isFullscreen ? '退出全屏' : '全屏' }}
export default {
name: 'screenfull',
data() {
return {
isFullscreen: false,
}
},
mounted() {
},
methods: {
getFullScreenStatus(status) {
this.isFullscreen = status
},
clickFullscreen() {
this.$refs.screenfull.toggleFullscreen()
},
}
}
`
饼图组件 whPie：
``
mounted () {
setTimeout(() => {
this.chartData = [{
name: '测试1',
value: 1
}, {
name: '测试2',
value: 2
}, ]
}, 2000)
},