css - 如何让文件上传Buefy组件x%宽高？-6ren

css - 如何让文件上传Buefy组件x%宽高？

转载作者：行者123 更新时间：2023-11-27 23:22:53

26

4

我正在尝试使用 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>

最佳答案

这是一个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>

关于css - 如何让文件上传Buefy组件x%宽高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57919160/

26

4

0

文章推荐： javascript - flex 和 iframe 之间的交互

文章推荐： javascript - 当从 ngRepeat 选中复选框时填充输入

javascript - Buefy 分页更改事件问题
我是 vue 的新手，目前正在尝试使用 buefy 库来使用分页来一次获取有限数量的行以提高页面加载性能。这是我的大部分代码。 f.id" :per-page="25"
javascript - Buefy 工具提示中的新行
我想显示一个应包含几行新行作为工具提示文本的文本。 Action 使用 \r\n 的新行或不工作。如何在该元素上强制换行？最好有适当的 html 内容作为工具提示，但目
javascript - Buefy:锁定表头并仅使行可滚动
有没有一种方法可以锁定/使表格组件的标题保持不变，只允许行滚动？最佳答案我通常解决这个问题的一种方法是使用 Sticky Method，就像这样虽然这有一个主要缺点，但 IE6-IE10 不支持
vuejs2 - 如何以编程方式确定 Buefy 输入字段是否有错误？
我正在处理 Buefy 输入字段并寻找一种方法来告诉我任何表单字段是否有任何错误。 Buefy Input Documentation 如果没有可用的方法，那么我们如何
vuejs2 - 切换 buefy 表中的详细行
我有一个详细的表格。每当我单击 V 形标记时，都会显示相应行的详细 View 。在我的情况下，只打开一个详细 View 会好得多。期望的结果是:每当我单击 V 形标志时，该详细 View 就会打开，而
javascript - 无法设置 buefy 模态宽度
我将 vuejs 与 bulma 和 buefy 一起使用。我正在使用 buefy modal 并尝试使用其“width”属性设置模态宽度。我试图在 html 中指定它以及使用 javascript
css - 如何避免 Buefy 中的响应表
在 Buefy 表格中，我需要将数据显示为常规表格，在所有媒体上水平列，而不是在移动设备上使用堆叠卡片。为了适应内容，我使用媒体查询来简单地隐藏除最重要的列之外的所有列。
javascript - 如何将组添加到 buefy b-taginput？
总的来说，我对 Buefy、vue 和 javascript 很陌生，我正在尝试将分组下拉列表添加到 b-taginput 添加 autocomplete 似乎启用了下拉列表，但它缺少组。以下是我到目
Buefy:如何获取使用上传的文件的二进制内容？
问题当我添加组件添加到页面，它看起来很棒，我可以向其中添加文件，并且可以获得姓名的文件。但是我如何获得文件内容 ? 我试过的 doc for the Upload component提Fil
javascript - 如何让我的 VueJA/Buefy 自动完成显示筛选选项？
我正在使用 VueJS 和 Beufy 进行自动完成，我认为我可以正常工作，但似乎无法正确设置过滤器。当我输入描述时，输入框会过滤(尝试输入 ar 并正确过滤)但我看不到可供选择的选项。这些选项实际上
vue.js - 如何使用 Buefy 实现非表格分页
我想为我的类(class)项目制作分页，目前使用 Vue.js 和 Bulma + Buefy。我有一个对象数组，我想每页显示 5 个。已经完成布局和一切，我只想知道如何使分页工作。抱歉，无法发布代码
javascript - 我怎么知道用户在 Vue/Buefy 中的表单项上？
我想在用户关注表单元素(使用 Vue/Buefy 制作)时触发一个事件。我是新手，也许有人可以告诉我如何触发它？最佳答案您可以像这样在输入元素中使用事件处理 // or 现在当用户关注元素时 y
vue.js - 如何将类应用于 Buefy 表中的特定单元格？
我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类。例如，以下是我正在处理的代码: 模板: {{ props.row[column.f
input - 如何在事件发生后清除 Buefy 输入(VueJS)？
我正在尝试通过事件清除 Buefy 输入，但没有任何反应。但是，此代码适用于基本输入。这是我的 HTML: 这是我的脚本: methods: { addItem () {
vue.js - Buefy/BoostrapVue 命名空间冲突
我正在尝试使用 BootrapVue 同时使用 buefy 的 b-table 组件。我猜想 BootstrapVue 也有一个名为 b-table 的组件，它会导致冲突并导致 buefy 的表无法正
javascript - Vue/Buefy 的 Datepicker 组件选择了错误的日期
我在页面上的表单中使用 Vue/Buefy 作为日期选择器(第 2 步)https://waytorussia.net/Services/VisaSupport/Tourist.html 有时只会错误
javascript - 无法访问 .beforeEach() 中的 Buefy 组件
我正在尝试从 Buefy 访问 Toast 组件以在每次有人尝试访问仅授权 View 时显示错误: // ... import { Toast } from 'buefy/dist/component
vue.js - 没有页面刷新 Nuxt/Buefy 不加载 CSS
我是 Nuxt js 的新手，我在使用更改页面时遇到了一些 CSS 问题如果我使用 then buefy CSS 将一个页面导航到另一个页面，则无法正确加载如果我刷新页面 ctrl+f5 刷新后
vue.js - buefy 中的 Font Awesome 图标
我正在尝试从切换我的项目 bool 玛 + jQuery 至 buefy .我加载 buefy , Vue 和 Font Awesome 来自 CDN。 (buefy@0.6.7, vue@2.5.
vue.js - 为 Buefy 分页绑定(bind)方向键
是否有内置的方法将箭头键(右、左)绑定(bind)到 buefy 分页元素？还是我需要使用 vanillaJS 键盘事件？最佳答案 Vue 定义 key modifiers 关于vue.js -

首页

博学

6Ren·AI

商城

css - 如何让文件上传Buefy组件x%宽高？