Open6
[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
ログインするとコメントできます