左边是标志，右边是表格

Question

我正在使用 Bulma 和 Vue，我正在尝试为该站点创建一个 header，该站点由左侧的徽标和右侧的登录表单组成。

这给了我一个标志在左边，然后从标志的末端到右边屏幕的末端，我有在那里显示的元素。

我该如何做我想做的事？谢谢

模板

<header>
    <div class="navbar">
        <a class="navbar-brand" href="/">FreeSongs&trade;</a>
        <form class="navbar-menu" @submit.prevent="signin" accept-charset="utf-8" autocomplete="on">

            <div class="field-body ">
                <FormField type="email" required="required" :tabindex="1" placeholder="Email" name="login[email]" autocomplete="email" v-model="stageName" v-validate="'required'" autocapitalize="off" autofocus="autofocus"></FormField>
                <FormField type="password" required="required" :tabindex="2" placeholder="Password" name="login[password]" autocomplete="current-password" v-model="email" v-validate="'required|email'"></FormField>
                <button class="button is-success" tabindex="3" type="submit" id="signin">Sign in</button>
                <a class="btn btn-link" tabindex="4" href="/forgot">Forgot password?</a>
            </div>

        </form>
    </div>
</header>

FormField 组件

<template>
  <div class="field">
    <label v-if="label" class="label" :for="id">{{label}}</label>
    <input :type="type" class="input" :class="{'is-danger':this.$validator.errors.has(label)}" :tabindex="tabindex" :name="name" :id="id" :autocomplete="autocomplete" :value="value" @input="updateValue" @change="updateValue" @blur="$emit('blur')" :disabled="disabled" :required="required" :placeholder="placeholder" />
    <span v-show="this.$validator.errors.has(label)" class="subtitle is-6 has-text-danger">{{ this.$parent.errors.first(label) }}</span>
  </div>
</template>

<script>
export default {
    name: "FormField",
    //inject: ['$validator'],
    inject: {
        $validator: '$validator'
    },
    $_veeValidate: {
        name() {
            return this.label;
        },
        // fetch the current value from the innerValue defined in the component data.
        value() {
            return this.value;
        }
    },
    props: {
        value: String,
        placeholder:String,
        id: {
            type: String,
            default: () => {
                const rand = Math.floor((Math.random() * 10000) + 1); //TODO: Create enough margin so there won't be a chance it has the same ID as other elemnts. Change the method?
                const id = `undefined_${Date.now()*rand}`; //${this._uid}
                return id;
            }
        },
        label: {
            type: String,
            required: false
        },
        type: {
            type: String,
            default: "text"
        },
        name: {
            type: String,
            required: true
        },
        autocomplete: {
            type: String,
            required: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        required:{
            type:Boolean,
            default:false
        },
        tabindex:{
          type:Number
        },
        autocapitalize:{
          type:String,

        },
        autofocus:{
          type:Boolean
        }
    },
    computed: {

    },
    created: function() {
        console.log("Created");
    },
    mounted: function() {
        console.log("Mounted");
    },
    methods: {
        updateValue(e) {
            this.$emit("input", e.target.value);
        }
    }
};
</script>

Answer 1

文档概述了如何执行此操作：

https://bulma.io/documentation/components/navbar/

首先，导航栏一分为二。

|导航栏品牌|导航栏菜单|

navbar-brand 将始终显示在左侧，navbar-menu 填充右侧 space 的其余部分。

在 navbar-menu 中，您可以指定将显示哪些副项以及另外两个元素。

|导航栏开始|导航栏结束|

<nav class="navbar">
    <div class="navbar-brand">
        This is on the left of the bar.
    </div>
    <div class="navbar-menu">
        This spans the rest of the space on the right of the bar.
        <div class="navbar-start">
            This is on the left.
            <div class="navbar-item">Your items on the left</div>
        </div>
        <div class="navbar-end">
            This is on the right.
            <div class="navbar-item">Your items on the right</div>
        </div>
    </div>
</nav>

左边是标志，右边是表格

Logo to the left, form to the right

vue.js

vuejs2

vue-component

bulma