タイトルは次のように書き換えられます: Vue.js 3 と Tailwind CSS の RatingBar コンポーネントの動的幅レンダリングの問題を解決する
<p>Vue.js 3 と Tailwind CSS を使用しています。 RatingBar というコンポーネントがあり、親要素のクラスに動的な幅の値を適用しようとしています。ただし、DevTools では予想される幅が表示されますが、レンダリングは 100% です。 </p>
<p>これは RatingBar.vue コンポーネントのコードです: </p>
<pre class="brush:js;toolbar:false;"><テンプレート>
<div class="my-2 グリッド Grid-cols-3 items-center">
<span class="text-left text-sm">{{ ジャンル.名 }}</span>
<div class="h-2 flex-1rounded-lg bg-gray-800">
</div>
<div class="ml-2 flex flex-row items-center gap-1 text-sm text-gray-600">
<i class="fa-レギュラー fa-star"</i>
<span class="flex flex-row gap-1">
<スパン>
{{ ジャンル.評価 }}
</span>
<span> ({{ ジャンル.カウント }}) </span>
</span>
</div>
</div>
</テンプレート>
＜スクリプト設定＞
const props =defineProps({
ジャンル: {
タイプ: オブジェクト、
必須: true、
}、
})
</スクリプト>
</pre>
<p>レンダリングされた HTML 出力は、幅 <code>w-[75%]</code>: </p> で <div> に表示されます。
<pre class="brush:html;toolbar:false;"><div class="h-fullrounded-lg bg-secondary w-[75%]"></div>
</pre>
<p>これは我のpackage.json文件：</p>
<pre class="brush:json;toolbar:false;">{
"名前": "プロジェクト名",
"バージョン": "0.0.0"、
「プライベート」: true、
「スクリプト」: {
"開発": "vite",
"ビルド": "vite ビルド",
"プレビュー": "招待プレビュー"
}、
「依存関係」: {
"axios": "^1.4.0",
"firebase": "^9.22.1",
"vue": "^3.3.2",
"vue-router": "^4.2.0"
}、
"開発依存関係": {
"@vitejs/plugin-vue": "^4.2.3",
"自動プレフィクサー": "^10.4.14",
"postcss": "^8.4.23",
"よりきれい": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"追い風": "^3.3.2",
"vite": "^4.3.5"
}
}
</pre>
<p>请问您能帮我解决これ问题吗?</p>
<p>私は、RatingBar コンポーネントで静的値を強度として使用していますが、これは実際に汚染されています。ただし、動的値を強度として使用する場合は、表式 <code>:class="w-[${Math <floor(genre.rated * 10)}%]"</code</code>の結果は、全体的に100%の密度で計算されたものではなく、予想どおりではありませんでした。
<p>bg-Secondaryタイプを有するdiv要素の強度は、ジャンルレーティング値に基づいて計算された割合と一致すると予想される。
DevTools では度数の値がテストされていますが、汚染された HTML では、実際の計算方法にかかわらず、度数が 100% と表示されます。
<p>私たちは、この問題にどのように対処し、RatingBar コンポーネントの動作の幅を著しく汚すかについて非常に関心を持っています。
全員に返信(1)返信します
P粉2621135692023-09-02 09:40:10
ドキュメントによると :
代わりに、
style 属性を使用して width: を設定できます。
リーリー
返事
0
