好用的vue自定義指令

1. V-Hotkey

倉庫地址: https://github.com/Dafrok/v-hotkey
Demo: 戳這里 https://dafrok.github.io/v-hotkey
安裝: npm install --save v-hotkey
這個指令可以給組件綁定一個或多個快捷鍵宁改。你想要通過按下 Escape 鍵后隱藏某個組件,按住 Control 和回車鍵再顯示它嗎魂莫?小菜一碟:

<template>
  <div
    v-show="show"
    v-hotkey="{
      'esc': onClose,
      'ctrl+enter': onShow
    }"
  >
      Press `esc` to close me!
  </div>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    },

    methods: {
        onClose() {
            this.show = false
        },

        onShow() {
            this.show = true
        },
    }
}
</script>

2. V-Click-Outside

倉庫地址: https://github.com/ndelvalle/v-click-outside
Demo: https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue
安裝: npm install --save v-click-outside

你想要點(diǎn)擊外部區(qū)域關(guān)掉某個組件嗎透且?用這個指令可以輕松實(shí)現(xiàn)。這是我每個項(xiàng)目必用的指令之一豁鲤,尤其在彈框和下拉菜單組件里非常好用秽誊。

<template>
  <div
    v-show="show"
    v-click-outside="onClickOutside"
  >
    Hide me when a click outside this element happens
  </div>
</template>      

HTML

<script>
export default {
  data() {
    return {
      show: true
    };
  },

  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};
</script>

說明: 你也可以通過雙擊外部區(qū)域來觸發(fā),具體用法請參考文檔琳骡。

3. V-Clipboard

倉庫地址: https://github.com/euvl/v-clipboard
安裝: npm install --save v-clipboard

這個簡單指令的作者是Yev Vlasenko 锅论,可以用在任何靜態(tài)或動態(tài)元素上。當(dāng)元素被點(diǎn)擊時楣号,指令的值會被復(fù)制到剪貼板上最易。用戶需要復(fù)制代碼片段的時候,這個非常有用炫狱。

<button v-clipboard="value">
  Copy to clipboard
</button>

HTML

4. Vue-ScrollTo

倉庫地址: https://github.com/rigor789/vue-scrollTo
Demo: https://vue-scrollto.netlify.com/
安裝: npm install --save vue-scrollto

這個指令監(jiān)聽元素的點(diǎn)擊事件藻懒,然后滾動到指定位置。我通常用來處理文章目錄跳轉(zhuǎn)和導(dǎo)航跳轉(zhuǎn)视译。

<span v-scroll-to="{
  el: '#element',          // 滾動的目標(biāo)位置元素
  container: '#container', // 可滾動的容器元素
  duration: 500,           // 滾動動效持續(xù)時長(毫秒)
  easing: 'linear'         // 動畫曲線
  }"
>
  Scroll to #element by clicking here
</span>

說明: 也可以通過代碼動態(tài)設(shè)置嬉荆,具體看文檔。

5. Vue-Lazyload

倉庫地址: https://github.com/hilongjw/vue-lazyload
Demo: http://hilongjw.github.io/vue-lazyload/
安裝: npm install --save vue-lazyload
圖片懶加載酷含,非常方便鄙早。

<img v-lazy="https://www.domain.com/image.jpg">

6. V-Tooltip

倉庫地址: v-tooltip
Demo: available here
安裝: npm install --save v-tooltip
幾乎每個項(xiàng)目都會用到 tooltip。這個指令可以給元素添加響應(yīng)式的tooltip椅亚,并可控制顯示位置限番、觸發(fā)方式和監(jiān)聽事件。

<button v-tooltip="'You have ' + count + ' new messages.'">

說明: 還有一個比較流行的tooltip插件vue-directive-tooltip.

7. V-Scroll-Lock

倉庫地址: https://github.com/phegman/v-scroll-lock
Demo: https://v-scroll-lock.peterhegman.com/
安裝: npm install --save v-scroll-lock

基于 body-scroll-lock 開發(fā)呀舔,這個指令的作用是在打開模態(tài)浮層的時候防止下層的元素滾動弥虐。

<template>
  <div class="modal" v-if="opened">
    <button @click="onCloseModal">X</button>
    <div class="modal-content" v-scroll-lock="opened">
      <p>A bunch of scrollable modal content</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      opened: false
    }
  },
  methods: {
    onOpenModal () {
      this.opened = true
    },

    onCloseModal () {
      this.opened = false
    }
  }
}
</script>

8. V-Money

倉庫地址: https://github.com/vuejs-tips/v-money
Demo: https://vuejs-tips.github.io/v-money/
安裝: npm install --save v-money
如果你需要在輸入框里加上貨幣前綴或后綴、保留小數(shù)點(diǎn)位數(shù)或者設(shè)置小數(shù)點(diǎn)符號——不用找了媚赖,就是它霜瘪!一行代碼搞定這些需求:

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
      }
    }
  }
}
</script>

9. Vue-Infinite-Scroll

倉庫地址: https://github.com/ElemeFE/vue-infinite-scroll
安裝: npm install --save vue-infinite-scroll

無限滾動指令,當(dāng)滾動到頁面底部時會觸發(fā)綁定的方法省古。

<template>
  <!-- ... -->
  <div
    v-infinite-scroll="onLoadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  ></div>
