استایل‌دهی پویا اسمی بدون استفاده از کلاس‌ها

Dynamic Nominal Styling without Using Classes

برخی اوقات به جای اینکه بگوییم آیا فلان کلاس باید به عنصر ما متصل باشد، می خواهیم کدها را پردازش کرده و بگوییم کدام کلاس به عنصر ما متصل شود. برای تست این مسئله کد زیر را برای شما آماده کرده ام:

<div id="app">
    <div class="demo" @click="attachRed= !attachRed" :class="divClasses"></div>
    <div class="demo"></div>
    <div class="demo" :class="color"></div>
    <hr>
    <input type="text" v-model="color">
</div>

همانطور که می بینید در ابتدا به div سوم خصوصیتی به نام color را داده ام که به عنوان کلاس به آن اضافه خواهد شد. سپس یک تگ <hr> برای جدا کردن Div ها از قسمت بعد و در قسمت بعد نیز یک input گذاشته ام. این input از v-model استفاده می کند که یعنی یک two-way-binding را بین آن و خصوصیت color ایجاد کرده ایم. حالا باید خصوصیت color را نیز در قسمت جاوا اسکریپت کد خود تعریف کنیم:

new Vue({
    el: '#app',
    data: {
        attachRed: false,
        color: 'green'
    },
    computed: {
        divClasses: function () {
            return {
                red: this.attachRed,
                blue: !this.attachRed
            }
        }
    }
})

اگر این کدها را اجرا کنید، مربع سوم ما سبز رنگ می شود. همچنین می توانید در input پایین صفحه نام یکی از کلاس های blue یا red یا green را تایپ کنید. با تایپ این کلاس ها، کلاس مورد نظر به عنصر اضافه می شود بنابراین رنگ آن را می گیرد.

بنابراین بحث ما اینجا این نیست که «آیا کلاس سبز به عنصر اضافه شود؟» بلکه می گوییم «چه کلاسی به عنصر اضافه شود؟» و این مسئله از طریق input مشخص می شود. البته می توانستیم به جای input از هر روش دیگری استفاده کنیم. همچنین اگر بخواهید چند کلاس را به یک عنصر اضافه کنید باید آن ها را به صورت یک آرایه به عنصر پاس بدهید. مثال:

    <div class="demo" :class="[color]"></div>

با این کار می توانیم چندین کلاس را به یک عنصر بدهیم. مثلا اگر شرط قبلی را از div اول بگیرم و در اینجا قرار دهم چنین کدی خواهیم داشت:

    <div class="demo" :class="[color, {red: attachRed}]"></div>

یعنی اگر خصوصیت attachRed برابر true باشد، کلاس red نیز به این مربع اضافه می شود و از آنجا به بعد بحث اولویت در کدهای CSS است که کدام رنگ روی مربع اعمال شود.

استایل‌ دهی بدون استفاده از کلاس های CSS

تا این مرحله تمام استایل دهی های ما مربوط به استفاده از یکی از کلاس های CSS می شود و در مورد استایل دهی مستقیم صحبتی نکرده ایم. برای تمرین این مسئله کدهای HTML و جاوا اسکریپت زیر را برایتان آماده کرده ام:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <hr>
    <input type="text" v-model="color">
</div>

کدهای جاوا اسکریپت نیز به شکل زیر هستند:

new Vue({
    el: '#app',
    data: {
        color: 'gray'
    }
})

این کد بسیار ساده است و تنها خصوصیتی به نام color را داریم که به صورت پیش فرض روی gray (خاکستری) تنظیم شده است. این خصوصیت توسط یک input و با two-way-binding کنترل می شود تا بتوانیم آن را تغییر دهیم. به نظر شما چطور می توانیم استایل عناصر بالا را بدون استفاده از کلاس های CSS تغییر دهیم؟

حتما همه شما هم می دانید که این کار با جاوا اسکریپت عادی نیز قابل انجام است و مزیت Vue اینجاست که این کار را کمی ساده تر می کند. برای این کار باید style را به عنصر مورد نظر bind کنیم:

