npm install quanzi-ui -D
import Vue from 'vue'
import Qui from 'quanzi-ui'
Vue.use(Qui)
//子组件向父组件传递了shareType参数,并触发父组件定义的share事件
<template>
<q-share @shareEvents="share"></q-share>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
share(type){
console.log(type)
}
}
}
</script>
//向子组件传递popMessage
<template>
<q-popmess :popMessage="popMessage"></q-popmess>
</template>
<script>
export default {
data(){
return{
popMessage: '生成图片中...'
}
}
}
</script>
//向子组件传递loadingContent
<template>
<q-loading :loadingContent="loadingContent"></q-loading>
</template>
<script>
export default {
data(){
return{
loadingContent: '加载中...'
}
}
}
</script>
<template>
<!-- 将地址信息用prop传递给子组件 -->
<q-address ref="address" :phone="phoneNumber" :person="people" :addreDetail="addressDetail" @submitAddr="submitAddress" :value="value">
</q-address>
</template>
<script type="text/javascript">
export default {
data () {
return {
phoneNumber: '13815137924',
orderNum: '',
value: [],
people: '小九',
addressDetail: '4号楼'
}
},
beforeMount(){
//地址信息的初始化,例如圈子内请求'/pointsshop/exchange/address'接口获取用户填写过的地址信息
},
methods:{
//提交地址信息
submitAddress(params){
let _that = this;
this.$http.post('/vip/gift/send', params).then(function(res) {
if(res.data.error){
//调用子组件的popMess方法,也可自行引入popMess组件
_that.$refs.address.popMess(res.data.error.message)
}else{
// 提交地址成功之后的逻辑
}
}, function(response) {
_that.$refs.address.popMess('error')
});
}
}
}
</script>
//cellType有4种值:0,1,2,3
//0是右侧可点击的cell,tipEvents定义点击事件
//1是单纯显示信息的cell
//2是显示快递信息的cell,复制功能暂时没加上,后期可以加上
//3是空白cell
//可根据自己的需求对cellType进行传值
<template>
<q-cell :itemName="name" :itemInfo="info" :itemTip="tip" @tipEvents="goTip" :cellType="form==1&&ifkk==2 ? 2: 0"></q-cell>
</template>
<script>
export default {
data(){
return{
name: '小九',
info: '2018-09-09',
tip:'点击填写物流信息',
type: 1,
form: 1,
ifkk: 1
}
},
methods:{
goTip(){
console.log(111)
}
}
}
</script>