Framework7如何使用垂直对话框按钮并为其添加ID和类

没问题，我来帮你搞定Framework7对话框按钮的ID、类添加以及点击事件的问题！你只需要在每个按钮的配置对象里，直接添加id、className属性，同时配上onClick回调函数就能让按钮正常工作了，修改后的代码如下：

$$('.open-vertical').on('click', function () {
  app.dialog.create({
    title: 'Vertical Buttons',
    text: 'Dialog with vertical buttons',
    buttons: [
      {
        text: 'Button 1',
        id: 'dialog-btn-1', // 自定义按钮ID
        className: 'custom-btn custom-btn-primary', // 自定义按钮类（多个类用空格分隔）
        onClick: function () {
          // 这里编写Button 1的点击逻辑
          console.log('Button 1被点击了');
          // 点击后关闭对话框（可选，根据需求调整）
          app.dialog.close();
        }
      },
      {
        text: 'Button 2',
        id: 'dialog-btn-2',
        className: 'custom-btn custom-btn-secondary',
        onClick: function () {
          console.log('Button 2被点击了');
          app.dialog.close();
        }
      },
      {
        text: 'Button 3',
        id: 'dialog-btn-3',
        className: 'custom-btn custom-btn-tertiary',
        onClick: function () {
          console.log('Button 3被点击了');
          app.dialog.close();
        }
      },
    ],
    verticalButtons: true,
  }).open();
});

关键说明： #

• 添加ID和自定义类：在每个按钮的配置项中，与text同级添加id（唯一标识按钮）和className（自定义样式类，支持多个类名空格分隔），这样你可以通过ID精准操作按钮，或者用类来统一设置按钮样式。
• 绑定点击事件：通过onClick回调函数直接绑定按钮的点击逻辑，这是Framework7官方推荐的组件用法，能确保按钮点击后执行你需要的操作（比如关闭对话框、提交数据等）。

如果之后需要动态操作这些按钮（比如修改文本、样式），也可以通过选择器获取元素，比如$$('#dialog-btn-1')来定位对应的按钮元素进行操作。

内容的提问来源于stack exchange，提问作者Rameshwar Patnaik