在vue中引入layer弹框的简易方法

npm i --save layui-layer

2、在main.js中引入

import layer from "layui-layer";

3、然后就可以在各个组件中使用layer了

实例:

layer.confirm(‘您是如何看待前端开发?‘, {
            btn: [‘重要‘,‘奇葩‘] //按钮
        }, function(){
            layer.msg(‘的确很重要‘, {icon: 1});
        }, function(){
            layer.msg(‘也可以这样‘, {
                time: 20000, //20s后自动关闭
                btn: [‘明白了‘, ‘知道了‘]
            });
        });

官方地址:http://layer.layui.com/

上面有各种弹窗的使用示例

原文地址:https://www.cnblogs.com/fqh123/p/10848883.html

时间: 2024-10-09 21:56:07

在vue中引入layer弹框的简易方法的相关文章

鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

vue中引入样式文件

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

vue中引入json数据,不用本地请求

1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小时的格式................. 例如:daily.js module.exports = { 'tmbTmbsContent': [[ {'label': '123'} ]], } 2.在Daily.vue文件中引入 import Daily from '@/assets/data/da

layui layer弹框中表格的显示

场景描述:点击iframe里面的一个按钮,需要在父级弹出一个弹框表格. 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: parent.layer.open({ type: 0, id: 'Layer', title: '标题', area: ['740px', '500px'], shade: 0, anim: -1, content: '<div class="table"></div>',

layer弹框的上面各个属性 -可配置

<script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示",//标题信息 15 content: 'test',//内容区域 16 move: false,//是否可以拖动,默认可以拖动 17 btn: ['按钮一', '按钮二', '按钮三'], 18 btn1: function(index){ 19 //按钮[按钮一]的回调 20 layer.close(ind

asp.net中获取Layer弹出层返回值

1.MainPage.aspx中点击按钮利用Layer弹出层,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="demo.MainPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

vue中引入swiper插件

这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' 3.然后注册全局的swiper Vue.use(VueAwesomeSwiper) 4.在模板中使用 //引入swiper.cssrequire('swiper/dist/css/swiper

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

vue中引入awesomeswiper的方法以及编写轮播组件

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"