v-m-layer screenshot

v-m-layer

一个基于vue的弹窗组件,包含以下组件

• alert
• confirm
• toptip
• loading
• actions
• toast
• picker
• cityPicker
• timePicker

安装

1npm install v-m-layer --save
2
3然后在APP.vue或者组件内 import 'v-m-layer/src/assets/css/layer.css'

使用

1.alert

this.$layer.alert( title, callback )
title: 弹窗内容
callback: 可选参数，点击确定回调函数

1
2import Vue from 'vue'
3import { AlertPlugins } from 'v-m-layer'
4Vue.use(AlertPlugins)
5
6export default{
7    methods: {
8        showalert() {
9            this.$layer.alert('sssss',function(){
10                console.log('你点击了确定')
11            })
12        }
13    }
14}

2.toast

this.$layer.toast( msg, delay )
msg：提示信息
delay：可选参数，弹框存在时间

1
2import Vue from 'vue'
3import { ToastPlugins } from 'v-m-layer'
4Vue.use(ToastPlugins)
5
6export default{
7    methods: {
8        showToast2() {
9            this.$layer.toast('我是通过插件调用的',3000)
10        }
11    }
12}

3.confirm

有两种传参方式
this.$layer.confirm(msg, onConfirm, onCancle)
this.$layer.confirm(msg, title, onConfirm, onCancle)

1
2import Vue from 'vue'
3import { ConfirmPlugins } from 'v-m-layer'
4Vue.use(ConfirmPlugins)
5
6export default{
7    methods: {
8        //1.弹窗内容  2.点击确定按钮回调  3.点击取消按钮回调
9        showConfirm() {
10            this.$layer.confirm('我是通过插件调用的',function(){
11                console.log('你点击了确定')
12            },function(){
13                console.log('你点击了取消')
14            })
15        },
16        //1.弹窗内容  2.弹窗标题  3.点击确定按钮回调  4.点击取消按钮回调
17        showConfirm2() {
18            this.$layer.confirm('我是通过插件调用的','提示',function(){
19                console.log('你点击了确定')
20            },function(){
21                console.log('你点击了取消')
22            })
23        }
24    }
25}

4.loading

this.$layer.loading.show(msg) 打开
this.$layer.loading.hide() 关闭

1
2import Vue from 'vue'
3import { LoadingPlugins } from 'v-m-layer'
4Vue.use(LoadingPlugins)
5
6export default{
7    methods: {
8        showloading() {
9            this.$layer.loading.show('加载中...')
10            /* setTimeout(() => {
11               this.$layer.loading.hide() 
12            },2000) */
13        },
14        hideloading() {
15            this.$layer.loading.hide()
16        }
17    }
18}

5.toptip

this.$layer.toptip(msg, deley, className)
msg： 弹窗信息
deley: 可选参数，弹窗停留时间
className: 可选参数，通过样式名修改默认样式

1
2import Vue from 'vue'
3import { ToptipPlugins } from 'v-m-layer'
4Vue.use(ToptipPlugins)
5
6export default{
7    methods: {
8        showToptip2() {
9            //1.内容  2.显示时间 默认 2000毫秒
10            this.$layer.toptip('我是通过插件调用的',3000)
11        }
12    }
13}

6.actions

this.$refs.actions.open()
menu： 菜单
on-actions-menu： 点击菜单的回调
on-actions-close： 监听关闭回调
title： 标题

