Salesforce LWC中使用自定义标签

352 阅读1分钟

在LWC中,在页面使用的文本绝大数都需要根据用户的设置语言展示相应的翻译文本,经常用到的方法是创建好相应的自定义标签及翻译文本,在LWC中动态显示

1.创建自定义标签

转到设置-用户界面-自定义标签,新建标签及翻译文本。

image.png

2.LWC中导入自定义标签

// 导入标签
import labelSave from '@salesforce/label/c.lwcSave';

export default class ... {
    // 引用标签
    label = {
        save: labelSave
    };
}

3.HTML中使用标签

<div slot="footer">
    <lightning-button label={label.save}></lightning-button>
</div>

为了方便管理,可以新建一个自定义标签专用的LWC,其他LWC直接引用

在项目中新建LWC,命名labelUtility

labelUtility.js

import save from '@salesforce/label/c.lwcSave'
import cancel from '@salesforce/label/c.lwcCancel'

// ES6
const LABEL = {
    save,
    cancel
};

export {LABEL};

labelUtility.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" >
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

在其他LWC中引用标签

xxx.js

import { LightningElement, track } from 'lwc';
import {LABEL} from 'c/labelUtility';

export default class ... {
    // 引用标签
    @track label = LABEL;
}

xxx.html

<lightning-button label={label.cancel}></lightning-button>
<lightning-button label={label.save}></lightning-button>

参考文档:Access Labels