十个必备的 Vue 指令（组件）
Vue-Lazyload
Github 上有超过 5000 个 Star 的包。 Hilongjw 的 Vue-Lazyload 可让您无延迟地懒惰加载图片！
示例代码
<template>
<img v-lazy="https://www.example.com/example-image.jpg">
</template>
代码
示例
Vue-Infinite-Scroll
如果您想实现在访问者到达底部时加载新元素（类似于自动加载下一页），这是一个很棒且易于实现的指令。
当页面底部到达视区时，将执行绑定到 v-Infinite-Scroll 的方法。
示例代码
<template>
/* your website code */
<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>
代码
Vue-Focus
有时在Web开发中，管理输入焦点是一件很棘手的事情。Vue-Focus 可以让你直接从视图模型中管理焦点。
示例代码
<template>
<button @click="focusedElement = true">Input gets Focus</button>
<input type="text" v-focus="focusedElement">
</template>
<script>
export default {
data: function() {
return {
focusedElement: false,
};
},
};
</script>
演示
仓库
Vue-Blur
如果你想模糊掉网站的某些部分，比如对未注册的用户模糊一些网站上的信息。那么 Vue-Blur 是一个很好的选择。它还支持自定义参数，如不透明度、过滤器和状态过渡。
示例代码
<template>
/* 直接使用布尔值开启/关闭模糊 (true/false) */
<div v-blur="isBlurred"></div>
/* 也可以使用对象来配置 */
<div v-blur="blurConfig"></div>
</template>
<script>
export default {
data () {
return {
isBlurred: true, // 直接使用布尔值开启/关闭
blurConfig: {
isBlurred: false, // 根据布尔值开启/关闭，并且使用其它配置
opacity: 0.3,
filter: 'blur(1.2px)',
transition: 'all .3s linear'
}
}
}
}
};
</script>
演示
仓库
V-Clipboard
这是一个可以用来将元素中的值复制到用户的剪贴板上，而无需实现大量的逻辑的扩展包。
示例代码
/*当包含 v-clipboard 指令的元素被点击时，valueToCopy 的值将被复制到剪贴板中。 */
<template>
<button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>
<script>
export default {
data() {
return {
valueToCopy: "Some Text"
}
}
};
</script>
仓库
Vue-ScrollTo
你可以监听元素上的点击事件，然后让浏览器滚动到指定的标签，这对于网站内部的导航来说是非常有用的!
示例代码
<template>
<button v-scroll-to="'#element'">Scroll to #element as the target</button>
<h1 id='element'>This will be the scrolling target</h1>
</template>
演示
仓库
V-Hotkey
这个由 Dafrok 制作的自定义指令可以让你轻松地将按键绑定到组件上。在键盘上按一个键就隐藏或显示组件？没有什么比这更简单了!
示例代码
<template>
<div v-hotkey="keymap" v-show="show">
按下 `ctrl + esc` 来触发， 按住 `enter` 来隐藏!{' '}
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
},
methods: {
toggle () {
this.show = !this.show
},
onShow () {
this.show = true
},
onHide () {
this.show = false
}
},
computed: {
keymap () {
return {
'ctrl+esc': this.toggle,
'enter': {
keydown: this.onHide,
keyup: this.onShow
}
}
}
}
}
</script>
仓库
V-Click-Outside
这是一个很棒的指令，可以点击外部区域关掉某个组件。这对于关闭对话框、菜单等都很有用。
Example Code
<template>
<div v-show="show" v-click-outside="onClickOutside">
如果你点击了该元素的外部, 则会触发 onClickOutside 方法
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
onClickOutside() {
this.show = false;
}
}
};
</script>
演示
仓库
V-Scroll-Lock
这个指令可以帮助你在打开模态框/lightbox等东西时防止网站滚动。
示例代码
<template>
<div class="modal" v-if="open">
<button @click="closeModal">X</button>
<div class="modal-content" v-scroll-lock="open">
<p>一大堆模态框内容</p>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
data () {
return {
open: false
}
},
methods: {
openModal () {
this.open = true
},
closeModal () {
this.open = false
}
}
}
</script>
演示
仓库
V-Tooltip
Akryum 的这个包为你提供了一个很棒的 tooltip 指令。只需将一些文本绑定到 v-tooltip 就可以了。
示例代码
<template>
<div>
<p>
<input v-model="message" placeholder="Message">
</p>
<p>
<span v-tooltip="message">{{ message }}</span>
</p>
</div>
</template>
仓库
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：