在vue項(xiàng)目中,有時(shí)候需要使用兩套不同的css樣式來適配不同的場景或設(shè)備。這里我們介紹一種簡單的實(shí)現(xiàn)方法。
// 引入兩個(gè)css文件,分別存放于src/assets/css目錄下 import '@/assets/css/style1.css'; import '@/assets/css/style2.css'; export default { name: 'App', data() { return { isMobile: false // 標(biāo)識是否是手機(jī)端 } }, mounted() { // 計(jì)算是否為手機(jī)端 this.isMobile = this.$mq === 'mobile' ? true : false; }, computed: { styleSheet() { // 根據(jù)isMobile值返回相應(yīng)的css文件 return this.isMobile ? 'style1' : 'style2'; } }, methods: { loadStyleSheet() { // 動(dòng)態(tài)插入link標(biāo)簽 const head = document.querySelector('head'); const link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = `./${this.styleSheet}.css`; head.appendChild(link); } }, watch: { styleSheet() { // 監(jiān)聽styleSheet值的變化 const links = document.querySelectorAll('link'); links.forEach(link =>{ if (link.href.indexOf('style') !== -1) { link.remove(); } }) this.loadStyleSheet(); } } }
我們在組件中定義了一個(gè)名為styleSheet的計(jì)算屬性,用于根據(jù)isMobile值返回相應(yīng)的css文件名。然后用loadStyleSheet()方法動(dòng)態(tài)插入link標(biāo)簽,實(shí)現(xiàn)動(dòng)態(tài)加載css。
這樣就可以在vue項(xiàng)目中實(shí)現(xiàn)同時(shí)加載不同的css樣式的功能了。