@xunlei/vue-clickout

    1.0.2 • Public • Published

    @xunlei/vue-clickout

    Vue clickout,轻松解决“点击空白处消失”这种问题

    在线Demo

    https://xunleif2e.github.io/vue-clickout/demo/dist/index.html

    Installation

    npm i @xunlei/vue-clickout -S
    

    注册指令

    clickout事件是通过指令的方式实现的,因此使用前需注册指令,可以全局注册也可以局部注册。

    全局注册

    import Vue from 'vue'
    import VueClickout from '@xunlei/vue-clickout'
     
    Vue.use(VueClickout)

    局部注册

    <template>
      <div class="face" v-clickout @clickout="open=false">
        <a href="javascript:;" @click="open=!open">表情</a>
        <div class="emoji">
           <li title="开心"><span class="ico-emoji emoji-kaixin"></span></li>
           <li title="可爱"><span class="ico-emoji emoji-keai"></span></li>
        </div>
      </div>
    </template>
    <script>
    import { clickout } from '@xunlei/vue-clickout'
     
    export default {
      data () {
        return {
           open: false
        }
      },
      // 注册指令
      directives: {
        clickout
      }
    }
    </script> 

    用法

    <template>
      <div class="item-comment">
        <div class="comment-user">
          <span class="user-name">疯狂的迷弟: </span>
          <p class="text-comment">王祖贤越看越美</p>
          <a href="javascript:;" class="reply-btn" @click="showReply=!showReply" ref="replyBtnRef">回复</a>
        </div>
        <div class="reply"  v-clickout="['replyBtnRef']" @clickout="showReply=false">
          <div class="reply-area" v-show="showReply">
            <input type="text" class="ipt-reply">
            <div class="reply-option">
              <button>发送</button>
            </div>
          </div>
        </div>
      </div>
    </template>
     
    <script>
    export default {
      data () {
        return {
          showReply: false
        }
      }
    }
    </script> 

    参数

    参数 说明 类型
    exceptRefs 要排除的Ref,默认为指令所在的DOM Array

    开发命令

    # install deps
    npm install
     
    # serve demo at localhost:8080
    npm run dev
     
    # build library and demo
    npm run build
     
    # build library
    npm run build:library
     
    # build demo
    npm run build:demo
     
    # pre publish
    npm run prepublish

    License

    MIT

    Copyright (c) 2018 greenfavo

    Install

    npm i @xunlei/vue-clickout

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    10.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • bbsun
    • binggg
    • greenfavo
    • jqroom
    • luojianet
    • realgeoffrey
    • xunleif2e