Vue 的CSS之deep語法

::v-deep

我們知道，在Vue組件的style標(biāo)簽里，加上scoped屬性，會使寫的樣式只影響當(dāng)前的組件，不會影響到子組件。

去掉scoped就可以了，但是去掉scoped同時也會導(dǎo)致其他問題，可能會影響到別的。

有什么方法能在父組件的css里影響子組件的樣式，同時保留scoped呢？

deep有兩種寫法，::v-deep兼容性最強(qiáng)， 優(yōu)先使用這個。

使用方法：在想要影響子組件的那個元素的選擇器的前邊加上::v-deep

//Statistics.vue父組件
<template>
   <Layout>
       <Type/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep li{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>

Type子組件里有ul和li元素，想要在父組件里改變它的樣式，就在選擇器前加::v-deep，表示深入到子組件里邊找這個選擇器。可以發(fā)現(xiàn)成功影響了自組件的樣式。

可是如果子組件里有很多個li，或者li嵌套li，那只在外邊說深入里邊的li不準(zhǔn)確。怎么精確的定位到子組件里的某個元素呢？

classPrefix 前綴

可以給子組件傳一個prop，是classPrefix。在子組件里判斷，如果外邊給傳了這個classPrefix，那某個元素就擁有了一個class，叫做"xxx-item",xxx是classPrefix變量的值。

然后在父組件的css里，就可以deep 這個加了前綴的選擇器，就可以精準(zhǔn)找到這個元素了。

給元素綁定class

給一個元素添加class可以使用&&，也可以使用對象形式。

<li :class="type==='-' && 'selected'"
                @click="selectType('-')">支出
</li>

如果前邊的表達(dá)式為True，這個元素就擁有了后邊的class。如果我這時再給它添加一個class綁定，會出錯，不能同時有兩個:class，所以升級使用對象

<li :class="{selected:type==='-',
            [classPrefix+'-item']:classPrefix}"
                @click="selectType('-')">支出
</li>

綁定的class是一個對象，里邊是key-value。表示如果value表達(dá)式為真，我就擁有了key這個class。因為對象可以有很多個鍵值對，所以使用對象可以同時動態(tài)綁定多個class。

我要綁定的第二個class，是xxx-item，xxx是父組件要給我傳的一個prop。如果給傳了，即如果classPrefix這個外部屬性給傳了，我就擁有了以它為前綴的一個class?？墒沁@個classPrefix是一個變量，在這里使用${}插值不合法。

有ES6的新語法：如果一個key里邊有變量，就用[]把這個key包起來，里邊用字符串相加的方式表達(dá)。

總結(jié)

在子組件的特定元素上綁定了classPrefix的類之后，在父組件的css里就可以deep 這個新加的class找到這個元素了。

