我一直坚持在聚合物3中实施路由。我遵循了app-route文档中提供的基本指南。但是在加载网页时,我看不到任何组件被加载。我签入shadow DOM,没有看到任何DOM呈现。不知道我在想什么。这是代码。
static get properties() {
return {
page:{
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
};
}
_pageChanged(currentPage, oldPage){
console.log('CURRENT - ', currentPage);
console.log('OLD - ', oldPage);
switch(currentPage){
case 'home':
import('./home-comp.js').then()
break;
case 'about':
import('./about-comp.js').then()
break;
case 'contact':
import('./contact-comp.js').then()
break;
default:
this.page = 'home';
}
}Run Code Online (Sandbox Code Playgroud)
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<home-comp name="home"></home-comp>
<about-comp name="about"></about-comp>
<contact-comp name="contact"></contact-comp>Run Code Online (Sandbox Code Playgroud)
我看不到有关Polymer 3的大量文档可用于检查问题。在查看Polymer的默认示例Web应用程序shop。之后,我遇到了一些适当的解决方案。我想与社区分享给任何需要帮助的人。
我正在尝试创建一个div,用户可以输入一些内容,内容长度最多只能扩展到300px(来自LHS)和高度100px.如果内容超过该内容,它应该开始在剩余的空间中显示它(如图所示的RHS).我不想创建多个div,因为它是一个CMS,用户只需按照自己的意愿输入文本,并且在填充一定高度后应自动将内容传播到第二个div.没有脚本可以实现吗?我试图尽可能地避免脚本
这是我到目前为止尝试的代码.但只能包装一行.不是第二个
div{
width:300px;
max-height:100px;
overflow:hidden;
text-align:justify;
word-break: break-all;
}Run Code Online (Sandbox Code Playgroud)
<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model …Run Code Online (Sandbox Code Playgroud)