yl-qfui
v1.0.1
Published
ui
Downloads
4
Readme
###安装
cnpm i yl-ui -S
###使用
配置 在main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
###组件框框
<template>
<fieldset>
<legend>{{title}}</legend>
<slot></slot>
</fieldset>
</template>
<script>
export default {
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>