前端vue框架demo：一个弹窗消失，显示另一个弹窗

UI框架iview

第一步的弹框：

<!-- _______________________________________________ MODAL _______________________________________________-->
        <Modal class-name="add-members" v-model="showAddMemberModal" width="900" :closable="false" :mask-closable="false">
          <div class="add-member-content step-1-content" v-if="step1">
            <div class="add-top">
              <Row>
              <Col span="12">Add Members</Col>
              <Col span="12" class="top-right">
                  <Button type="primary"  @click="addMembersNext">Next</Button>
                  <Button class="cancel" @click="cancelAddModal">Cancel</Button>
              </Col>
              </Row>
            </div>
            <div class="add-content">
              <input class="search" type="search" v-model="moduleSearchText" placeholder="Search by Name, User Name, or Email Address">
              <div class="search-icon-container"><i class="fa fa-search"></i></div>
              <div class="member-box">
                <ul class="member-list">
                  <li class="list-header">
                    <div class="bg-wrap">
                      <div class="member-left modal-mode">
                        <span class="name-icon-placeholder"></span>
                        <span class="first-name-space"><span >First Name <Icon type="android-arrow-dropup" id="first-name-arrow-icon"></Icon></span></span>
                        <span class="last-name-space"><span >Last Name <Icon type="android-arrow-dropup" id="last-name-arrow-icon"></Icon></span></span>
                        <span class="username-space"><span >User Name <Icon type="android-arrow-dropup" id="username-arrow-icon"></Icon></span></span>
                        <span class="email-space"><span >Email <Icon type="android-arrow-dropup" id="email-arrow-icon"></Icon></span></span>
                        <span class="phone-space">Phone Number</span>