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

【问题标题】：How to make file upload Buefy component x% width and height?如何使文件上传 Buefy 组件 x% 宽度和高度？
【发布时间】：2020-01-15 01:35:24
【问题描述】：

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

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

代码如下，Codepen 为here。

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

【问题讨论】：

您的 codepen 链接已损坏。

标签： css vue.js bulma

【解决方案1】：

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

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

.upload {
   width: 100%;
}
.upload-draggable {
   width:100%;
   height: 100vh;
}

您的代码的完整示例：

<!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">
    <style>
    .upload {
      width: 100%;
    }
    .upload-draggable {
      width:100%;
      height: 100vh;
    }
    </style>
</head>

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

          <section>
          <b-field>
              <b-upload v-model="dropFiles"
                  multiple
                  drag-drop
                  >
                  <section class="section" style="width:100%">
                      <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>

【讨论】：