qfuijessica
v1.0.2
Published
this is qfuijessica1
Downloads
9
Readme
###安装
cnpm i qfuijessica -S
###使用
配置 在main.js
import QfUI from '@/qfui';
Vue.use(QfUI);
###分页
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
name: 'qfui-page',
props: {
total: {
type: Number
}
},
methods: {
changePageFn(n) {
this.$emit('changePageFn', n)
}
}
}
</script>
###按钮
<template>
<button @click="$emit('click')" :class=" 'van-button van-button--'+type+' van-button--normal' ">
<slot></slot>
</button>
</template>
<script>
export default {
name:'qfui-button',
props: {
type: {
type: String,
default: 'primary ',
}
},
}
</script>
<style>
<qfui-button type="primary">主要按钮</qfui-button>
<qfui-button type="success" >成功按钮</qfui-button>
<qfui-button type="default">默认按钮</qfui-button>
<qfui-button type="warning" >警告按钮</qfui-button>
<qfui-button type="danger" >危险按钮</qfui-button>
###laoding加载
<template>
<div class="qf-loading1" v-show="state" @click="$emit('close">
<span>正在努力加载中...</span>
</div>
</template>
<script>
export default {
name:'qfui-loading',
props: {
state: {
type: Boolean,
required: true,
}
},
}
</script>
###对话框
<template>
<div class="qf-dialog" v-show="state">
<div class="box">
<div class="header">{{title}}</div>
<div class="main">{{content}}</div>
<div class="footer">
<button class="btn1" @click="$emit('update:state')">取消</button>
<button class="btn2" @click="$emit('submit');$emit('update:state')">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
name:'qfui-dialog',
props: {
title: {
type: String,
required: true,
},
content: {
type: String,
required: true,
},
state: {
type: Boolean,
default: false,
}
},
}
</script>
<qfui-dialog @submit="editUserFn" :state.sync="editUser" title="编辑用户" content="用户信息详细:"></qfui-dialog>
<qfui-dialog @submit="editUserRolesFn" :state.sync="editUserRoles" title="用户权限管理" content="用户权限详细:"></qfui-dialog>
<button class="useBtn" @click="editUser=true" >显示编辑用户信息</button>
<button class="RolesBtn" @click="editUserRoles=true">显示用户权限信息</button>
<script>
export default {
data(){
return{
state:false,
editUser:false,
editUserRoles:false,
}
},
methods:{
editUserRolesFn(){
alert('后期编辑用户权限信息')
},
editUserFn(){
alert('后期编辑用户信息')
},
}
}
</script>
###提示框
<template>
<div class="qf-tips">
<slot></slot>
</div>
</template>
export default {
name:'qfui-tips',
}
</script>