Vue.js

Vue-Lazyload

Github 上有超过 5000 个 Star 的包。 Hilongjw 的 Vue-Lazyload 可让您无延迟地懒惰加载图片！

示例代码

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

代码

Github

示例

Demo

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>

代码

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>

演示

Demo

仓库

Github

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>

演示

Demo

仓库

Github

V-Clipboard

这是一个可以用来将元素中的值复制到用户的剪贴板上，而无需实现大量的逻辑的扩展包。

示例代码

/*当包含 v-clipboard 指令的元素被点击时，valueToCopy 的值将被复制到剪贴板中。 */
<template>
  <button v-clipboard='valueToCopy'>Copy to clipboard</button>
</template>

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

仓库

Github

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>

演示

Demo

仓库

Github

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>

代码已被折叠，点此展开

仓库

Github

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>

演示

Demo

仓库

Github

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>

演示

Demo

仓库

Github

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>

仓库

Github