<template>
<script>
export default {
  data() {
    return {
      data [],
      busy: false,
      count: 0
    }
  },

  methods: {
    onLoadMore() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: this.count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

10. Vue-Clampy

倉庫地址: vue-clampy.
安裝: npm install --save @clampy-js/vue-clampy

這個指令會截斷元素里的文本粥庄,并在末尾加上省略號。它是用clampy.js實(shí)現(xiàn)的豺妓。

  <p v-clampy="3">Long text to clamp here</p>
  <!-- displays: Long text to...-->

11. Vue-InputMask

倉庫地址: vue-inputmask
安裝: npm install --save vue-inputmask
當(dāng)你需要在輸入框里格式化日期時惜互,這個指令會自動生成格式化文本布讹。基于Inputmask library 開發(fā)训堆。

<input type="text" v-mask="'99/99/9999'" />

HTML

12. Vue-Ripple-Directive

倉庫地址: vue-ripple-directive
安裝: npm install --save vue-ripple-directive

Aduardo Marcos 寫的這個指令可以給點(diǎn)擊的元素添加波紋動效描验。

<div v-ripple class="button is-primary">This is a button</div>

13. Vue-Focus

倉庫地址: vue-focus
安裝: npm install --save vue-focus
有時候,用戶在界面里操作坑鱼,需要讓某個輸入框獲得焦點(diǎn)膘流。這個指令就是干這個的。

<template>
  <button @click="focused = true">Focus the input</button>

  <input type="text" v-focus="focused">
</template>
<script>
export default {
  data: function() {
    return {
      focused: false,
    };
  },
};
</script>

14. V-Blur

倉庫地址: v-blur
Demo: 戳這里
安裝: npm install --save v-blur
假設(shè)你的頁面在訪客沒有注冊的時候鲁沥,有些部分需要加上半透明遮罩呼股。用這個指令可以輕松實(shí)現(xiàn),還可以自定義透明度和過渡效果画恰。

<template>
  <button
    @click="blurConfig.isBlurred = !blurConfig.isBlurred"
  >Toggle the content visibility</button>

  <p v-blur="blurConfig">Blurred content</p>
</template>

<script>
  export default {
      data () {
        return
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

15. Vue-Dummy

倉庫地址: vue-dummy
Demo: available here
安裝: npm install --save vue-dummy
開發(fā) app 的時候彭谁,偶爾會需要使用假文本數(shù)據(jù),或者特定尺寸的占位圖片允扇。用這個指令可以輕松實(shí)現(xiàn)缠局。

<template>
  <!-- the content inside will have 150 words -->
  <p v-dummy="150"></p>

  <!-- Display a placeholder image of 400x300-->
  <img v-dummy="'400x300'" />
</template>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市考润,隨后出現(xiàn)的幾起案子狭园,更是在濱河造成了極大的恐慌,老刑警劉巖糊治,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件唱矛,死亡現(xiàn)場離奇詭異,居然都是意外死亡俊戳,警方通過查閱死者的電腦和手機(jī)揖赴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抑胎,“玉大人,你說我怎么就攤上這事渐北“⑻樱” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵赃蛛,是天一觀的道長恃锉。 經(jīng)常有香客問我,道長呕臂,這世上最難降的妖魔是什么破托? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮歧蒋,結(jié)果婚禮上土砂,老公的妹妹穿的比我還像新娘州既。我一直安慰自己,他們只是感情好萝映,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布吴叶。 她就那樣靜靜地躺著,像睡著了一般序臂。 火紅的嫁衣襯著肌膚如雪蚌卤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天奥秆,我揣著相機(jī)與錄音逊彭,去河邊找鬼。 笑死构订,一個胖子當(dāng)著我的面吹牛诫龙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鲫咽,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼签赃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了分尸?” 一聲冷哼從身側(cè)響起锦聊,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎箩绍,沒想到半個月后孔庭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡材蛛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年圆到,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卑吭。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡芽淡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出豆赏,到底是詐尸還是另有隱情挣菲,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布掷邦,位于F島的核電站白胀,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏抚岗。R本人自食惡果不足惜或杠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望宣蔚。 院中可真熱鬧向抢,春花似錦认境、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至兄猩,卻和暖如春茉盏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背枢冤。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工鸠姨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人淹真。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓讶迁,卻偏偏與公主長得像,于是被迫代替她去往敵國和親核蘸。 傳聞我的和親對象是個殘疾皇子巍糯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 33、JS中的本地存儲 把一些信息存儲在當(dāng)前瀏覽器指定域下的某一個地方(存儲到物理硬盤中)1客扎、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,071評論 0 2
  • Vue-Music 一| 前期工作 1.項(xiàng)目初始化 npm install -g vue-cli vue init...
    noobakong閱讀 1,820評論 0 5
  • 第一節(jié) vue:讀音: v-u-eview vue和angular區(qū)別?vue——簡單祟峦、易學(xué)指令以 v-xxx一片...
    黑色的五葉草閱讀 1,116評論 0 1
  • Vue在Windows系統(tǒng)下本地項(xiàng)目的安裝與部署 轉(zhuǎn)自CSDN的:AI呂小布:https://blog.csdn....
    羅海桂閱讀 7,098評論 0 0
  • 這夜深人靜的時候,最好的日子徙鱼,可能有這種偷閑的時刻還是半年以前宅楞,現(xiàn)在越來越能理解到那些言不由衷的話,我甚至開始擔(dān)心...
    不執(zhí)著_868a閱讀 110評論 0 0