0.0.1 • Published 3 years ago
contact-dialog v0.0.1
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>
<style>
.contactDialog {
/*--dialog-mix-width: 500px;*/
/*--dialog-title-color: red;*/
/*--dialog-title-fontSize: 35px;*/
/*--dialog-sub-title-color: #666;*/
/*--dialog-sub-title-fontSize: 12px;*/
/*--dialog-message-color: #666;*/
/*--dialog-message-fontSize: 12px;*/
/*--dialog-paper-item-color: yellow;*/
/*--dialog-paper-item-background: blue;*/
/*--dialog-paper-listbox-width: 400px*/
/*--dialog-paper-checkbox-margin-top: 40px;*/
/*--shadow-elevation-16dp_-_box-shadow: 10px 10px 10px 5px #888888;*/
/*--dialog-paper-listbox-border: 2px solid red;*/
/*--dialog-paper-item-padding: 20px 20px;*/
}
</style>
</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: 'Coty.Hartmann1@gmail.com'},
{id: 2, name: 'Prudence Bernhard', groupName: '分组2', email: 'Lura7@gmail.com'},
{id: 3, name: 'Sincere Russel', groupName: '分组1', email: 'Bo_Lang18@hotmail.com'},
{id: 4, name: 'Geovanni Kerluke', groupName: '分组3', email: 'Daisy84@hotmail.com'},
{id: 5, name: 'Cornell McKenzie', groupName: '分组2', email: 'Pasquale_Marks@hotmail.com'},
{id: 6, name: 'Zella Bednar', groupName: '分组1', email: 'Camren54@yahoo.com'},
{id: 7, name: 'Alvera Feil', groupName: '分组1', email: 'Emiliano59@yahoo.com'},
{id: 8, name: 'Grayce Bradtke', groupName: '分组2', email: 'Lucio.Nitzsche@yahoo.com'},
{id: 9, name: 'Hayden Collins', groupName: '分组3', email: 'Roxane7@yahoo.com'},
{id: 10, name: 'Destini Franecki II', groupName: '分组1', email: 'Sarah.Nikolaus76@yahoo.com'},
{id: 11, name: 'Frida Zulauf', groupName: '分组3', email: 'Valerie_Von50@hotmail.com'},
{id: 12, name: 'Donavon Klein', groupName: '分组1', email: 'Keon.Smitham99@hotmail.com'},
{id: 13, name: 'Bert Lehner', groupName: '分组1', email: 'Jamar.Hegmann3@yahoo.com'},
{id: 14, name: 'Erling Labadie Sr.', groupName: '分组2', email: 'Beaulah0@hotmail.com'},
{id: 15, name: 'Mrs. Alejandra Wilderman', groupName: '分组2', email: 'Lavonne88@gmail.com'},
];
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 |
| dialogTitle | 自定义联系人组件标题 | string | '添加收信人' |
| dialogSubTitle | 自定义联系人组件副标题 | string | null |
| editGroupBtnName | 自定义编辑联系人组按钮 | string | '添加到已有联系人组' |
| addGroupBtnName | 自定义新建联系人组按钮 | string | '添加到新联系人组' |
| cancelBtnText | 自定义取消按钮文字 | string | '取消' |
| saveBtnText | 自定义保存按钮文字 | string | '保存' |
| message | 自定义说明文字 | string | null |
| bottomMessage | 自定义底部说明文字 | string | null |
| addDialogTitle | 自定义新建联系人组标题 | string | '新建联系人组' |
| addDialogSubTitle | 自定义新建联系人组副标题 | string | null |
| editDialogTitle | 自定义编辑联系人组标题 | string | '编辑联系人组' |
| editDialogSubTitle | 自定义编辑联系人组副标题 | string | null |
Style
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| --dialog-mix-width | 弹框最小宽度 | - | 300px |
| --dialog-title-color | h2弹框标题颜色 | - | #000 |
| --dialog-title-fontSize | h2弹框标题字体大小 | - | 24px |
| --dialog-sub-title-color | 主弹框副标题字体颜色 | - | #000 |
| --dialog-sub-title-fontSize | 主弹框副标题字体大小 | - | 16px |
| --dialog-message-color | 弹框提示文字字体颜色 | - | #000 |
| --dialog-message-fontSize | 弹框提示文字字体大小 | - | 16px |
| --dialog-paper-item-color | 列表item字体颜色 | - | |
| --dialog-paper-item-background | 列表item背景颜色 | - | |
| --dialog-paper-item-padding | 列表item padding | - | 6px 16px |
| --dialog-paper-listbox-width | 列表listbox宽度 | - | 200px |
| --dialog-paper-listbox-border | 列表listbox边框 | - | 1px dotted #ccc |
| --dialog-paper-checkbox-margin-top | checkbox margin-top | - | 20px |
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/