OpenAnts_for_vue 0.1.9 发布,好用又好看的链接选择器
新增组件:增加链接选择器
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请求
页面样式:
普通按钮组
列表选择器
电话号码选择器



