Lvue-ui NPM | npm.io

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)
	})