对齐标签并在sweetalert 2的同一行中选择下拉列表

如何解决对齐标签并在sweetalert 2的同一行中选择下拉列表

我正在寻找可以使用 sweetalert2 在同一行中对齐标签和下拉列表的示例。

我尝试添加自定义标签来实现这一点，但它在不同的行中，我想在单击“确定”按钮时控制所选下拉列表。

下面是我的stackblitz。

https://stackblitz.com/edit/angular-sweetalert-dropdown

解决方法

您可以使用普通/样式的 html 并按如下方式正常捕获下拉值：

 Swal.fire({

  showCancelButton: true,type: "warning",html: ` select reason <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          </select>`,preConfirm: function() {
  var elm = document.getElementById("cars");
  alert(elm.value); // use user selected value freely
  }

   });

,

使用 inputLabel + customClass 参数：

Swal.fire({
  title: 'Select + label in one row',input: 'select',inputOptions: {
    apples: 'Apples',bananas: 'Bananas',oranges: 'Oranges'
  },inputLabel: 'Select a fruit',customClass: {
    input: 'inline-flex',inputLabel: 'inline-flex'
  }
})

.inline-flex {
  display: inline-flex !important;
  margin: .5em !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

阅读有关 customClass 的更多信息：https://sweetalert2.github.io/#customClass