site-list

A dynamic address selection component by Vue.js

preview

API

Props

name|type|default|description :-:|:--:|:--:|:-: value|String or Number|""|The current address value is selected id_key|String|"id"|The key to renaming values sites|Object|{}|Address list

Methods

name|type|description :-:|:--:|:-: on-selected |Object| Returns the currently selected address

Usage

npm install @okayt/site-list

main.js

import siteList from "@okayt/site-list"
Vue.use(siteList);

App.vue

<template>
  <div id="app">
    <site-list :sites="sites" :value="id" @on-selected="siteChange" />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      id: 0,
      sites: {
        A: [
          {
            id: 14,
            country_id: 260,
            name: "\u5b89\u5fbd",
            pinyin: "Anhui",
            initial: "A"
          }
        ],
        B: [
          {
            id: 1,
            country_id: 260,
            name: "\u5317\u4eac",
            pinyin: "Beijing",
            initial: "B"
          }
        ],
        T: [
          {
            id: 3,
            country_id: 260,
            name: "\u5929\u6d25",
            pinyin: "Tianjin",
            initial: "T"
          },
          {
            id: 32,
            country_id: 260,
            name: "\u53f0\u6e7e",
            pinyin: "Taiwan",
            initial: "T"
          }
        ],
      }
    };
  },
  methods: {
    siteChange(now_site) {
      this.id = now_site.id;
    }
  }
};
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}
</style>