layer-mobile

vue-layer-mbile 弹层处理 vue弹出层插件,包含toast loading dialog等浮层控件

#使用方法

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

toast: 文字和图标:

1   this.$layer.toast({
2     icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
3     content: '提示文字',
4     time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
5   })

loading:

1    this.$layer.loading('加载中...')

dialog:

1this.$layer.dialog({
2  title: ['这是标题', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空)
3  content: '这是内容',
4  contentClass: 'className',
5  btn: ['确定'],
6  shadeClose:false,                    // 是否禁止点击朦层，只有这一个方法能用
7  time: 2000
8})
9// 如果有btn
10.then(function (res){
11  // res为0时是用户点击了左边  为1时用户点击了右边
12  let position = res === 0 ? 'left' : 'right'
13   console.log(position)
14 })

footer:

1   this.$layer.footer({
2     content: '这是内容',
3     btn: ['取消', '选项1', '选项2']
4   })
5   // 如果有btn
6   .then(function (res){
7     var text = res==0 ? '取消' : '选项'+res
8     console.log(text)
9   })

参考:开源插件layer-mobile http://layer.layui.com/mobile/

参考:开源插件vue-layer-mobile https://github.com/jwaterwater/vue-layer-mobile