重新封装了layer.tips,自定义跟随弹窗

Posted yu-du-chen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重新封装了layer.tips,自定义跟随弹窗相关的知识,希望对你有一定的参考价值。


方法重新封装了 layer.tips 使用前,请仔细阅读此文本
* @Author: 羽渡尘
* @两种实现方法
* @需要引用jquery.js、layer.js、ydcTip.js
* @统一可传递的参数形式
let option = {
    /*加载您的自定义样式文件(注意*样式文件必须在layer/skin目录下)*/
    extend: ‘yourskin/yourskin.css‘,
    /*layer.tips参数 可见layer文档*/
    tips: [{
        tips: 3,
        tipsMore:false,
        skin:‘layer-ext-yourskin‘,
        time : 0
    }],
    /*提示内容*/
    title : ‘确定要删除吗?‘,
    /*可以传递任意参数形式 以原形式携带*/
    obj : [obj],
    /*自定义按钮及触发方式 可携带参数,为了方便您的DIY,按钮都为span标签*/
    btn:[{
        /*按钮名称 :["方法名称","触发器","唯一标识类似于id通过ydc-sign获取","{传递参数}"]
        方法会自带一个取消按钮,如果不满足需求请自定义方法名称带有close的按钮,将会替换默认取消按钮*/
        ‘确定‘:[‘delInit‘,‘click‘,‘sign_id1‘,‘{"id":"id","meetType":"meetType"}‘],
        ‘取消‘:[‘l_close‘,"click",‘sign_id2‘,‘{"id":"id","meetType":"meetType"}‘]
    }]
};

第一种 使用示例 ---------------------------------------------------
你可以在单独的按钮上配置
<a href="javascript:void(0)"
class="btn-ydc-tips font-blue"
data-ydctips=‘{"btn":[{"确定":["delInit","click","sign_id1",{"id":"id","meetType":"meetType"}]}]}‘>Example</a>
必要的class名:btn-ydc-tips
必要的传参:data-ydctips

第二种 使用示例 ---------------------------------------------------
<a href="javascript:void(0)" onclick="example(this,‘参数‘)">Example</a>
function example(obj,参数) {
        let option = {
            title : ‘确定要删除吗?‘,
            btn:[{
                ‘确定‘:[‘delInit‘,‘click‘,‘sign_id1‘,‘{"id":"id"}‘]
            }],
            ..........
        };
        ydcLayFun.customize(option,obj);
}

* @关于配置的按钮回调
function delInit(val,obj) {
    val = {
        btn_this: object //自动携带当前触发元素
        id: "id"
        meetType: "meetType"
    }
    obj 为你传递的任意参数形式 以原形式携带
}


* @关于自定义样式文件 ---------------------------------------------
layer提供了强健的皮肤扩展接口,这意味着如果你对layer默认的样式不太满意,你还有更多的选择。
第一步:存放
将您下载的皮肤包(假设文件夹名为:myskin)解压。
如果是独立版的layer,则将myskin存放在skin目录下
如果是layui中使用layer,则将myskin存放在css/modules/layer目录下
第二步:使用
1. 全局配置
layer.config({
  extend: ‘myskin/style.css‘, //加载新皮肤
  skin: ‘layer-ext-myskin‘ //一旦设定,所有弹层风格都采用此主题。
});
2. 局部使用
layer.config({
  extend: ‘myskin/style.css‘ //同样需要加载新皮肤
});
//单个使用
layer.open({
  skin: ‘layer-ext-myskin‘ //只对该层采用myskin皮肤
});
//也就是说,无论你全局还是局部,都要通过layer.config的extend来加载样式。

以上是关于重新封装了layer.tips,自定义跟随弹窗的主要内容,如果未能解决你的问题,请参考以下文章

OpenHarmony——ets自定义弹窗UI组件封装

小程序开发—— 封装自定义弹窗组件

form表单右边弹窗提示不能为空

封装弹窗/抽屉,使用hook函数形式减少template内部代码

Flutter 自定义弹窗组件

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式