Drupal 8中如何搭配SweetAlert库使用插件实现带复杂表单的弹窗？

目录结构适配（解决路径不匹配问题） #

Drupal 8规定第三方前端库需统一放置在站点根目录的/libraries文件夹下，按照以下规则调整文件结构即可解决目录不兼容问题：

• 创建/libraries/sweetalert目录，将SweetAlert核心库的*.min.js、*.min.css文件直接放在该目录下，无需保留原压缩包中的dist、src等嵌套层级
• 创建/libraries/sweetalert-form-plugin目录，将支持复杂表单的SweetAlert插件的js文件直接放在该目录下

定义Drupal资源库 #

在你自定义的模块或主题的根目录下，修改/新增[模块/主题名].libraries.yml文件，声明资源加载规则：

sweetalert-complex-form:
  version: 1.0
  css:
    theme:
      /libraries/sweetalert/sweetalert.min.css: {}
  js:
    /libraries/sweetalert/sweetalert.min.js: {}
    /libraries/sweetalert-form-plugin/sweetalert-form-plugin.min.js: {}
  dependencies:
    - core/jquery
    - core/drupal

注：如果插件有额外依赖的css资源，也按照上述规则补充到css配置项中

挂载资源到页面 #

你可以按需在需要加载功能的位置挂载资源，两种常用方式：

1. 在自定义表单的build方法中挂载：

$form['#attached']['library'][] = '[你的模块名]/sweetalert-complex-form';

2. 全站挂载的话，直接在主题的*.info.yml文件中补充配置：

libraries:
  - '[你的主题名]/sweetalert-complex-form'

功能调用示例 #

在自定义的js文件中按照Drupal规范写调用逻辑即可：

Drupal.behaviors.sweetalertFormInit = {
  attach: function (context, settings) {
    // 触发带复杂表单的SweetAlert弹窗
    Swal.fire({
      title: '填写信息',
      html: `
        <div class="form-item">
          <label>用户名</label>
          <input type="text" id="username" class="form-text" />
        </div>
        <div class="form-item">
          <label>选择类型</label>
          <select id="type" class="form-select">
            <option value="1">类型A</option>
            <option value="2">类型B</option>
          </select>
        </div>
      `,
      showCancelButton: true,
      confirmButtonText: '提交',
      preConfirm: () => {
        return {
          username: document.getElementById('username').value,
          type: document.getElementById('type').value
        }
      }
    }).then(res => {
      if (res.isConfirmed) {
        // 此处写提交后的业务逻辑，可调用Drupal Ajax接口处理数据
        console.log('提交的数据：', res.value)
      }
    })
  }
}

注意事项 #

如果插件本身有硬编码的资源引用路径，需要对应修改为你当前的/libraries下的实际资源路径，避免出现资源404问题。

内容的提问来源于stack exchange，提问作者Emanuele Giacomini