vue-form-wizard表单向导步骤表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：vue-form-wizard表单向导步骤表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="bg-gray-100 leading-normal text-sm">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Mono'>

    <style>
        [v-cloak] {
            display: none;
        }

:focus {
            outline: 0;
        }

        body {
            font-family: "Fira Sans", sans-serif;
            line-height: 1.2;
        }

        pre {
            font-family: "Fira Mono", monospace;
        }

        .vue-form-wizard .wizard-tab-content {
            width: 100%;
            float: left;
            padding: 2rem 1rem;
        }
        .vue-form-wizard .wizard-nav {
            position: relative;
            text-align: center;
            display: -webkit-box;
            display: flex;
            flex-wrap: wrap;
        }
        .vue-form-wizard .wizard-nav li,
        .vue-form-wizard .wizard-nav a {
            -webkit-box-flex: 1;
            flex: 1;
            -webkit-box-align: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .vue-form-wizard .wizard-nav > li > a {
            color: #718096;
        }
        .vue-form-wizard .wizard-nav > li > a.disabled {
            pointer-events: none;
            cursor: default;
        }
        .vue-form-wizard .wizard-nav > li.active > a .wizard-icon {
            color: #fff;
        }
        .vue-form-wizard .wizard-nav .stepTitle {
            letter-spacing: 0.025em;
            text-transform: uppercase;
            font-size: 0.75rem;
            line-height: 2;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle {
            width: 100%;
            background-color: #e2e8f0;
            border-radius: 0;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle.checked:hover {
            background-color: #cbd5e0;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle .wizard-icon-container {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-flex: 1;
            flex: 1;
            width: 100%;
            border: none;
            background-color: #e2e8f0;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle .wizard-icon {
            font-size: 1.5rem;
            line-height: 2;
        }
        .vue-form-wizard .wizard-progress-with-circle {
            position: absolute;
            bottom: 0;
            height: 0.25rem;
            width: 100%;
            background-color: #e2e8f0;
        }
        .vue-form-wizard .wizard-progress-with-circle .wizard-progress-bar {
            position: relative;
            height: 0.25rem;
        }
        .vue-form-wizard .wizard-card-footer {
            width: 100%;
            float: left;
            padding: 1.5rem 1rem;
        }
        .vue-form-wizard .wizard-card-footer .wizard-footer-left {
            float: left;
        }
        .vue-form-wizard .wizard-card-footer .wizard-footer-right {
            float: right;
        }
        .vue-form-wizard .wizard-card-footer .wizard-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
        }
        .vue-form-wizard .wizard-card-footer .wizard-btn:focus {
            outline: 0;
        }
        .vue-form-wizard .wizard-card-footer .wizard-btn:hover {
            background-color: #c53030 !important;
        }
    </style>



</head>

<body translate="no">
    <div id="app" class="p-8" v-cloak>
        <div class="flex-none sm:flex justify-center">
            <div class="w-full lg:w-1/2 xl:w-1/3 overflow-auto py-5 px-4">
                <form-wizard class="w-full sm:float-right relative max-w-md bg-white shadow-lg rounded overflow-hidden" shape="tab" @on-complete="onComplete" back-button-text="Back" next-button-text="Next" finish-button-text="Submit" ref="wizard" :start-index="0">
                    <div slot="title"></div>
                    <tab-content title="Framework">
                        <h2 class="text-xl text-gray-800 text-center mb-2">Choose your Framework</h2>
                        <div class="flex flex-wrap -mx-1 overflow-hidden">
                            <div v-for="(framework, index) in frameworks" v-bind:id="'framework-'+framework.id" :class="'w-1/2 overflow-hidden my-1 px-1 item-'+index" @click="saveFramework(index)">
                                <div class="bg-orange-200 hover:bg-orange-300 text-gray-800 text-center text-base rounded py-4 cursor-pointer">
                                    <span>{{ framework.name }}</span>
                                </div>
                            </div>
                        </div>
                    </tab-content>
                    <tab-content title="PHP Version">
                        <h2 class="text-xl text-gray-800 text-center mb-2">Choose your PHP Version</h2>
                        <div class="flex flex-wrap -mx-1 overflow-hidden">
                            <div v-for="(version, index) in versions" v-bind:id="'version-'+version.id" :class="'w-1/2 overflow-hidden my-1 px-1 item-'+index" @click="saveVersion(index)">
                                <div class="bg-orange-200 hover:bg-orange-300 text-gray-800 text-center text-base rounded py-4 cursor-pointer">
                                    <span>{{ version.name }}</span>
                                </div>
                            </div>
                        </div>
                    </tab-content>
                    <tab-content title="System">
                        <h2 class="text-xl text-gray-800 text-center mb-2">Choose your operating system</h2>
                        <div class="flex flex-wrap -mx-1 overflow-hidden">
                            <div v-for="(system, index) in systems" v-bind:id="'system-'+system.id" :class="'w-1/2 overflow-hidden my-1 px-1 item-'+index" @click="saveSystem(index)">
                                <div class="bg-orange-200 hover:bg-orange-300 text-gray-800 text-center text-base rounded py-.........完整代码请登录后点击上方下载按钮下载查看