秒速1.0.0クェーサー1.3.0

二つの新しい指令‐交点と突然変異と待望のグローバル暗黒モード
これはうまくいけば多くの未来の最初の“あなたが見た”(HYS)の記事は、あなたがクエーサーのフレームワークの今後まだまだリリースされていない機能についてのアップデートをもたらす、私たちの最愛のコミュニティは、クエーサーの開発に適した維持を更新します.
クエーサーが進化するように、チームの目的は、フロントエンド/ユーザーインターフェイス/クライアントのアプリケーション開発者として最も必要なツールとユーティリティを提供することです.そして、そうしている間、クエーサーの幅と深さ、コンポーネント、ディレクティブの深さ、内部のプラグインであり、それはCLIの増加です.
我々は、クエーサーのフレームワークだけでなく、偉大なフロントエンドの開発者の経験を考えるのが好きです.
したがって、クエーサーの十分なプラグイン.Quasar 1.3で次に来ることに入りましょう.

交差点指令

UIの特定の要素が表示可能な画面(Viewport)に入るか、または出て行くとき、または、標的要素が祖先要素と交わるとき、新しい交差点指令は発火イベントの問題を解決します.比較的新しいIntersection Observer API 組み込みのmost browsers . IE 11を使用している場合はpolyfill 利用可能です.
MDNドキュメントから、この新しいクエーサーディレクティブとそれが交差点オブザーバAPIを使用する理由のいくつかの例を読むことができます.

• Lazy-loading of images or other content as a page is scrolled.
• Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
• Reporting of visibility of advertisements in order to calculate ad revenues.
• Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

他にいくつかのユースケースがあります.

自動ビデオを一時停止するときにビューのスクロールです.

どのくらいのコンテンツがページ上で読み込まれているかを確認するチェック.

ユーザーが表示中に広告をどのくらいの時間を追跡.

あなたはおそらく同意するでしょう、それらがいくつかの点であなたのアプリケーション内でコントロールしたいかもしれない状況の良い数です.

交差点ディレクティブの使用

それで、うまくいけば、現在、クエーサーでこの新しい指令を使う方法を不思議に思っています.ディレクティブAPIには、ハンドラと1つの修飾子の2つの要素があります.また、他のVueディレクティブと呼ばれます.

<div v-intersection="onIntersection" class="example-observed text-center rounded-borders">
  Observed Element
</div>

ハンドラ関数/オブジェクト

ディレクティブのパラメーターは、ハンドラー関数といくつかのConfigプロパティを含む交差点オブザーバオブジェクトまたはConfigオブジェクトのパラメーターを持つハンドラー関数です.最初にハンドラ関数を使います.
ハンドラ関数のEntryオブジェクトパラメーターには、多数のプロパティがあります.
エントリオブジェクト
プロパティ名
種類
サブプロパティ
種類
boundingClientRect
オブジェクト
底
数
高さ
数
左側
数
右
数
トップ
数
幅
数
X
数
Y
数
交替比率
数
交差点
オブジェクト
底
数
高さ
数
左側
数
右
数
トップ
数
幅
数
X
数
Y
数
等交差点
ブーリアン
根瘤
オブジェクト
底
数
高さ
数
左側
数
右
数
トップ
数
幅
数
X
数
Y
数
時間
数
ご覧の通り、entry オブジェクトは多くの可能な情報を保持します.
この記事の簡潔さのために、あなたが高度なプロパティの目的の各々についてもっと知りたいならばthe docs of MDN .
エントリ関数を使用するには、ハンドラを必要とするvueの他のディレクティブを使用します.

<template>
  <div class="relative-position">
    <div class="example-area q-pa-lg scroll">
      <div class="example-filler" />

      <div v-intersection="onIntersection" class="example-observed text-center rounded-borders">
        Observed Element
      </div>

      <div class="example-filler" />
    </div>

    <div
      class="example-state rounded-borders text-center absolute-top q-mt-md q-ml-md q-mr-lg text-white"
      :class="visibleClass"
    >
      {{ visible === true ? 'Visible' : 'Hidden' }}
    </div>
  </div>
</template>

