как переключаться между двумя файлами стилей CSS (RTL, LTR) Vue.js - PullRequest
Новая
       57

как переключаться между двумя файлами стилей CSS (RTL, LTR) Vue.js

1 голос
/ 21 сентября 2019

У меня есть проект в Vue.js с двумя стилями на арабском и английском. Стиль vuebootstrap импортируется следующим образом в main.js 

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

и bootstrap-rtl в теге head внутриindex.html наряду с моим настраиваемым style.css

проблема здесь заключалась в том, что импортированные файлы переопределяли мой настраиваемый css-файл, поэтому я также импортировал в main.js 

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '../public/css/erx-style-ar.css'

вЧтобы переключиться между файлами RTL и LTR CSS, я собирался выбрать его по id и отключить файл с помощью vuei18.как следует 

<a role="button" @click="changeLocale('en')" v-if="$i18n.locale=='ar'">En</a>
<a role="button" @click="changeLocale('ar')" v-if="$i18n.locale=='en'">Ar</a>

и в функции 

changeStyle(locale) {
            if (locale === 'ar') {
                document.getElementById("style-ar").disabled = false;
                document.getElementById("bootstrap-rtl").disabled = false;
                document.getElementById("style-en").disabled = true;
            }
            if (locale === 'en') {
                document.getElementById("style-ar").disabled = true;
                document.getElementById("bootstrap-rtl").disabled = true;
                document.getElementById("style-en").disabled = false;
            }
        }

, теперь я на самом деле не знаю, как лучше всего решить эту ситуацию.

...