最近在進(jìn)行一個(gè)基于Weex的手機(jī)端項(xiàng)目，用了阿里的Rax組件，由于資源太少，市面上常見(jiàn)的組件都無(wú)法方便快捷的實(shí)現(xiàn)彈窗，所以自己從零開(kāi)始研究了一個(gè)。

一開(kāi)始為了滿足業(yè)務(wù)需要，簡(jiǎn)單的寫(xiě)了一個(gè)Dialog，但是這個(gè)Dialog的取消的確定事件都要以參數(shù)的性質(zhì)傳入這就導(dǎo)致使用不便，由ElementUI受到啟發(fā),于是想基于Promise實(shí)現(xiàn)一個(gè)方便好用的組件

由于自己剛開(kāi)始學(xué)習(xí)，水平比較菜，一些實(shí)現(xiàn)方式也是我自己琢磨出來(lái)的，如果有邏輯錯(cuò)誤或者可以優(yōu)化的地方歡迎各位提點(diǎn)指正，我會(huì)認(rèn)真學(xué)習(xí)吸取教訓(xùn)～～

this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          }); 

原理本質(zhì)是調(diào)用靜態(tài)方法，然后在方法中控制窗口的顯示，該方法返回一個(gè)Promise對(duì)象，大致思路為

let myPromise;
static open=()=>{
        return new Promise((resolve, reject) => {
            myPromise={resolve,reject}//此處把promise的resolve和reject方法存到變量中，
                                      //這樣就可以在點(diǎn)擊確定或者取消的時(shí)候?qū)romise做相應(yīng)的處理
        })
    }

confirm=()=>{
    myPromise.resolve()
}
cancel=()=>{
    myPromise.reject()
}

這樣一來(lái)，在父界面調(diào)用的時(shí)候邏輯清晰明了：

 myDialog.open(message).then(()=>{
                    //此處處理確認(rèn)邏輯
                }).catch(()=>{
                  //此處處理取消邏輯
                })

一開(kāi)始我在項(xiàng)目中采取的方式是在每一個(gè)需要調(diào)用dialog組件的地方，手動(dòng)把dialog插入到body的最底部，like this

import MyDialog from "../../components/dialog/MyDialog";

//······
//······
render()
{
return
    <View>
        //······
        //······

        <MyDialog/>
    </View>
}

這樣做毋庸置疑，耦合性將會(huì)非常高，在每一個(gè)需要調(diào)用的頁(yè)面都要引入這個(gè)組件，看了看React的文檔，研究出來(lái)一種目前我認(rèn)為還可以的方式，那就是使用ReactDOM的 render方法來(lái)自動(dòng)控制組件的渲染,以下是完整代碼

import {createElement, Component, render, PureComponent, findDOMNode, unmountComponentAtNode} from 'rax';
import {View, Text, Dialog, Touchable} from 'nuke';

let _self;
let myPromise;
let div;

export default class Dialog extends Component {
    static confirm(info) {
        div = document.createElement('div')
        document.body.appendChild(div)
        render('<PyDialog />',div)
        _self.setState({
            type: `confirm`,
            info: info
        })

        return new Promise((resolve, reject) => {
            myPromise = {resolve, reject}
        })
    }

    constructor() {
        super();
        _this = this;
    }

    destory() {
        unmountComponentAtNode(div)
        document.body.removeChild(div)//組件銷毀
    }

    resolve() {
        myPromise.resolve();
        this.destory()
    }

    reject() {
        myPromise.reject()
        this.destory()
    }

    render() {
        return

        <View>
            <View>
                {this.state.info}
            </View>
            <View style={myStyle.bottomBox}>
                <Touchable onPress={this.reject}>
                    <Text style={myStyle.btnGray}>取消</Text>
                </Touchable>
                <Touchable onPress={this.resolve}>
                    <Text style={myStyle.btnRed}>確認(rèn)</Text>
                </Touchable>
            </View>
        </View>

    }
}

調(diào)用方法：

import Dialog from './Dialog'


PyDialog.confirm(`確定要?jiǎng)h除嗎？`).then(()=>{
                    this.delete()
                }).catch((data)=>{
                    
                })