Question

我正在计划使用语义ui modal任何人都有任何想法，如何与dart互操作？

Answer 1

使用js package进行互操作。首先，将包添加为依赖项。然后，从Dart中包装要使用的JavaScript。这是一个允许您在Dart中使用jQuery $(...).addClass(...)的示例：

@JS()
library jquery;

import 'package:js/js.dart';

// Calls invoke JavaScript `JSON.stringify(obj)`.
@JS("\$")
external ElementSet $(String selector);

@JS()
class ElementSet {
  external addClass(String className);
}

如果您导入此文件，现在可以执行以下操作：

$('#output').addClass("red");

这个例子当然是没用的--Dart已经允许你修改HTML类，具有更好的可读性和灵活性（例如querySelector('#output').classes.add("red")）。

但在你的情况下，它开始有意义。您将实施modal()并从那里开始。

（我会给你一个如何实现模态的例子，但我无法在我的工作站上安装语义ui超过10分钟，然后我就放弃了。所以我用了jQuery.addClass例子来代替。）

Answer 2

这不是那么容易。有两个或三个发布包，但它们已经过时且不完整。

我是在 Dart 2 （AngularDart 5）中这样做的：

import 'dart:js';

// somewhere in the component:
context
  .callMethod(r'$', [modalSelector])
  .callMethod('modal', [new JsObject.jsify({
    'onApprove': new JsFunction.withThis((element){
      // do something on approve
    })
  })])
  .callMethod('modal', ['show']);

此Dart代码等同于此Javascript代码：

$(modalSelector).modal({
    'onApprove': function(element){
      // do something on approve
    })
    .modal('show');

您可能会看到，您必须通过JS模块调用jQuery框架。

使用来自语义ui的模态

2 个答案: