1.0.1 • Published 2 years ago
@okayt/site-list v1.0.1
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>