jp-vue2-ui v0.0.5

jp-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Component JpDialog

JpDialog 有两种方法调用。

一种是在 template 里编写， 另外一种则是通过 js 调用。 这里重点说下 js 如何调用 。

export default {
    name: 'Test',
    data(){
        return {
            myDialogInstance: null
        }
        
    },
    beforeDestroy() {
        // 这一步很重要
        if (this.myDialogInstance && this.myDialogInstance.destroyed){
            this.myDialogInstance.destroyed()
            this.myDialogInstance = null
        }
    },
    methods: {
        openDialog(){
            // 首先是创建弹窗，然后是打开弹窗，创建的时候，一定要用一个变量接收，要不然，没法销毁。
            this.myDialogInstance = this.$jpDialog.create({
                slots: {
                    default: Component, // 这里接收的是一个vue的组件选项。注意，这里是组件选项。
                    defProps: { // default 组件所需要的 props
                        xxx: 'xxx'
                    }
                },
                props: {
                    isNeedHeader: false, // 表示不需要 头部，
                    isNeedFooter: false, // 表示不需要 底部，
                    cls: 'jp-dialog__no-ui', // 自定义类名
                    closeOnClickOverlay：false, // 是否在点击遮罩层后关闭弹窗
                },

            })
            this.myDialogInstance.open()
        }
        
        
        
        
    }
}

版本更新说明

- 0.0.3 避免重复加载
- 0.0.4 this 指向问题
- 0.0.5 内部算法更新