自定义指令directive

前言

公司技术栈围绕react为主,但是时间有限研究较少,本文以vue中自定义指令为切入点,详细介绍directive的作用和如何实现自定义指令。
vue自定义指令顾名思义,就是vue给我们提供的一个编写各种指令的入口。比如v-for,v-if ,v-show等,根据实际业务需求 时会用到自定义指令,一定程度上可以解决过滤器并承担部分组件功能的作用。
但是总体而言,由于指令需要操作dom,因此能用组件就不用指令。言归正传:
比如写一个v-focus,任何input或者textarea绑定该属性可直接获取焦点

自定义指令v-focus

   <body>
      <div id="app">
         <input type="text" v-focus >
      </div>
      <script>
         Vue.directive('focus',{
            inserted:function(el){
               el.focus()
            }
         })
         var app = new Vue({
            el:'#app'
         })

      </script>
   </body> 

上述directive相对简单,下面来看一下高级的自定义指令使用。比如当遇到下面场景时:秒杀活动中有许多个商品,其中每个商品都有着倒计时,要想实现页面上倒计时的实时更新,传统做法莫过于使用filter,里面绑定个计时器。而自定义指令则大大不同:
根据需要封装一个time.js

 var Time = {
   // 当前时间戳
   getUnix: function() {
      return new Date().getTime()
   },
   // 今天0点时间戳
   getTodayUnix: function() {
      var date = new Date()
      date.setHours(0);
      date.setMinutes(0);
      date.setMilliseconds(0);
      date.setMilliseconds(0);
      return date.getTime();
   },
   //获取今年1月1日零时时间戳
   getYeaderUnix: function() {
      var date = new Date()
      date.setMonth(0)
      date.setDate(1)
      date.setHours(0);
      date.setMinutes(0);
      date.setMilliseconds(0);
      date.setMilliseconds(0);
      return date.getTime();
   },
   //获取标准年月日
   getLastDate: function(time) {
      var date = new Date(time);
      var month = date.getMonth()+1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return date.getFullYear() + '-' + month + '-' + day;
   },
   // 开始转换
   getFormatTime: function(timestamp) {
      var now = this.getUnix();

      var today = this.getTodayUnix();
      var year = this.getYeaderUnix();
      var timer = (now - timestamp) / 1000;
      var tip = ''
      if (timer <= 0) {
         tip = '刚刚'
      } else if (Math.floor(timer / 60) <= 0) {
         tip = '刚刚'
      } else if (timer < 3600) {
         tip = Math.floor(timer / 60) + '分钟前';
      } else if (timer >= 3600 && (timestamp - today >= 0)) {
         tip = Math.floor(timer / 3600) + '小时前';
      } else if (timer / 86400 <= 31) {
         tip = Math.ceil(timer / 86400) + '天前';
      } else {
         tip = this.getLastDate(timestamp);
      }
      return tip;
   }
} 

高级自定义指令v-time

   <div id="app">
      <div class="list" v-time="item" v-for="(item,index) in list" :key="index">
         {{item }}
      </div>
   </div>
   </body>

      Vue.directive('time',{
         bind:function(el,binding){
            el.innerHTML = Time.getFormatTime(binding.value*1000)
            el._timeout_ = setInterval(()=>{
               el.innerHTML = Time.getFormatTime(binding.value*1000)
            },60000)
         },
         unbind:function(el){
            clearInterval(el._timeout_);
            delete el._timeout_
         }
      }) 

只需要为每个列表绑定一个v-time 即可实现倒计时实时改变

25 声望
3 粉丝
0 条评论
推荐阅读
Android指定名称和路径打包apk
有时候会需要打包到指定的路径然后由脚本推送。打包apk时可以通过gradle指定名称和路径,并且可以配置更多信息。 {代码...} 这样release编译就会根据指定的规则生成在指定目录,然后可以用Jenkins等进行发布管理。

VE视频引擎阅读 1.2k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
25 声望
3 粉丝
宣传栏