vue-confirm-x

基于vue的自定义对话框

NPM

npm install vue-confirm-x -D

Example

<template>
    <div id="app">
        <Confirm :msg="msg" animation="scale-fade" @callback="feedbackFn" v-if="status"></Confirm>
    </div>
</template>
    export default {
        name: 'App',
        components: {
            Confirm
        },
        data () {
            return {
                msg:{
                    title: '我是标题',
                    text: '我是描述',
                    btnSure: '确认',
                    btnCancel: '取消'
                },
                status: false
            }
        },
        methods: {
            showFn () {
                this.state = true;
            },
            // 回调函数
            feedbackFn (state) {
                // 隐藏
                !state ? this.status = false : '';
            }
        }
    }

Api

参数

Name	Type	Default	Description
msg	Object	{ title: '我是标题',text: '我是描述',btnSure: '确认',btnCancel: '取消' }	对话框的显示文案
animation	String	slide-fade	对话框显示动画（slide-fade / scale-fade）
feedbackFn	Function		回调函数
state	Boolean		回调函数内的参数，true表示确认，false表示取消

版本迭代说明

v1.1.0 优化了动画，并添加了一个动画选择类，修复了上个版本的按钮文案错位