element UI学习使用(1)
https://element.eleme.cn/2.6/#/zh-CN/component/container vue模块库,可复制直接使用
1、搜索框、下拉搜索框
<el-form :inline="true" class="demo-form-inline"><el-form-item label="结果搜索"><el-inputplaceholder="请输入内容"v-model="searchinput"><el-button @click="search_postman" slot="append" icon="el-icon-search"></el-button></el-input></el-form-item> <el-form-item label="选择语料"><el-select v-model="value" filterable placeholder="请选择语料"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form><script>export default{name:"Export2Postman",data() {return {searchinput :'',options :[],value:'',}},methods: {search_postman(){}},}
</script>
2、单选
<template><el-radio-group v-model="radio2"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio></el-radio-group>
</template><script>export default {data () {return {radio2: 3};}}
</script>
3、多选
<template><el-checkbox-group v-model="checkList"><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>
</template><script>export default {data () {return {checkList: ['选中且禁用','复选框 A']};}};
</script>
4、按钮组
<el-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
5、超链接
<div><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link>
</div>