• 这15个Vue指令,让你的项目开发爽到爆


    1. V-Hotkey

    仓库地址: github.com/Dafrok/v-ho… 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

    仓库地址: github.com/ndelvalle/v… Demo: codesandbox.io/s/zx7mx8y1o… 安装: npm install --save v-click-outside

    你想要点击外部区域关掉某个组件吗?用这个指令可以轻松实现。这是我每个项目必用的指令之一,尤其在弹框和下拉菜单组件里非常好用。

    <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>
    

    说明: 你也可以通过双击外部区域来触发,具体用法请参考文档。

    3. V-Clipboard

    仓库地址: github.com/euvl/v-clip… 安装: npm install --save v-clipboard

    这个简单指令的作者是Yev Vlasenko ,可以用在任何静态或动态元素上。当元素被点击时,指令的值会被复制到剪贴板上。用户需要复制代码片段的时候,这个非常有用。

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

    4. vue-ScrollTo

    仓库地址: github.com/rigor789/vu… Demo: vue-scrollto.netlify.com/ 安装: npm install --save vue-scrollto

    这个指令监听元素的点击事件,然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。

    <span v-scroll-to="{
      el: '#element',          // 滚动的目标位置元素
      container: '#container', // 可滚动的容器元素
      duration: 500,           // 滚动动效持续时长(毫秒)
      easing: 'linear'         // 动画曲线
      }"
    >
      Scroll to #element by clicking here
    </span>
    

    说明: 也可以通过代码动态设置,具体看文档。

    5. Vue-Lazyload

    仓库地址: github.com/hilongjw/vu… Demo: hilongjw.github.io/vue-lazyloa… 安装: 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 几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip,并可控制显示位置、触发方式和监听事件。

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

    说明: 还有一个比较流行的tooltip插件vue-directive-tooltip.

    7. V-Scroll-Lock

    仓库地址: github.com/phegman/v-s… Demo: v-scroll-lock.peterhegman.com/ 安装: npm install --save v-scroll-lock

    基于 body-scroll-lock 开发,这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

    <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

    仓库地址: github.com/vuejs-tips/… Demo: vuejs-tips.github.io/v-money/ 安装: npm install --save v-money 如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是它!一行代码搞定这些需求:

    <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

    仓库地址: github.com/ElemeFE/vue… 安装: npm install --save vue-infinite-scroll

    无限滚动指令,当滚动到页面底部时会触发绑定的方法。

    <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实现的。

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

     

    11. Vue-InputMask

    仓库地址: vue-inputmask 安装: npm install --save vue-inputmask 当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask library 开发。

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

    佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

    12. Vue-Ripple-Directive

    仓库地址: vue-ripple-directive 安装: npm install --save vue-ripple-directive

    Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。

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

     

    13. Vue-Focus

    仓库地址: vue-focus 安装: npm install --save vue-focus 有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。

    <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 假设你的页面在访客没有注册的时候,有些部分需要加上半透明遮罩。用这个指令可以轻松实现,还可以自定义透明度和过渡效果。

    <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 开发 app 的时候,偶尔会需要使用假文本数据,或者特定尺寸的占位图片。用这个指令可以轻松实现。

    <template>
      <!-- the content inside will have 150 words -->
      <p v-dummy="150"></p>
    
      <!-- Display a placeholder image of 400x300-->
      <img v-dummy="'400x300'" />
    </template>
  • 相关阅读:
    今日进度
    今日进度
    今日进度
    今日进度
    pandas连接MySQL和impala
    sql语句获取今天、昨天、近7天、本周、上周、本月、上月、半年数据
    Python报错 ValueError: arrays must all be same length
    Python 连接 impala
    Test
    Selective Search for Object Recognition
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13831079.html
Copyright © 2020-2023  润新知