初探 Element 页面弹窗效果实现
背景介绍
最近空闲的时候在B站看Element的前端项目，动手跟着敲敲，下面学习笔记，方便备查。
一、环境准备
1）使用编译器VScode开发，可安装 vetur 插件，方便vue文件显示。 2）预先安装 nodejs 环境，可参考网上教程。 3）使用可视化项目管理 vue ui，可安装以下依赖插件。 运行依赖 vue-cli-plugin-element 1.0.1、axios 开发依赖 less-loader、less Element 官方API地址：element
二、文件结构
完整的 vue文件包含以下三个部分。 第一部分，模板内容区域，包括各种组件布局，
<template>
<div>
// 添加面包屑导航
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
注意组件需要在 element.js 中注册，方可使用，如下所示。
// 引入面包屑相关组件
import { Breadcrumb,BreadcrumbItem} from 'element-ui'
// 使用
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
第二部分 主体方法区域，包含方法、数据
<script>
export default {
// 数据区域
data(){
// 初始化数据
return {
}
},
// 钩子函数，初次加载执行的方法
created(){
},
// 方法区域
methods: {
}
}
</script>
第三部分、样式区域，包含自定义的样式，在作用域内生效。
// scoped 表示在作用域内有效
<style lang="less" scoped>
</style>`
三、演示例子
做个电商常用的弹出框，退单理由，可以点击选择理由，也可以自定义理由，效果如下图所示。
如何实现上图的效果呢，可参考以下步骤。
第一步、弹窗效果
在Element API 中找到Dialog 对话框控件，复制demo，原始代码如下。
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
修改为以下所示。
<el-dialog
title="退单理由"
:visible.sync="refundDialogVisible"
width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="refundDialogVisible= false">取 消</el-button>
<el-button type="primary" @click="refundDialogVisible= false">确 定</el-button>
</span>
</el-dialog>
同时需要在 第二部分 主体方法区域 添加以下内容。
<script>
export default {
// 数据区域
data(){
// 初始化数据
return {
refundDialogVisible: false // 控制退单对话框显示
}
},
// 钩子函数，初次加载执行的方法
created(){
},
// 方法区域
methods: {
// 退单按钮方法，作用：显示对话框
refund(row) {
this.row = row;
this.refundDialogVisible = true;
}
}
}
</script>
添加以上代码即可有弹窗的效果。 第二步、添加页面元素 页面单选Redio，点击其他，则可以进行手动输入退单理由。
<!-- 退款理由对话框 -->
<el-dialog
title="退单理由"
:visible.sync="refundDialogVisible"
width="30%"
@close="refundDialogVisibleClosed" >
// 这里使用布局组件 el-row，方便Redio的对齐
<el-row>
// v-model 绑定相同的函数，:span="12" 表示占用一半空间
<el-col :span="12"><el-radio v-model="refundReason" :label="1" @change="refundReasonChange">自提证件不符</el-radio></el-col>
<el-col :span="12"><el-radio v-model="refundReason" :label="2" @change="refundReasonChange">超期未自提</el-radio></el-col>
</el-row>
<el-row>
<el-col :span="12"><el-radio v-model="refundReason" :label="3" @change="refundReasonChange">未到自提日期</el-radio></el-col>
<el-col :span="12"><el-radio v-model="refundReason" :label="4" @change="refundReasonChange">成品与效果图不符</el-radio></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-radio v-model="refundReason" :label="5" @change="refundReasonChange">其他</el-radio>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
// 添加input组件，:disabled表示是否可用，绑定 inputReason 变量来进行控制，只有点击其他时，才允许输入
<el-input v-model="refundReasonInput" placeholder="请输入退单理由" :disabled="inputReason"></el-input>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="refundDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRefundReason()">确 定</el-button>
</span>
</el-dialog>
第二部分数据区域添加以下代码
<script>
export default {
// 数据区域
data(){
// 初始化数据
return {
refundVisible: false,
refundDialogVisible: false, // 控制退单对话框
refundReason: "", // 退款理由
refundReasonInput: '', // 自定义退款理由
inputReason: true // 控制自定义退单理由框是否可用
}
},
// 钩子函数，初次加载执行的方法
created(){
},
// 方法区域
methods: {
// 控制退单理由输入框的显示
refundReasonChange(){
// 选中5-其他，则显示
this.inputReason=(this.refundReason === 5)?false:true;
if(this.refundReason != '5'){
// 清空其他输入框中的退单理由
this.refundReasonInput = '';
}
},
// 退单理由关闭后清空页面
refundDialogVisibleClosed(){
// 清空选中的退单理由
this.refundReason = '';
// 清空其他框中的退单理由
this.refundReasonInput = '';
},
// 退单理由框中的确定按钮事件
saveRefundReason(){
let remark = '';
// 后台请求的url,根据实际需要添加
let url = '';
// 5-其他，取输入框中的内容
if(this.refundReason != '5'){
remark = this.getRefundResonValue(this.refundReason);
} else {
remark = this.refundReasonInput;
}
let param = {
remark: remark,
orderNo: this.row.orderNo
};
// 发送后台取消请求
this.$axios.post(url,param).then((res)=>{
// retCode = 1 表示成功
if(res.data.retCode=='1'){
this.$message.success(res.data.retMessage);
// 刷新列表
this.getOrderList();
}else{
this.$message.error(res.data.retMessage);
}
})
// 发送后台请求结束，关闭窗体
this.refundDialogVisible = false;
},
// 自定义函数，根据选择的redio显示退单理由
getRefundResonValue(refundLable){
if(refundLable == '1'){
return "自提证件不符";
} else if (refundLable == '2') {
return "超期未自提";
} else if (refundLable == '3') {
return "未到自提日期";
} else if (refundLable == '4') {
return "成品与效果图不符";
}
}
}
}
</script>
以上就是弹框的功能实现的思路和代码，具体可以练习试试。前端效果实现在于对API封装好的组件的运用。
注意： 1、组件注册后才能使用，可以在 element.js 中进行全局注册。 2、vue 是MVVM模式，双向数据绑定，注意模型层、视图层的 v-model 绑定关系。 3、查看API中提供的属性和方法，如常用的 disable，close，change等。