quasar+vue实现步骤表单输入效果代码-html代码-BFW代码库

quasar+vue实现步骤表单输入效果代码

代码语言：html

代码描述：quasar+vue实现步骤表单输入效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">
  

</head>

<body>

<div id="q-app" style="min-height: 100vh;">
<!--
  Forked from:
  http://www.quasarchs.com/vue-components/stepper#example--horizontal
-->
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      animated
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="step > 1"
      >
                  For each ad campaign that you create, you can control how much you're willing to
        spend on clicks and conversions, which networks and geographical locations you want
        your ads to show on, and more.
           <q-input v-model="text" label="Standard" />

      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="step > 2"
      >
        An ad group contains one or more ads which target a shared set of keywords.
        <q-input color="purple-12" v-model="text" label="Label">
        <template v-slot:prepend>
          <q-icon name="event" />
        </template>
      </q-input>
      </q-step>

      <q-step
        :name="3"
        title="Ad template"
 .........完整代码请登录后点击上方下载按钮下载查看