# element-ui html 代码块

# 命令列表

命令 描述 类型/语言 提示 备注
elink link文字链接 html / html - -
ebtntext 按钮 button text/primary html / html - -
ebtnpri 按钮 button text/primary html / html - -
eradio 单选框组 el-radio html / html - -
echeckbox 多选框组 el-checkbox html / html - -
einput 输入框 input html / html - -
einputarea 输入框文本域 input - area html / html - -
einputnum 计数器 input-number html / html - -
eselect 选择器 select html / html - -
eselectremote 选择器 select 远程搜索 html / html - -
etimepick 日期选择器 el-time-pick html / html - -
edatepick 日期选择器 el-date-pick html / html - -
edialog 创建通用弹窗 - dialog html / html - -

命令描述:link文字链接

快捷命令:elink

<el-link href="" type="primary" :disabled="false" :underline="false"></el-link>
1

# ebtntext

命令描述:按钮 button text/primary

快捷命令:ebtntext

<el-button
	size="small"
	@click="testFunc"
	type="text">
</el-button>
1
2
3
4
5

# ebtnpri

命令描述:按钮 button text/primary

快捷命令:ebtnpri

<el-button
	size="small"
	@click="testFunc"
	type="primary">
</el-button>
1
2
3
4
5

# eradio

命令描述:单选框组 el-radio

快捷命令:eradio

<el-radio-group v-model="$1" size="small">
	<el-radio :label="1">备选项1</el-radio>
	<el-radio :label="2">备选项2</el-radio>
	<el-radio :label="3">备选项3</el-radio>
</el-radio-group>
1
2
3
4
5

# echeckbox

命令描述:多选框组 el-checkbox

快捷命令:echeckbox

<el-checkbox-group v-model="$1" size="small">
	<el-checkbox label="复选框 A"></el-checkbox>
	<el-checkbox label="复选框 B"></el-checkbox>
	<el-checkbox label="复选框 C"></el-checkbox>
	<el-checkbox label="禁用" disabled></el-checkbox>
	<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
1
2
3
4
5
6
7

# einput

命令描述:输入框 input

快捷命令:einput

<el-input
	size="small"
	v-model.trim="$1"
	clearable
	placeholder="请输入">
</el-input>
1
2
3
4
5
6

# einputarea

命令描述:输入框文本域 input - area

快捷命令:einputarea

<el-input
	size="small"
	v-model.trim="$1"
	text="textarea"
	:show-word-limit="true"
	:row="2"
	clearable
	placeholder="请输入">
</el-input>
1
2
3
4
5
6
7
8
9

# einputnum

命令描述:计数器 input-number

快捷命令:einputnum

<el-input-number
	size="small"
	v-model="$1"
	placeholder="请输入">
</el-input-number>
1
2
3
4
5

# eselect

命令描述:选择器 select

快捷命令:eselect

<el-select
	size="small"
	v-model="$1"
	clearable
	placeholder="请输入">
	<el-option
		v-for="item in list"
		:key="item.value"
		:label="item.label"
		:value="item.value">
	</el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12

# eselectremote

命令描述:选择器 select 远程搜索

快捷命令:eselectremote

<el-select
	size="small"
	v-model="$1"
	clearable
	filterable
	remote
	remote-method="remote-method"
	placeholder="请输入">
	<el-option
		v-for="item in list"
		:key="item.value"
		:label="item.label"
		:value="item.value">
	</el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# etimepick

命令描述:日期选择器 el-time-pick

快捷命令:etimepick

<el-time-picker
	size="small"
	v-model="$1"
	format="HH:mm:ss"
	value-format='HH:mm:ss'
	range-separator="~"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:picker-options="{
		selectableRange: '00:00:00 - 23:59:59'
	}">
</el-time-picker>
1
2
3
4
5
6
7
8
9
10
11
12

# edatepick

命令描述:日期选择器 el-date-pick

快捷命令:edatepick

<el-date-picker
	size="small"
	v-model="$1"
	format="yyyy-MM-dd"
	value-format='yyyy-MM-dd'
	type="datetimerange"
	range-separator="~"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:picker-options="pickerOptions"
	:default-time="['00:00:00','23:59:59']">
</el-date-picker>
1
2
3
4
5
6
7
8
9
10
11
12

# edialog

命令描述:创建通用弹窗 - dialog

快捷命令:edialog

<el-dialog
	title="$1"
	:visible.sync="visibleDialog"
	:modal-append-to-body="false"
	width="50%"
	>
	<div>$2</div>
	<div class="eboss-inquire-button text-center">
		<el-button type="info" size="small" @click="cancelDialog">取消</el-button>
		<el-button type="primary" size="small" @click="confirmDialog">确定</el-button>
	</div>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
上次更新: 1/18/2021, 2:22:04 PM