TypeScript vue.nextTick函數代碼示例

  it('should be able to binding primitive method', done => {
    @Component({
      template:
        '<div><div id="text">{{text}}</div><button id="btn" v-on:click="greet">Greet</button></div>'
    })
    class Foo {
      text: string

      constructor() {
        this.text = 'foo'
      }

      greet() {
        this.text = 'hello foo!'
      }
    }

    const vm = new Foo()['$mount']()

    // first state
    expect(vm['$el'].querySelector('#text').textContent).to.contain('foo')

    // click
    vm['$el'].querySelector('#btn').click()

    // after click
    Vue.nextTick(() => {
      expect(vm['$el'].querySelector('#text').textContent).to.contain(
        'hello foo!'
      )
      done()
    })
  })

    const close = () => {
        dialog.show = false;
        dialog.clear();

        if (afterClose) {
            Vue.nextTick(afterClose);
        }
    };

    it ('should render correct contents', done => {
        const vm = ctor({ name: 'Vue' });
        expect(vm.txtName).eq('Vue');
        expect(vm.$el.querySelector('input').type).eq('text');
        expect(vm.$el.querySelector('h3.result').textContent).eq('');

        vm.result = "Bye Vue";

        Vue.nextTick(() => {
            expect(vm.$el.querySelector('h3.result').textContent).eq('Bye Vue');
            done();
        });
    })

  it('should take normal methods and getter setter', done => {
    @Component({
      template:
        '<div><div id="text">now: <span id="now">{{val}}</span>, next: <span id="next">{{next}}</span></div><button id="btn" v-on:click="inc">Inc</button></div>'
    })
    class Foo {
      val: number

      constructor() {
        this.val = 1
      }

      inc() {
        this.val += 1
      }

      get next() {
        return this.val + 1
      }
    }

    const vm = new Foo()['$mount']()

    // initial state
    expect(
      vm['$el'].querySelector('#now').textContent,
      'now 1st state'
    ).to.contain('1')
    expect(
      vm['$el'].querySelector('#next').textContent,
      'next 1st state'
    ).to.contain('2')

    // click
    vm['$el'].querySelector('#btn').click()

    Vue.nextTick(() => {
      // clicked
      expect(
        vm['$el'].querySelector('#now').textContent,
        'now 2nd state'
      ).to.contain('2')
      expect(
        vm['$el'].querySelector('#next').textContent,
        'next 2nd state'
      ).to.contain('3')

      done()
    })
  })

    async function enter(el: HTMLElement, done: () => void) {
        // 臨時元素的背景色和波形展示麵板背景色相同
        transitionEl!.style.backgroundColor = window.getComputedStyle(el).backgroundColor;
        // 臨時麵板放置在初始點
        Object.assign(transitionEl!.style, start);

        await Vue.nextTick();

        /** 麵板的大小和位置 */
        const backgeoundRect = el.getClientRects()[0];
        /** 起始點的位置 */
        const startRect = transitionEl!.getClientRects()[0];
        /** 圓周變換的半徑 */
        const maxRadius = getDiagonal(
            [backgeoundRect.left, backgeoundRect.top],
            [startRect.left, startRect.top],
        );

        // 臨時 DOM 的寬度和高度是麵板起點和變換起點之差的兩倍
        transitionEl!.style.width = Math.abs(backgeoundRect.left - startRect.left) * 2 + 'px';
        transitionEl!.style.height = Math.abs(backgeoundRect.top - startRect.top) * 2 + 'px';
        // 臨時 DOM 的左上角頂點坐標與麵板重合
        transitionEl!.style.left = backgeoundRect.left + 'px';
        transitionEl!.style.top = backgeoundRect.top * 2 + 'px';
        // 裁剪的初始狀態為 0
        transitionEl!.style.clipPath = 'circle(0)';

        await delay();

        // 裁剪結束狀態為變換半徑
        transitionEl!.style.clipPath = `circle(${maxRadius}px)`;

        await delay(unfoldTime);

        // 展開麵板但還未顯示時的回調
        if (beforeShow) {
            beforeShow();
        }

        // 設置本體元素的動畫
        el.style.opacity = '1';
        el.style.transition = `opacity ${showTime}ms linear`;

        await delay(showTime);

        done();
    }

