0621-自定义指令

demo1-一个小滑块 move自定义指令

第一版：data+watch

html代码

 <div id="test-area">-->
 <div id="child-area" ref="move-element"></div>-->
 </div>
 <p><input type="range" max="550" min="0" v-model="range"> {{range}}px</p>-->

style代码

#test-area{
  width: 600px;
  height: 300px;
  border: 1px solid black;
  position: relative;
#child-area {
  width: 50px;
  height: 50px;
  background-color: red;
}
  #test-color{
    width: 50px;
    height: 50px;
    background-color: #bfa;
  }
}

js代码

import * as Vue from 'vue'
import ms from 'ms'
import article from "@/components/Mixin/components/article";
import ArticleComponent from "@/components/Mixin/components/article";
import likeComponent from "@/components/Mixin/components/likeComponent";

export default {
  name: "mixin-main",
//  ===========第一种  data + watch 方式
data(){
  return{
    range:0
  }
},

watch:{
  range(newValue){
    this.$refs['move-element'].style.left = `${newValue}px`
  }
}

第二版 定义响应性常量在挂载之后 对其style进行设置 html部分同上 js代码

setup(){
     const range = Vue.ref(0);
     //对应 <div id="child-area" ref="move-element"></div>
     const moveElement =Vue.ref(null)
     Vue.onMounted(()=>{
     console.log(moveElement.value)  //<div id="child-area" ref="move-element"></div>
     Vue.watch(range,newValue=>{
         moveElement.value.style.position = 'absolute'
         moveElement.value.style.left = range.value + 'px'
       })
    })
    return{
        range,
        'move-element':moveElement,

}

第三版 利用directives 加上方向参数传递 html代码

<div id="test-area">
  <div id="child-area" v-move:right = range></div>
  <div id="test-color" v-change-color></div>
</div>
<p><input type="range" max="550" min="0" v-model="range">{{range}}px</p>

js代码

setup(){
    const range = Vue.ref(300);
    const direction = Vue.ref('left')
    return{
      range,
      direction
    }
}，
directives:{
 move:{
   mounted(el,{value,instance,arg,modifiers}){
     // console.log(el);
     // console.log(value)
     // console.log(instance.direction)
     console.log(arg) //right
     // console.log(modifiers)
     el.style.position ='absolute';
     const direction = arg||instance.direction;//有方向就按照规定的方向，没有设置默认为左
     el.style[direction] = (value || instance.range) + 'px';
     Vue.watch(()=> instance.range,newValue=>el.style[direction] = newValue +'px')
   }
 },
}

关于小块块的移动指令 三种版本结束，接下来又写了一个时间函数的demo，主要还是商品促销倒计时

demo2-商品时间倒计时

先写一个基础的时间函数 html代码：

{{dateNow}}
{{transform_time(Date.now())}}

js代码：

import * as Vue from 'vue'
import ms from 'ms'
import article from "@/components/Mixin/components/article";
import ArticleComponent from "@/components/Mixin/components/article";
import likeComponent from "@/components/Mixin/components/likeComponent";
export default {
  name: "mixin-main",
  setup(){
    //一个现行时间 作为计算
    let dateNow = Vue.ref(Date.now());
    function update_time(){
      dateNow.value = Date.now();
      requestAnimationFrame(update_time) // 屏幕更新函数
    }
    //更新时间函数
    Vue.onMounted(update_time)

    // 定义一个转换时间的函数
    function transform_time(time){
      //time 时间戳
      //我们把这个时间戳进行转换
      //先转天
      let surplus = time - Date.now();
      if (!surplus) return '秒杀已结束！'
      const day = Math.floor(surplus/ms('1d')).toString().padStart(2,'0');
      surplus %= ms('1d');
      const hours = Math.floor(surplus/ms('1h')).toString().padStart(2,'0');
      surplus %=ms('1h');
      const minute = Math.floor(surplus/ms('1m')).toString().padStart(2,'0');
      surplus %=ms('1m');
      const second = Math.floor(surplus/ms('1s')).toString().padStart(2,'0');
      surplus %=ms('1s');
      const millisecond = Math.floor(surplus/100);
      return`${day}天${hours}时${minute}分${second}秒${millisecond}毫秒`
    } 
    //转换时间函数结束
   return{
       dateNow,
       transform_time
    }
  }
}

再写一个商品倒计时demo html代码

<ul>
  <li v-for="(date,index) in data_array">
    <span>测试商品{{(index + 1).toString().padStart(2,'0')}} 秒杀时间为：</span>
    &nbsp;
    <span class="date">{{transform_time(date)}}</span>
  </li>
</ul>

js部分

setup(){
    let data_array = Array(1);
    for(let index=0;index<data_array.length;index++)
    {
      data_array[index]= Date.now() + Math.floor(Math.random() * ms('1d') - ms('1h')) + ms('1h');
    }
}

换成自定义指令transform 格式化时间 html代码

<h3>使用自定义指令transform 格式化时间</h3>
<ul>
  <li v-for="(date,index) in data_array">
    <span class="product">测试商品{{(index + 1).toString().padStart(2,'0')}} 秒杀时间为：</span>
    &nbsp;
    <span class="date" v-transform:-="date"></span>
  </li>
</ul>

js代码

directives:{
    transform:(el,{value:time,arg,modifiers})=>{
      //这个函数 将在mounted、updated时调用
      let surplus = time - Date.now();
      if (surplus<=0 ){ el.innerHTML =  '秒杀已结束！';return}
      const day = Math.floor(surplus/ms('1d')).toString().padStart(2,'0');
      surplus %= ms('1d');
      const hours = Math.floor(surplus/ms('1h')).toString().padStart(2,'0');
      surplus %=ms('1h');
      const minute = Math.floor(surplus/ms('1m')).toString().padStart(2,'0');
      surplus %=ms('1m');
      const second = Math.floor(surplus/ms('1s')).toString().padStart(2,'0');
      surplus %=ms('1s');
      const millisecond = Math.floor(surplus/100);
      let reply_str = null;
      switch (true) //第一判断条件
      {
        case /^[a-z]$/.test(arg):
             reply_str = `${day}day${hours}hours${minute}minute${second}second${millisecond}millisecond`;
              break

        case /^:$/.test(arg):
             reply_str = `${day}:${hours}:${minute}:${second}:${millisecond}`;
             break
        default:
             reply_str = `${day}-${hours}-${minute}-${second}-${millisecond}`;
      }
     el.innerHTML = reply_str;
  }
}