این مقاله با ایجاد یک مؤلفه کادر انتخاب (کادر انتخاب) با RiotJS ، با استفاده از طراحی مواد CSS Beercss سرو می شود. قبل از شروع ، حتماً یک برنامه اصلی داشته باشید یا موارد قبلی من را از این سریال بخوانید.
در صورت لزوم از مشورت با مستندات RiotJS دریغ نکنید: https://riot.js.org/documentation/
چهار حالت کادر بازرسی وجود دارد: بررسی نشده ، بررسی و غیرفعال و مخلوط نشده (به تصویر بعدی مراجعه کنید). هدف ایجاد یک مؤلفه کادر Riot با طراحی BeerCSS و گوش دادن به رویدادهای کلیک است.
مؤلفه اصلی کادر انتخاب
ابتدا یک پرونده جدید به نام ایجاد کنید c-checkbox.riot در پرونده مؤلفه پیشوند c- به معنای “مؤلفه” ، یک توافق نامگذاری مفید و عمل خوب است.
در ./components/c-checkbox.riot، کد HTML زیر را بنویسید (در مستندات BeerCSS یافت می شود):
بیایید کد را تجزیه کنیم:
- برچسب ها
définissent une balise racine personnalisée, portant le même nom que le fichier. Vous devez l’écrire ; sinon, cela pourrait créer des résultats inattendus. Utiliser la baliseبه عنوان یک برچسب ریشه یا تعریف مجدد چراغهای HTML HTML HTML ، بنابراین با شروع کنیدc-انتخاب خوبی از نام است. - برای فعال کردن ویژگی
checkedباprops.valueباید وجود داشته باشد و باشد درستبشر - مقدار پیش فرض ورودی کادر انتخاب به شکل زنجیره ای “روشن” است. رسیدگی به این نوع ارزش در یک برنامه JavaScript عملی نیست. بیان
value={ props?.value ? true : false }تضمین می کند که مقدار کادر انتخاب همیشه یک بولی است ، درست یا نادرست. - بسته به استانداردهای وب برای کادر ، ارزش ولایت معاینه شده دو ویژگی متفاوت هستند. این مؤلفه دو ویژگی را متحد می کند.
- با تشکر
props.disabled، ویژگیdisabledبرای غیرفعال کردن کادر ، به صورت مشروط به برچسب ورودی اختصاص داده شده است. - بله برچسب وجود دارد ، به آن تزریق می شود:
{props.label}بشر
W3C تصریح می کند که اگر ویژگی موجود باشد ، یک خاصیت بولی صحیح است – حتی اگر مقدار خالی یا نادرست باشد. همانطور که در مستندات ذکر شد ، Riot.js به طور خودکار این رفتار را تصحیح می کند: ویژگی های بولی (بررسی شده ، انتخاب شده و غیره) وقتی مقدار بیان است نادیده گرفته می شوند دروغ :
در صورت صحت این عبارت ، آنها به درستی مطابق با مشخصات ارائه می شوند:
سرانجام ، مؤلفه c-checkbox.Riot می توان در یک صفحه اصلی فوری کرد فهرست :
style="width:600px;padding:20px;">
style="margin-bottom:20px">Riot + BeerCSS
onclick={ clicked } value={ state.value } label={ state.value }/>
onclick={ clicked } label="Disabled" disabled={ true } />
onclick={ clicked } label="Disabled" disabled={ true } value="true" />
import cCheckbox from "./components/c-checkbox.riot";
export default {
components: {
cCheckbox
},
state: {
value: true
},
clicked (ev) {
if (ev.target.tagName === "SPAN") {
ev.stopPropagation()
ev.preventDefault();
this.update({ value: !this.state.value })
}
}
}
تجزیه کد:
- مؤلفه وارد شده است
import cCheckbox from "./components/c-checkbox.riot";سپس در شیء شورش بارگذاری شد مؤلفه ها: {}بشر - در HTML ، مؤلفه کادر انتخاب با آن فوری می شود
- وضعیت کادر انتخاب در شیء حالت شورش ذخیره می شود
state: { value: false }بشر کاذب پیش فرض است. - رویداد کلیک کردن نظارت می شود: هنگامی که این رویداد کلیک کردن باعث شده است ، عملکرد کلیک کرد اعدام شده است
- در طول کلیک ، ارزش به عنوان مخالف با او به روز می شود
this.update({ value: !this.state.value })بشر - یک مشکل مهم رخ می دهد: رویداد کلیک دو بار صادر می شود! بیان
if (ev.target.tagName === "SPAN")برای پذیرش یک رویداد واحد استفاده می شود ، سپس انتشار این رویداد به لطف متوقف می شودev.stopPropagation();ولایتev.preventDefault();بشر
تصویر HTML تولید شده:
مشکل کادر انتخاب را تصحیح کنید: رویداد دو کلیک را متوقف کنید
همانطور که در بخش قبلی ذکر شد ، رویداد کلیک دو بار شروع می شود. مشکل این است که کلیک بر روی برچسب باعث کلیک بر روی هر دو می شود بشر
راه حل متوقف کردن انتشار رویداد در مؤلفه و استفاده مجدد از رویداد فقط یک بار است. در آن زمان ، من از این فرصت استفاده می کنم که ارزش بولی را در مقابل تغییر دهم: والدین HTML یک رویداد تغییر را با مقدار صحیح دریافت می کنند:
- اگر ورودی بررسی شود ، رویداد تغییر درست می شود.
- اگر ورودی بدون توجه باشد ، رویداد تغییر کاذب است.
مؤلفه c-checkbox.Riot به روز رسانی:
تجزیه کد:
- اگر یک کلیک در
، رویداد کلیک تبلیغ نمی شود و به لطف لغو می شودe.preventDefault();ولایتe.stopPropagation();بشر - مقدار ورودی کادر برعکس آن را می گیرد.
- کلیک و تغییر رویدادها به لطف DisputchEvent دوباره وارد می شوند.
به روزرسانی مقدار در فهرست مؤلفه والدین. می توان ساده کرد:
style="width:600px;padding:20px;">
style="margin-bottom:20px">Riot + BeerCSS
onclick={ clicked } value={ state.value } label={ state.value }/>
import cCheckbox from "./components/c-checkbox.riot";
export default {
components: {
cCheckbox
},
state: {
value: false
},
clicked (ev) {
this.update({ value: ev.target.value })
}
}
حالا ، حالت. ارزش ارزش رویداد را می گیرد کلیک کردن، و مقدار همیشه منعکس کننده وضعیت فعلی کادر انتخاب است.
مشاوره برای ساده تر کردن بیشتر: نیازی به ایجاد یک عملکرد “کلیک” نیست ، فقط یک خط برای به روزرسانی مقدار کافی است:
onclick={ (ev) => update({ value: ev.target.value }) } value={ state.value } label={ state.value }/>
تست های مؤلفه کادر انتخاب
دو روش برای آزمایش مؤلفه کادر انتخاب وجود دارد که در دو مقاله مختلف پوشیده شده است:
پایان
در اینجا ما یک مؤلفه کادر انتخاب با RiotJs با استفاده از BeerCSS ایجاد کرده ایم.
کد منبع مؤلفه کادر انتخاب در GitHub موجود است: https://github.com/steevepay/riot-beercss/blob/main/compentents/c-checkbox.riot
در صورت داشتن هرگونه سؤال یا نیاز به کمک در مورد شورش ، از اظهار نظر دریغ نکنید.
روز خوبی داشته باشید! سلامتی
