Vue를 사용하여 주제 변경 가능

Vue를 사용하여 주제 변경 가능

상태 관리를 위해 Vue.js 2.0과 Vuex를 사용하는 응용 프로그램을 만들고 있습니다.이른바 「브랜딩」의 가능성을 실장할 필요가 있습니다.즉, 유저는, 어카운트의 테마를 선택할 수 있고, 그 후에 애플리케이션의 스타일에 적용할 특정의 색을 선택할 수 있는 능력이 필요합니다.

개념 증명으로 구현한 첫 번째 옵션은 Vuex를 사용하여 응용 프로그램스토어에 원하는 스타일을 Vuex와 함께 오브젝트로 저장하는 것이었습니다.Vuex는 Vuex를 적용해야 하는 요소의 스타일에 바인드하기 위해 사용했습니다.색상을 선택하기 위한 색상 선택기는 상태변환을 트리거하여 색상을 변경합니다.이것은 완전히 잘 작동하며 적용되어야 하는 html 요소에서 :style ="$store.state.brand"와 같은 표현만 사용할 수 있기 때문에 사용하기조차 그리 어렵지 않습니다.색상을 변경하면 모든 컴포넌트에서 업데이트가 됩니다.이 옵션은 매우 직선적이며 사용자가 원하는 색상을 컬러 피커에서 선택할 수 있다는 장점이 있습니다.그러나 복잡한 스타일(호버에서의 색상 변경, 탭 또는 페이지의 활성 클래스 등)을 구현할 수 없기 때문에 디자인 측면에서는 한계가 있습니다.

그래서 고객에게 제안하고 싶은 두 번째 옵션은 사용자가 선택할 수 있는 일련의 정의된 테마를 갖는 것입니다.이러한 테마는 css 파일에 정의됩니다(sass/less 또는 이와 유사한 사용).지금 구현해야 할 것은 다음과 같습니다.

예를 들어, 사용자가 테마를 선택할 때, 예를 들어, 적절한 css 파일에서 응용 프로그램의 스타일을 로드하고 변경 사항을 반영하도록 응용 프로그램을 새로고침합니다.이를 위해 Vue에서 가장 효율적이고 모범적인 방법은 무엇입니까?

그래서 혹시나 필요할까 봐 스타일링된 컴포넌트를 사용하게 되었습니다.자세한 것은, https://www.npmjs.com/package/vue-styled-components 를 참조해 주세요.지정된 테마의 색상(버튼, 라디오 버튼, 헤더, 메뉴 항목 등)을 수신해야 하는 요소를 스타일링한 컴포넌트를 만들어 소품으로 전달했습니다.프로포트의 가치는 Vuex 스토어에서 얻을 수 있기 때문에 애플리케이션 전체에서 일관성이 있습니다.이 접근방식의 장점은 클라이언트의 색상 선택이 무제한이라는 것입니다(당사가 검토하던 사전 정의된 주제와 비교).또 다른 장점은 클라이언트가 컬러 피커를 통해 vuex 스토어의 색상을 변경하고 테마가 실시간으로 변경되는 것을 볼 수 있다는 것입니다.마지막으로 css 실렉터를 사용하여 보다 복잡한 스타일을 작성하는 등 css의 모든 기능을 사용할 수도 있습니다.일반 vue 스타일 바인딩에서는 이 작업을 수행할 수 없습니다.자세한 내용이 필요하시면 언제든지 연락주세요.

언급URL : https://stackoverflow.com/questions/45084573/changeable-themes-with-vue