# 按钮

# 远程检查是否可点击

比如修改前检查数据可否修改

检查可删除 检查不可删除
<template>
    <div>
        <SksButton 
                confirmMsg="是否确认删除?"
                type="danger"
                icon="el-icon-delete"
                @click="sksUtils.msgSuccess(`删除成功`)"
                :clickBeforeCheckRemoteFunc="()=>request({
                    url: '/business/hello/deleteCheck',
                    method: 'post',
                    data: {status: 0}
                })" >检查可删除</SksButton>
        <SksButton
                confirmMsg="是否确认删除?"
                type="danger"
                icon="el-icon-delete"
                @click="sksUtils.msgSuccess(`删除成功`)"
                :clickBeforeCheckRemoteFunc="()=>request({
                    url: '/business/hello/deleteCheck',
                    method: 'post',
                    data: {status: 1}
                })" >检查不可删除</SksButton>
    </div>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            request({url, data} = {}) {
                if (url == '/business/hello/deleteCheck') {
                    if(data.status==0){
                        //校验成功
                        return Promise.resolve()
                    }
                    if(data.status==1){
                        this.sksUtils.msgError("已经完结了")
                        return Promise.reject()
                    }
                    return Promise.reject()
                }
            }
        }
    }
</script>
显示代码 复制代码

# 提示确认

比如删除时提示是否删除,确认后才执行按钮方法

确认后删除 不提示直接删除
<template>
    <div>
        <SksButton 
                confirmMsg="是否确认删除?"
                type="danger"
                icon="el-icon-delete"
                @click="sksUtils.msgSuccess(`删除成功`)"
                 >确认后删除</SksButton>
        <SksButton
                type="danger"
                icon="el-icon-delete"
                @click="sksUtils.msgSuccess(`删除成功`)">不提示直接删除</SksButton>
    </div>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>
显示代码 复制代码
最后更新时间: 2022/8/28 18:27:46