@tomoeed/j-dialog v1.0.0

j-dialog

A dialog component for Vue

安装

npm install @tomoeed/j-dialog --save

使用

安装插件

import Vue from 'vue';
import JDialog from '@tomoeed/j-dialog';

Vue.use(JDialog, {names: {}, hooks: {}});

组件使用

对话框打开后元素聚焦规则: 1. 第一个拥有 autofocus 属性的元素 2. 对话框按钮组件 e.g j-dialog-button 3. 对话框自身

<template>
    <div>
        <button @click="visible = true" type="button">Open</button>

        <j-dialog :visible="visible"
                  :before-close="beforeClose"
                  title="Title"
                  title-id="dialog_title"
                  describe="'Describe'"
                  describe-id="dialog_describe"
                  @open="onOpen"
                  @opened="onOpened"
                  @closed="onClosed">
            <j-dialog-content>
                Content
            </j-dialog-content>

            <j-dialog-footer>
                <j-dialog-button :priority="1" :is-dismisser="true">Close</j-dialog-button>
            </j-dialog-footer>
        </j-dialog>
    </div>
</template>

<script>
    export default {
        name: 'YourComponent',
        data() {
            return { visible: false };
        },
        methods: {
            beforeClose() {
                // do something...
                return true; // or false
            },
            onOpen() { /* do something... */ },
            onOpened() { /* do something... */ },
            onClosed() { /* do something... */ }
        }
    };
</script>

插件可选的选项对象

• names 组件名称

Vue.use(JDialog, {names: {
    dialog: 'j-dialog',
    content: 'j-dialog-content',
    footer: 'j-dialog-footer',
    button: 'j-dialog-button'
}});

• hooks 全局钩子

Vue.use(JDialog, {hooks: {
    open: () => {},
    opened: () => {},
    closed: () => {}
}});

组件 Props

j-dialog

j-dialog-content

j-dialog-footer

无

j-dialog-button

组件插槽

License

Apache-2.0