vue-x-ui
A UI for vue you can use it for components or plugin
alert
confirm
loading
toast
staggeredGroup
turnTable
install
npm install @gblw/vue-x-ui
example
git clone ....
npm install
npm run dev
useage
As component
<template>
<div id="demo">
<loading
:show='true'
text='拼命加载中'>
</loading>
<alert
title='你好'
subtitle="恭喜您年会获奖"
text="xr~"
v-model="showSuccessAlert" >
</alert>
</div>
</template>
<script>
import {loading,alert} from '@gblw/vue-x-ui'
export default {
name: '',
components: {
loading,
alert
},
data() {
return {
showSuccessAlert: true
}
},
mounted() {
},
methods: {
},
}
</script>
<style >
body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}
</style>
As Plugin
main.js
import {
LoadingPlugin,
AlertPlugin,
ToastPlugin,
ConfirmPlugin
} from '@gblw/vue-x-ui'
Vue.use(LoadingPlugin)
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
Vue.use(ConfirmPlugin)
<template>
<div id="demo">
<div @click='showLoading'>loading插件</div><br>
<div @click='showAlert'>alert插件</div><br>
<div @click='showToast'>toast插件</div><br>
<div @click='showConfirm'>confirm插件</div><br>
</div>
</template>
<script>
export default {
name: '',
components: {
},
data() {
return {
showSuccessAlert: true
}
},
mounted() {
},
methods: {
showLoading() {
this.$x.loading.show()
},
hideLoading() {
this.$x.loading.hide()
},
showToast() {
this.$x.toast('我是toast')
},
showConfirm() {
this.$x.confirm({
title:'提示',
body: '你喜欢我么？',
cancleText: '取消',
confirmText: '确定',
btnReverse: false, //按钮是否反正
useHTMLString: 'false' //是否使用动态HTML插入
}).then(res => {
console.log(res) //根据res判断是取消还是确定
res ? this.$x.toast('确定') : this.$x.toast('取消')
})
},
showAlert() {
// this.$x.alert('wm真帅')
this.$x.alert({
title:'这是title',//标题
subtitle:'这是subtitle',//副标题
text:'这是text', //主题
delayed: false // 默认2000ms后自动取消
})
}
},
watch: {
},
computed: {
}
}
</script>
staggeredGroup useagge
<staggered-group>
<div v-for="(item, index) in computedList" :key="item.msg" :data-index="index" :height='20px'>{{ item.msg }}</div>
</staggered-group>
turnTable useage
// arrowImg:中奖箭头图片
// wheelImg: 转盘图片
// config: 配置项
// handleTurn: 手动触发转动
// done： 转动结束后emit index
<turn-table
:arrowImg='arrowImg'
:wheelImg='wheelImg'
:config='turnTableConfig'
@handleTurn='handleBefore'
@done='turnDone'
ref='turnTable'
</turn-table>
...
data() {
return {
turnTableConfig: {
total: 9, //一共奖品数量
maxTurn: 10, //转的圈数
duration: 3 //持续时间 s
//awardId: 1 //中奖第几个，应该异步返回
},
awardId: 0,
}
}，
method: {
<!-- 由于得奖通常都是RD给我们数据，所以这里需要异步请求之后 手动去调用转动 -->
async handleBefore() {
({
data: {
awardId: this.awardId,
}
} = await this.$api.lotteryDraw()),
this.$refs.turnTable.start(prizeInfo.get(awardId).index) // awardId对应的index
}
<!-- 当转盘转动结束后，会延迟300ms触发 -->
turnDone(index) {
console.log(index)
},
}