精华内容
下载资源
问答
  • vue倒计时插件

    千次阅读 2019-04-20 14:26:30
    如上图所示,有一个倒计时插件,使用的方式,给这个组件传个分钟和秒数就可以 下面是这个倒计时插件: <template> <div class="CountDown"> <p>{{minute}}:{{second}}</p> </div> ...

    在这里插入图片描述
    如上图所示,有一个倒计时插件,使用的方式,给这个组件传个分钟和秒数就可以

    下面是这个倒计时插件:

    
    
        <template>
          <div class="CountDown">
            <p>{{minute}}:{{second}}</p>
          </div>
        </template>
        
        <script type="text/ecmascript-6">
        
        export default {
          name: 'CountDown',
          data () {
            return {
              minutes: 10,
              seconds: 10
            }
          },
          props: {
            countTime: {
              type: Object,
              default: () => { }
            }
          },
          mounted () {
            this.add()
          },
          methods: {
            num: function (n) {
              return n < 10 ? '0' + n : '' + n
            },
            add: function () {
              var _this = this
              var time = window.setInterval(function () {
                if (_this.seconds === 0 && _this.minutes !== 0) {
                  _this.seconds = 59
                  _this.minutes -= 1
                } else if (_this.minutes === 0 && _this.seconds === 0) {
                  _this.seconds = 0
                  window.clearInterval(time)
                } else {
                  _this.seconds -= 1
                }
              }, 1000)
            }
          },
          watch: {
            countTime: {
              deep: true,
              immediate: true,
              handler: function (newVal) {
                this.minutes = newVal.minute;
                this.seconds = newVal.second;
              }
            },
            second: {
              handler (newVal) {
                this.num(newVal)
              }
            },
            minute: {
              handler (newVal) {
                this.num(newVal)
              }
            }
          },
          computed: {
            second: function () {
              return this.num(this.seconds)
            },
            minute: function () {
              return this.num(this.minutes)
            }
          }
        }
        </script>
        
        <style lang="less" scoped>
        .CountDown {
          color: #fff;
        }
        </style>
    
    
    
    **使用方式:**
    
        import CountDown from './count_down'  //引入倒计时插件路径
        <template>
          <CountDown  :countTime="countTime"></CountDown>
        </template>
        data(){
              countTime: {
                minute: 11,
                second: 11
              }
        },
          components: {
            CountDown,
          }
    
    

    这个插件很好用,有兴趣,可以直接拿在项目里面使用。

    展开全文
  • vue 倒计时插件 真棒计时 (vue-awesome-countdown) Countdown plug-in with high performance and high accuracy for Vue2.5.0+. 适用于Vue2.5.0 +的高性能和高精度倒计时插件。 View Demo 查看演示 Download ...

    vue 倒计时插件

    真棒倒计时 (vue-awesome-countdown)

    Countdown plug-in with high performance and high accuracy for Vue2.5.0+.

    适用于Vue2.5.0 +的高性能和高精度倒计时插件。

    安装 (Installation)

    Install

    安装

    $ npm install vue-awesome-countdown --save
    # or
    $ yarn add vue-awesome-countdown

    ...and import and use the plugin like so:

    ...然后像这样导入和使用插件:

    import vueAwesomeCountdown from 'vue-awesome-countdown'
    
    Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by default

    用法 (Usage)

    <countdown :end-time="new Date().getTime() + 60000">
      <span
        slot="process"
        slot-scope="anyYouWantedScopName">{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span>
      <span slot="finish">Done!</span>
    </countdown>
    <vac :end-time="new Date().getTime() + 60000">
      <span
        slot="process"
        slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
      <span slot="finish">Done!</span>
    </vac>

    SSR(Nuxt) (SSR (Nuxt))

    <no-ssr>
      <vac :end-time="new Date().getTime() + 60000">
        <span
          slot="process"
          slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
        <span slot="finish">Done!</span>
      </vac>
    </no-ssr>

    道具 (Props)

    Prop Required Explain Type Default
    startTime false Time stamp of countdown start [String, Number, Date] null
    endTime when leftTime undefined Time stamp of countdown end [String, Number, Date] null
    leftTime when endTime undefined Remaining milliseconds of countdown end Number 0
    autoStart false Start countdown automatically Boolean true
    speed false Unit: millisecond Number 1000
    tag false The wrap tag name String span
    Struts 需要 说明 类型 默认
    开始时间 false 倒计时开始的时间戳 [String, Number, Date] null
    时间结束 leftTime未定义时 倒数计时结束时间戳 [String, Number, Date] null
    leftTime endTime未定义时 倒数计时结束剩余的毫秒数 Number 0
    自动启动 false 自动开始倒数 Boolean true
    速度 false 单位:毫秒 Number 1000
    标签 false 包装标签名称 String span

    数据 (Data)

    The data can get it through slot-scop or methods.

    数据可以通过slot-scopmethods

    Data Explain Default
    state The countdown run state, the states are beforeStart, stoped, process and finised beforeStart
    attrs The countdown component tag attributes {}
    actualEndTime Actual countdown end time null
    timeObj Look look {}
    countdownTimer The countdown timer function, Do not use as much as possible. null
    actualStartTime Actual countdown start time. null
    runTimes Countdown run times (The onProcess methods run times) 0
    usedTime The total time consuming from the countdown to the end. 0
    数据 说明 默认
    倒计时运转状态时,状态是beforeStartstopedprocessfinised beforeStart
    属性 倒计时组件标签属性 {}
    实际结束时间 实际倒数结束时间 null
    timeObj 看看 {}
    倒计时器 倒数计时器功能,请勿使用过多。 null
    实际开始时间 实际倒数开始时间。 null
    运行时间 倒计时运行时间( onProcess方法的运行时间) 0
    usedTime 从倒数计时到结束的总时间。 0

    timeObj (timeObj)

    {
        "endTime": 1542634411361,
        "speed": 1000,
        "leftTime": 97019,
        "d": "0",
        "h": "00",
        "m": "01",
        "s": "37",
        "ms": "019",
        "org": {
            "d": 0.001134247685185185,
            "h": 0.02722194444444444,
            "m": 1.6333166666666665,
            "s": 37.998999999999995,
            "ms": 19
        },
        "ceil": {
            "d": 1,
            "h": 1,
            "m": 2,
            "s": 98
        }
    }

    插槽 (Slots)

    Slot process and slot finish will not display at the same time.

    插槽process和插槽finish不会同时显示。

    name slot-scop Position Display condition
    prev component _self 1 Defined, Controllable display
    before component _self 2 On before start, state === 'beforeStart'
    process component _self 2 On process, state === 'process'
    finish component _self 3 On finish, state === 'finished'
    default component _self 3 Defined, Controllable display
    名称 插槽范围 位置 显示条件
    上一个 组件_self 1个 定义的,可控制的显示
    之前 组件_self 2 在启动之前, state === 'beforeStart'
    处理 组件_self 2 处理中, state === 'process'
    组件_self 3 完成后, state === 'finished'
    默认 组件_self 3 定义的,可控制的显示

    方法 (Methods)

    The methods can be accesse through slot-scop or $refs.

    可以通过slot-scop$refs这些方法。

    Method Explain Parameters
    startCountdown restart
    stopCountdown no
    switchCountdown no
    finishCountdown no
    doCountdown no
    方法 说明 参量
    startCountdown restart
    stopCountdown 没有
    switchCountdown 没有
    finishCountdown 没有
    doCountdown 没有

    事件 (Event)

    Event Explain Parameters
    onStart Functions executed at the beginning of countdown vm
    onProcess Function executed when countdown is performed vm
    onStop Function executed when countdown stops vm
    onFinish Function executed when countdown finished vm
    事件 说明 参量
    onStart 在倒数开始时执行的功能 vm
    处理中 执行倒数计时时执行的功能 vm
    onStop 倒数停止时执行的功能 vm
    onFinish 倒数完成后执行的功能 vm

    翻译自: https://vuejsexamples.com/countdown-plug-in-with-high-performance-and-high-accuracy-for-vue/

    vue 倒计时插件

    展开全文
  • 基于vue2.0的活动倒计时组件 可以使用服务端当前时间 在倒计时开始或者结束的时候,可以自定义回调 文档:https://cgygd.github.io/vue2-countdown/ demo:...

    vue2-countdown

    示例.png

    安装

    1.cnpm/npm

     

    npm install vue2-countdown --save
    

    2.Git 下载源码

     

    git clone https://github.com/cgygd/vue2-countdown
    

    使用

     

    <count-down v-on:end_callback="countDownE_cb()"
                    :currentTime="currentTime"
                    :startTime="startTime"
                    :endTime="endTime"
                    :tipText="'距离订单开始还有'"
                    :tipTextEnd="'距离订单关闭还剩'"
                    :endText="'订单已关闭'"
                    :dayTxt="'天'"
                    :hourTxt="'小时'"
                    :minutesTxt="'分钟'"
                    :secondsTxt="'秒'">
    </count-down>
    

     

    import CountDown from 'vue2-countdown'
    components: {
        CountDown
    },
    data() {
         return {
                    currentTime:0,
                    startTime:0,
                    endTime:0,
                }
            },
    methods: {
      countDownS_cb: function (x) {
        console.log(x)
      },
      countDownE_cb: function (x) {
        console.log(x)
      }
    }
    

    参数解释

    1. currentTime -- 当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间)

      type: Number

      required : false

      default : ( new Date() ).getTime()

    2. startTime -- 开始时间戳

      type: Number

      required : true

    3. endTime -- 结束时间戳

      type: Number

      required : true

    4. tipText -- 开始倒计时之前的提示文字

      type: String

      required : false

      default : 距离开始

    5. tipTextEnd -- 开始倒计时之后的提示文字

      type: String

      required : false

      default : 距离结束

    6. endText -- 倒计时结束之后的提示文字

      type: String

      required : false

      default : 已结束

    7. dayTxt -- 自定义显示的天数文字

      type: String

      required : false

      default : :

    8. hourTxt -- 自定义显示的小时文字

      type: String

      required : false

      default : :

    9. secondsTxt -- 自定义显示的分钟文字

      type: String

      required : false

      default : :

    10. secondsFixed -- 自定义显示的秒数文字

      type: String

      required : false

      default : :

    回调方法

    1. start_callback() -- 开始倒计时结束之后的回调方法

      type: Function

      required : false

    2. end_callback() -- 活动倒计时结束之后的回调方法

      type: Function

      required : false

    问题修改

    但是在使用过程中发现了vue2-countdown 项目存在的一些问题:

    1.无法自定义提示文字

    作者在项目中注释掉了,导致我们在引入组建添加了此配置的话也无法显示提示语。
    解决方法:
    1.在node_modules中找到安装的vue2-countdown文件,修改vue2-countdown.vue文件,将注释消除。

     

     

    2.其实整个项目有用的只有lib/vue2-countdown.vue文件,所有也可以将该文件内容复制一份到自己的项目,新建一个vue文件,作为组件,然后将组件的注释解除。

    2.倒计时逻辑问题

    引入后发现无论我们传什么时间过去,倒计时都是结束时间-开始时间重新计算,并非根据当前时间计算结束时间-当前时间的值,所以我们怎么配置,怎么刷新结果都是(end-start),其实好像都和当前时间没有关系

    解决方法:将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳,但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。

     

    展开全文
  • vue-flip-down 安装 cnpm install vue-flip-down --save 或者 yarn add vue-flip-down 使用 import FlipDown from 'vue-flip-down';... :endDate="1540212399971" // 结束... @timeUp="func" // 当倒计时走到0时会触发

    vue-flip-down

    安装

    cnpm install vue-flip-down --save

    或者

    yarn add vue-flip-down

    使用

    import FlipDown from 'vue-flip-down';
    
    <FlipDown
      :endDate="1540212399971"  // 结束的时间,即倒计时会从当前时间一直到endDate停止,可以是一个日期对象,也可以是毫秒数
      @timeUp="func"            // 当倒计时走到0时会触发一次,表示时间到了
      :type="1"                 // 4-日时分秒,3-时分秒,2-分秒,1-秒
      :theme="1"                // 样式:1-合并,2-分离
      :timeUnit=[':',':',':']   // 时间单位,显示在空隙之间的文字,比如:['天','时','分','秒'] 或 [':',':',':']
    /> 
    

    :theme=“1” 合并式
    Alt
    合并式的,每个不同的时间单位是合在一起的

    :theme=“2” 分离式
    Alt
    分离式的,每个数字都是单独分开的

    不用安装也可使用

    直接把下标的内容拷贝到项目里直接用,就是个普通vue组件,就不用npm install,然后直接可以修改其样式

    <!-- 翻页效果 倒计时组件 -->
    <template>
      <div :class="['vue-countdown-component', { theme2: theme !== 1 }, {ie: isIE}]">
        <template v-for="(item, index) in timeArray">
          <div :class="['time-box']"
               :key="index">
            <!-- 底层基础div -->
            <div class="base">{{ item }}<div class="base-b">{{ timeArrayT[index] }}</div>
            </div>
            <!-- 翻页动画div -->
            <div :class="['face',{ anime: isAnimate[index] }]"
                 @animationend="onAnimateEnd(index)">{{ timeArrayT[index] }}</div>
            <div :class="['back',{ anime: isAnimate[index] }]">{{ item }}</div>
          </div>
          <!-- 文字 -->
          <div class="time-unit"
               :key="`unit-${index}`"
               v-if="isTimeUnitShow(index)">
            {{ setTimeUnit(index) }}
          </div>
        </template>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isIE: false,
          timeArray:
            this.theme === 2
              ? new Array(this.type * 2).fill("0")
              : new Array(this.type).fill("00"),
          timeArrayT:
            this.theme === 2
              ? new Array(this.type * 2).fill("0")
              : new Array(this.type).fill("00"),
          isAnimate:
            this.theme === 2
              ? new Array(this.type * 2).fill(false)
              : new Array(this.type).fill(false)
        };
      },
      props: {
        endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
        type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1
        theme: { type: [Number, String], default: 1 },
        timeUnit: { type: Array, default: () => [] }
      },
      computed: {
        endTime() {
          if (this.endDate instanceof Date) {
            return this.endDate.getTime();
          }
          return Number(this.endDate) > 0 ? Number(this.endDate) : 0;
        },
        step() {
          return this.theme === 1 ? 1 : 2;
        },
        arr() {
          const length = this.timeArray.length;
          const step = this.step;
          const temp = [
            length - 1,
            length - step - 1,
            length - step * 2 - 1,
            length - step * 3 - 1
          ];
          temp.length = this.type > 1 ? this.type : 1;
          return temp;
        }
      },
      watch: {
        timeArray(newV, oldV) {
          const diff = [];
          newV.forEach((value, index) => {
            if (value !== oldV[index]) {
              diff.push({ value, index });
              this.$set(this.isAnimate, index, true);
            }
          });
          setTimeout(() => {
            diff.forEach(item => {
              this.$set(this.timeArrayT, item.index, item.value);
            });
          }, 350);
        },
        endTime(newV) {
          if (newV > 0) {
            this.start();
          }
        }
      },
      mounted() {
        if (
          window.ActiveXObject ||
          "ActiveXObject" in window ||
          window.navigator.userAgent.indexOf("Edge") > -1
        ) {
          this.isIE = true;
        }
        this.start(0);
      },
      beforeDestroy() {
        clearTimeout(this.timer);
      },
      methods: {
        // 开始倒计时
        start(step = 1000) {
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            let t = this.endTime - new Date().getTime(); // 剩余的毫秒数
            t = t < 0 ? 0 : t;
            let day = 0; // 剩余的天
            let hour = 0; // 剩余的小时
            let min = 0; // 剩余的分钟
            let second = 0; // 剩余的秒
            const type = Number(this.type);
            if (type >= 4) {
              day = Math.floor(t / 86400000); // 剩余的天
              hour = Math.floor(t / 3600000 - day * 24); // 剩余的小时 已排除天
              min = Math.floor(t / 60000 - day * 1440 - hour * 60); // 剩余的分钟 已排除天和小时
              second = Math.floor(t / 1000 - day * 86400 - hour * 3600 - min * 60); // 剩余的秒
            } else if (type >= 3) {
              hour = Math.floor(t / 3600000); // 剩余的小时
              min = Math.floor(t / 60000 - hour * 60); // 剩余的分钟 已排小时
              second = Math.floor(t / 1000 - hour * 3600 - min * 60); // 剩余的秒
            } else if (type >= 2) {
              min = Math.floor(t / 60000); // 剩余的分钟
              second = Math.floor(t / 1000 - min * 60); // 剩余的秒
            } else {
              second = Math.floor(t / 1000); // 剩余的秒
            }
            let arr = [];
            if (Number(this.theme) === 1) {
              // 不分开
              type >= 4 && arr.push(String(day).padStart(2, "0"));
              type >= 3 && arr.push(String(hour).padStart(2, "0"));
              type >= 2 && arr.push(String(min).padStart(2, "0"));
              arr.push(String(second).padStart(2, "0"));
            } else {
              // 分开
              type >= 4 &&
                arr.push(
                  ...String(day)
                    .padStart(2, "0")
                    .split("")
                );
              type >= 3 &&
                arr.push(
                  ...String(hour)
                    .padStart(2, "0")
                    .split("")
                );
              type >= 2 &&
                arr.push(
                  ...String(min)
                    .padStart(2, "0")
                    .split("")
                );
              arr.push(
                ...String(second)
                  .padStart(2, "0")
                  .split("")
              );
            }
            this.timeArray = arr;
            if (t > 0) {
              this.start();
            } else {
              this.$emit("timeUp");
            }
          }, step);
        },
        // 动画完毕后,去掉对应的class, 为下次动画做准备
        onAnimateEnd(index) {
          this.$set(this.isAnimate, index, false);
        },
        isTimeUnitShow(index) {
          if (this.arr.includes(index)) {
            if (index === this.timeArray.length - 1 && !this.timeUnit[3]) {
              return false;
            }
            return true;
          }
          return false;
        },
        setTimeUnit(index) {
          switch (index) {
            case this.timeArray.length - 1:
              return this.timeUnit[3] || ""; // 秒
            case this.timeArray.length - this.step - 1:
              return this.timeUnit[2] || ""; // 分
            case this.timeArray.length - this.step * 2 - 1:
              return this.timeUnit[1] || ""; // 时
            default:
              return this.timeUnit[0] || ""; // 天
          }
        }
      }
    };
    </script>
    
    <style lang="less">
    .vue-countdown-component {
      display: flex;
      @keyframes animate-filp-face {
        0% {
          transform: rotateX(-0.01deg);
          opacity: 1; // 改变opacity 为了QQ浏览器和safari(不支持z-index animate)
        }
        50% {
          opacity: 1;
        }
        51% {
          opacity: 0;
        }
        100% {
          transform: rotateX(-180deg);
          opacity: 0;
        }
      }
      @keyframes animate-filp-back {
        0% {
          transform: rotateX(180deg);
        }
        100% {
          transform: rotateX(-0.01deg);
        }
      }
      &.ie {
        // 为了ie和老版edge(不支持clip-path)
        .base {
          .base-b {
            clip: rect(15px, auto, auto, auto);
          }
        }
        .face {
          clip: rect(auto, auto, 15px, auto);
        }
        .back {
          clip: rect(15px, auto, auto, auto);
        }
      }
      &.theme2 {
        .time-box {
          min-width: 20px;
          & + .time-box {
            margin-left: 1px;
          }
        }
      }
      .time-unit {
        padding: 0 4px;
        color: #222;
        font-size: 14px;
        line-height: 30px;
        white-space: nowrap;
      }
      .time-box {
        position: relative;
        box-sizing: border-box;
        height: 30px;
        min-width: 28px;
        font-size: 14px;
        text-align: center;
        background-color: #6c96e8;
        perspective: 60px;
        border-radius: 3px;
        padding: 0 2px;
        color: #fff;
        line-height: 30px;
        &:before {
          content: "";
          position: absolute;
          background: #a7c7ff;
          width: 1px;
          height: 6px;
          top: 50%;
          left: -1px;
          margin-top: -3px;
          z-index: -1;
        }
        &:after {
          content: "";
          position: absolute;
          background: #a7c7ff;
          width: 1px;
          height: 6px;
          top: 50%;
          right: -1px;
          margin-top: -3px;
          z-index: -1;
        }
        & + .time-box {
          margin-left: 8px;
        }
        & > div {
          overflow: hidden;
          animation-timing-function: linear;
          animation-duration: 400ms;
          // 为了chrome,需要一个小的角度,否则字体渲染错位
          transform: rotateX(-0.01deg);
          border-radius: 3px;
          &.base {
            position: relative;
            .base-b {
              position: absolute;
              left: 0;
              bottom: 0;
              border-radius: 0 0 3px 3px;
              width: 100%;
              height: 100%;
              background-color: #709bf1; // a1比base浅一点点,为了模拟翻页的阴影效果
              // background-color: #0ff;
              clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            }
          }
          &.face {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #6c96e8;
            // background-color: #f00;
            backface-visibility: visible;
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
            z-index: 2;
            &.anime {
              animation-name: animate-filp-face;
            }
          }
          &.back {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #709bf1; // b0和a1一致
            // background-color: #aa0;
            transform: rotateX(-180deg);
            backface-visibility: visible;
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            &.anime {
              animation-name: animate-filp-back;
            }
          }
        }
      }
    }
    </style>
    

    说明

    • 内部使用了setTimeout,当倒计时结束后,就会停止循环。但可以动态改变日期,倒计时又会被激活。
    • 基于本地时间做对比
    • github地址:vue-flip-down
    展开全文
  • vue倒计时翻页插件

    2020-11-04 15:44:06
    介绍一款插件 一款时间翻页的插件,可以在vue2里面使用 名称:vue2-flip-countdown github地址:https://github.com/philipjkim/vue2-flip-countdown demo: ...
  • Vue倒计时插件(vue-flip-down)

    千次阅读 2020-07-06 21:26:18
     今天在写前台的时候,考试系统需要一个倒计时功能,本来是想自己写一个的,但是最近事情太多,就到github上找了一个。还不错。虽然没有那么的花里胡俏,但是基本够用了。本博文仅仅记录一下。 示例 在线案列  ...
  • 主要介绍了vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用) ,需要的朋友可以参考下
  • npm install vue2-countdown --save 2.Git 下载源码 git clone https://github.com/cgygd/vue2-countdown 使用 import CountDown from ‘vue2-countdown’ components: { CountDown }, data() { return { ...
  • Vue倒计时动画效果

    2021-03-02 15:58:32
    该项目效果链接:Vue倒计时 HTML部分: <div id="app"> <div id="countdown"> <svg :width="size" :height="size"> <circle fill="transparent" :stroke-width="stroke" stroke="#eee" :r...
  • vue 倒计时 moment 使用格式化 使用插件 moment <template> <div> <p>{{time|timeFormat}}</p> <p>{{time|timeFormat('YYYY-MM-DD')}}</p> </div> </template>...
  • vue实现倒计时插件 时间戳

    千次阅读 2019-08-07 10:22:58
    {{content}} export default { ...引入上面代码之后 换要在vue的methods里加上callback回调函数 ednTime 是时间结束之后的时间戳 callback是结束之后的回调 endText是结束之后的文字显示!
  • VUE封装一个电商倒计时插件 在components文件夹下新建文件 2.代码如下 <template> <span> 距离活动结束还剩:{{ lastTime | format }} </span> </template> <script> function ...
  • 安装 ...npm install vue2-countdown --save 2.Git 下载源码 git clone https://github.com/cgygd/vue2-countdown 使用 <count-down v-on:end_callback="countDownE_cb()" :current...
  • 我发现好多倒计时插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: {{content}} [removed] export default { data(){ return { content: '', } }...
  • 工作当中需要开发一个倒计时插件,于是开始网上先拿来主义,发现好多计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个插件,测试已经通过,直接上代码 如下是组件代码:   &lt;template&...
  • 在做项目时开发了两个插件,一个是透明提示框、另一...代码以及使用方法代码:Alert.vue + notify.js使用方法: 将两个代码文件放到文件夹notify之下, 在mian.js中加入以下代码:import notify from './notify/no...
  • vue倒计时刷新不重置 因为vuex是存储在内存里的 所以需要持久化 但是手写比较麻烦 我直接放弃 所以我们来用插件 非常简单只需要 npm install vuex-persistedstate --save 然后在store下的index.js中更改下配置 网上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,360
精华内容 544
关键字:

vue倒计时插件

vue 订阅