新增组件：增加链接选择器
github地址：https://github.com/benhailong/openants-for-vue
喜欢记得给个Star
![]()
组件支持功能：
1、支持自定义弹窗标题
2、按钮支持Element自定义主题
3、支持普通选择器（如上面图）、支持表格样式、支持电话号码
4、组件内嵌axios，支持分页查询、支持模糊搜索、支持自定义接口请求参数
5、支持2级分类选择
6、支持备注说明
使用说明：
详细使用文档：http://docs.unpor.com/docs/openants_for_vue/openants_for_vue-1cau9qc39b0bd
<AntUrlDialog :dialog-visible="showDialog" @dialog-cancel="showDialog = false" @antClick="antClick" :ant-data="urlData" atitle="弹窗标题"></AntUrlDialog><div class="itu-box-url-box" @click="showDialog = true">点击显示弹窗</div>// DATA设置data(){ return { showDialog: false, // 控制弹窗是否显示 urlData:[] }}
参数说明:
| 参数 |
类型 |
说明 |
| dialog-visible |
Boolean |
默认false |
| atitle |
String |
弹窗的标题 |
| ant-data |
Array |
传入的数组，也是弹窗的内容 |
关于ant-data数据说明：
下面我们先给大家来一个简单的数据`Demo`，基本包含所有数据了
[ { level: 2, // 存在2级的列表 title: "商城页面", childList: [ { title: "商城链接", type: "url", // 类型 info: "注：app暂不支持的链接，在App端点击时，不跳转页面", childList: [ { title: "商城首页", url: "home/home" }, { title: "分类", url: "home/list" } ] } ] }, { level: 1, // 1级列表说明 type: "url", // 类型 title: "商城页面", info: "注：app暂不支持的链接，在App端点击时，不跳转页面", childList: [ { title: "商城首页", url: "home/home" }, { title: "分类", url: "home/list" } ] }, { level: 1, // 级别，1代表只有一级分类，2代表有2级分类 title: "商品", type: "list", // 类型 Url：普通链接显示按钮类型，list：显示列表类型，call：拨打电话（childList为空）， info: "注：这里是商品的连接测试", search: { url: "https://private-dev.heikeit.com/addons/up_vipcard/inc/web/public/index.php?s=/Apitest/getall", // 搜索链接，系统会自己通过发送POST请求，POST请求会添加parame中的参数，同时系统自动会添加几个参数，search：搜索关键词，可能为空，pageSize：每页显示条数15条，currentPage：当前页面 parame: { token: "123456" } } }, { level: 1, // 级别，1代表只有一级分类，2代表有2级分类 title: "拨打电话", type: "call", // 类型 Url：普通链接显示按钮类型，list：显示列表类型，call：拨打电话（childList为空）， info: "添加电话号码链接" }, { level: 1, // 级别，1代表只有一级分类，2代表有2级分类 title: "拨打电话", type: "call" // 类型 Url：普通链接显示按钮类型，list：显示列表类型，call：拨打电话（childList为空）， }],
具体字段说明上面的数据中写的非常详细，不在表格罗列，不会的可以复制到项目中，按照格式简单修改一下就可以了，下面我们来简单说说`type=list`的情况，我们在组件中已经集成了`axios`请求，你只要在
`type=list`的时候传入对应的接口请求的参数即可
注意：接口需要自己处理跨域问题，组件中使用的是POST请求
页面样式：
![]()
普通按钮组
![]()
列表选择器
![]()
电话号码选择器
