-
{{= i18n.$t('custom.readme.description') }}
-
- - locale: {{= i18n.config.locale }}
- - Date: {{= new Date().toLocaleDateString(i18n.config.locale) }}
- - Hello: {{= i18n.$t('custom.readme.hello') }}
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- !}}
+
+
+
+
+
+ !}}
-
-
-
+
+
+
-
+
+ // 渲染页面模板
+ 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('
' + ((page - 1) * 3 + i + 1) + '')
+ }
+ 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: [{ 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',
+ number: 1
+ });
+
+ // 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')
+ + '
'
+ + 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) {
+ // 记录语言，并重载页面（推荐）
+ localStorage.setItem('layui-i18n-local-test', elem.value);
+ window.location.reload();
+ });
+
+ $("body").css("opacity", 1);
+ console.log(i18n.config)
+ });
+
+