export const loadPatch = ({ commit, state }, key?: string) => {
  let patch: PatchState;

  key = key || state.patchKey;     // load a specific patch, or whatever current key is (from localStorage)

  if (key && state.patches[key]) {
    patch = state.patches[key];
    commit('SET_KEY', key);
  } else {
    let fromStorage;
    const base = { name: localStorage.getItem(_NAME) || DEFAULT.name };

    try {
      fromStorage = [_ID, _MODULES, _CONNECTIONS, _PARAMETERS].reduce((acc, k) => {
        const value = localStorage.getItem(k);

        if (value) { acc[k] = JSON.parse(value); }
        return acc;
      }, base);
    } catch (err) { /*  */ }

    patch = Object.assign({}, DEFAULT, fromStorage);
  }

  console.log('%c Loading patch: %s ', 'background:#666;color:white;font-weight:bold;', patch.name || '(localStorage)');

  // NOTE: we cannot load modules, connections, and parameters all at once.
  //       Modules must be mounted first, so that all AudioNodes are available
  //       to the Connections; likewise the Modules' settings need to be
  //       available before Parameters are instantiated.
  commit('LOAD_PATCH', patch);      // loads: id, name, modules, and parameterSets. NO connections / parameterKey
  commit('LOAD_CONNECTIONS', []);   // first, explicitly destroy all connections
  commit('SET_PARAMETERS_KEY', -1); // and temp unset this so that it'll trigger a mutation on next tick

  // ensure nodes (+ inlets/outlets) are in the DOM...
  Vue.nextTick(() => {
    // ...then load new connections
    console.log('%c Routing audio... ', 'background:#666;color:white;font-weight:bold;');
    commit('LOAD_CONNECTIONS', patch.connections);

    // ...lastly, load parameters
    console.log('%c Setting parameters... ', 'background:#666;color:white;font-weight:bold;');
    commit('SET_PARAMETERS_KEY', 0);
  });
};

        await Promise.all(lines.map(async (storage) => {
            const lineData: LineData = {
                type: LineType.Line,
                id: createId('line'),
                connect: ['', ''],
                way: LineWay.from(storage.way),
            };

            markId(lineData.id);
            commit(MutationName.PUSH_LINE, lineData);

            await Vue.nextTick();

            const line = findLineComponent(lineData.id);

            line.setConnectByWay();
            line.markSign();
            line.dispatch();
        }));

test('update use href with expression', () => {
  const vm = new Vue({
    data: { icon: 'icons1' },
    render(h) {
      return h('div',
        [h('svg', {
          directives: [{ name: 'svg', value: this.icon }],
        })]
      );
    },
  }).$mount();

  // Change state and wait for one tick until checking
  vm.icon = 'icon2';
  Vue.nextTick(() => {
    const href = vm.$el.querySelector('use').getAttribute('href');
    const xlinkHref = vm.$el.querySelector('use').getAttribute('xlink:href');

    expect(href).toBe('/assets/svg/sprite.svg#icon2');
    expect(xlinkHref).toBe('/assets/svg/sprite.svg#icon2');
  });
});

        await Promise.all(parts.map(async (storage) => {
            const partData: PartData = {
                type: storage.type,
                id: storage.id,
                params: storage.params || [],
                rotate: storage.rotate
                    ? Matrix.from(storage.rotate)
                    : new Matrix(2, 'E'),
                position: Point.from(storage.position),
                connect: [],
            };

            commit(MutationName.PUSH_PART, partData);

            await Vue.nextTick();

            const part = findPartComponent(partData.id);

            if (storage.text) {
                if (storage.text === 'top') {
                    part.textPosition = new Point(0, -100);
                }
                else if (storage.text === 'right') {
                    part.textPosition = new Point(100, 0);
                }
                else if (storage.text === 'bottom') {
                    part.textPosition = new Point(0, 100);
                }
                else if (storage.text === 'left') {
                    part.textPosition = new Point(100, 0);
                }

                part.renderText();
            }

            part.markSign();
        }));

import * as Stickyfill from "stickyfilljs";
import Vue from "vue";

export default Vue.directive("stickyfill", {
  bind(el: HTMLElement) {
    el.style.position = "sticky";
    el.style.top = "75px";
    Vue.nextTick(() => Stickyfill.add(el));
  },
  unbind(el: HTMLElement) {
    Stickyfill.remove(el);
  }
});