# boss 构建 html 方法

boss系统结合自定义组件库,组成代码块,快速构建出代码

# 命令列表

命令 描述 类型/语言 提示 备注
emrow mu-row对标el-row html / html - -
eminput mu-input html / html - -
emselect mu-select html / html - -
emcascader mu-cascader html / html - -
emdatepick mu-date-pick html / html - -
emdialog 弹窗 mu-fit-popup html / html - -
emtable 表格 mu-table html / html - -
emsearch Form Search 适配查询 html / html - -

# emrow

命令描述:mu-row对标el-row

快捷命令:emrow

<mu-row
	:col="${1:1}"
	label-width="110"
	>
	$2
</mu-row>
1
2
3
4
5
6

# eminput

命令描述:mu-input

快捷命令:eminput

<mu-col
	label="输入框"
	v-model="$1"
	clearable
></mu-col>
1
2
3
4
5

# emselect

命令描述:mu-select

快捷命令:emselect

<mu-col
	label="选择器"
	v-model="$1"
	clearable
	:props="{
		el: 'select',
		list: ,
		label: 'text',
		value: 'value'
	}"
></mu-col>
1
2
3
4
5
6
7
8
9
10
11

# emcascader

命令描述:mu-cascader

快捷命令:emcascader

<mu-col
	label="级联选择器"
	v-model="$1"
	:options=""
	:show-all-levels="false"
	clearable
	filterable
	change-on-select
	:props="{
		el: 'cascader'
	}">
</mu-col>
1
2
3
4
5
6
7
8
9
10
11
12

# emdatepick

命令描述:mu-date-pick

快捷命令:emdatepick

<mu-col
	label="时间日期选择器"
	v-model="$1"
	type="datetimerange"
	value-format="yyyy-MM-dd HH:mm:ss"
	range-separator="-"
	:default-time="['00:00:00', '23:59:59']"
	format="yyyy-MM-dd HH:mm:ss"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:props="{ el: 'date-picker' }"
></mu-col>
1
2
3
4
5
6
7
8
9
10
11
12

# emdialog

命令描述:弹窗 mu-fit-popup

快捷命令:emdialog

<mu-fit-popup
	title="${1:提示}"
	dialog-width="50%"
	:visible.sync="${2:visible}"
	>
	<div slot="footer" class="flex justify-end">
		<el-button @click="visible = false">取消</el-button>
		<el-button type="primary">确定</el-button>
	</div>
</mu-fit-popup>
1
2
3
4
5
6
7
8
9
10

# emtable

命令描述:表格 mu-table

快捷命令:emtable

<mu-fit-list
	table-class="mu-content pall15"
	:columns="tableColumns"
	:data="tableList"
	:total="totalCount"
	:page-size="pageSize"
	:page-index="pageIndex"
	@size-change="val => (pageSize = val)"
	@index-change="val => (pageIndex = val)"
	@query-table="handleQueryTable"
	>
	<template #test="scope">
		<el-button type="text">{{scope.row.test}}</el-button>
	</template>
</mu-fit-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# emsearch

命令描述:Form Search 适配查询

快捷命令:emsearch

<mu-fit-search
	@index-change="val => (pageIndex = val)"
	@reset-form="handleResetForm"
	@submit-query="handleQueryTable">
	<mu-row
		:col="3"
		label-width="110">
		<mu-col
			label="输入框"
			v-model="query"
			clearable
			></mu-col>
		<mu-col
			label="输入框"
			v-model="query"
			clearable
			></mu-col>
		<mu-col
			label="输入框"
			v-model="query"
			clearable
			></mu-col>
	</mu-row>
</mu-fit-search>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
上次更新: 12/11/2020, 5:34:52 PM