先上图

支持版本

>=0.1.9

GitHub地址

github.com/benhailong/…

说明

支持自定义弹窗标题，按钮使用Element默认样式，会跟随自定义Element主题变化而变化

快速开始

快速开始

OpenAnts组件是基于Element开发，所以在你安装安装OpenAnts我们将自动帮你安装ElementUI，而无需你自己安装，我们建议elementUI全局引入！

全局使用OpenAnts

main.js中的配置

import Vue from 'vue';
import ElementUI from 'element-ui';   // 需要引入 element-ui
import 'element-ui/lib/theme-chalk/index.css';  // 需要引入 element-ui 的主题文件
import OpenAnts from 'openants';   // 需要引入 OpenAnts
import "openants/lib/openants.css";   // 需要引入 OpenAnts 的 css文件
import App from './App.vue';

Vue.use(ElementUI);  // 将 ElementUI 组件注册到VUE
Vue.use(OpenAnts);  // 将 ElementUI OpenAnts

new Vue({
  el: '#app',
  render: h => h(App)
});

按需使用OpenAnts

main.js中的配置

import Vue from 'vue';
import ElementUI from 'element-ui';   // 需要引入 element-ui
import 'element-ui/lib/theme-chalk/index.css';  // 需要引入 element-ui 的主题文件
import {btn,xxx} from 'openants';   // 需要引入 OpenAnts
import "openants/lib/openants.css";   // 需要引入 OpenAnts 的 css文件
import App from './App.vue';

Vue.use(ElementUI);  // 将 ElementUI 组件注册到VUE
Vue.component(btn.name, btn);
Vue.component(xxx.name, xxx);
/* 或写为
 * Vue.use(btn)
 * Vue.use(xxx)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

在需要引用的地方直接引用组件AntUrlDialog

<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请求

参数	说明	类型
type	类型，这里需要等于list	String
search	接口参数	String
>>-url	接口的URL地址	String
>>-parame	接口需要额外传入的参数，可以为空，主要用于您在接口中的验证	object

这里注意了，在发送请求的时候，除了您设置的parame，OpenAnts会在接口中额外给您的接口传入三个参数，参数说明如下：

参数	说明	类型
search	搜索关键词	String
pageSize	每页显示条数，默认都是15	Number
currentPage	当前页	Number

是的，你没有看错，我们是支持分页查询的

你的接口返回值需要严格按照下面的方式返回

参数	说明	类型
code	状态码，必须是0，否则组件默认接口请求不成功	Number
date	数据	Object
>>-list	列表	Array
>>>>-aname	链接名称，参数名不能修改	String
>>>>-aurl	链接地址，参数名不能修改	String
>>>>-...	其他参数可以自己按需返回	String
>>-total	列表总条数用于分页	Number

方法

参数	说明
@dialog-cancel	点击弹窗右上角的关闭时候出发，必须是修改绑定的参数@dialog-cancel="showDialog = false"这里的showDialog可以自己定义
@antClick	点击了确认之后没，出发事件

@antClick 返回值说明

antClick(e) {
	console.log("弹窗返回值：", e);
}

返回值是一个json

参数	说明	类型	区别
type	类型，list、url、call	String	一定存在
data	返回参数	Object	一定存在
>>-title	链接标题	String	type=url时存在
>>-url	链接地址	String	type=url时存在
>>-aname	链接标题	String	type=list时存在
>>-aurl	链接地址	String	type=list时存在
>>-phone	返回的手机号码	String	type=call时存在