vue怎样引入使用layer弹窗以及icon使用

最新推荐文章于 2025-04-09 09:27:00 发布

ALSO666

最新推荐文章于 2025-04-09 09:27:00 发布

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ALSO666/article/details/128187023

版权

本文介绍如何在Vue项目中引入并使用layui-layer弹窗组件，包括安装依赖、引入jQuery、配置main.js文件等内容，并展示了如何使用layer弹窗及icon的具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能需求

功能实现

1.在vue中引入layui-layer

npm i --save layui-layer

2.引入jquery

在public下放入本地jquery.min.js文件，并在index.html文件中进行引入

在这里插入图片描述

<script src="<%= BASE_URL %>js/jquery.min.js"></script>

在这里插入图片描述

3.在main.js中引入layui-layer

import layer from "layui-layer";

4.使用layer弹窗

html

<template>
	<el-button @click="handleAdd">打开弹窗</el-button>
	<div style="width: 0; height: 0; overflow: hidden; ">
      <div class="layer-mask-style test-mask">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="测试" prop="lisApplicationId">
            <el-input v-model="form.test" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

export default {
  name: "test",
  data() {
    return {
      testMask: null,// 弹窗layer
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        test: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
  	/** 新增按钮操作 */
    handleAdd() {
      let _this = this;
      _this.reset();
      _this.testMask= window.layer.open({
        type: 1,
        skin: 'layui-layer-demo', //样式类名
        area: ['350px'],
        title: '添加',
        closeBtn: 1, //不显示关闭按钮
        shadeClose: true, //开启遮罩关闭
        content: $('.test-mask'),
        btn: [ '确定', '取消' ],
        yes:function (index, layero) {//这里也可以用btn1替代yes
          //确定按钮回调
          _this.submitForm();
        },
        btn2 : function() {
          // 取消按钮回调
          window.layer.close(_this.testMask);
          _this.reset();
        },
        cancel: function(){
          // 右上角关闭按钮回调
          window.layer.close(_this.testMask);
          _this.reset();
        }
      });
    },
  	// 取消按钮
    cancel() {
      window.layer.close(this.testMask);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        test: null,
      };
      this.resetForm("form");
    },
  },
}

icon的使用

1.icon数字含义

icon的序号为1-7，代表含义分别如下。

在这里插入图片描述

2.如何使用

window.layer.confirm('icon为1', {icon: 1, title:'提示'}, function (index) {
 ...
  window.layer.msg('操作成功', {icon: 1, time: 1000});
  window.layer.close(index);
}, function () {
  window.layer.msg('已取消操作', {icon: 7, time: 1000});
});