<div id="app">
    <div class="demo" :style="{backgroundColor: color}"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <hr>
    <input type="text" v-model="color">
</div>

با این کار خصوصیت color را مستقیما به background-color داده ام! حالا هر چه در input خودمان بنویسیم در این قسمت قرار می گیرد (مثلا blue یا red و غیره). توجه داشته باشید که من کدهای CSS را پاک کرده ام و دیگر کلاسی به نام blue یا red نداریم.

نکته: همانطور که در جلسات قبل گفته بودم نمی توانیم در نام خصوصیات از علامت های ویژه مانند خط فاصله استفاده کنیم بنابراین برای نوشتن background-color دو راه جایگزین داریم. یا باید background-color را درون single quotation قرار بدهید (مثل ‘background-color’) و یا اینکه خط فاصله را حذف کرده و از همان روش جاوا اسکریپتی عمل کنیم؛ یعنی C در color را با حرف بزرگ بنویسیم (مثل backgroundColor).

باید دوباره تاکید کنم که استفاده از input اینجا آسان است، به همین دلیل من از input استفاده کرده ام. شما می توانید از هر روش دیگری استفاده کنید (شاید مقدار color با یک کد نامتقارن و از طرف سرور مشخص می شود). همچنین نیازی نیست که حتما شیء استایل خود را به شکل بالا پاس بدهید بلکه می توانید از خصوصیات computed استفاده نمایید:

new Vue({
    el: '#app',
    data: {
        color: 'gray',
        width: 100
    },
    computed: {
        myStyle: function () {
            return {
                backgroundColor: this.color,
                width: this.width + 'px'
            }
        }
    }
})

من در کد بالا خصوصیت width را نیز تعریف کرده ام و فعلا آن را روی 100 گذاشته ام. در نهایت یک خصوصیت computed تعریف کرده ایم. همانطور که گفتم خصوصیت های computed باید تابع باشند. این تابع شیء ای را برمی گرداند که دارای دو خصوصیت backgroundColor و width است. توجه کنید که حتما باید px را به عدد 100 اضافه کنید تا به درستی کار کند. این مسئله به نوشتن کدهای CSS مربوط است و به جاوا اسکریپت ربطی ندارد. اگر کدهای جاوا اسکریپت را به شکل بالا بنویسید می توانید به شکل زیر از آن ها در کد HTML استفاده کنید:

<div id="app">
    <div class="demo" :style="{backgroundColor: color}"></div>
    <div class="demo" :style="mySyle"></div>
    <div class="demo"></div>
    <hr>
    <input type="text" v-model="color">
    <input type="text" v-model="width">
</div>

من در اینجا یک input دیگر نیز اضافه کرده ام تا مسئول تنظیم width باشد. در نهایت اگر کدهای این صفحه را اجرا کنید، هم می توانید رنگ و هم عرض (width) مربع دوم را تعیین کنید. یک مثال ساده از این کار ساخت یک progress bar است که width آن دائما به روز رسانی می شود.

البته نکته ای باقی مانده که باید به شما نشان بدهم. ما می توانیم به شکل زیر نیز عمل کنیم:

    <div class="demo" :style="{backgroundColor: color}"></div>
    <div class="demo" :style="mySyle"></div>
    <div class="demo" [myStyle, {height: width + 'px'}]></div>

در Div سوم از یک آرایه استفاده کرده ام که عضو اول آن myStyle و عضو دوم آن یک شیء است که height را تنظیم می کند. با این کار می خواستم مطمئن شوم که شما با استفاده ترکیبی از آرایه و شیء در استایل دهی ها آشنا هستید.

نکته: اگر از style binding استفاده نمایید (مانند مثال های بالا که در آن style: وجود دارد – اگر یادتان باشد style: مخفف v-bind:style بود) فریم ورک Vue به صورت خودکار پیشوند های CSS را نیز به دستورات CSS شما اضافه می کند تا در تمام مرورگرها به خوبی کار کنند.

این فصل مربوط به تعامل شیء Vue با DOM بود. امیدوارم از اولین فصل آموزشی ما لذت برده باشید.