Question

我正在使用Bulma和Vue，我正在尝试为网站创建一个标题，左侧是徽标，右侧是登录表单。

这给了我一个左侧的标识，然后从标识的末尾到右边的屏幕结尾，我有那里显示的元素。

我该怎么做我想要的？感谢。

模板

<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填充右侧的其余空间。

在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>

左侧的徽标，右侧的徽标

1 个答案: