gpt4 book ai didi

javascript - 如何通过更改宽度并在其中插入图标​​来设置 vue-bootstrap-datetimepicker 的样式?

转载 作者:行者123 更新时间:2023-11-29 15:07:41 25 4
gpt4 key购买 nike

我有两个来自包 vue-bootstrap-datetimepicker 的日期选择器对象.它们在功能方面非常完美,但我想对它们的外观进行一些更改。我有以下相关代码:

<template>
<div>
<div class="form-row">
<date-picker
name="begin-date"
@dp-change="changeDate()"
v-model="model.beginDate"
:config="datePickerConfig"
ref="beginDate">
</date-picker>
</div>

<div class="form-row">
<date-picker
name="end-date"
@dp-change="changeDate()"
v-model="model.endDate"
:config="datePickerConfig"
ref="endDate">
</date-picker>
</div>
</div>
</template>

例如,我想插入一个日历图标,我通常在 bootstrap 组件中这样做:

        <b-button
id="Somebutton"
:title="example for stack overflow"
size="sm"
:class="{danger: hasError}"
:disabled="loading">
<font-awesome-icon icon="columns"></font-awesome-icon>
</b-button>

但是把<font-awesome-icon icon="columns"></font-awesome-icon>在我想更改的代码中不起作用。 HTML 也不起作用(例如 <i class="fas fa-columns"></i>)。所以我想知道如何将图标放在那里。另一个问题是如何改变它们的宽度,此时它们看起来像这样:

enter image description here

enter image description here

我想更改它们的宽度,以便它们在同一行上彼此相邻,但在包文档中找不到任何可以帮助我执行此操作的内容。

最佳答案

TL;DR:这是 fiddle :https://jsfiddle.net/62a3Lu9y/6/

要将按钮添加到表单域,您可以使用 button addons to form fields .

<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">Button</button>
</div>
<date-picker ... />
</div>

但是,这只允许您在字段插件中显示您的按钮。为了让它主动切换选择器,您需要将按钮事件绑定(bind)到 vue-bootstrap-datetimepicker 中包含的日期选择器。组件:

  • 给日期选择器一个 ref : <date-picker ref="dp" .../>
  • 注册@click按钮上的事件并访问那里的引用:<button ... @click="$refs.dp...">
  • 访问内部日期选择器以便能够调用 functions在上面:@click="$refs.dp.dp.show()" (这有点 hacky,因为它破坏了 vue 日期选择器组件的封装,不过)

关于布局问题,您应该能够通过简单地为您的表单使用网格布局来做到这一点,请参阅 https://getbootstrap.com/docs/4.1/components/forms/#form-grid .

类似的东西

<div class="row">
<div class="col">
<date-picker ... />
</div>
<div class="col">
<date-picker ... />
</div>
</div>

关于javascript - 如何通过更改宽度并在其中插入图标​​来设置 vue-bootstrap-datetimepicker 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58305449/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com