Vue 中英文组件样式写法

Vue 项目国际化样式处理

一、全局（main.js）添加自定义指令：

v-lang 会自动添加语言对应的 class 【中：zh，英：en】

Vue.directive('lang', {// 当被绑定的元素插入到 DOM 中时……inserted(el) {el.classList.add(i18n.locale);},
});

二、在需要兼容英文样式的组件内添加指令

<div v-lang class="wrapper"><h3 class="title"><span>首页</span></h3><!-- en目录、cn目录 --><img src="/images/home/${i18n.locale}/test.png"><!-- 或同一文件夹 --><img src="/images/home/test_${i18n.locale}.png"><img :src="imgSrc">
</div><script>export default{name: 'home',data() {return {imgSrc: require(`/images/home/${i18n.locale}/test1.png`)}}}
</script>

三、编写英文对应的指令样式

添加 scoped 避免污染全局样式

<style lang="scss" scoped>
// en style
.en.wrapper .title span {font-size: 12px;
}
</style>

原来的 title 样式

<style lang="scss" scoped>
.wrapper {.title {display: flex;color: #fff;height: $header-height;line-height: $header-height;span {padding: 0 28px;font-size: 20px;}}
}
</style>

当以后如果再有其他语言时，只需要再写一份对应语言的 style 就可以了，使用@import方式引入

Vue 中英文组件样式写法相关推荐

15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
Ant design vue Popover组件样式设置无效
审查元素的时候在.ant-popover-title里加上background-color:red;是有效的,但是我自己写代码的时候,这样写 /deep/.ant-popover-title{back ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
vue组件样式穿透种类 /deep/ ::v-deep ＞＞＞。the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() in
vue组件样式穿透种类 /deep/ ::v-deep >>> vue项目打包时警告:the >>> and /deep/ combinators have bee ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
vue 单选框样式_作为一位Vue工程师，这些开发技巧你都会吗？
来源 | http://www.cnblogs.com/chanwahfung/p/12543103.html 路由参数解耦一般在组件内使用路由参数,大多数人会这样做: export default ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...

Vue 中英文组件样式写法

Vue 中英文组件样式写法

一、全局（main.js）添加自定义指令：

二、在需要兼容英文样式的组件内添加指令

三、编写英文对应的指令样式

Vue 中英文组件样式写法相关推荐

最新文章

热门文章

Vue 中英文 组件 样式 写法

Vue 中英文 组件 样式 写法

一、全局（main.js）添加自定义指令：

二、在需要兼容 英文 样式的组件内添加指令

三、编写英文对应的指令样式

Vue 中英文 组件 样式 写法相关推荐

最新文章

热门文章

Vue 中英文组件样式写法

Vue 中英文组件样式写法

二、在需要兼容英文样式的组件内添加指令

Vue 中英文组件样式写法相关推荐