初探 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等。