जब विंडो का आकार बदलता है तो मैं साझा स्थिति को बदलकर डीओएम के अंदर कई तत्वों को छिपाने की कोशिश कर रहा हूं।
<body class="font-body relative" x-data="{hideOnMobile:false}">
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
और जब मैं करने की कोशिश करता हूँ
window.onresize = function (event) {
let data = document.querySelector('[x-data]');
if (window.innerWidth > 639) {
return data.__x.$data.hideOnMobile = true;
}
};
इसे राज्य ** HideOnMobile ** को सत्य में बदलना चाहिए, लेकिन यह किसी भी तरह से कोई विचार नहीं है?
3 जवाब
क्या आपने @resize.window का उपयोग करने का प्रयास किया है? (यानी Alpine.js का उपयोग करके resize श्रोता को जोड़ना) यह आपके कोड को window.onresize + Alpine.js __x.$data आंतरिक को अपडेट करने का प्रयास करने की तुलना में सरल बनाना चाहिए।
<body
class="font-body relative"
x-data="{hideOnMobile:false}"
@resize.window="hideOnMobile = window.innerWidth > 639"
>
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
x-data विशेषता से पहले आपके पास कोई स्थान नहीं है। इस लाइन को बदलने का प्रयास करें:
<body class="font-body relative"x-data="{hideOnMobile:false}">
इसके लिए:
<body class="font-body relative" x-data="{hideOnMobile:false}">
ऐसा लगता है कि यह अल्पाइनजेएस रीडमी में एक उदाहरण के रूप में प्रयोग किया जाता है। इसकी जांच करें:
.विंडो संशोधक उदाहरण:
<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>
किसी ईवेंट श्रोता में .window जोड़ना श्रोता को DOM नोड के बजाय वैश्विक विंडो ऑब्जेक्ट पर स्थापित करेगा जिस पर इसे घोषित किया गया है। यह तब उपयोगी होता है जब आप घटक स्थिति को संशोधित करना चाहते हैं जब विंडो के साथ कुछ बदलता है, जैसे आकार बदलें घटना। इस उदाहरण में, जब विंडो 768 पिक्सेल से बड़ी हो जाती है, तो हम मोडल/ड्रॉपडाउन को बंद कर देंगे, अन्यथा उसी स्थिति को बनाए रखेंगे।