グリッドシステム(grid)
2970 ワード
グリッドシステムコードグリッドシステムテストコード
はrowを用いる.vueとcol.vueはメッシュシステムの基礎部分 を構成する両ファイルに必要な転送値とcol.vueに依存するスタイルpropsData
row.vueのスタイルpropsData*応答式の実装 は、送信名およびメディアクエリの各画面のサイズによって、対応するclassNameがCSS をトリガすると判定する必要がある.注意しなければならないのは設計応答式の過程の中で取捨選択の問題があって、あなたのコンポーネントの主要な作用点を見て、携帯電話の端かPCの端か、それではあなたの です
テスト を行う.
注意:は、上記のコードが テストフレームワークでは、 を終了することができる.
1.考え方
span:グリッド占有列数を示す幅offset:グリッド列を表すmargin-left、オフセット量は、伝達値の結合に必要なclassNameによって対応するスタイル名を生成することによって、CSS対応のCSSがSCSSのforサイクルによって生成されることをトリガする.$class: col-;
@for $n from 1 through 24 {
&.#{$class}#{$n} {
width: ($n / 24) * 100%
}
}
$class: offset-;
@for $n from 1 through 24 {
&.#{$class}#{$n} {
margin-left: ($n / 24) * 100%
}
}
row.vueのスタイルpropsData*
gutter:グリッド列の間隔を表します.これはcolに作用しますが、rowというコンポーネントに設定されているので、colに値を伝えてpadding*alignを生成する必要があります.弾性ボックス要素の主軸(横軸)方向の位置合わせを表します.この2つの値も、接合に必要なclassNameによって対応するスタイル名を生成してCSSをトリガーします.colコンポーネントのspan``offsetはその端を基準として設計メディアの検索の大きさの制定を基準にして、具体的に代コードを見てください、私は携帯電話を基準として2.テスト
rowのコンポーネントgutterのプロパティは、テストを行うために対応するHTML構造を生成する必要があるため、このテストは従来のダイレクトVue.extend(Row)を使用してコンポーネントをマウントしてテストするのではなく、オリジナルの方法でDOM生成it(' gutter ', (done) => {
Vue.component('g-row', Row)
Vue.component('g-col', Col)
const div = document.createElement('div')
document.body.appendChild(div)
div.innerHTML = `
`
const vm = new Vue({
el: div
})
setTimeout(() => {
const row = vm.$el.querySelector('.row')
expect(getComputedStyle(row).marginLeft).to.equal('-10px')
expect(getComputedStyle(row).marginRight).to.equal('-10px')
const col = vm.$el.querySelectorAll('.col')
expect(getComputedStyle(col[0]).paddingRight).to.equal('10px')
expect(getComputedStyle(col[1]).paddingLeft).to.equal('10px')
done() // mocha
vm.$el.remove()
vm.$destroy()
})
})
注意:
gutterを使用しない場合にjs同期実行順に上から下へ実行され、setTimeoutからsetTimeoutへのrow への値伝達がcol というフックによって値伝達され、gutterがDOM非同期キュー更新を実行するため、moutedの属性をテストするためにvueを使用してテスト結果を出力する必要がある.gutterでcol のスタイルを変更しようとすると、Virtualdomはこのタスクをタスクキューに押し込んで同期コードの実行が完了するのを待ってからキュータスクを行うので、setTimeoutを使用してテスト結果のコードをタスクキューに配置して最後に出力する必要があります.doneというパラメータを書かないと、同期コードのみが実行され、setTimeoutに実行されると、実行キュータスクを待たずにコード実行を直接終了することを示す.その後、doneという関数を実行するのは、タスクが完了したことを示すためであり、コード実行