240 lines
4.1 KiB
Markdown
240 lines
4.1 KiB
Markdown
#组件使用说明
|
|
|
|
>示例数据均为静态数据，接口生成如下结构的数据：(已上传完整demo)
|
|
|
|
---
|
|
#### 索引列表
|
|
```
|
|
{
|
|
"A": [{
|
|
"id": 56,
|
|
"spell": "aba",
|
|
"name": "阿坝"
|
|
}]
|
|
......
|
|
}
|
|
```
|
|
|
|
#### 通讯录列表
|
|
```
|
|
{
|
|
"A": [{
|
|
"id": 56,
|
|
"spell": "zs",
|
|
"name": "张三",
|
|
"phoneNumber":"13143599999"
|
|
}]
|
|
......
|
|
}
|
|
```
|
|
|
|
> id spell name 为必须字段 phoneNumber字段如果没有则不返回
|
|
|
|
|
|
---
|
|
|
|
#### 使用示例 (phones.vue)
|
|
|
|
```
|
|
<template>
|
|
<view>
|
|
<phone-directory :phones="phones" @paramClick="paramClick"></phone-directory>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import phoneDirectory from '@/components/phone-directory/phone-directory.vue'
|
|
export default {
|
|
name:"phones",
|
|
components:{
|
|
phoneDirectory
|
|
},
|
|
data() {
|
|
return {
|
|
//示例数据
|
|
phones:{
|
|
"A": [{
|
|
"id": 56,
|
|
"spell": "aba",
|
|
"name": "阿坝"
|
|
}, {
|
|
"id": 57,
|
|
"spell": "akesu",
|
|
"name": "阿克苏"
|
|
}, {
|
|
"id": 58,
|
|
"spell": "alashanmeng",
|
|
"name": "阿拉善盟"
|
|
}, {
|
|
"id": 59,
|
|
"spell": "aletai",
|
|
"name": "阿勒泰"
|
|
}, {
|
|
"id": 60,
|
|
"spell": "ali",
|
|
"name": "阿里"
|
|
}, {
|
|
"id": 61,
|
|
"spell": "ankang",
|
|
"name": "安康"
|
|
}, {
|
|
"id": 62,
|
|
"spell": "anqing",
|
|
"name": "安庆"
|
|
}, {
|
|
"id": 63,
|
|
"spell": "anshan",
|
|
"name": "鞍山"
|
|
}, {
|
|
"id": 64,
|
|
"spell": "anshun",
|
|
"name": "安顺"
|
|
}, {
|
|
"id": 65,
|
|
"spell": "anyang",
|
|
"name": "安阳"
|
|
}, {
|
|
"id": 338,
|
|
"spell": "acheng",
|
|
"name": "阿城"
|
|
}, {
|
|
"id": 339,
|
|
"spell": "anfu",
|
|
"name": "安福"
|
|
}, {
|
|
"id": 340,
|
|
"spell": "anji",
|
|
"name": "安吉"
|
|
}, {
|
|
"id": 341,
|
|
"spell": "anning",
|
|
"name": "安宁"
|
|
}, {
|
|
"id": 342,
|
|
"spell": "anqiu",
|
|
"name": "安丘"
|
|
}, {
|
|
"id": 343,
|
|
"spell": "anxi",
|
|
"name": "安溪"
|
|
}, {
|
|
"id": 344,
|
|
"spell": "anyi",
|
|
"name": "安义"
|
|
}, {
|
|
"id": 345,
|
|
"spell": "anyuan",
|
|
"name": "安远"
|
|
}],
|
|
"B": [{
|
|
"id": 1,
|
|
"spell": "beijing",
|
|
"name": "北京"
|
|
}, {
|
|
"id": 66,
|
|
"spell": "baicheng",
|
|
"name": "白城"
|
|
}, {
|
|
"id": 67,
|
|
"spell": "baise",
|
|
"name": "百色"
|
|
}, {
|
|
"id": 68,
|
|
"spell": "baishan",
|
|
"name": "白山"
|
|
}]
|
|
........
|
|
}
|
|
|
|
}
|
|
},
|
|
methods : {
|
|
paramClick (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
```
|
|
|
|
#### 使用示例 (phone-search.vue)
|
|
|
|
```
|
|
<template>
|
|
<view>
|
|
<phone-search-list :phones="phones" @paramClick="paramClick"></phone-search-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import phoneSearchList from '@/components/phone-directory/phone-search-list.vue'
|
|
|
|
export default {
|
|
name:"phone-search",
|
|
components:{
|
|
phoneSearchList
|
|
},
|
|
data() {
|
|
return {
|
|
phones:null,
|
|
}
|
|
},
|
|
onLoad (option) {
|
|
this.phones = JSON.parse(unescape(option.phones))
|
|
},
|
|
methods:{
|
|
paramClick (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
|
|
```
|
|
|
|
#### 引入
|
|
|
|
>把phone-directory目录拷贝至项目components
|
|
|
|
>把pages下的phones目录拷贝至项目pages目录下
|
|
|
|
>在项目pages.json文件写入
|
|
|
|
(```)
|
|
{
|
|
"path" : "pages/phones/phones",
|
|
"style" : {
|
|
"navigationBarTitleText" : "通讯录",
|
|
"app-plus":{
|
|
"bounce":"none",
|
|
"scrollIndicator":"none"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"path" : "pages/phones/phone-search",
|
|
"style" : {
|
|
"navigationBarTitleText" : "搜索联系人"
|
|
}
|
|
}
|
|
(```)
|
|
|
|
### 组件参数说明
|
|
|
|
属性名|类型|是否必填|说明
|
|
--|:--:|--:
|
|
phones|Object|是|接口数据
|
|
paramClick|Object|是|当点击时返回对应参数
|
|
|
|
>文件名 参数 也可自己定义 搜索框内容可在phone-directory.vue 和phone-search-list.vue 文件修改 |