quanzi-ui v1.1.1

前端vue组件库

1.安装

npm install quanzi-ui -D

2.1在项目入口文件进行全局的组件注册

import Vue from 'vue'
import Qui from 'quanzi-ui'

Vue.use(Qui)

2.2在页面使用组件

2.2.1 share组件

//子组件向父组件传递了shareType参数，并触发父组件定义的share事件
<template>
     <q-share @shareEvents="share"></q-share>
</template>
<script>
export default {
     data(){
          return{
          }
     },
     methods:{
          share(type){
               console.log(type)
          }
     }
}
</script>

2.2.2 popMessage组件

//向子组件传递popMessage
<template>
     <q-popmess :popMessage="popMessage"></q-popmess>
</template>
<script>
export default {
     data(){
          return{
               popMessage: '生成图片中...'
          }
     }

}
</script>

2.2.3 loading组件

//向子组件传递loadingContent
<template>
     <q-loading :loadingContent="loadingContent"></q-loading>
</template>
<script>
export default {
     data(){
          return{
               loadingContent: '加载中...'
          }
     }

}
</script>

2.2.4 address组件

<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>

2.2.5 cell组件

//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>