Appearance
Input输入框
通过鼠标或键盘输入字符。
基础功能
文本框输入内容。
示例代码
vue
<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
样式预览
T/#模式切换功能
内容为字符串或者变量的输入框
示例代码
vue
<el-input v-model="input.value" placeholder="FLOW (自动填入组件间流变量FLOW作为该项缺省值)" :render.sync="input.type"></el-input>
<script>
export default {
data() {
return {
input: { value: '', type: 'T' }
}
}
}
样式预览
选择文件夹功能
选择系统内的文件目录
示例代码
vue
<el-input
v-model="input.value"
:render.sync="input.type"
:browseBtnShow="true"
browseType="directory"
:browseFilters="[{ name: 'All Files', extensions: ['*'] }]"
placeholder="FLOW (自动填入组件间流变量FLOW作为该项缺省值)">
</el-input>
<script>
export default {
data() {
return {
input: { value: '', type: 'T' }
}
}
}
样式预览
选择文件路径功能
选择系统内的文件的路径
- 不对文件后缀类型就行限制js
:browseFilters="[{ name: 'All Files', extensions: ['*'] }]" - 限制文件后缀类型为docxjs
:browseFilters="[{ name: 'Word', extensions: ['docx'] }]"
示例代码
vue
<el-input
v-model="input.value"
:render.sync="input.type"
:browseBtnShow="true"
browseType="file"
:browseFilters="[{ name: 'All Files', extensions: ['*'] }]"
placeholder="FLOW (自动填入组件间流变量FLOW作为该项缺省值)">
</el-input>
<script>
export default {
data() {
return {
input: { value: '', type: 'T' }
}
}
}
样式预览
组合选择文件夹以及文件路径功能
同时兼顾选择文件夹以及文件路径
- 不对文件后缀类型就行限制js
:browseFilters="[{ name: 'All Files', extensions: ['*'] }]" - 限制文件后缀类型为txtjs
:browseFilters="[{ name: 'Text', extensions: ['txt'] }]" - suffix为选择文件夹后默认补全文件名功能，值可为空
示例代码
vue
<el-input
v-model="input.value"
placeholder=""
:browseBtnShow="true"
:directoryBtn="true"
suffix="untitle1.txt"
browseType="file"
:browseFilters="[{ name: 'Text', extensions: ['txt'] }]"
:varsBtnShow="true"
:render.sync="input.type"
>
</el-input>
<script>
export default {
data() {
return {
input: { value: '', type: 'T' }
}
}
}
样式预览
调用火语言元素选择器功能
使用火语言元素选择器，方便用户选取需要操作的目标DOM元素，支持CSS Selector 和 XPath两种方式。
示例代码
vue
<el-input
v-model="config.selector.value"
:inspectorBtnShow="true"
:render.sync="config.selector.type"
:url.sync="config.selector.url"
placeholder="FLOW (自动填入组件间流变量FLOW作为该项缺省值)"
>
</el-input>
<script>
export default {
data() {
return {
config: {
selector: { value: '', type: 'T', url: '' }
}
}
}
}
样式预览
评论
暂无评论，快来发布第一条评论吧！
评论数据加载中
登录后发表评论