Contact-dialog2 NPM

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: '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

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访问

@polymer/iron-flex-layout @polymer/iron-icon @polymer/paper-button @polymer/paper-checkbox @polymer/paper-dialog @polymer/paper-dialog-scrollable @polymer/paper-dropdown-menu @polymer/paper-input @polymer/paper-item @polymer/paper-listbox @polymer/polymer @webcomponents/webcomponentsjs

0.0.1

3 years ago