Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

introducing vue-wait-component

804 views

Published on

Vue.jsのライブラリ作ったから聞いてくれ

Published in: Software
  • Be the first to comment

  • Be the first to like this

introducing vue-wait-component

  1. 1. Introducing vue-wait-component 2018/6/26 LTLovers 4th LT@KenjiroKubota
  2. 2. Pro le Kenjiro Kubota istyle.inc PHPer, JSer, 時々Gopher
  3. 3. 今回のテーマ「再開した話」
  4. 4. 再開・・・してない話
  5. 5. Vue.jsのライブラリ作ったので紹介したい話
  6. 6. 先週のHTML5勉強会にて koba04氏のReact Suspense DEMO
  7. 7. Vue.jsで同じことをやりたい よっしゃコンポーネントライブラリ作るぜ
  8. 8. Vue Wait Component (ネーミング思いつかなかったので適当・・・) https://github.com/kubotak-is/vue-wait-component 概要 ローディング演出を出すタイミングを設定できるコンポーネント 例 通信速度の速い環境では遅延読み込み時にローディング演出を出さない
  9. 9. Usage import { WaitList, WaitImg } from 'vue-wait-component' export default { components: { WaitList, WaitImg }, }; WaitList Promiseオブジェクトをpropsで渡して遅延を評価 WaitImg srcに設定された画像の取得にかかる遅延を評価
  10. 10. WaitList <wait-list :wait=1000 :promiseMethod="sample()"> <p slot="loading">loading</p> <div slot="loaded"> <li v-for="val in data" :key="val.text"> <p>{{ val.text }}</p> </li> </div> </wait-list> props description wait loading演出を出すまで遅延させるms promiseMethod APIなどのPromiseオブジェクト
  11. 11. WaitImg <wait-img src="https://~~~.com/~~~.jpg" alt="test" :width=300 :wait=100> <p slot="loading">loading</p> </wait-img> props description wait loading演出を出すまで遅延させるms
  12. 12. DEMO
  13. 13. 最高のUX体験へ!
  14. 14. thanks:)

×