xg-element v0.5.5

TOC

前言

此项目不做开发使用！！

只是将公司项目中常用的项抽取封装成公共组件，打包发布到NPM上供多个项目使用，达到多个项目间的UI统一性

xg-element

xg-element是一个基于Element封装的插件，该插件已发布到npm。

内置了常用的CSS样式

功能（function）（.f-）：为方便一些常用样式的使用，将这些使用率较高的样式剥离出来，按需使用 

- 字体大小：.f-fs*

例子：.f-fs12{font-size: 12px}

//字体大小
.f-fs12{font-size: 12px}
.f-fs14{font-size: 14px}
.f-fs16{font-size: 16px}
.f-fl{float:left;}/*向左浮动*/
.f-fr{float:right;}/*向右浮动*/
.f-tal{text-align:left;}/*文本居左*/
.f-tac{text-align:center;}/*文本居中*/
.f-tar{text-align:right;}/*文本居右*/
//弹性盒子
.f-df{display: flex;}
.f-flex1{flex: 1}
……
布局（grid）（.g-）：将页面分割为几个大块，通常有宽度，外边距，内边距等

宽度

宽度：.g-w*
例子：.g-w100{width: 100px}

外边距

外边距 .g-m*
例子：.g-m5{margin:5px}

外 上边距 .g-mt*
例子：.g-mt5{margin-top:5px}

外 下边距 .g-mb*
例子：.g-mb5{margin-bottom:5px}

外 左边距 .g-ml*
例子：.g-ml5{margin-left:5px}

外 右边距 .g-mr*
例子：.g-mr5{margin-right:5px}

内边距

内边距 .g-p*
例子：.g-p5{padding: 5px;}

上 内边距 .g-pt*
例子：.g-pt5{padding-top:5px}

下 内边距 .g-pb*
例子：.g-pb5{padding-bottom:5px}

左 内边距 .g-pl*
例子：.g-pl5{padding-left:5px}

右 内边距 .g-pr*
例子：.g-pr5{padding-right:5px}

执行打包

npm run lib

发布到NPM

npm publish

每次发布记得更新 package.json 下的 version 版本号！！！

注册NPM账号，项目目录执行npm login，输入账号密码和邮箱，然后npm publish就发布成功了

使用教程

安装

npm install xg-element

更新

npm update xg-element

引用

import  xgElement from 'xg-element'
import 'xg-element/lib/xg-element.css'
Vue.use(xgElement)

组件

xg-pageHeader

Attributes

Slots

代码示例：

<xg-pageHeader title="测试" :goback="true">  
    <el-button type="primary">添加</el-button>
</xg-pageHeader>

xg-pageCard

Attributes

Slots

1. 示例：嵌套table

xg-pageCard 下的 el-table, 父层要加上 class="xg-table"！！！！

修改了thead的背景色 / 两侧到边

<xg-pageCard>
    // el-table 的父层要加上 class="xg-table"，
	<div class="xg-table">
        <el-table>……</el-table>
    </div>  
</xg-pageCard>

2. 示例：嵌套tree

xg-pageCard 下的 el-tree, 自身要加上 class="xg-tree"！！！！

修改了tree默认间距以及默认图标

<xg-pageCard>
    <div slot="left">
    	// el-tree 要加上 class="xg-tree"，
		<el-tree class="xg-tree">……</el-tree> 
    </div>
</xg-pageCard>

代码示例：默认空的

<xg-pageCard></xg-pageCard>

代码示例：带有左侧菜单的

<xg-pageCard :hasSide="true">
    <div slot="left">

        <el-tree …… class="xg-tree"></el-tree>

    </div>

    ……

    <div class="xg-table">
        <el-table>
            ……
        </el-table>
    </div>

</xg-pageCard>

xg-inputGroup

搜索框组件（input+button）

Attributes

Slots

Methods

代码示例：

<xg-inputGroup @search="search" :placeholder="placeholder" :buttonLable="查询">
    <el-button type="primary">添加</el-button>
</xg-inputGroup>

xg-selectGroup

多功能行内表单组件，可以灵活配置使用

暂时只支持传入 select input button 三种类型！！

Attributes

Slots

Methods

代码示例：

<xg-selectGroup :model="model" :isChange="false" ref="selectGroup" @change="handleSearch">
    <div slot="right"> 
        <el-button type="primary">添加</el-button>
    </div>
</xg-selectGroup>

this.$refs.selectGroup.getSelected() 获取选中的object对象值：

{
    business_line_id: null,
    planLevelEnum: null,
    planStatusEnum: null,
    planTypeEnum: null
}

model 格式示例:

model:[
    	//select 类型	
        {
          label:'业务线',	//标签文本
          type:'select',	//类型	
          key:'name',       //字段名
          value:null,		//字段值
          placeholder:'请选择',	//输入框占位文本
          options:[{	// select类型下的options值
            value: '选项1 黄金糕',
            label: '黄金糕'
          }, {
            value: '选项2 双皮奶',
            label: '双皮奶'
          }]
        },
    
    	//input 类型 有label标签
    	{
          label:'类型',	//标签文本
          type:'input',	//类型
          key:'planTypeEnum',//字段名
          value:null,		 //字段值	
          placeholder:"请选择",	//输入框占位文本
        },
    
    	//input 类型 无label标签
    	{
          type:'input',	//类型
          key:"planLevelEnum2",//字段名
          value:null,		  //字段值
          placeholder:"请选择",	//输入框占位文本
        },
    
    	//button 类型
    	{
          label:'查询',	//按钮文本
          type:'button',	//类型
        }
	],

xg-filterWidgetType

封装的字符串，时间，数值类型前端多项目通用组件开发

Attributes

Methods

代码示例：

<filter-widget-type
        :index="index"
        v-model="filterList[index]"
        :isedit="isedit"
        :isShowLabel="isShowLabel"
        :labelWidth="labelWidth"
        :getOptions="getOptions"
        @deleteItem="deleteItem"
>
</filter-widget-type>