將Vue樣式庫iview中的Modal模態框改造爲漂亮的登錄模態框

目錄

1 前言

    1.1 遇到的問題

    1.2 不想放棄iview的Modal組件的原因

2 改造要點

    2.1 template部分

        2.1.1 模態框觸發部分

        2.1.2  模態框部分

    2.2 script部分

3 最終效果

4 總結

---

1 前言

    1.1 遇到的問題

       之前試圖將iview中的Modal組件按自己的需求進行定製時，遇到了很多問題，典型地，最主要有以下兩個問題：

       （1）如圖中右邊的關閉圖標，只能使用原生的，該樣式實在談不上好看；

       （2）標題文字樣式難以定製；

       （3）頂部與內容之間存在一條橫線。

  1.2 不想放棄iview的Modal組件的原因

        儘管有上述的問題，但筆者作爲一個主攻後端的前端菜鳥，實在是沒有能力自己寫一個模態框。之前一個項目爲了逃避這個問題，爲登錄頁面單獨做了一個頁面。但最近一個項目仍然要用到這個模態框，這次不再想逃避，決定排除萬難也要將這個Modal改造成爲自己想要的樣子。

2 改造要點

      該節以template、script兩部分對改造方法進行說明。

    2.1 template部分

          2.1.1 模態框觸發部分

<div v-else style="width:100%">
    <a><Icon type="md-person" size="26" color="#ffbc41" @click="modal = true"/></a> 
</div>

        其中modal爲script部分定義的變量，默認爲false.

            2.1.2  模態框部分

<Modal v-model="modal" :closable="false" :footer-hide="true" width="566">
    <Row style="margin-top:25px">
        <Col span="10" offset="4" >
            <span style="font-weight:600;font-size:18px">反黑平臺登陸</span>
        </Col>
        <Col span="8" style="text-align:right">
            <a><img src="./../../static/home/login_close.png" @click="closeModal" style="width:23px;height:23px" alt="關閉圖標"></a>
        </Col>
            <Col span="16" offset="4" style="margin-top:30px">
                <Form ref="login" :model="login">
                    <FormItem>
                        <Input ref="login_name_input" v-model="login.loginName" @on-focus="login_name_input_box" @on-blur="cancle_focus_login_name" placeholder="郵箱/手機號碼" style="height:40px"></Input>
                    </FormItem>
                    <FormItem>
                        <Input type="password" v-model="login.password" :maxlength="20" @on-focus="password_input_box" @on-blur="cancle_focus_password" placeholder="密碼"></Input>
                    </FormItem>
                    <FormItem>
                        忘記密碼？
                    </FormItem>
                    <FormItem>
                        <Button style="width:238px;height:45px;background-color:#c5a1ff">登錄</Button>
                    </FormItem>
                  </Form>
             </Col>
       </Row>
</Modal>

        其中<Modal>標籤中，v-modal="modal"中的modal對應2.1.1中的modal，關鍵在於設置closable和footer-hide，即不顯示iview本身的關閉按鈕，不顯示底部很醜的“取消”和“確定”按鈕，並且，不設置title，不使用header的slot。

        然後將下面當成普通的頁面，做自己想要的樣式。如按自己的需求設置標題樣式、關閉按鈕換成自己的圖標，其中關閉按鈕綁定closeModal()函數。

       2.2 script部分

closeModal() {
    this.modal = false;
},

            正如打開Modal模態框將modal設置爲true，這裏只要將modal設計爲false，即可將模態框關閉。

3 最終效果

4 總結

       總體來說，要將Vue樣式庫iview中的Modal改造爲漂亮的登錄模態框，首先對Modal組件不設置標題、不設計header的slot，不顯示關閉按鈕（closable=true），不顯示底部（footer-hide=true），並對自己的關閉按鈕綁定一個函數，該函數將modal設計爲false即可完成模太框關閉功能。