Open2022/03/17にコメント追加6

[Scrap] HTML の文脈で共通 Button を作る

共通コンポーネントを作るにあたって、Web に詳しくに自分が分かってない知識を埋めながら作業を進めていきたい。特に以下について調べながら進めていく。

有名な UI Lirbrary の挙動や設計、アクセシビリティ
- React Spctrum を参考にする
Vue.js での実装プラクティス
- 必要に応じて Vuetify などの内部実装を参考にする

React Spectrum - Button

Variants 周りが特に参考になりそう。

Vue での実装方法

children の型が string だったときに span でラップするとかしたい。React の場合は子供の型を見れば分かるけど Vue でうまくできるのか分からない。

Vue tsx もある

render 関数を使えば ctx から children が取得できる。ここから map 使ったりして string 型の場合は span でラップするところまでいきたい。

以下で子 nodes が取れるので tagname が空の時に、span でラップして返すようにする。

const nodes = this.$slots.default