contact-dialog
v0.0.1
Published
使用Polymer开发的简单的联系人组件，能添加，搜索收信人，选择收信人组，添加和编辑收信人组等。
Downloads
1
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>
<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: '[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| |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/即可在http://127.0.0.1:8000访问