mirror of
https://gitee.com/layui/layui.git
synced 2025-06-28 13:34:27 +08:00
16 KiB
16 KiB
<html>
<head>
</head>
{{!
{{ const i18n = layui.i18n; }}
README
code
colorpicker
dropdown
form
laydate
layer
table
transfer
tree
upload
{{= i18n.$t('custom.switchLanguage') }}:
简体中文
English
Français
繁體中文
README
{{= i18n.$t('custom.readme.description') }}
- locale: {{= i18n.config.locale }}
- Date: {{= new Date().toLocaleDateString(i18n.config.locale) }}
- Hello: {{= i18n.$t('custom.readme.hello') }}
code content
Dropdown
flow
{{= i18n.$t('custom.form.required') }}
{{= i18n.$t('custom.form.phone') }}
{{= i18n.$t('custom.form.email') }}
{{= i18n.$t('custom.form.date') }}
{{= i18n.$t('custom.form.select') }}
AAA
BBB
CCC
DDD
EEE
{{= i18n.$t('custom.form.submit') }}
{{= i18n.$t('custom.form.reset') }}
Alert
Prompt
Photos
laypage
Upload
utils
timeAgo:
toDateString:
!}}
toDateString:
<script src="{{= d.layui[2].cdn.js }}"></script>
<script>
layui.use(async function () {
const {
$, colorpicker, dropdown, flow, form,
i18n, laydate, laypage, laytpl, layer,
table, transfer, tree, upload, util
} = layui;
// 演示异步加载组件语言包
const base = 'https://cdn.jsdelivr.net/gh/layui/layui@0a0e64347166796cf42ac6a8ee08b27082f36c02/examples/i18n/';
const { default: en } = await import(`${base}en.js`);
const { default: fr } = await import(`${base}fr.js`);
const { default: zhHK } = await import(`${base}zh-HK.js`);
// 组件 i18n 配置
i18n.set({
locale: layui.data('layui-i18n-test').locale || 'zh-CN', // 指定语言
messages: {
en, // 扩展英语
fr, // 扩展法语
'zh-HK': zhHK, // 扩展繁体中文
},
});
// 业务 i18n 配置
i18n.set({
messages: {
'zh-CN': {
custom: {
switchLanguage: '切换语言',
readme: {
description: 'layui.i18n.$t 是私有方法（未文档化），此处仅用于演示',
hello: '你好',
},
form: {
required: '验证必填项',
phone: '验证手机号',
email: '验证邮箱',
date: '验证日期',
select: '选择框',
submit: '立即提交',
reset: '重置',
placeholder: '请输入'
}
}
},
'en': {
custom: {
switchLanguage: 'Switch Language',
readme: {
description: 'layui.i18n.$t is a private method (undocumented), used here for demonstration only.',
hello: 'Hello',
},
form: {
required: 'Required',
phone: 'Telephone',
email: 'Email',
date: 'Date',
select: 'Select',
submit: 'Submit',
reset: 'Reset',
placeholder: 'Please enter'
}
}
},
'fr': {
custom: {
switchLanguage: 'Changer la langue',
readme: {
description: 'layui.i18n.$t est une méthode privée (non documentée), utilisée ici uniquement à des fins de démonstration.',
hello: 'Bonjour',
},
form: {
required: 'Requis',
phone: 'Téléphone',
email: 'Email',
date: 'Date',
select: 'Sélection',
submit: 'Soumettre maintenant',
reset: 'Réinitialiser',
placeholder: 'Veuillez entrer'
}
}
},
'zh-HK': {
custom: {
switchLanguage: '切換語言',
readme: {
description: 'layui.i18n.$t 是私有方法（未文檔化），此處僅用於示範',
hello: '你好',
},
form: {
required: '驗證必填項',
phone: '驗證手機號',
email: '驗證郵箱',
date: '驗證日期',
select: '選擇框',
submit: '立即提交',
reset: '重置',
placeholder: '請輸入'
}
}
}
}
});
// 渲染页面模板
const template = $('#template').html();
const html = laytpl(template, { tagStyle: 'modern' }).render();
$('#root').html(html);
/**
* 组件示例
*/
// code
layui.code({
elem: "#demo-code",
preview: true,
tools: ['copy', 'full', 'window'],
header: true,
lang: 'html',
langMarker: true,
});
// colorpicker
colorpicker.render({
elem: "#demo-colorpicker",
});
// dropdown
dropdown.render({
elem: "#demo-dropdown",
});
// flow
flow.load({
elem: '#demo-flow',
scrollElem: '#demo-flow',
done: function (page, next) {
// 模拟数据插入
setTimeout(function () {
var lis = [];
for (var i = 0; i < 3; i++) {
lis.push('<li>' + ((page - 1) * 3 + i + 1) + '</li>')
}
next(lis.join(''), page < 2);
}, 200);
}
});
// form
form.on('submit(demo1)', function (data) {
var field = data.field;
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field));
return false;
});
//laydate
laydate.render({
elem: "#demo-laydate",
type: "datetime",
calendar: true
});
// layer
util.on({
alert: function () {
layer.alert("Hello world");
},
prompt: function () {
layer.prompt({ formType: 1, maxlength: 3 }, function (value, index) {
layer.close(index);
});
},
photos: function () {
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": "layer",
"pid": 1,
"src": "https://unpkg.com/outeres@0.1.1/demo/layer.png",
},
{
"alt": "error",
"pid": 3,
"src": "错误提示演示",
},
{
"alt": "universe",
"pid": 5,
"src": "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg",
}
]
}
});
}
})
// laypage
laypage.render({
elem: "demo-laypage-all",
count: 100,
layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"],
});
// table
table.render({
elem: '#demo-table',
cols: [[{ field: 'test', title: '1', sort: true }, { field: 'test2', title: '2', sort: true }]],
data: new Array(0),
toolbar: 'default',
defaultToolbar: ['filter', 'exports', 'print'],
height: 'full',
page: true,
text: {
// none: 'none'
}
});
// transfer
transfer.render({
elem: '#demo-transfer',
data: [
{ "value": "1", "title": "Item 1" },
{ "value": "2", "title": "Item 2" },
{ "value": "3", "title": "Item 3" },
],
showSearch: true
});
// tree
tree.render({
elem: '#demo-tree',
//data: [],
data: [{ title: 'Item 1', id: 1, children: [{ title: 'Item 1-1', id: 2 }] }],
edit: ['add', 'update', 'del']
});
// upload
upload.render({
elem: '#demo-upload',
url: '', // 实际使用时改成您自己的上传接口即可。
multiple: true,
accept: 'file',
//exts: 'zip',
number: 1,
//size: 60,
});
// util
$('#demo-time-ago-picker').on('change', function(){
$('#demo-time-ago-display').html(
util.timeAgo(this.value)
);
})
$('#demo-toDateString').html(
util.toDateString('2023-01-01 11:35:25', 'yyyy-MM-dd HH:mm:ss A')
+ '<br>'
+ util.toDateString('2023-01-01 18:35:25', 'yyyy-MM-dd HH:mm:ss A')
)
// 演示：切换语言
$("#change-locale").val(i18n.config.locale);
form.render('select').on("select(change-locale)", function (elem) {
// 记录语言，并重载页面（推荐）
layui.data('layui-i18n-test', {
key: 'locale',
value: elem.value
});
window.location.reload();
});
$("body").css("opacity", 1);
console.log(i18n.config)
});
</script>