chiaweilee/vue-contacts

Mobile contacts component for Vue

vue-contacts

Mobile contacts component for Vue

Install

npm install vue-contacts

Preview

Global import

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

import { contacts } from 'vue-contacts'
export default {
  components: {
    contacts
  }
}

Usage

<template>
  <contacts
    :contacts="contacts"
    @contact="getContact"
    style="height: 300px"
    :place-holder="'Please enter name or remark to search'"
    :cancel-text="'Cancel search'"
  >
</template>

<script>
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}`)
    }
  }
}
</script>