lvueUI

哈喽，欢迎使用lvueUI，这是基于elementUI二次开发的UI， 我们的目的是让你开发的页面更清晰、更简单、更方便

安装 lvueUI

npm i element-ui -S 或 cnpm i element-ui -S 如果有安装，则不需要安装
npm i lvue-ui -S 或 cnpm i lvue-ui -S

引入 lvueUI

src/main.js 文件中 引入

import ElementUI from 'element-ui'; 
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css';
import lvue from 'lvue-ui'
Vue.use(lvue)

l-table 表格组件

表格组件支持 element 所有原生属性

<l-table :tableData="tableData" :tableConfig="tableConfig"></l-table>

export default {
  data() {
    return {
      tableData: [
        {
				  name: "张三"
        }
      ],
      tableConfig: [
        {
          value: "name",
          label: "名字"
        }
      ]
    }
  }
}

表格配置

| 属性 | | | |:-------:|:-------------:| :----------:| | value | String | 表格数据的key，如果type设置为slot value则是slot的name | | label | String | 表格头名称 | | type | String | selection/index/expand/slot |

当type设置为slot

<l-table :tableData="tableData" :tableConfig="tableConfig">
  <template #name="{ row }">
		<div>{{row.name}}</div>
	</template>
</l-table>

export default {
  data() {
    return {
      tableData: [
        {
					name: "张三"
        }
      ],
      tableConfig: [
        {
          value: "name",
          label: "名字",
					type: "slot"
        }
      ]
    }
  }
}

l-form 表单组件

表单组件支持 element 所有原生属性

<l-form :inline="false" label-width="80px" :formConfig="formConfig" :data.sync="formData" :operationButton="operationButton"></l-form>

export default {
  data() {
    return {
			formData: {},
      operationButton: {
        justify: "center",
        submit: {
          callback: () => {
            this.submit()
          }
        }
      },
      formConfig: [
				{
					gutter: 2,
					children: [
						{
							span: 8,
							label: '名字',
							value: 'name',
							type: 'input',
							placeholder: '请输入名字',
							rules: [
								{ required: true, message: '请输入名字', trigger: 'blur' },
							],
						},
					],
				},
				{
					gutter: 0,
					children: [
						{
							span: 24,
							label: '区域',
							value: 'region',
							type: 'select',
							multiple: true,
              loading: false,
              requestConfig: {
                request: get,
                params: '/data/index',
                callback: res => {
                  return res
                }
              },
							rules: [
								{
									required: true,
									message: '请选择活动区域',
									trigger: 'change',
								},
							],
							option: [],
						},
						{
							span: 24,
							label: '性别',
							value: 'gender',
							type: 'radio',
							option: [
								{
									value: 1,
									label: '男',
								},
								{
									value: 2,
									label: '女',
								},
							],
						},
						{
							span: 24,
							label: '城市',
							value: 'city',
							type: 'checkbox',
							option: [
								{
									value: 'Beijing',
									label: '北京',
								},
								{
									value: 'shanghai',
									label: '上海',
								},
							],
						},
						{
							span: 24,
							label: '数量',
							value: 'number',
							type: 'number',
						},
						{
							span: 24,
							label: '开关',
							value: 'switch',
							type: 'switch',
						},
						{
							span: 24,
							label: '时间',
							value: 'time',
							type: 'timePicker',
							pickerOptions: {
								start: '08:30',
								step: '00:15',
								end: '18:30',
							},
						},
					],
				},
			],
    }
  }
}

表单扩展属性

| 属性 | | | |:-------:|:-------------:| :----------:| | data | Object | 表单数据 | | operationButton | Object | 表单按键配置 |

operationButton 配置

| 属性 | | | |:-------:|:-------------:| :----------:| | justify | String | start/end/center/space-around/space-between | | submit | Object | 提交事件 | | reset | Object | 重置事件 |

表单竖配置

| 属性 | | | |:-------:|:-------------:| :----------:| | gutter | Number | 空格 | | children | Array | 行 |

children配置

| 属性 | | | |:-------:|:-------------:| :----------:| | span | Number | 占用位置 1 到 24 | | value | String | 表单数据的key，如果type设置为slot value则是slot的name | | label | String | 表格头名称 | | requestConfig | Object | 网络请求配置 | | type | String | input/text/textarea/year/month/date/dates/week/datetime/datetimerange/daterange/monthrange/select/radio/checkbox/number/switch/timePicker/slot |

requestConfig 网络请求数据配置

| 属性 | | | |:-------:|:-------------:| :----------:| | request | Promise | 请求函数 | | params | Object | 请求参数 | | callback | Function | 回调函数 |

可以根据type类型，添加对应的 element 所有原生属性 如：

{
	span: 24,
	label: '时间',
	value: 'time',
	type: 'timePicker',
	pickerOptions: {
		start: '08:30',
		step: '00:15',
		end: '18:30',
	},
},

当type设置为slot， 如果不设置type等于slot，则 自动插入操作事件中

<l-form :inline="false" label-width="80px" :formConfig="formDatas" v-model="formDatas" :operationButton="operationButton">
  <template #name="val">
    <div>{{val}}</div>
  </template>
</l-form>
数据val 会返回 rowConfig 配置数组、row 表单数据、value 当前字段类型  数据绑定 row[value]

水印

/**
 * 水印
 * @param { Object } params 配置
 * @param { String } id 节点 ID 默认不需要传
 * @returns 
 */
this.$watermark({
		width: 400, //画布的宽
		height: 200, //画布的高度
		font: '30px Microsoft JhengHei', //画布里面文字的字体
		fillStyle: 'rgba(0, 0, 0, 0.10)', //画布里面文字的颜色
		text: 'lvue/18007834176', // 信息用 / 分离 
	})
	.then((res) => {
		console.log(res) // 返回 Object 和 图片信息
	})
	.catch((err) => {
		console.log(err)
	})