在上一个章节中,我们简单介绍了ElementUI框架,以及表格和表单的使用。在这个章节中,我们继续介绍ElementUI中的其他部分,我们挑选一些常用的介绍吧。
第一 按钮/图标/标记
我们创建“10_elementui_button.html”文件,代码如下:
<div id="app">
<div>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
</div>
<script>new Vue({el: '#app'})</script>
我们还可以给<el-button>添加“round”属性让其变成圆角按钮,或者使用“circle”属性让其变成圆形按钮,还可以增加“icon="el-icon-edit"”属性增加一个图标,还可以使用“size="mini"”来设置按钮尺寸,一共三个尺寸medium/small/mini供使用,还可以使用“disabled”禁用该按钮。
接下来,我们继续添加新代码。
<div style="margin-bottom:10px;">
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
<div style="margin-bottom:10px;">
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
</div>
<div style="margin-bottom:10px;">
<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>
</div>
按钮组<el-button-group>标签按里面的<el-button>更加紧凑在一起。
关于图标,我们也可以给出一个“10_elementui_icon.html”来看看
<style>
.icon-list { display: block; list-style: none; }
.icon-list li { float: left; width: 30%; list-style: none; margin-bottom: 20px; }
</style>
<div id="app">
<ul class="icon-list">
<li>
<span>
<i class="el-icon-platform-eleme"></i>
<span class="icon-name">el-icon-platform-eleme</span>
</span>
</li>
<li>
<span>
<i class="el-icon-eleme"></i>
<span class="icon-name">el-icon-eleme</span>
</span>
</li>
<li>
<span>
<i class="el-icon-delete-solid"></i>
<span class="icon-name">el-icon-delete-solid</span>
</span>
</li>
<!-- 此处省略剩余代码 -->
</ul>
</div>
文件中为展示的代码可以去本文章末尾的提供的免费链接去下载。
最后再介绍一个按钮配合标记的使用方式,我们创建“10_elementui_badge.html”文件
<div id="app">
<el-badge :value="99">
<el-button type="primary">按钮</el-button>
</el-badge>
</div>
<script>new Vue({el: '#app'})</script>
这种效果应该比较常见了。
第二 弹框
我们创建“10_elementui_message.html”文件,演示消息提示框的使用。
<div id="app">
<div>
<el-button @click="openMessage">打开消息提示</el-button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
openMessage:function(){
this.$message('这是一条消息提示');
}
}
})
</script>
其实就是一句代码:this.$message('这是一条消息提示');
上面的“$message”方法还有其他参数:
this.$message({ message: '这是一条成功消息提示', type: 'success' , showClose: true });
this.$message({ message: '这是一条警告消息提示', type: 'warning' , showClose: true });
this.$message.error('这是一条错误消息');
接下来,我们创建“10_elementui_dialog.html”文件,演示对话框的使用。
<div id="app">
<el-button @click="openAlert">消息提示框</el-button>
<el-button @click="openConfirm">确认消息框</el-button>
</div>
<script>
new Vue({
el: '#app',
methods:{
openAlert:function(){
// 消息提示框
this.$alert('内容', '标题', {confirmButtonText: '确定'});
},
openConfirm:function(){
// 确认消息框
this.$confirm('内容', '标题', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({type:'success', message:'点击确定按钮'});
}).catch(() => {
this.$message({type:'success', message:'点击取消按钮'});
});
}
}
})
</script>
请注意,第一个是提示框,第二个是确认框,使用目的不一样的。
最后我们自定义对话框,我们创建“10_elementui_dialog2.html”文件,
<div id="app">
<el-button @click="dialogVisible = true">自定义弹框</el-button>
<el-dialog title="人员信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
<el-form label-width="50px">
<el-form-item label="姓名">
<el-input placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="城市">
<el-select placeholder="请选择城市">
<el-option label="北京" value="1"></el-option>
<el-option label="上海" value="2"></el-option>
<el-option label="广州" value="3"></el-option>
<el-option label="深圳" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">保存</el-button>
<el-button @click="cancelDialog">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data: {
dialogVisible:false,
tableData: [
{id:1,name:"张三",age:25},
{id:1,name:"李四",age:25},
]
},
methods: {
cancelDialog:function(){
this.dialogVisible=false;
}
}
})
</script>
注意,为了防止误点击取消弹框,我们增加了“:close-on-click-modal="false"”属性。
本章节先介绍到这里,剩余的内容还是去官网看吧。
本课程的内容可以通过CSDN免费下载:https://download.csdn.net/download/richieandndsc/89025243