第10章 ElementUI 2

在上一个章节中，我们简单介绍了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