翻译时忽略指定的class属性

  1. translate.ignore.class.push('test');    //翻译时追加上自己想忽略不进行翻译的class name的值，凡是在这里面的，都不进行翻译。

翻译时追加上自己想忽略不进行翻译的class标签，凡是在这里面的，都不进行翻译。
也就是当前元素以及其子元素都不会被翻译。
如果有多个，可以加多行即可。
如果你想查看当前忽略哪些class，可直接执行 console.log(translate.ignore.class); 进行查看
它默认设置了一个’ignore’ 的 class name，也就是比如 <span class="ignore">你好</span> 这样的，加了 class=”ignore” 的标签，是不会被翻译的。

扩展用法

  1. translate.ignore.class.push('test', function(data){
  2.     return true;
  3. });

可以看到，这里多传入了一个 function(data){return true;}
也就是，如果第二个 function 参数不传递，或者传入 null，那这第二个参数它默认是被赋予了 function(data){return true;}
这第二个 function 参数，用于呼应第一个参数 class name 的规则判定。

其中data参数的解释：

data参数是一个对象，它是这样的： 

  1. {
  2.     element: input
  3.     node: placeholder, 
  4.     attribute: 'placeholder'
  5. }

注意，这个data参数，兼容以前旧版本的element 参数，完全不影响旧版本的使用

function参数返回值的说明

案例一：

这里进行举例说明，html部分为： 

  1. <div class="test">
  2.         <div>世界</div>
  3.         <div>大海</div>
  4.         <div>
  5.                 <div id="a">星辰</div>
  6.                 <div id="b">你好</div>
  7.         </div>
  8. </div>

其中 translate.js 设置忽略 class="test" 的部分不进行翻译，但是还想对其中的 <div id="b">你好</div> 这个元素进行正常翻译，那么 设置方式为：

  1. translate.ignore.class.push('test', function(data){
  2.         if(data.element.id === 'b'){
  3.                 return false;
  4.         }
  5.         return true;
  6. });

如此，即可对 <div class="test"> 中，除了 id 等于 ‘b’ 的元素外，其他的都不进行翻译，而这里id为’b’ 的元素，则会正常参与翻译。

案例二：

html部分为： 

  1. <div class="test">
  2.     <input type="text" title="这是一个输入框" placeholder="请输入内容" />
  3.     <p>我是文字</p>
  4. </div>

其中 translate.js 设置忽略 class="test" 的部分不进行翻译，但是还想对其中的 input 的 placeholder 属性的内容进行正常翻译，那么 设置方式为：

  1. translate.ignore.class.push('test', function(data){
  2.         if(data.element.tagName.toLowerCase() === 'input'){    //筛选定位 input 元素
  3.             if(data.attribute === 'placeholder'){ //定位到当前实际翻译的是 placeholder 属性，那么就不进行忽略，正常翻译它
  4.                 return false;
  5.             }
  6.         }
  7.         return true;
  8. });

常见问题-function自定义没生效

比如，要根据class 来进行忽略，设置的代码如： 

  1. translate.ignore.class.push('el-form-item__content', function (data) {
  2.     if (data.element.className == 'el-form-item__error') {
  3.         return false;
  4.     }
  5.     return true;
  6. });

上面这个设置中，el-form-itemcontent 这个class 中的内容不进行翻译，但是它其中的 class 等于 el-form-itemerror 的元素还能正常进行翻译。
实际运行后，却发现它没有正常生效， el-form-item__error 中的内容也没有正常进行翻译。这显然是设置的

  1. if (data.element.className == 'el-form-item__error') {
  2.     return false;
  3. }

没有生效！
这是因为，它里面的 element 获取到的class，也就是 element.className 获取到的，跟实际上你审核元素的时候，所看到的class 的值，它是不一样的 （这个是 elementUI 框架的使用者发现的问题），比如，增加一个打印 element 看看它是什么样的 ，全部的设置代码如下图： 

  1. translate.ignore.class.push('el-form-item__content', function (data) {
  2.     console.log(data.element)
  3.     if (data.element.className == 'el-form-item__error') {
  4.         return false;
  5.     }
  6.     return true;
  7. });

其中增加了 console.log(data.element)
控制台运行如下图：

但是我们通过 元素 来进行查看时，它确是这样的：

这里，便可以非常快的定位到问题了，元素里的class 的值，跟js里取的值，它俩是不一样的！
JS 中取的className，是 DOM 属性（Property），像是 VUE、React … 等都是有js渲染的页面，都是有js来操作DOM从而渲染出整个页面的，所以会遇到这种现象。
如果你也遇到了这种情况，可以参考这里的处理方式，先在js里打印出来，看看它是什么样的，然后再进行相关判断处理。
又或者用通用性比较强的 indexOf，而不是直接用 == 完全相等。 如： 

  1. translate.ignore.class.push('el-form-item__content', function (data) {
  2.     if (typeof(data.element.className) === 'string' && data.element.className.indexOf('el-form-item__error1') > -1) {
  3.         return false;
  4.     }
  5.     return true;
  6. });

这样即可完美解决

注意