sdevcore-element-v2 v1.0.9

SDevCore-element-v2

安装教程

npm  i  sdevcore-element-v2

使用说明

引入

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

//入口js文件
import SC from 'sdevcore-element-v2'

//引入组件库样式
import 'sdevcore-element-v2/index.css'


//依赖element组件库
Vue.use(ElementUI, {
  size: "mini",
});

//使用开发工具
Vue.use(SC);

/**
 * 支持传入主题色配置, 必须为 16进制 颜色值
 */
// Vue.use(SC, '#f39800');

组件

SBody

<SBody>
    <template #logo>
      左侧头部
    </template>
    <template #menu>
      左侧菜单
    </template>
    <template #copyright>
      左侧底部
    </template>
    <template #header>
      右侧头部
    </template>
    <template #main>
      主体部分
    </template>
</SBody>

SPanel

<SPanel title="用户列表" hide-title @full-change="onFullChange">
    <template #body>
      面板主体
    </template>
    <template #footerLeft>
      底部左侧
    </template>
    <template #footerRight>
      底部右侧
    </template>
</SPanel>

SPanel配置项/事件

STable

<STable :data="data" :columns="columns">
    <template #cloumnKey="{ data }">
        {{  data[columnKey] }}
    </template>
</STable>

STable组件配置项

STable事件

STable插槽

STableBar

<STableBar 
    :search-field-list="searchFieldList" 
    search-immediate
    @search="onSearch"
    @reset="onReset"
/>

STableBar配置项

searchField 对象配置

SPage

<SPage :page-data="response" @change="onPageChange" />

SPage配置项/事件

SDialog

<SDialog title="弹窗" @cancel="onCancel()" @confirm="onConfirm()">
    <!---弹窗内容区域-->
</SDialog>

SDialog配置项

SDialog事件

SDialog使用说明

SDialog是自定义的DIalog组件，需配合全局工具类 DialogHelper 一起使用

示例

index.vue 主页面

<template>
    <STable data="userList" :columns="columns" @edit="onEditUser"/>
</template>
<script>
export default{
    data() {
        return{
            userList: [],
            columns:[
                {key: 'name'， label: '姓名'},
                {key: 'age'， label: '年龄'},
                {key: 'sex'， label: '性别'}
            ]
        }
    },
    methods: {
        async getUserList() {
            this.userList = await $http.userList.post()
        },
         async onEditUser() {
              await this.$DialogHelper.show(SDialog, param)
              // 刷新列表
              this.getUserList()
        }
    }
}
</script>

editView.vue 弹窗页面

<template>
  <SDialog title="编辑弹窗" @cancel="onCancel()" @confirm="onSubmit()">
      <el-form v-model="formData">
          ......
      <el-form>
  </SDialog>
</template>
<script>
export default{
    props:{
        // props里面这三项是固定的，只要使用了DialogHelper都会传入这三项
        onConfirm: Function,
        onCancel: Function,
        param: Object
    },
    data() {
        return{
            formData: {}
        }
    },
    methods: {
        async onSubmit() {
            await $http.updateUser.post(this.formData)
            // 调用onConfirm事件，关闭弹窗，完成Promise
            // onConfirm 也可传递参数 this.confirm(param)，外部在promise完成之后拿到param
            this.onConfirm()
        }
    }
}

</script>

SBoard

<SBoard :background-img="require('@/assets/bg1.png')">

   <!--看板内容区域，内部使用绝对定位控制元素块位置即可-->

</SBoard>

工具类

1.  class DialogHelper

// 打开弹窗
this.$DialogHelper.show(element, param)

// 打开单选弹窗
this.$DialogHelper.select(element, param)

// 打开多选弹窗
this.$DialogHelper.selectList(element, param)

2.  class FormHelper

this.$FormHelper.validate(formRef)

3.  class EnumHelper

this.$EnumHelper.getLabel(enumList, key)
this.$EnumHelper.getColor(enumList, key)
this.$EnumHelper.getByKey(enumList, key)

4.  class FileHelper

this.$FileHelper.blob2Excel(blob, name)

5.  class ThemeHelper

/**
 * 获取主题色 
 */
this.$ThemeHelper.getThemeColor()
/**
 * 设置主题色 仅支持16进制
 */
this.$ThemeHelper.setThemeColor(color)