반응형
Vuejs에서 언어를 선택하여 방향 변경
언어 선택 옵션이 있습니다.아랍어를 선택하면 방향이 바뀌어요.
* {
direction: rtl!important;
}
이걸 쓰고 있는데 갑자기 오른쪽에서 왼쪽으로 방향이 바뀌었어요.하지만 Methods를 사용하여 어떻게 하면 좋을까요?
methods: {
languageSelection() {
if(this.lang == 'arb') {
document.getElementsByTagName("*")[0].style.direction = "rtl!important";
document.getElementsByTagName("html")[0].style.direction = "rtl!important";
document.getElementsByTagName("body")[0].style.direction = "rtl!important";
}
}
}
위의 코드가 작동하지 않습니다!만약 CSS 파일을 추가할 수 있다면 저는 더 좋을 것 같습니다.예를 들어 다음과 같습니다.
languageSelection() {
if(this.lang == 'arb') {
// active a css file like: style-rtl.css
}
}
하지만 이게 어떻게 가능하죠?
좋아요. 그럼 당신이getElementsByTagName("*")[0]당신은 아마 이해하게 될 것이다.<html>요소.다음 줄에서 액세스하고 있는 것과 같은 요소입니다.
모든 요소를 변경하려면direction컬렉션에 대해 반복해야 합니다.
const elems = document.getElementsByTagName("*")
for (let elem of elems) {
elem.style.direction = 'rtl'
}
그러나 이것은 여전히 다음을 포함할 것이다.<script>,<style>,<meta>tags. 이는 최선의 솔루션이 아닙니다.
나의 솔루션
css에 클래스를 만듭니다.
html.is-rtl * {
direction: rtl;
}
그리고 오른쪽에서 왼쪽으로 읽을 언어를 선택할 때 클래스를 전환합니다.
languageSelection() {
if (this.lang == 'arb') {
document.querySelector('html').classList.add('is-rtl')
}
}
스타일시트를 생성하여 헤드에 추가할 수 있습니다.
languageSelection() {
if(this.lang == 'arb') {
const style = document.createElement('style');
style.innerHTML = `*{direction:rtl!important}`;
document.head.appendChild(style);
}
}
안에서 관리해야 합니다.App.vue. 선택한 언어에 기반한 커스텀 css 클래스를 에 추가합니다.#App element.
<template>
<div id="app" :class="{'dir-rtl': isRtl}">
...
</div>
</template>
<script>
export default {
computed: {
isRtl () {
return this.lang === 'arb'
}
}
}
</script>
<style lang="scss">
.dir-rtl {
direction: rtl !important;
}
</style>
저장 및 변경하기 가장 좋은 장소langvuex 스토어입니다.
언급URL : https://stackoverflow.com/questions/64410664/change-direction-with-selecting-language-in-vuejs
반응형
'source' 카테고리의 다른 글
| 2D 어레이에서 반복할 때 루프 순서가 성능에 영향을 미치는 이유는 무엇입니까? (0) | 2022.08.12 |
|---|---|
| vue.for에서 html 요소를 사용하지 않음v-for (0) | 2022.08.12 |
| vue-grid-layout 항목 내부에 구성 요소 전달 (0) | 2022.08.12 |
| ld를 골드로 대체 - 경험 있습니까? (0) | 2022.08.12 |
| IntelliJ IDEA에서 .jar 파일을 만들거나 JAR을 내보내는 방법(Eclipse Java 아카이브 내보내기 등) (0) | 2022.08.12 |