前端开发之弹出框系列教程八:自定义按钮栏

自定义按钮栏
$k.confirm({
      content:'自定义按钮',
      buttons:[
            {text:'按钮一',onClick:function(args){
                   $k.alert({content:'onClick事件:您点击了“按钮一”'});
            }},
            {text:'按钮二',onClick:function(args){
                   $k.alert({content:'onClick事件:您点击了“按钮二”'});
            },close:'first'}, //close:'first':先触发onClick事件,再触发onClosed事件.
            {text:'按钮三',onClick:function(args){
                   $k.alert({content:'onClick事件:您点击了“按钮三”'});
            }},
            {text:'按钮四',onClick:function(args){
                   $k.alert({content:'onClick事件:您点击了“按钮四”'});
            }}
       ],
      onClosed:function(args){
          if (args.closeTrigger == 'btn-0') {
              $k.alert({content:'onClosed事件:您点击了“按钮一”'});
          }
          else if(args.closeTrigger == 'btn-1'){
              $k.alert({content:'onClosed事件:您点击了“按钮二”'});
          }
          else if(args.closeTrigger == 'btn-2'){
              $k.alert({content:'onClosed事件:您点击了“按钮三”'});
          }
          else if(args.closeTrigger == 'btn-3'){
              $k.alert({content:'onClosed事件:您点击了“按钮四”'});
          }
      }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js的自定义指令可以让我们在模板中直接使用自定义的指令,从而实现一些特殊的功能或交互效果。自定义指令是Vue.js提供的一种扩展机制,它允许我们在编写Vue.js应用程序时自定义DOM元素的行为。 自定义指令主要由两部分组成:指令定义和指令钩子函数。 指令定义是一个包含指令名称、绑定值、修饰符等属性的对象,用来描述指令的属性和行为。指令钩子函数是指在绑定元素插入到DOM中、更新DOM时、解绑元素等特定时刻执行的函数,用来实现指令的具体功能。 下面是一个简单的自定义指令示例,用来实现点击外部区域隐藏弹窗的功能: ```javascript Vue.directive('click-outside', { bind: function(el, binding, vnode) { el.clickOutsideEvent = function(event) { if (!(el == event.target || el.contains(event.target))) { vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind: function(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } }); ``` 在上面的例子中,我们通过`Vue.directive`方法注册了一个名为`click-outside`的自定义指令,该指令的功能是在点击指定元素外的区域时隐藏元素。 在指令的`bind`钩子函数中,我们绑定了一个事件监听器,用来监听`document.body`的点击事件。在事件处理函数中,我们判断点击的目标是否是指定元素或指定元素的子元素,如果不是,则调用指令绑定的方法,执行隐藏元素的操作。 在指令的`unbind`钩子函数中,我们移除了绑定的事件监听器,以避免内存泄漏。 使用自定义指令时,我们可以在模板中通过`v-指令名`的方式来调用指令,如下所示: ```html <div v-click-outside="hidePopup"></div> ``` 在上面的例子中,我们将`click-outside`指令绑定到一个`<div>`元素上,并指定了一个名为`hidePopup`的方法,用来隐藏弹窗。当用户点击该元素外的区域时,指令会自动触发绑定的方法,从而实现弹窗的隐藏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值