Created
July 22, 2019 10:01
-
-
Save ik5/a56acef0c7ccf46221bd66ed6f550bac to your computer and use it in GitHub Desktop.
solving layout changes in Vue.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <ul class="language-selector"> | |
| <li | |
| v-for="(language, idx) in $i18n.availableLocales" | |
| :class="{selected: language === $i18n.locale}" | |
| > | |
| <a @click="changeLayout(language, $t(`languages.list[${idx}].bidi`))> | |
| <Flag | |
| :country="$t(`languages.list[${idx}].country-code`)" | |
| :title="language" | |
| :class="{clickable: language !== $i18n.locale}" | |
| /> | |
| </a> | |
| </li> | |
| </ul> | |
| </template> | |
| <script> | |
| import Flag from "../componenets/languages/flags.vue"; | |
| export default { | |
| methods: { | |
| changeLayout(language, isBidi) { | |
| if (language === this.$i18n.locale) { | |
| return; | |
| } | |
| let newLayout = ""; | |
| if (isBidi === "rtl") { | |
| newLayout = "/css/bidi-layout.css"; | |
| } | |
| document.getElementById("bidi") = newLayout; | |
| this.$i18n.locale = language; | |
| this.$emit("new-language", language); | |
| } | |
| }, | |
| componenets: { | |
| Flag | |
| } | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |
| <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic"> | |
| <link rel="stylesheet" href="<%= BASE_URL %>css/main-layout.css"> | |
| <link rel="stylesheet" href="<%= BASE_URL %>css/additional-fonts.css"> | |
| <link rel="stylesheet" id="bidi" href=""> | |
| </head> | |
| <body class="layout"> | |
| </body> | |
| <section id="app"> | |
| </section> | |
| <!-- built files will be auto injected --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment