liting-box

说明

WOF-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品

安装

cnpm i litingbox -S

使用

在src/main.js
import WOFUI from 'litingbox';
Vue.use(WOFUI);
import 'litingbox/qf-ui.css';

组件

框框

<template>
 <fieldset>
     <legend>{{title}}</legend>
     <slot></slot>
 </fieldset>
</template>
<script>
export default {
 // 说明：仅仅写UI组件库的时候才有用，平时相对没用
 // 目的：后期调用语法
 name: 'qfui-kuangkuang',
 props: {
     title: {
         type: String
     }
 },
}
</script>
<style scoped>
</style>

分页

<template>
 <div class="page">
     <span v-for="n in total" v-bind:key="n" @click="changePageFn(n)">
         {{n}}
     </span>
 </div> 
</template>
<script>
export default {
 name: 'qfui-page',
 props: {
     total: {  
         type: Number
     }
 },

 methods: {
     changePageFn(n) {
         this.$emit('changePageFn', n)
     }
 }
}
</script>
<style scoped>
.page {
 width: 300px;
 height: 50px;
}

.page span {
 width: 10px;
 height: 10px;
 padding: 10px;
 background: black;
 color: #fff;
}
.page span:hover{color:yellow;cursor:pointer;}
</style>

创建src/components/index.js文件

import Kuangkuang from '@/components/kuangkuang/Index.vue'
import Page from '@/components/page/Index.vue'

export default Vue => {
 // 语法：Vue.component(后期调用的组件名, 单文件组件)
 // 注册：后期就可以直接调用，不需要单独导入
 // Vue.component('qfui-kuangkuang', Kuangkuang)
 // Vue.component('qfui-page', Page)
 // Vue.component(Kuangkuang.name, Kuangkuang)
 // Vue.component(Page.name, Page)

 const coms = [Kuangkuang, Page]
 coms.forEach(com => {
   Vue.component(com.name, com)
 })
}