在组件中,可以使用this.setPrivateData和this.getPrivateData来设置和获取组件的私有数据,在组件的html中,可以使用@private别名来绑定私有数据。以下代码是一个多选列表的组件示例:
<div class="list">
<div>{{@private.title}}</div>
<label p-for="@private.list" style="clear: both">
<div class="list-box">
<div class="list-box-inner"></div>
</div>
<div>{{name}}</div>
<input type="checkbox" style="display: none" p-bind="name:{{@private.name}} ^ value:{{value}}">
</label>
</div>
<style>
.list .list-box {
float: left;
width: 14px;
height: 14px;
border: 1px solid blue;
border-radius: 2px;
padding-top: 2px;
padding-left: 1px;
box-sizing: border-box;
margin-top: 4px;
margin-right: 5px;
}
.list .list-box.selected {
background: blue;
}
.list .list-box-inner {
width: 10px;
height: 4px;
transform: rotateZ(-45deg);
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: 0;
transition: all .3s;
}
.list .list-box.selected .list-box-inner{
opacity: 1;
}
</style>
<script>
this.onLoad = function (context, root, vm) {
this.setPrivateData($(root), context);
$(root).on('change', 'input', function (e) {
var target = e.currentTarget;
$(target).siblings('.list-box').toggleClass('selected');
})
}
</script>