openjs

Appearance

国际化 Lang ​

基本使用 ​

需要国际化的元素添加open-lang属性，值为国际化对应的字段名

默认文本

显示代码
html
<div>
	<p open-lang="text">默认文本</p>
</div>
<div>
	<button class="open-btn open-btn-primary" bg @click="onChinese">中文</button>
	<button class="open-btn open-btn-primary" bg @click="onEnglish">英文</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { lang } from '../public/openjs@0.1.0-beta.esm.js';

	// 中文文本
	let zh = {
		text: '这是一段中文文本'
	}

	// 英文文本
	let en = {
		text: 'this is a chinese text'
	}

	onMounted(()=>{
		// 初始化语言设置
		lang.config({
			lang: 'zh',//初始化语言类型
			data: {
				zh: zh,// 不同类型数据
				en: en
			}
		});
	})
	
	// 切换中文
	const onChinese = function(){
		// 切换语言类型
		lang.change('zh');
	}

	// 切换英文
	const onEnglish = function(){
		// 切换语言类型
		lang.change('en');
	}
</script>
<div>
	<p open-lang="text">默认文本</p>
</div>
<div>
	<button class="open-btn open-btn-primary" bg @click="onChinese">中文</button>
	<button class="open-btn open-btn-primary" bg @click="onEnglish">英文</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { lang } from '../public/openjs@0.1.0-beta.esm.js';

	// 中文文本
	let zh = {
		text: '这是一段中文文本'
	}

	// 英文文本
	let en = {
		text: 'this is a chinese text'
	}

	onMounted(()=>{
		// 初始化语言设置
		lang.config({
			lang: 'zh',//初始化语言类型
			data: {
				zh: zh,// 不同类型数据
				en: en
			}
		});
	})
	
	// 切换中文
	const onChinese = function(){
		// 切换语言类型
		lang.change('zh');
	}

	// 切换英文
	const onEnglish = function(){
		// 切换语言类型
		lang.change('en');
	}
</script>

局部翻译 ​

默认只要元素带有open-lang属性,并且值为正确字段名就会自动翻译

局部翻译，给定一个id，只会对id元素下的子元素进行翻译

我不会被翻译

我会被翻译

显示代码
html
<div>
	<p open-lang="text">我不会被翻译</p>
</div>
<div id="lang">
	<p open-lang="lang">我会被翻译</p>
</div>
<div>
	<button class="open-btn open-btn-primary" bg @click="langChinese">局部中文</button>
	<button class="open-btn open-btn-primary" bg @click="langEnglish">局部英文</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { lang } from '../public/openjs@0.1.0-beta.esm.js';

	// 中文文本
	let zh = {
		lang: '局部翻译'
	}

	// 英文文本
	let en = {
		lang: 'module lang'
	}

	onMounted(()=>{
		// 初始化语言设置
		lang.config({
			lang: 'zh',//初始化语言类型
			data: {
				zh: zh,// 不同类型数据
				en: en
			}
		});
	})
	
	// 局部翻译中文
	const langChinese = function(){
		lang.module('#lang','zh');
	}

	// 局部翻译英文
	const langEnglish = function(){
		lang.module('#lang','en');
	}
	
</script>
<div>
	<p open-lang="text">我不会被翻译</p>
</div>
<div id="lang">
	<p open-lang="lang">我会被翻译</p>
</div>
<div>
	<button class="open-btn open-btn-primary" bg @click="langChinese">局部中文</button>
	<button class="open-btn open-btn-primary" bg @click="langEnglish">局部英文</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import { lang } from '../public/openjs@0.1.0-beta.esm.js';

	// 中文文本
	let zh = {
		lang: '局部翻译'
	}

	// 英文文本
	let en = {
		lang: 'module lang'
	}

	onMounted(()=>{
		// 初始化语言设置
		lang.config({
			lang: 'zh',//初始化语言类型
			data: {
				zh: zh,// 不同类型数据
				en: en
			}
		});
	})
	
	// 局部翻译中文
	const langChinese = function(){
		lang.module('#lang','zh');
	}

	// 局部翻译英文
	const langEnglish = function(){
		lang.module('#lang','en');
	}
	
</script>

API ​

API描述
lang.config(options)初始化配置数据
lang.change(type)更改语言类型
lang.module(id,type)局部修改语言类型

  • lang.use(options) ​

属性名描述类型必填默认值
lang初始化语言类型string是-
data语言数据包object是-
default默认语言，当切换语言找不到时，回退到默认语言string否-

使用方法

js
// 中文文本
let zh = {
	text: '这是一段中文文本',
	lang: '局部翻译'
}

// 英文文本
let en = {
	text: 'this is a chinese text',
	lang: 'module lang'
}

// 配置参数以及初始化页面语言类型
lang.config({
	lang: 'zh',
	data: {
		zh: zh,
		en: en
	},
	default: 'zh'
});
// 中文文本
let zh = {
	text: '这是一段中文文本',
	lang: '局部翻译'
}

// 英文文本
let en = {
	text: 'this is a chinese text',
	lang: 'module lang'
}

// 配置参数以及初始化页面语言类型
lang.config({
	lang: 'zh',
	data: {
		zh: zh,
		en: en
	},
	default: 'zh'
});

  • lang.change(type) ​

参数名描述类型必填默认值
type当前要切换的语言类型名字string是-

使用方法

js
lang.change('en');//切换英文类型
lang.change('en');//切换英文类型

  • lang.module(id,type) ​

参数名描述类型必填默认值
id指定翻译的元素idstring是-
type当前要切换的语言类型名字string是-

使用方法

js
lang.module(id,'en');//切换英文类型
lang.module(id,'en');//切换英文类型