Css 如何使文件上传Buefy组件x%的宽度和高度？_Css_Vue.js_Bulma

Css 如何使文件上传Buefy组件x%的宽度和高度？

css vue.js

Css 如何使文件上传Buefy组件x%的宽度和高度？,css,vue.js,bulma,Css,Vue.js,Bulma,我试图使用Buefy组件创建一个文件放置区域，但希望放置区域的大小为宽度和高度的100%。这是基本页面，但我不知道我需要把宽度和高度样式放在哪里如果我在Chrome中加载并手动更新添加内联样式，我最终会得到所需的效果（参见屏幕截图）。请问在实际的Buefy组件中，在哪里添加样式代码在下面，代码笔在下面将文件放在此处或单击上载 {{file.name} 新Vue({ el:“#应用程序”，数据：{ dropFiles:[] }, 方法：{ deleteDropFile（索引）{ t

我试图使用Buefy组件创建一个文件放置区域，但希望放置区域的大小为宽度和高度的100%。这是基本页面，但我不知道我需要把宽度和高度样式放在哪里

如果我在Chrome中加载并手动更新添加内联样式，我最终会得到所需的效果（参见屏幕截图）。请问在实际的Buefy组件中，在哪里添加样式

代码在下面，代码笔在下面




将文件放在此处或单击上载
{{file.name}
新Vue({
el:“#应用程序”，
数据：{
dropFiles:[]
},
方法：{
deleteDropFile（索引）{
this.dropFiles.splice（索引，1）
}
}
})

这是一个css问题，或buefy问题。您必须将css添加到页面中，您可以将其添加到头部，但您应该使用外部css文件并将其导入页面中

因此，要解决您的问题，只需在您的头脑中添加以下内容：

。上传{
宽度：100%；
}
.上传可拖动的{
宽度：100%；
高度：100vh；
}

用您的代码完成示例：


.上传{
宽度：100%；
}
.上传可拖动的{
宽度：100%；
高度：100vh；
}


将文件放在此处或单击上载
{{file.name}
新Vue({
el:“#应用程序”，
数据：{
dropFiles:[]
},
方法：{
deleteDropFile（索引）{
this.dropFiles.splice（索引，1）
}
}
})

您的代码笔链接已断开。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
</head>

<body>
    <div id="app">
        <!-- Buefy components goes here -->

          <section>
          <b-field>
              <b-upload v-model="dropFiles"
                  multiple
                  drag-drop
                  >
                  <section class="section">
                      <div class="content has-text-centered">
                          <p>
                              <b-icon
                                  icon="upload"
                                  size="is-large">
                              </b-icon>
                          </p>
                          <p>Drop your files here or click to upload</p>
                      </div>
                  </section>
              </b-upload>
          </b-field>

          <div class="tags">
              <span v-for="(file, index) in dropFiles"
                  :key="index"
                  class="tag is-primary" >
                  {{file.name}}
                  <button class="delete is-small"
                      type="button"
                      @click="deleteDropFile(index)">
                  </button>
              </span>
          </div>
      </section>

    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

    <!-- Individual components -->
    <script src="https://unpkg.com/buefy/dist/components/table"></script>
    <script src="https://unpkg.com/buefy/dist/components/input"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
              dropFiles: []
            },
            methods: {
              deleteDropFile(index) {
                this.dropFiles.splice(index, 1)
            }
        }
        })
    </script>
</body>
</html>