sowell-components v0.0.3

sowell-components

描述

sowell 基于Element ui的常用组件二次封装

安装

npm i sowell-components -S

使用

// 按需引入
import { dialog, preview, search, table } from 'sowell-components'

Vue.use(dialog).use(preview).use(search).use(table)

// 全部引入
import SowellComponents from 'sowell-components'

Vue.use(SowellComponents)

• 组件-dialog （弹窗）

<template>
  <sowell-dialog  :title="title"
                  width="70%"
                  :height="70"
                  :show.sync="dialogVisible"
                  :appendToBody="true"
                  @openDialog='openDialog'>
    <template v-slot:default>
      弹窗内容
    </template>
    <div slot="footer"
          class="dialog-footer">
      <el-button >关 闭</el-button>
      <el-button type="primary">确认</el-button>
    </div>
  </sowell-dialog>
</template>

• 组件-preview （文件预览）

<template>
  <sowell-preview :title="preview.title"
                  :show.sync="preview.dialogVisible"
                  :fileInfo="preview.fileInfo"
                  :appUrl="preview.appUrl" ></sowell-preview>
</template>
<script>
export default {
  data () {
    return {
      preview: {
        title: '附件预览',
        dialogVisible: false,
        appUrl: process.env.VUE_APP_API_BASE_URL,
        fileInfo: {}
      }
    }
  },
  methods: {
    previewFile ({ url, name }) {
      this.preview = {
        dialogVisible: true,
        title: name,
        fileInfo: {
          path: url,
          name: name
        }
      }
    }
  }  
}
</script>          

• 组件-search （搜索条件）

<template>
  <sowell-search class="mt16"
                   :btnItems="btnItems"
                   :formOptions="formOptions"
                   @onInquire="onInquire"
                   @onReset="onReset" ></sowell-search>
</template>
<script>
export default {
  data () {
    const changeFunction = (val, key) => {
      this.search[key] = val
    }
    return {
      search: {

      },
      btnItems: 'inquire,reset',
      formOptions: [
        {
          label: '类型名称',
          placeholder: '输入类型名称',
          prop: 'typeName',
          value: '',
          element: 'el-input',
          disabled: true,
          events: {
            change (val) {
              changeFunction(val, 'typeName')
            }
          },
          style: {
            width: '160px'
          }
        },
        {
          label: '标签',
          prop: 'label',
          element: 'el-select',
          value: '',
          options: [],
          clearable: true,
          events: {
            change (val) {
              changeFunction(val, 'label')
            }
          },
          style: {
            width: '160px'
          }
        },
        {
          label: '状态',
          prop: 'status',
          element: 'el-select',
          value: '',
          clearable: true,
          options: statusOption,
          events: {
            change (val) {
              changeFunction(val, 'status')
            }
          },
          style: {
            width: '160px'
          }
        }
      ],
    }
  },
  methods: {
    onInquire () {
      console.log(this.search)
    },
    onReset () { },
  }  
}
</script>          

• 组件-table （表格展示）

<template>
  <sowell-table height="68vh"
                className="gray-head"
                :data="table.data"
                :col-configs="table.colConfig"
                :pageNum.sync="search.pageNum"
                :pageSize.sync="search.pageSize"
                :total="table.total"
                @getTableData="getTableData">
    <el-table-column  slot="operation"
                      label="操作"
                      align="center"
                      width="120">
      <template slot-scope="scope">
        <el-button type="primary" 
                   @click="onDetail(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </sowell-table>
</template>
<script>
export default {
  data () {
    return {
      search: {
        pageNum: 1,
        pageSize: 10
      },
      table: {
        data: [],
        total: 0,
        isLoading: false,
        colConfig: Object.freeze([
          {
            label: '名称',
            prop: 'name',
            align: 'left',
            width:  100
          },
          {
            label: '手机号',
            prop: 'phone'
          }
          {
            slot: 'operation'
          }
        ])
      }
    }
  },
  methods: {
    onDetail (item) {
      
    },
    getTableData () {
      
    }
  }  
}
</script>