VueTailwindを使ってみました
はじめに
VueTailwindを使ってみたので、ハマったことを紹介します。
ちなみに、バージョンは2.2.1です。
VueTailwindについて
VueTailwindはTailwindCSSでカスタマイズ可能なVueコンポーネント群です。コンポーネントごとにバリアントを設定して、異なるデザインを使うことができます。
導入
公式の手順通りに進めます。各コンポーネント、バリアントのクラスは、ここではTheme Builderのデフォルトの内容から変更せずに使用します。
ハマりポイント1: settingsのクラスにはTailwindCSSのプレフィックスを設定する必要がある
tailwind.config.js
module.exports = {
prefix: 'tw-',
}
module.exports = {
prefix: 'tw-',
}
このようにプレフィックスを指定したら、VueTailwindのコンポーネントがうまく表示できませんでした。
VueTailwindのコンポーネント・バリアントのクラス定義にもプレフィックスをつける必要があったようです。
const settings = {
TInput: {
fixedClasses:
- 'block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
+ 'tw-block tw-w-full tw-px-3 tw-py-2 tw-transition tw-duration-100 tw-ease-in-out tw-border tw-rounded tw-shadow-sm focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-outline-none focus:tw-ring-opacity-50 disabled:tw-opacity-50 disabled:-tw-cursor-not-allowed',
...
},
...
}
これで問題なく表示されるようになりました。
ハマりポイント2: 「$listeners is readonly」のエラーが出た
このエラーで検索するとVueインスタンスが複数作られていることが原因のようで、VueのバージョンをVueTailwindに合わせたらこのエラーは出なくなりました。ただ、この解決方法が正しいのかどうかは私にはわかりません。
- "vue": "2.6.11",
+ "vue": "2.6.12",
ハマりポイント3: TDatePickerの日時のフォーマットはflatpickrの形式
TDatePickerの日時の表現はflutpickrのトークンを指定します。他の形式をpropに指定しても期待通りに動作しないので、別の日付ライブラリを使っている場合は注意が必要そうです。
後述の問題もあったので、私はTDatePickerをラップしたコンポーネントを作ることにしました。
ハマりポイント4: TDatePickerで日付を入力したとき、時間・分・秒の値は現在時刻の値が用いられる
dateFormat
にZ(ISO形式)を指定すると、時間・分・秒の値は現在時刻の値が用いられます。
<t-date-picker
user-format="Y/m/d"
date-format="Z"
/>
例えば上記のコンポーネントで2021/5/21
を選択した時に、2021/5/21 00:00:00
とならずに2021/5/21 09:24:02
のようになります。
00:00:00としたかったので、TDatePickerには表示と同じ形式で保持させ、inputイベントをラップしてISO形式を返すようにしました。
onInput(value: string) {
if (value) {
value = new Date(value).toISOString()
}
this.$emit('input', value)
}
2.2からTimePickerも使えるようになり、時刻の初期値を設定するinitialTime
が追加されました。
初期値を設定するプロパティなので当然かもしれませんが、ミリ秒は値が残ってしまいました。
<!-- 以下のようにinitialTimeを0埋めで設定しても、入力時にミリ秒は0埋めされない -->
<t-date-picker
user-format="Y/m/d"
date-format="Z"
initial-time="00:00:00"
/>
Author And Source
この問題について(VueTailwindを使ってみました), 我々は、より多くの情報をここで見つけました https://qiita.com/katsumata_yusuke/items/b046583780fc2c35f464著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .