# 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 | - | - |
# elink
命令描述: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
2
3
4
5
# ebtnpri
命令描述:按钮 button text/primary
快捷命令:ebtnpri
<el-button
size="small"
@click="testFunc"
type="primary">
</el-button>
1
2
3
4
5
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
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
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
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12