background-template v0.0.10

background-template 后台模板页面

• 组件是基于 Element-UI 的二次封装
• 包含 pageWrap filters btnWrap pagination dialogs 五个组件
• 其中 pageWrap 用于样式布局，其他组件以插槽的形式使用（也可单独使用）

安装

使用 npm:

npm install background-template

使用 yarn:

yarn add background-template

引入

在 main.js 中加入以下内容：

import backgroundTemplate from "background-template";
import "background-template/lib/background-template.css";

Vue.use(backgroundTemplate);

在 App.vue 中加入以下内容（请勿在 style 中添加 scoped）：

<style>
  html,
  body,
  #app {
    height: 100% !important;
  }
</style>

使用

PageWrap 用于样式布局

PageWrap Slot

举个例子

<template>
  <pageWrap>
    <template v-slot:filters>
      <filters ref="filters" download reset showFold @search="search"></filters>
    </template>

    <template v-slot:btn>
      <btnWrap
        ref="btnWrap"
        :eventsList="['downloadTemplate', 'upload']"
        @downloadTemplate="download"
        @upload="upload"
      ></btnWrap>
    </template>

    <template>
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        stripe
        height="100%"
        style="width: 100%"
        border
      >
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{ getIndex(scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="classify" label="分类" align="center">
        </el-table-column>
      </el-table>
    </template>

    <template v-slot:page>
      <pagination ref="pagination" :total="total" @change="handlePage">
      </pagination>
    </template>

    <dialogs
      :visible="visible"
      title="弹窗名称"
      fullScreen
      :dialogConfig="{ width: '600px' }"
    >
      <div class="dialog--body">弹窗的内容</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 认</el-button>
      </div>
    </dialogs>
  </pageWrap>
</template>

import moment from "moment";

const tempList = [
  {
    label: "下拉筛选",
    key: "fls",
    placeholder: "请下拉选择数据",
    type: "select",
    options: [
      {
        label: "牛哇",
        value: "牛哇",
      },
      {
        label: "确实",
        value: "确实",
      },
    ],
  },
  {
    label: "日期",
    key: "date",
    placeholder: "请选择日期",
    type: "date",
  },
  {
    label: "日期2",
    key: "date2",
    placeholder: "请选择日期",
    type: "date",
  },
  {
    label: "输入框",
    key: "input",
    placeholder: "请输入数据",
    type: "input",
  },
  {
    label: "时间",
    key: "time",
    placeholder: "请选择月份",
    type: "month",
    clearable: false,
    valueType: "array",
    defaultValue: moment().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
  },
];

export default {
  data() {
    return {
      searchConfig: {},
      tableData: [],
      total: 0,
      tableLoading: false,
      visible: true,
    };
  },
  mounted() {
    this.$refs.filters.initSearchList(tempList);
  },
  methods: {
    search(query) {
      console.log("query", query);
      this.searchConfig = query;
      this.$refs.pagination.resetPage();
    },
    async download() {},
    async upload() {
      try {
        this.$refs.btnWrap.changeLoading("upload", true);
      } finally {
        this.$refs.btnWrap.changeLoading("upload");
        this.$refs.pagination.resetPage();
      }
    },
    getQuery() {
      const { time = null, ...others } = this.searchConfig;
      const params = { ...others };
      if (time) {
        params.beginTime = time[0];
        params.endTime = time[1];
      }
      return params;
    },
    handlePage() {
      const { pageSize, currentPage } = this.$refs.pagination.pageConfig;
      console.log({ pageSize, currentPage });
      // 发送请求
    },
    getIndex(num) {
      const { pageSize, currentPage } = this.$refs.pagination.pageConfig;
      return num + pageSize * (currentPage - 1);
    },
  },
};

Filters 筛选器组件

通过 ref 使用 initSearchList 进行初始化； 通过 sendSearchOnload 来配置是否在加载完成之后触发 search 事件；

Filters Attributes

Filters Events

Filters Methods

Search Attributes

BtnWrap 按纽栏组件

该组件设计的初衷是为了在不同页面展示相同的 button 相同的 顺序、文案、icon、type 等

BtnWrap Attributes

BtnWrap Events

BtnWrap Methods

Pagination 翻页器

• pageSizes: 15, 30, 60

Pagination Events

Pagination Methods

• 这里对 el-pagination 也进行了兼容 Element-UI pagination 的默认事件

Dialogs 弹窗

Dialogs Attributes

• 这里对 el-dialog 也进行了兼容 Element-UI dialog 的默认事件

目录结构

|-- src
|-- App.vue
|-- index.js
|-- main.js
|-- assets
| |-- logo.png
| |-- styles
| |-- class.styl
| |-- index.styl
|-- components
| |-- btnWrap.vue // 按钮组件
| |-- dialogs.vue // 弹窗组件
| |-- filters.vue // 筛选器组件
| |-- init.js
| |-- pageWrap.vue // page 组件(所有的组件都以 slot 的方式实现)
| |-- pagination.vue // 翻页组件
|-- router
| |-- index.js
|-- store
| |-- index.js
|-- utils
| |-- initCss.js
| |-- initElement.js
|-- views
|-- About.vue
|-- Home.vue