qfuijessica

###安装

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>