<template>
   <Layout>
       <Type :type.sync="yyy" class-prefix="xxx"/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep .xxx-item{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>

使用classPrefix在以下場景非常好用：一個父組件使用了多個一樣的子組件，但是又需要不同的樣式，就可以給不同的子組件傳不同的classPrefix，那么里邊的具體某個元素在不同的使用下就有獨特的class。這樣每個組件的樣式都不互相影響。

Object.freeze

凍結(jié)，使它的地址和內(nèi)容都不會被改變

如果一個數(shù)組被聲明成常量，還是可以給它添加元素的。但是被凍結(jié)之后，就連添加元素都不行了。

關(guān)于Vue和ts的配合問題

如果使用了Vuex，當(dāng)在index.ts里定義了store時，我們自己可以指定它的類型，指定之后，在index.ts里是有類型的。

但是出了這個文件，在組件里的ts里使用時，發(fā)現(xiàn)$store的類型變成了any，state的類型也變成了any。

也就是說，定義的時候定義了類型，但是使用的時候，無法把類型正確的傳出來。這是因為在一個初始化文件里，已經(jīng)把$store的類型寫死了是any。

那只能在使用的時候，使用as語法，強(qiáng)制類型轉(zhuǎn)換。

JSON是不支持Date類型的數(shù)據(jù)的。所以在存進(jìn)localStorage里之前，要把一個表示日期的變量聲明成string類型。

然后生成日期的時候，使用toISOString()方法把日期轉(zhuǎn)成字符串。

record2.date=new Date().toISOString()

ISO8601和dayjs庫

一. ISO8601

國際標(biāo)準(zhǔn)ISO 8601，是國際標(biāo)準(zhǔn)化組織的日期和時間的表示方法

我們關(guān)注日期和時間的組合表示法

合并表示時，要在時間前面加一大寫字母T，如要表示東八區(qū)時間2004年5月3日下午5點30分8秒，可以寫成2004-05-03T17:30:08+08:00

1. Date對象=>ISO字符串

new Date()可以得到一個當(dāng)前時間的date對象，是中國標(biāo)準(zhǔn)時間。

我們通常使用toISOString() 把這個Date對象轉(zhuǎn)換成ISO表示方式的字符串。

2. ISO字符串=>Date對象

比如我們有一段ISO字符串，把這個字符串放入Date.parse()里，會得到一串?dāng)?shù)字，再把這串?dāng)?shù)字放到new Date() 里，就可以還原成Date對象。

JS操作時間的庫-dayjs

安裝

yarn add dayjs

使用

import dayjs from 'dayjs';

dayjs() 就相當(dāng)于new Date() ，返回一個當(dāng)前時間的對象。這個對象有很多API,操作這個時間。

也可以傳進(jìn)去一段ISO字符串，轉(zhuǎn)換成dayjs對象

beautify(string: string){
            const day=dayjs(string)
            const now=dayjs()
            if(day.isSame(now,'day')){
                return '今天'
            }else if(day.isSame(now.subtract(1,'day'),'day')){
                return '昨天'
            }else if(day.isSame(now.subtract(2,'day'),'day')){
                return '前天'
            }else if(day.isSame(now,'year')) {
                return day.format('M月M日')
            }else {
                return day.format('YYYY年M月D日')
            }
}

這個參數(shù)字符串是'2020-5-30'這樣的字符串，是通過把Date對象進(jìn)行.ISOString()轉(zhuǎn)換成ISO標(biāo)準(zhǔn)時間，然后以T分隔出來的日期字符串。

我們想根據(jù)不同的情況進(jìn)行不同的展示。比如，顯示今天，昨天，前天。

有時候我們想把一堆日期排序，就需要比較日期的大小。如果現(xiàn)在的每一個日期是ISO字符串的形式，字符串可以使用> <=來比較，但是如果想相減呢?

字符串是不支持相減的。只能把他們變成數(shù)字，取值，再相減

dayjs(string).valueOf()

傳進(jìn)dayjs里，變成對象，調(diào)用valueOf，就變成值了，這時就可以相減了。

JSON.parse的返回值沒有類型

function clone<T>(data: T): T{
    return JSON.parse(JSON.stringify(data))
}
export default clone

對于數(shù)組，對象這類數(shù)據(jù)類型，有時我們需要克隆另外一個相同的數(shù)據(jù)，但是地址不一樣。為了不改變原來的對象。

可以先序列化，再反序列化，就得到了和原來內(nèi)容一樣，但地址不同的對象。

但是JSON.parse的返回值是any類型的，有時我們還需要對這個返回值做一些操作，ts就不知道它是什么類型了。

所以我們可以指定，傳進(jìn)去的數(shù)據(jù)是什么類型，克隆之后的返回值就是什么類型。比如T,然后ts會說不知道T在哪里聲明了。所以用一個<>聲明一下，再使用。

然后在調(diào)用clone函數(shù)的時候，傳進(jìn)去的參數(shù)要指明類型。這樣克隆完的就還是一樣的類型。

以上就是vue實現(xiàn)列表展示示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue列表展示的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論