上图

支持版本

>=0.1.9

说明

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

起步

在需要引用的地方直接引用组件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

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

参数 说明 类型
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时存在
文档更新时间: 2020-08-17 16:50   作者:admin