[精讚] [會員登入]
873

vue.js modal 作兩個選項按鈕並導向不同頁面

vue.js modal 作兩個選項按鈕

分享此文連結 //n.sfs.tw/11324

分享連結 vue.js modal 作兩個選項按鈕並導向不同頁面@igogo
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-24 16:51:31 最後編修
2017-06-17 00:19:19 By igogo
 

 

vue.js

這個情況是使用者request 另一台server 所得到的值後想以不定的選項來決定要走向哪個頁面,  因此我決定用modal , 在modal 做兩個yes or no的按鈕, 並把值以GET的方式帶到hello頁面中做處理, 其它的值是放在後端以session帶著 只是在前面要讓使用者決定怎麼走

 window.location.href = 'hello?option=' + msg; 

 

如圖

 

Mary 是session帶過來的值, 屬於在後面傳送, yes則是讓使用者在前端傳過來的值

 

關鍵在此

<button class="modal-default-button" @click="$emit('close','yes')">

 

 

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>JSP Page</title>
</head>

<body>
    <header>
        <style type="text/css">
        .modal-mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: table;
            transition: opacity .3s ease;
        }
        
        .modal-wrapper {
            display: table-cell;
            vertical-align: middle;
        }
        
        .modal-container {
            width: 400px;
            height: 80px;
            margin: 0px auto;
            padding: 20px 30px;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
            transition: all .3s ease;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        .modal-header h4 {
            margin-top: 0;
            color: #42b983;
        }
        
        .modal-body {
            margin: 20px 0;
        }
        /*http://www.bestcssbuttongenerator.com/*/
        
        .modal-default-button {
            float: right;
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 10;
            -moz-border-radius: 10;
            border-radius: 10px;
            font-family: Georgia;
            color: #ffffff;
            font-size: 15px;
            padding: 8px 9px 9px 8px;
            border: solid #1f628d 1px;
            text-decoration: none;
        }
        /*
                     * The following styles are auto-applied to elements with
                     * transition="modal" when their visibility is toggled
                     * by Vue.js.
                     *
                     * You can easily play with the modal transition by editing
                     * these styles.
                     */
        
        .modal-enter {
            opacity: 0;
        }
        
        .modal-leave-active {
            opacity: 0;
        }
        
        .modal-enter .modal-container,
        .modal-leave-active .modal-container {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        </style>
    </header>
    <!-- template for the modal component -->
    <script type="text/x-template" id="modal-template">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">
                        <div class="modal-header">
                            <slot name="header">
                            </slot>
                        </div>
                        <div class="modal-footer">
                            <slot name="footer">
                                <button class="modal-default-button" @click="$emit('close','yes')">
                                    YES
                                </button>
                                <button class="modal-default-button" @click="$emit('close','no')">
                                    NO
                                </button>
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>
    <!-- app -->
    <div id="app">
        
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="say">
            <!--
                  you can use custom content here to overwrite
                  default content
                -->
            <h4 slot="header">YES or NO</h4>
        </modal>
    </div>
    <script>
    // register modal component
    Vue.component('modal', {
        template: '#modal-template'

    })

    // start app
    new Vue({
        el: '#app',
        data: {
            showModal: true
        },
        methods: {
            say: function(msg) {
                console.log(msg);
                this.showModal = false;
                window.location.href = 'hello?option=' + msg;
            }
        }
    })
    </script>
</body>

</html>

 

END

你可能感興趣的文章

vue.js component 在parent與child 傳值 component 在parent與child 傳值

[vue.js] input event Form-Input-Components-using-Custom-Events

將google試算表當作簡易資料庫,利用Google apps cript 在網頁上操作查詢 將google試算表當作簡易資料庫,利用apps cript 在網頁上操作查詢 若我有一試算表資料 縣市 status

vue.js modal 作兩個選項按鈕並導向不同頁面 vue.js modal 作兩個選項按鈕

[vue.js] 動態的props 做parent-child components 雙向綁定 vue.js props components camel-case

vue.js components 多個組件的呈現 vue.js 組件 component

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

python 的RE python re

00-F2 的 IPV6 反解設定 近日, 強者我的大神同事, line 傳來一句: igogo 上次你那個ipv6的設定檔 再幫我跑一次 如連結 程式都寫

臺中市雲端校務系統與Windows AD帳號整合(4) 雲端校務系統與Windows AD的架構

proxmox zfs 建立異地備份與還原 zfs最吸引人的地方就是可以建立快照並傳輸到遠端机器, 達到增量備份, 並且隨時從任一備份檔還原 完全不怕勒索病毒 將v

使用vbs設定windows 10 靜態IP setting static ip Set Adapter = GetObject("winmgmts:Win