test-contact-dialog
v0.0.1
Published
使用Polymer开发的简单的联系人组件，能添加，搜索收信人，选择收信人组，添加和编辑收信人组等。
Downloads
2
Readme
Contact联系人组件
使用Polymer开发的简单的联系人组件，能添加，搜索收信人，选择收信人组，添加和编辑收信人组等。
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="module" async src="node_modules/contact-dialog/src/contact-dialog.js"></script>
</head>
<body>
<button onclick="openDialog()">添加收信人</button>
<contact-dialog id="contactDialog"></contact-dialog>
</body>
<script type="text/javascript">
const sourceItems = [
{id: 1, name: 'Yadira Kunze', groupName: '分组1', email: '[email protected]'},
{id: 2, name: 'Prudence Bernhard', groupName: '分组2', email: '[email protected]'},
{id: 3, name: 'Sincere Russel', groupName: '分组1', email: '[email protected]'},
{id: 4, name: 'Geovanni Kerluke', groupName: '分组3', email: '[email protected]'},
{id: 5, name: 'Cornell McKenzie', groupName: '分组2', email: '[email protected]'},
{id: 6, name: 'Zella Bednar', groupName: '分组1', email: '[email protected]'},
{id: 7, name: 'Alvera Feil', groupName: '分组1', email: '[email protected]'},
{id: 8, name: 'Grayce Bradtke', groupName: '分组2', email: '[email protected]'},
{id: 9, name: 'Hayden Collins', groupName: '分组3', email: '[email protected]'},
{id: 10, name: 'Destini Franecki II', groupName: '分组1', email: '[email protected]'},
{id: 11, name: 'Frida Zulauf', groupName: '分组3', email: '[email protected]'},
{id: 12, name: 'Donavon Klein', groupName: '分组1', email: '[email protected]'},
{id: 13, name: 'Bert Lehner', groupName: '分组1', email: '[email protected]'},
{id: 14, name: 'Erling Labadie Sr.', groupName: '分组2', email: '[email protected]'},
{id: 15, name: 'Mrs. Alejandra Wilderman', groupName: '分组2', email: '[email protected]'},
];
const groupList = [
{
id : 1,
name: '分组1'
},
{
id : 2,
name: '分组2'
},
{
id : 3,
name: '分组3'
},
{
id : 4,
name: '分组4'
}
];
const dialog = document.querySelector('#contactDialog');
dialog.sourceItems = sourceItems;
dialog.groupList = groupList;
dialog.groupCanEdit = true;
dialog.groupCanAdd = true;
function openDialog(val) {
dialog.openDialog = !dialog.openDialog;
}
dialog.addEventListener('saveContact', event => {
console.log(event.detail.selectedData);
});
dialog.addEventListener('addGroup', event => {
console.log(event.detail);
});
dialog.addEventListener('editGroup', event => {
console.log(event.detail);
})
</script>
</html>
|参数|说明|类型|默认值| |-|-|-|-| |sourceItems|需要展示的联系人列表|array|[]| |groupList|联系人分组列表|array|[]| |groupCanEdit|是否可以编辑联系人组|boolean|false| |groupCanAdd|是否可以新建联系人组|boolean|false| |openDialog|打开联系人组件弹框|boolean|false|
Method
通过事件监听dialog的方法
saveContact: 选择完收信人之后调用 addGroup: 新建联系人组后调用 editGroup: 编辑联系人组后调用
运行
在终端输入 polymer serve --open
$ polymer serve --open
info: Files in this directory are available under the following URLs
applications: http://127.0.0.1:8000
reusable components: http://127.0.0.1:8000/components/test/即可在http://127.0.0.1:8000访问