我正在使用聚合物 3 es6 构建 Material 设计卡片元素,并且只想拥有 <slot>
当属性设置为 true 时标记。
这是我的 js 代码:
export class ACard extends PolymerElement {
static get is() { return 'a-card' }
static get template() { return `
<div class="card">
<script>
if ([[media]]) {
<div class$="card-image">
<slot name="image"></slot>
</div>
};
</script>
<div class="card-stacked">
<div class="card-content">
<slot name="title" class="card-title"></slot>
<slot name="text"></slot>
</div>
<div class$="card-action">
<slot name="action-link"></slot>
</div>
</div>
</div>`
}
constructor() {
super();
}
static get properties() {
return {
media: {
type: Boolean
}
}
}
}
customElements.define(ACard.is, ACard)
这是我的index.html:
<a-card media="true">
<img slot="image" src="">
</a-card>
因此当媒体属性设置为true
时返回卡片图像 div 和其中的插槽。
必须道歉,因为我是 JavaScript 新手,示例中可能存在严重的语法和逻辑问题。
最佳答案
使用 Dom-if 模板
<a-card media="true">
<template is="dom-if" if="{{media}}">
<img slot="image" src=""/>
</template>
</a-card>
图像仅在以下情况下显示
media=true
关于javascript - 在聚合物中使用条件槽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46611594/