ハンドラコード:

<script>
export default {
  data () {
    return {
      visible: false
    }
  },

  computed: {
    visibleClass () {
      return `bg-${this.visible ? 'positive' : 'negative'}`
    }
  },

  methods: {
    onIntersection (entry) {
      this.visible = entry.isIntersecting
    }
  }
}
</script>

これは、ビューポートとの間の交差点の発生によるCSSの変更の簡単な例ですentry.isIntersecting プロパティ.(再び、記事の簡潔さのために、コンポーネントのCSSを取り出しました)
ここでは、アクションのように見えます.

一度修飾子

あなたが一度だけイベントを発射する交差点オブザーバを必要とする状況があります.これはonce 修飾子.

      <div v-intersection:once="onIntersection" class="example-observed text-center rounded-borders">
        Observed Element
      </div>

これは、1回のイベントを発射した後、オブザーバーを停止します.
他のいくつかの他の複雑な例は、今後のリリースでは、どのようにハンドラの関数の代わりにConfigオブジェクトを使用するなどの複雑な例があります.

突然変異指令

交差点ディレクティブが交差点オブザーバAPIに基づいているように、突然変異指示はMutation Observer API .
このAPIをブラウザに追加する主な目的は、Webページ/アプリケーション開発者に、DOM内の要素が変更された場合、コールバックを観察して発射する能力を与えることでした.このAPIの前にMutation Events , なぜなら、それらはinherently flawed . それで、突然変異オブザーバは、より良いより良いAPIを発見して、DOM変化に反応することです.IE 11を使用している場合はpolyfill 利用可能です.
突然変異ディレクティブのユースケースは無限ですが、ここでいくつかのきちんとしたものが考えられます.

ドラッグアンドドロップ機能の強化

テキストフィールド入力のための元に戻すとやり直し機能を作成する

サードパーティ製ライブラリの変更に直接反応しない

突然変異ディレクティブはハンドラコールバック関数を必要とします.コールバック関数は、終了した後にbooleanを返します.
一般に、あなたが観察することができる3つの異なるタイプの変化があることができます.

属性変更

文字データの変更

子リスト変更

これらの変更はtype プロパティmutationList コールバック関数への引数として提供されるオブジェクト.
属性変更の場合は、スタイルやクラスが更新されているかどうかを確認できます.文字データの変更については、入力フィールドがユーザーによって更新されるときに次のことができます.子リストの変更の場合、子要素が対象要素のDOMツリーから追加または削除されたときに監視できます.
想像できるように、これは可能性の大きな窓を開きます.
以下に文字データの観測例を示します.

<template>
  <div class="q-pa-md">
    <div class="row justify-start items-center q-pb-md">
      Max Stack Depth: {{ maxStack }}
    </div>
    <div class="row justify-around items-center q-pb-md">
      <div class="row items-center q-px-md q-gutter-sm">
        <q-btn label="Undo" :disable="undoStack.length === 0" @click="undo"></q-btn>
        <div>Stack Depth: {{ undoStack.length }}</div>
      </div>
      <div class="row items-center q-px-md q-gutter-sm">
        <q-btn label="Redo" :disable="redoStack.length === 0" @click="redo"></q-btn>
        <div>Stack Depth: {{ redoStack.length }}</div>
      </div>
    </div>
    <div class="row justify-around items-center q-pb-md">
      <div ref='editor' v-mutation="handler" contentEditable='true' class="editable"></div>
    </div>
  </div>
</template>

スクリプトコード:

<script>
// maximum depth of a stack
const MAX_STACK = 100

