翻译时忽略指定的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 则是当前扫描到的，已经被 class name 所标记影响范围的某个html元素，针对这个元素进行进一步判定，是否真的忽略对它进行翻译。（注意，它一定是个元素，而不是什么别的node节点、#text 等）
  • data.node 当前实际要参与翻译的节点。
    如果是 <p>123</p> 这种元素，那上面传入的 element 参数跟这里的node参数的值都是相同的，都是这个p元素
    如果是 <input type="text" title="我是title标签的内容" placeholder="请填写你的姓名" /> 这种元素，当前翻译的是其中的 placeholder 属性的内容，那么传入的 element 参数还是 input 这个元素，因为 element 始终都是传入一个当前翻译所在的元素（即使实际上进行翻译的是元素中某个属性的值）， 而 node 参数则是 placeholder 这个实际进行翻译的节点属性（打印它时 console.log(node); 会输出 #text ）
  • data.attribute 当前实际要进行翻译的 node 节点，是否是 element 传入元素其中的某个属性。
    如果是 ‘’ 空字符串 ，则是当前要翻译的 node 它等于 element，是一个元素
    如果是长度大于0的字符串 ，那么当前翻译的 node 数据是 element 参数的某个属性，而这个属性的名字，便是 attribute 的值
    它的值如： ‘title’、’alt’、’placeholder’ … 这种属于正常html标签的某个属性的名字

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

function参数返回值的说明

  • 如果这个方法返回true则是遵循忽略class name 的规则，不对这个传入的element元素进行翻译；
  • 如果返回false，则是不遵循class name 的规则，没有达到忽略class name 的条件，对于element 这个元素，依旧正常进行翻译，所设置的 class name 对这个 element 这个元素无效。

案例一：

这里进行举例说明，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. });

这样即可完美解决

注意