# layer 界面交互

使用layer组件,需要在模板代码中加入以下代码:

<my-confirm v-model="confirmVisible" :msg="confirmMsg" @confirm="confirmCallback" :title="confirmTitle"
            :confirm-input="confirmInput" :show-cancel="confirmCancelBt"
            @cancel="confirmCancel"></my-confirm>
<my-toptip ref="toptip"></my-toptip>

在js中引入模板

import Layer from '@/tpl/layer'

export default {
    mixins:[Layer]
}
方法 说明
$alert(msg, title='出错啦') 模态提示窗口
$notice(msg, title = '提示') 模态提示窗口
$confirm(msg, callback, title = '操作确认') 操作确认
$prompt(title, callback) 输入框
$toptip(msg, closeTime = 2000, type = 'danger') 顶部弹出提示,背景色为红色
$warning(msg, closeTime) 顶部弹出提示,背景色为橙色
$back(delta = 1) 回退
$toHome() 重启应用,返回主页

# $alert

$alert(msg, title='提示')

this.$alert('这是是提示文字!','标题').then(()=>{
    //用户点击确认后执行代码
});

# $notice

$notice(msg, title='提示') 与$alert的唯一区别就是标题,默认为提示

this.$notice('这是是提示文字!','提示').then(()=>{
    //用户点击确认后执行代码
});

# $confirm

$confirm(msg, [callback], title = '操作确认')

this.$confirm('确实要删除该图片吗?',()=>{
    //do something
});

this.$confirm('确实要删除该图片吗?').then(()=>{
    //do something
});

# $prompt 输入框

$prompt(title, callback)

this.$prompt('请输入姓名',(value=>{
    //do something
}));

# $toptip 错误提示

$toptip(msg, closeTime = 2000, type = 'danger')

this.$toptip('请输入账号');

# $warning 警告

$warning(msg, closeTime = 2000, type = 'danger')

this.$warning('请输入账号');

# 其他

# $back 返回上页

$back(delta = 1)

this.$back();

# $toHome 重启应用并返回首页

this.$toHome();
Last Updated: 1/9/2020, 5:13:35 PM