1<template>
2    <div>
3        <div style="margin-top:40px" @click="showactions">点击显示actions</div>
4        <actions 
5            ref="actions"
6            title="请选择语言" 
7            :menu="menu" 
8            @on-actions-menu="itemClick"
9            @on-actions-close="onClose">
10        </actions>
11    </div>
12    <!--
13        this.$refs.actions.open()
14        menu: actions菜单
15        on-actions-menu： 点击菜单的回调
16        on-actions-close: 监听关闭回调
17        title： 标题
18    -->
19</template>
20
21<script>
22import { actions } from 'v-m-layer'
23export default {
24    data() {
25        return {
26            show: false,
27            menu: [
28                {text:'简体中文',id:'1'},
29                {text:'繁体中文',id:'2'},
30                {text:'English',id:'3'}
31            ]
32        }
33    },
34    methods: {
35        showactions() {
36            this.$refs.actions.open();
37            //this.$refs.actions.close()
38        },
39        //item: 当前点击菜单对应的menu数据; index: 当前点击的序号
40        itemClick(item, index) {
41            console.log(item,index)
42        }
43    },
44    components: {
45        actions
46    }
47}
48</script>

7.picker

this.$refs.picker.open()
data：picker数据
defaultValue：给picker的赋默认值
on-change：picker滚动就执行回调
on-selected：点击确定执行回调
isLink：是否开启联动，如果开启必须指定columns列数，数据格式参照meun3
columns：列数

1<template>
2    <div>
3        <input 
4            type="text" 
5            style="margin-top:40px" 
6            v-model="pickervalue" 
7            readonly 
8            @click="showpicker" 
9            placeholder="非联动" />
10
11        <input 
12            type="text" 
13            style="margin-top:40px" 
14            v-model="pickervalue2" 
15            readonly 
16            @click="$refs.picker2.open()" 
17            placeholder="单列数据" />
18
19        <input 
20            type="text" 
21            style="margin-top:40px" 
22            v-model="pickervalue3" 
23            readonly 
24            @click="$refs.picker3.open()" 
25            placeholder="数据联动" />
26
27        <picker 
28            ref="picker1" 
29            :data="menu" 
30            :defaultValue="defaultValue" 
31            @on-selected="select">
32        </picker>
33
34        <picker 
35            ref="picker2" 
36            :data="menu2" 
37            :defaultValue="defaultValue2" 
38            @on-selected="select2" 
39            title="选择手机">
40        </picker>
41
42        <picker 
43            ref="picker3" 
44            :data="menu3" 
45            :isLink="true" 
46            :columns="2" 
47            :defaultValue="defaultValue3" 
48            @on-selected="select3" 
49            title="选择地区">
50        </picker>
51    </div>
52    <!--
53        data：picker数据
54        defaultValue：给picker的赋默认值
55        on-change：picker滚动就执行回调
56        on-selected：点击确定执行回调
57        isLink：是否开启联动，如果开启必须指定columns列数，数据格式参照meun3
58        columns：列数
59    -->
60</template>
61
62<script>
63import { picker } from 'v-m-layer'
64export default {
65    data() {
66        return {
67            show: false,
68            menu: [
69                [{name:'赵',id:'01'},{name:'钱',id:'02'},{name:'孙',id:'03'},{name:'李',id:'04'},{name:'周',id:'04'}],
70                [{name:'杰伦',id:'11'},{name:'磊',id:'12'},{name:'小鹏',id:'13'},{name:'Baby',id:'14'}]
71            ],
72            defaultValue:[{name:'李'},{name:'杰伦'}],
73            pickervalue:'',
74
75            show2: false,
76            menu2: [
77                ['小米','华为','联想','iPhone']
78            ],
79            defaultValue2:['华为'],
80            pickervalue2:'',
81
82            show3: false,
83            menu3:[
84                {name:'湖北省',value:'001',parent:'0'},
85                {name:'广东省',value:'002',parent:'0'},
86                {name:'山东省',value:'003',parent:'0'},
87                {name:'武汉市',value:'004',parent:'001'},
88                {name:'襄阳市',value:'005',parent:'001'},
89                {name:'广州市',value:'006',parent:'002'},
90                {name:'深圳市',value:'007',parent:'002'},
91                {name:'青岛市',value:'008',parent:'003'},
92                {name:'济南市',value:'009',parent:'003'},
93            ],
94            defaultValue3:[],
95            pickervalue3:'',
96        }
97    },
98    methods: {
99        showpicker() {
100            this.$refs.picker1.open();
101        },
102        select(values, item) {
103            console.log(values,item)
104            this.defaultValue = item; //每次选择完给picker设置默认值，让picker记住选中的位置
105            this.pickervalue = values.join(" ")
106        },
107        select2(values, item) {
108            console.log(values,item)
109            this.defaultValue2 = item;
110            this.pickervalue2 = values.join(" ")
111        },
112        select3(values, item) {
113            console.log(values,item)
114            this.defaultValue3 = item;
115            this.pickervalue3 = values.join(" ")
116        }
117    },
118    components: {
119        picker
120    }
121}
122</script>
123

