vue移动端弹框组件

这里说一下 vue-layer-mobile插件的使用

一、npm 安装

// 当前最新版本 1.2.0
npm install vue-layer-mobile
// 如新版遇到问题可回退旧版本
npm install vue-layer-mobile@1.0.0

二、调整配置：因为这个组件中有woff,ttf,eto,svg类型文件，所以要配置一些loader

//在webpack.config.js中配置如下，首先安装url-loader和file-loader：
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

三、引入和使用

import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer)

四、具体使用介绍：

——这个组件一共有6个方法，并不是完全仿layer-mobile,一些简单的弹框还是很好用的。

　// toast: 文字和图标:testLayerToast(){        this.$layer.toast({icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中 content: '提示文字',time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒 })},// loading:testLayerLoading1(){var _this = this;this.$layer.loading('加载中...');setTimeout(function(){_this.$layer.close();},3000);},// dialog:testLayerDialog(){this.$layer.dialog({title: ['这是标题', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空) content: '这是内容',contentClass: 'className',btn: ['取消','确定'],//   time: 2000})// 如果有btn .then(function (res){// res为0时是用户点击了左边  为1时用户点击了右边 let position = res === 0 ? 'left' : 'right'console.log(position)})},// footer:testLayerFooter(){this.$layer.footer({content: '这是内容',btn: ['取消', '选项1', '选项2']})// 如果有btn .then(function (res){var text = res==0 ? '取消' : '选项'+resconsole.log(text)})},//opentestLayerOpen(){this.$layer.open({style: 'border:none; background-color:#78BA32; color:#fff;',content:'内容'})},//closetestLayerClose(){var _this = this;this.$layer.loading('测试关闭方法');setTimeout(function(){_this.$layer.close();},3000);}

实例演示：

操作：

main.js

import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer)

xxx.vue (组件内)

methods: {showTip() {this.$layer.toast({icon: 'icon-check',content: '这是最后一页啦，可以往前翻看哦~',time: 2000,})},
}

vue移动端弹框组件相关推荐

vue手机端回退_vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
移动端（H5）弹框组件--简单--实用--不依赖jQuery
俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
ElementUI弹框组件 messageBox 如何换行？
ElementUI弹框组件 messageBox 如何换行 ? 参考博客:element this.$confirm确定框内容换行显示效果图 · 截图示下: demo代码如下: const conf ...
VUE2.0增删改查附编辑添加model(弹框)组件共用
为什么80%的码农都做不了架构师?>>> Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言最近一直在学习Vue,发现一份crud不错的源码预览链接 https: ...
看完这篇不要告诉我不会封装ant design弹框组件了
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣获取前端学习知识 1设计需求封装一个弹框组件直接调用接口 2技术栈 ant design+react 设计第一步绘制样式 < ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
vantUI弹框组件 message文字，如何换行？
vantUI弹框组件 message文字,如何换行 ? 代码如下: // 权限已到期 if(response.data.code == 6001){Toast.fail({duration: 1500 ...
elemenUI - 弹框组件alert - 宽度设置？ - 疑问篇
举例如下:(elemenUI - 使用alert弹框组件),对比代码和效果图官方组件+文档演示地址:点击查看官方文档部分主要代码 · 如下: <el-col class="user ...

vue移动端弹框组件

一、npm 安装

二、调整配置：因为这个组件中有woff,ttf,eto,svg类型文件，所以要配置一些loader

三、引入和使用

四、具体使用介绍：

实例演示：

操作：

vue移动端弹框组件相关推荐

最新文章

热门文章