https://github.com/chiaweilee/vue-contacts
Mobile contacts component for Vue
https://github.com/chiaweilee/vue-contacts
contacts contacts-book vue vue-ui
Last synced: 8 months ago
JSON representation
Mobile contacts component for Vue
- Host: GitHub
- URL: https://github.com/chiaweilee/vue-contacts
- Owner: chiaweilee
- License: mit
- Created: 2018-10-18T02:55:55.000Z (almost 7 years ago)
- Default Branch: 0.1.x
- Last Pushed: 2018-12-10T07:23:18.000Z (almost 7 years ago)
- Last Synced: 2024-04-13T12:47:01.583Z (over 1 year ago)
- Topics: contacts, contacts-book, vue, vue-ui
- Language: JavaScript
- Size: 242 KB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-contacts
Mobile contacts component for Vue
### Install
```cmd
npm install vue-contacts
```
### Preview
### Global import
```js
import Vue from 'vue'
import contacts from 'vue-contacts'
// You can also write css yourself 😊
import 'vue-contacts/base.css'
import 'vue-contacts/vant.css'
Vue.use(contacts)
```
##### direct import in component
```vue.js
import { contacts } from 'vue-contacts'
export default {
components: {
contacts
}
}
```
### Usage
```html
```
```vue.js
export default {
data () {
return {
contacts: [
{
name: '+v',
remark: 'Chiawei Lee',
icon: 'https://avatars0.githubusercontent.com/u/29817353?s=40&v=4',
rightText: 'Github'
},
{
name: '岳云鹏',
remark: 'Yue yunpeng',
icon: 'data:image/gif;base64,R0lGODlhEAAQAMIAAAQEBJeXl+MmKvzr7ICAgO10dvGUAAAAACH5BAEAAAcALAAAAAAQABAAAANHeLrc/tCZaaB4lYl91Tyfwm0HCZ7lqC4VVwxwwWnCOwQEPMhdCgNAgG5WehEAOEBuQKzdCAFgYGcSGaXU3mJT6PK0kbB4kQAAOw=='
},
{
name: 'David Bowie',
remark: 'David Robert Haywood Jones',
icon: 'data:image/gif;base64,R0lGODlhEAAQAIAAAGWoJQAAACH5BAEAAAEALAAAAAAQABAAAAIjjG+ggJ2rHIJRHmgDpW3v6WFRSJbmcp3pOTLqWnEwo2FgjBYAOw==',
rightText: 'Star'
},
{
name: 'Michael Jackson'
},
{
name: 'Michael Jordan'
},
{
name: 'Michael Schumacher'
},
{
name: 'Michael Phelps'
},
{
name: 'Michael James Owen',
remark: 'Owen'
},
{
name: 'Sir Michael Caine',
remark: 'Michael Caine'
},
{
name: 'Mike Tyson'
},
{
name: 'Anne Hathaway',
icon: '',
iconClass: 'fa fa-icon'
},
{
name: 'Cate Blanchett',
},
{
name: 'H.O.T',
remark: 'Tony An, Kang Ta'
}
]
}
},
methods: {
getContact: function (to) {
console.log(`You click ${to.name}`)
}
}
}
```