10 个 Vue 指令让您的开发生活更轻松！

介绍

Vue.js 最棒的特性之一是它内置了与原生 AngularJS 类似的指令（这也是人们认为 Vue 就是 Angular 应该的样子的原因之一……）。这些指令让前端开发者的工作更加轻松，更棒的是，开发者可以编写自己的自定义指令。所以，在这篇文章中，我将向你展示由优秀的 Vue 社区创建的 10 个酷炫指令，你可以立即在你的项目中使用它们，节省你的时间和精力，并将你的 Vue 开发提升到一个新的水平。

Vue-Lazyload

一款非常棒的软件包，在 Github 上拥有超过 5000 颗星。Hilongjw 开发的 Vue-Lazyload 让你可以轻松实现图片的延迟加载！

示例代码

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

存储库

Github

演示

Vue-无限滚动

如果您想在访客到达网页底部时加载新元素，这是一个非常棒且易于实现的指令。
绑定到 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>

存储库

Github

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>

演示

存储库

Github

Vue-Blur

如果您想为未注册的访客模糊网站的某些部分，Vue-Blur 是一个不错的选择。它还提供了自定义参数的选项，例如不透明度、滤镜和状态转换。

示例代码

<template>
  /* Use this with a boolean value (true/false) */
  <div v-blur="isBlurred"></div>

  /* Use this with an object that uses values from the config */
  <div v-blur="blurConfig"></div>
</template>

<script>
  export default {
      data () {
        return {
          isBlurred: true, // activate and deactivate based on a boolean value

          blurConfig: {
            isBlurred: false, // activate and deactivate based on a boolean value and also provide a config
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

演示

存储库

Github

V-剪贴板

这是一个智能的小包，您可以使用它将值从元素复制到用户的剪贴板，而无需实现大量逻辑。

示例代码

/* When an element that contains the v-clipboard directive is clicked, the value of valueToCopy will be copied into clipboard. */
<template>
  <button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>

<script>
export default {
  data() {
    return {
      valueToCopy: "Some Text"
    }
  }
};
</script>

存储库

Github

Vue-ScrollTo

滚动元素从未如此简单！您可以监听元素上的点击事件，并让浏览器滚动到指定的标签，这对于 Web 应用程序内部的导航非常有用！

示例代码

<template>
  <button v-scroll-to="'#element'">Scroll to #element as the target</button>

  <h1 id='element'>This will be the scrolling target</h1>
</template>

演示

存储库

Github

V-热键

Dafrok 制作的这个酷炫自定义指令，让你可以轻松地将热键绑定到组件。想要通过按键隐藏或显示组件吗？没有比这更简单的了！

示例代码

<template>
  <div v-hotkey="keymap" v-show="show">
    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!{' '}
  </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>

存储库

Github

V-Click-外部

这是一个很棒的指令，它可以在不停止事件传播的情况下响应元素上的点击事件。这对于关闭对话框、菜单等非常有用。

示例代码

<template>
  <div v-show="show" v-click-outside="onClickOutside">
    Hide the element if a click event outside is triggered
  </div>
</template>

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

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

演示

存储库

Github

垂直滚动锁定

此智能指令可帮助您在模态框/灯箱/弹出窗口等打开时阻止网站滚动。这在处理多设备时尤其有用！

示例代码

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

<script>
export default {
  name: 'Modal',
  data () {
    return {
      open: false
    }
  },
  methods: {
    openModal () {
      this.open = true
    },
    closeModal () {
      this.open = false
    }
  }
}
</script>

演示

存储库

Github

V-工具提示

Akryum 的这个酷炫包提供了很棒的工具提示指令。只需将一些文本绑定到 v-tooltip 即可。

示例代码


<template>
  <div>
    <p>
      <input v-model="message" placeholder="Message">
    </p>
    <p>
      <span v-tooltip="message">{{ message }}</span>
    </p>
  </div>
</template>

存储库

Github

结论

在本文中，我整理了 10 个自定义 Vue 指令，您可以将其应用于现有项目或未来的项目中，或者只是简单尝试一下。关键在于，得益于自定义指令和优秀的社区，使用 Vue.js 时您无需每次都重新发明轮子。如果您还有其他指令想要推荐给其他人，请留言。也别忘了关注我，我会持续更新更多文章！

文章来源：https://dev.to/simonholdorf/10-vue-directives-that-make-your-dev-lives-easier-5dm7