我正在使用 Stencil 创建一个自定义组件来复制UI-select
.
该组件将像这样使用:
let items = [{name:"Abc", age: 10}, {name:"Xyz", age: 10}];
let itemString = JSON.stringify(items);
<dropdown-search placeholder="Select User" item-string='${itemString}'>
</dropdown-search>
然后组件定义为
import {
Component,
State,
Prop,
Element,
} from '@stencil/core';
@Component({
tag: 'dropdown-search',
})
export class DropdownSearch {
@Element() dropdownEl: HTMLElement;
@State() isOpen: boolean = false;
@State() items: any = [];
@Prop() itemString: string = '';
@Prop() placeholder: string = '';
componentDidLoad() {
try {
this.items = JSON.parse(this.itemString);
} catch(e) {}
}
onClickDropdownHandler = (e: UIEvent) => {
e.preventDefault();
this.toggleDropdown();
}
toggleDropdown = () => {
this.isOpen = !this.isOpen;
if (this.isOpen) {
window.setTimeout(
() => {
this.dropdownEl.querySelector('input').focus();
},
0,
);
}
}
renderOptions = () => {
if (!Array.isArray(this.items) || !this.items.length) {
return null;
}
return this.items.map((item) => (
<li
>
<a href="javascript:" title="{item.name}">
{item.name}
<small class="d-block">age: {item.age}</small>
</a>
</li>
));
}
render() {
let dropdownClassName = (this.isOpen ? 'open' : '');
return (
<form name="myForm">
<div class="form-group">
<div
class={`btn-group dropdown ${dropdownClassName}`}
>
<button
class="btn btn-default dropdown-toggle"
onClick={this.onClickDropdownHandler}
>
{this.placeholder}
</button>
<ul class="dropdown-menu" role="menu">
<li>
<div class="input-group input-group-search">
<input
class="form-control"
type="search"
/>
</div>
</li>
{this.renderOptions()}
</ul>
</div>
</div>
</form>
);
}
}
这些项目渲染得很好。由于用户可以传递自定义的对象数组,所以我需要自定义选项模板。因此用户可以在使用组件时传递它。
现在我正在为组件中的选项使用静态模板,比如
<a href="javascript:" title="{item.name}">
{item.name}
<small class="d-block">age: {item.age}</small>
</a>
但我需要一种方法从我使用模板的地方传递这个模板。我不能在那里使用插槽,因为我在循环运行的所有选项中使用相同的模板。