layer-vue关闭全部

2024-08-23

vue使用layer主动关闭弹窗

关闭当前框的弹出层 layer.close(layer.index); 刷新父层 parent.location.reload(); // 父页面刷新关闭iframe 弹出的全屏层 var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index1); //再执行关闭最后一种先安装导入(ts项目) // 自定义组件 import layer from "vue-l

webpack+vue中安装使用vue-layer弹窗插件

1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原型 import Vue from 'vue'; import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 3.然后打包报如下错误 ERROR in ./node_modules/vue-layer/dist/vue-layer

vue项目中使用vue-layer弹框插件

vue-layer弹框插件安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: , //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -, btn: '确定', time: ,

vue-layer

npm: https://www.npmjs.com/package/vue-layer 原文:https://www.cnblogs.com/myIvan/p/9564502.html 1.安装 cnpm install vue-layer --save-dev 2.引入 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 3.调用 this.$layer.msg('123');

Vue SPA应用中使用Layer的iframe 弹出层,并且传值

问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px'], fixed: false, //不固定 maxmin: true, title:title, content:url, }); 正常引入layui.js 然后弹出,然后弹出层要调用父级层的方法,和赋值 var index = parent.layer.getFrameIndex(windo

在Vue中使用layer.js弹出层插件

layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发.在开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全

在vue中继续使用layer.js来做弹出层---切图网

layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全局变量导出. 然后在文件中找到下面的代码注释掉,这段代码是为layer添加样式的,但使用的路径不对

在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,

谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

前言前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

Vue.js 快速入门

什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备我推荐使用sublime text作为编辑器,关于这个编辑器可以看我这篇文章.在package control中安装 Vuejs Snippets Vue Syntax Highlight 推荐使用npm管理,新建两个文件app.html,app.js,为了美观使用bootstrap,我们的页面模板看起来

[js高手之路] vue系列教程 - 实现留言板todolist(3)

通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

Vue 国际化 vue-i18n 用法详解

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1.在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2.准备本地的翻译信息 const messages = { zh: { message:

vue.js介绍，常用指令，事件，以及制作简易留言版

一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作二.vue和angular之间的区别 vue--简单易学指令以v-xx 一片html代码配合上json,再new出来vue实例个人维护项目适合:移动端项目,小巧 angular--上手难指令以ng-xxx 所有属性和方法都挂在$scope身上 angular由google维护适合:pc端项目共同点:不兼容低版本的IE 三.vue的基本使用 1.

vue移动端弹框组件，vue-layer-mobile

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0 二.调整配置:因为这个组件中有woff,ttf,et

vue基础学习（一）

01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= function(){ var c = new Vue({ el:"#box",//选择器 data:{ 'msg':'welcome vue' } }); } </script> 01-02 v-model一般用于表单元素数据双向绑定 <div id="box&quo

vue根据ajax绑定数数。。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>User List</title> <link href="/css/publicCSS.css" rel="stylesheet" type="text/css"> <link

vue 学习小记

vue 中有 data() .computed.methods.beforeRouteLeave.created等具体的: data():定义一些文件中需要用到的变量,data中带return,是使数据只在当前组件中可用,不会影响其他组件,不使用return,会让数据在全局可见,会造成污染 computed():用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理, 它其实就是定义一些需要通过各种计算处

vue 实现图片上传与预览，以及清除图片

vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片demo</title> <link rel="stylesheet" href="../../css/font-a

vue 登录跳转

前几次做登录处理,都是写一个公用方法,然后在对应的路由页面调用,即判断是不是处于登录状态,如果不是,就返回登录页面. let exit = (vm)=>{ let login = sessionStorage.login && JSON.parse(sessionStorage.login); if(!sessionStorage.login || (sessionStorage.login && !login.login)){ layer(vm,"先请登录