8.cityPicker

this.refs.picker.open()
data：省市区列表；v-m-layer提供了chinaAddress，如果需要使用自己的地址库，请遵循chinaAddress的格式
on-shadow-change: 用户选中执行回调，
请保持input绑定的值和cityPicker组件的defaultValue的值一致，这样就可以使picker记住用户选中的值

1<template>
2    <div>
3        <input 
4            type="text" 
5            style="margin-top:40px" 
6            v-model="pickervalue" 
7            readonly 
8            @click="showpicker" />
9
10        <span 
11            @click="getText" 
12            style="margin-top:40px;display:block">
13            根据id获取文字值
14        </span>
15
16        <cityPicker 
17            ref="picker"
18            :data="chinaAddress" 
19            :defaultValue="pickervalue" 
20            title="请选择地区" 
21            @on-shadow-change="selct">
22        </cityPicker>
23    </div>
24    <!--
25        data：省市区列表；v-m-layer提供了chinaAddress，如果需要使用自己的地址库，请遵循chinaAddress的格式
26        on-shadow-change: 用户选中执行回调，
27        请保持input绑定的值和cityPicker组件的defaultValue的值一致，这样就可以使picker记住用户选中的值
28    -->
29</template>
30
31<script>
32import { cityPicker, chinaAddress } from 'v-m-layer'
33
34export default {
35    data() {
36        return {
37            show: false,
38            chinaAddress: chinaAddress,
39            pickervalue:'湖北省 武汉市 武昌区',
40        }
41    },
42    methods: {
43        showpicker() {
44            this.refs.picker.open()
45        },
46        //values 用户选中的省市区 是一个数组；ids 用户选中的省市区对应的国家地区编码
47        selct(values, ids, data) {
48            console.log(values)
49            this.pickervalue = values.join(' ');
50        },
51        getText(){
52            let ids = ['430000', '430400', '430407'];
53            //将对应的省市区id和全国省市区传入 便可转换成对应的省市区文字
54            let names = getName(ids, this.chinaAddress);
55            console.log(names)
56        }
57    },
58    components: {
59        cityPicker
60    }
61}
62</script>

9.timePicker

1<template>
2    <div>
3        <input 
4            v-model="pickerValue" 
5            readonly
6            @click="$refs.picker.open()" 
7            placeholder="请选择日期" />
8
9        <time-picker 
10            ref="picker" 
11            :defaultValue = "defaultValue" 
12            :minYear="2000" 
13            :maxYear="2050" 
14            @on-selected="select">
15        </time-picker>
16    </div>
17    <!-- 
18        minYear：起始年份
19        maxYear：截止年份
20        on-selected：确定选择执行的回调
21        defaultValue: 设置默认值
22     -->
23</template>
24
25<script>
26import { timePicker } from 'v-m-layer'
27export default {
28    data() {
29        return {
30            show: false,
31            pickerValue:'',
32            defaultValue:[new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()]
33        }
34    },
35    methods: {
36        select(values, item) {
37            console.log(values,item)
38            this.pickerValue = values.join("-")
39            this.defaultValue = item
40        }
41    },
42    components: {
43        timePicker
44    }
45}
46</script>