export default {
  data () {
    return {
      maxStack: MAX_STACK,
      undoStack: [],
      redoStack: [],
      undoBlocked: false
    }
  },

  methods: {
    undo () {
      // shift the stack
      const data = this.undoStack.shift()
      if (data !== void 0) {
        // block undo from receiving its own data
        this.undoBlocked = true

        this.$refs.editor.innerText = data
      }
    },
    redo () {
      // shift the stack
      const data = this.redoStack.shift()
      if (data !== void 0) {
        // unblock undo from receiving redo data
        this.undoBlocked = false

        this.$refs.editor.innerText = data
      }
    },
    handler (mutationRecords) {
      mutationRecords.forEach(record => {
        if (record.type === 'characterData') {
          this.undoStack.unshift(record.oldValue)
          this.checkStack(this.undoStack)
          this.clearStack(this.redoStack)
        }
        else if (record.type === 'childList') {
          record.removedNodes.forEach(node => {
            if (this.undoBlocked === false) {
              // comes from redo
              this.undoStack.unshift(node.textContent)
            }
            else {
              // comes from undo
              this.redoStack.unshift(node.textContent)
            }
          })
          // check stacks
          this.checkStack(this.undoStack)
          this.checkStack(this.redoStack)
          this.undoBlocked = false
        }
      })
    },

    checkStack (stack) {
      if (stack.length > this.maxStack) {
        stack.splice(this.maxStack)
      }
    },

    clearStack (stack) {
      stack.splice(0)
    }
  }
}
</script>

そして、それは行動のように見えるものです.

再び、私たちは、すぐに来て、docsでより多くの例を持っています!しかし、あなたの口笛を鳴らすには、このドラッグアンドドロップの例をチェックしてください.

修飾子

また、突然変異指令には合計7つの修飾子があります.ここでは、それらが使用されているものを簡単に説明します.once - 最初のDOM変更が登録されたときに一度だけハンドラコールバックを呼び出します.一度発火、変更の観測が停止します.childList - 新しい子ノードの追加や既存の子ノードの削除のために、対象ノード(および' subtree '修飾子も設定されている場合は、その子孫)を観測します.subtree - ターゲットのルートのノードのサブツリー全体への変更の観測を拡張します.attributes - 観測されているノードまたはノードの属性値の変更を監視します.characterData - 指定したターゲットノードまたはサブツリーを監視し、ノードまたはノード内に含まれる文字データへの変更を行います.attributeOldValue - 属性の変更のためのノードまたはノードを監視するときに変更する任意の属性の前の値を記録します.characterDataOldValue - ノードのテキストの以前の値を記録します.
1.3.0がリリースされると、ドキュメント内の突然変異ディレクティブのより多くの例が表示されます.

「ダーク」側へ

はい!人気の需要のため、クエーサーは現在、グローバルダークモードを提供します.ダークモードをオンにする本当に簡単になります.どこでもあなたのアプリケーションでは、ちょうど

this.$q.dark.set(true)

また、内の暗いモードを設定することができますてquasar.conf.js ………

framework: {
  config: {
    dark: true
  }
}

...またはコンポーネントの外部に、これを行うだけです.

import { Dark } from 'quasar'

// set status
Dark.set(true) // or "false" or "auto"

また、簡単に暗いモードの状態を確認することができます.
Vueコンポーネントの内部.

console.log(this.$q.dark.isActive) // true, false

...またはDark オブジェクト.

import { Dark } from 'quasar'

// get status
console.log(Dark.isActive) // true, false

オートダークモード

何かスマートにダークモードに追加された“オートダークモード”です.暗い画面が現代的なスマートフォン(OLEDやAMOLEDスクリーンを持つそれら)が電力を節約し、バッテリ寿命を延ばすことができるので、これは特にモバイル・アプリケーションのために有利でありえます.
自動検出機能を見てprefers-color-scheme: dark メディアクエリとダイナミックです.クライアントのブラウザー/プラットフォームがあなたのアプリケーションが実行されている間にダークモードから/を切り替える場合、ダークモードが設定されている場合、それはクエーサーのダークモードも更新しますauto ).

結論

それで、あなたはそれを持ちます.Quasarの次のマイナーリリース1.3.0で来る3つの新しい優れた機能.新機能をどう思いますか.以下のコメントでお知らせください.
クエーサーに興味がありますか?ここではいくつかのヒントと情報:
詳しい情報:https://quasar.dev
ギタブhttps://github.com/quasarframework/quasar
はじめにhttps://quasar.dev/start
チャットサーバーhttps://chat.quasar.dev/
フォーラムhttps://forum.quasar.dev/
Twitter
寄付:https://donate.quasar.dev