как переключаться между двумя файлами стилей css (rtl, ltr) vue.js

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

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

и bootstrap-rtl в теге заголовка внутри 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;
            }
        }

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


vue.js right-to-left css vuejs2 vue-i18n
person Mariam Attallah    schedule 21.09.2019    source источник
comment
Вы пробовали вместо того, чтобы просто импортировать их в main.js, иметь функцию, которая импортирует на основе параметра (по умолчанию вы можете сделать это в любом направлении, которое хотите), затем вы можете вызвать эту функцию, которая находится на main.js для переключения между стилями?   -  person Michael    schedule 22.09.2019
comment
более конкретные селекторы css выиграют, поэтому, если вы сделаете все свои пользовательские css по идентификаторам, все будет в порядке.   -  person kpie    schedule 08.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

это было решено с помощью sass, поместите все rtl css внутри основного класса .en и все ltr css внутри класса .ar и переключитесь между ними по условию

<div id="app" v-bind:class="[{'ar' : $i18n.locale=='ar' },{'en':$i18n.locale=='en'}]"></div>
person Mariam Attallah    schedule 11.11.2019