Package Exports

@okayt/site-list
@okayt/site-list/lib/site_list.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@okayt/site-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>