{"id":25475204,"url":"https://github.com/chiaweilee/vue-contacts","last_synced_at":"2025-11-05T18:30:29.677Z","repository":{"id":144067640,"uuid":"153554780","full_name":"chiaweilee/vue-contacts","owner":"chiaweilee","description":"Mobile contacts component for Vue","archived":false,"fork":false,"pushed_at":"2018-12-10T07:23:18.000Z","size":248,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"0.1.x","last_synced_at":"2024-04-13T12:47:01.583Z","etag":null,"topics":["contacts","contacts-book","vue","vue-ui"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chiaweilee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-10-18T02:55:55.000Z","updated_at":"2022-12-14T09:43:09.000Z","dependencies_parsed_at":"2024-04-13T01:58:20.530Z","dependency_job_id":"c52123ab-50e2-4fef-a031-d8e74ee58563","html_url":"https://github.com/chiaweilee/vue-contacts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiaweilee%2Fvue-contacts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiaweilee%2Fvue-contacts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiaweilee%2Fvue-contacts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiaweilee%2Fvue-contacts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chiaweilee","download_url":"https://codeload.github.com/chiaweilee/vue-contacts/tar.gz/refs/heads/0.1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239467461,"owners_count":19643605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contacts","contacts-book","vue","vue-ui"],"created_at":"2025-02-18T11:54:30.877Z","updated_at":"2025-11-05T18:30:29.634Z","avatar_url":"https://github.com/chiaweilee.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Miscellaneous"],"readme":"# vue-contacts\nMobile contacts component for Vue\n\n\u003ca href=\"https://npmcharts.com/compare/vue-contacts?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-contacts.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-contacts\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-contacts.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-contacts\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-contacts.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\n### Install\n```cmd\nnpm install vue-contacts\n```\n\n### Preview\n\u003cimg src=\"https://github.com/chiaweilee/vue-contacts/blob/0.1.x/preview/screenshot1.png\" alt=\"License\"\u003e\n\u003cimg src=\"https://github.com/chiaweilee/vue-contacts/blob/0.1.x/preview/screenshot2.png\" alt=\"License\"\u003e\n\n### Global import\n```js\nimport Vue from 'vue'\nimport contacts from 'vue-contacts'\n// You can also write css yourself 😊\nimport 'vue-contacts/base.css'\nimport 'vue-contacts/vant.css'\nVue.use(contacts)\n```\n\n##### direct import in component\n\n```vue.js\nimport { contacts } from 'vue-contacts'\nexport default {\n  components: {\n    contacts\n  }\n}\n```\n\n### Usage\n\n```html\n\u003ctemplate\u003e\n  \u003ccontacts\n    :contacts=\"contacts\"\n    @contact=\"getContact\"\n    style=\"height: 300px\"\n    :place-holder=\"'Please enter name or remark to search'\"\n    :cancel-text=\"'Cancel search'\"\n  \u003e\n\u003c/template\u003e\n```\n\n```vue.js\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      contacts: [\n        {\n          name: '+v',\n          remark: 'Chiawei Lee',\n          icon: 'https://avatars0.githubusercontent.com/u/29817353?s=40\u0026v=4',\n          rightText: 'Github'\n        },\n        {\n          name: '岳云鹏',\n          remark: 'Yue yunpeng',\n          icon: 'data:image/gif;base64,R0lGODlhEAAQAMIAAAQEBJeXl+MmKvzr7ICAgO10dvGUAAAAACH5BAEAAAcALAAAAAAQABAAAANHeLrc/tCZaaB4lYl91Tyfwm0HCZ7lqC4VVwxwwWnCOwQEPMhdCgNAgG5WehEAOEBuQKzdCAFgYGcSGaXU3mJT6PK0kbB4kQAAOw=='\n        },\n        {\n          name: 'David Bowie',\n          remark: 'David Robert Haywood Jones',\n          icon: 'data:image/gif;base64,R0lGODlhEAAQAIAAAGWoJQAAACH5BAEAAAEALAAAAAAQABAAAAIjjG+ggJ2rHIJRHmgDpW3v6WFRSJbmcp3pOTLqWnEwo2FgjBYAOw==',\n          rightText: 'Star'\n        },\n        {\n          name: 'Michael Jackson'\n        },\n        {\n          name: 'Michael Jordan'\n        },\n        {\n          name: 'Michael Schumacher'\n        },\n        {\n          name: 'Michael Phelps'\n        },\n        {\n          name: 'Michael James Owen',\n          remark: 'Owen'\n        },\n        {\n          name: 'Sir Michael Caine',\n          remark: 'Michael Caine'\n        },\n        {\n          name: 'Mike Tyson'\n        },\n        {\n          name: 'Anne Hathaway',\n          icon: '',\n          iconClass: 'fa fa-icon'\n        },\n        {\n          name: 'Cate Blanchett',\n        },\n        {\n          name: 'H.O.T',\n          remark: 'Tony An, Kang Ta'\n        }\n      ]\n    }\n  },\n  methods: {\n    getContact: function (to) {\n      console.log(`You click ${to.name}`)\n    }\n  }\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiaweilee%2Fvue-contacts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchiaweilee%2Fvue-contacts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiaweilee%2Fvue-contacts/lists"}