是否有类似模板实例化的通知机制?
假设以下简单模板:
<template iterate="name in names">
<div>{{name}}</div>
</template>
当名称很长时,可能会div
溢出名称的容器。所以我想做的是在将名称div
添加到 DOM 时获取一个事件,以便我可以查看生成的宽度。然后我会缩短名称,直到它非常适合。
是否有类似模板实例化的通知机制?
假设以下简单模板:
<template iterate="name in names">
<div>{{name}}</div>
</template>
当名称很长时,可能会div
溢出名称的容器。所以我想做的是在将名称div
添加到 DOM 时获取一个事件,以便我可以查看生成的宽度。然后我会缩短名称,直到它非常适合。
注意:我假设你不能用 CSS 实现你想要的。所以这是一个代码解决方案。
我不知道有任何事件或方法可以连接到创建过程。
但是,我成功地做了这样的事情:
import 'dart:async';
inserted() {
Timer.run(() {
// Do your calculations here...
});
}
如果您name
稍后设置变量,那么您也可以使其可观察并在值更改后设置计时器:
observe(() => name), (_) {
Timer.run(() {
// Recalculate...
});
});
并记得标记它@observable
并将侦听器设置为created()
.
你真的应该在 CSS 中处理这样的事情:
.name {
width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
并给你的 div 一个name
.
这将自动将文本缩小到容器宽度并添加省略号以指示文本已被截断。