minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 拖拽布局-国际化

Browse Source
flex-api
LCJ-MinYa 1 month ago
parent 049bb060ac
commit c12cf2a911
4 changed files with 339 additions and 246 deletions
Show Stats Download Patch File Download Diff File

4
demoHtml/flex/css/index.css
Unescape Escape View File

@ -49,6 +49,10 @@ html {
border-bottom: 2px solid #667eea;
}
.panel-title span:nth-child(2) {
display: none;
}
/* 组件面板 */
#components-panel {
position: relative;

40
demoHtml/flex/index.html
Unescape Escape View File

@ -19,12 +19,16 @@
rel="stylesheet"
href="./css/index.css"
/>
<script src="./js/color.js"></script>
<script src="./js/i18n.js"></script>
<script src="./js/gridstack-all.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/color.js"></script>
</head>
<body>
<div id="root"></div>
<template id="template">
{{ const i18n = layui.i18n; }}
<div id="app">
<!-- <div id="header">
<h1>可视化布局编辑器</h1>
@ -36,7 +40,7 @@
<!-- 组件列表 -->
<div id="components-panel">
<div class="panel-title">
<span>组件列表</span>
<span>{{= i18n.$t('user.component_list') }}</span>
</div>
<div class="components-list">
<div class="component-item grid-stack-item">
@ -48,7 +52,7 @@
</div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><span>文本</span></div>
<div class="grid-stack-item-content"><span>{{= i18n.$t('user.component_text') }}</span></div>
</div>
</div>
<div
@ -57,11 +61,11 @@
>
<div class="trash-container">
<i class="fas fa-trash"></i>
<span>拖动删除</span>
<span>{{= i18n.$t('user.delete_btn') }}</span>
</div>
<div class="save-container">
<i class="fas fa-trash"></i>
<span>保存布局</span>
<span>{{= i18n.$t('user.save_btn') }}</span>
</div>
</div>
</div>
@ -72,13 +76,13 @@
class="tab-button active"
data-tab="welcome-screen"
>
欢迎页
{{= i18n.$t('user.welcome_page') }}
</button>
<button
class="tab-button"
data-tab="main-screen"
>
首页
{{= i18n.$t('user.main_page') }}
</button>
</div>
<!-- <div class="global-save-button-container">
@ -96,28 +100,29 @@
<!-- 当前选中组件属性 -->
<div id="props-panel">
<div class="panel-title">
<span>组件属性</span>
<span id="component-prop">{{= i18n.$t('user.component_prop') }}</span>
<span id="page-prop">{{= i18n.$t('user.page_prop') }}</span>
</div>
<div class="wait-box">请选择组件</div>
<div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
<form class="hidden">
<div class="form-item">
<label for="childrenType">组件子类型</label>
<label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
<input
type="text"
id="childrenType"
/>
</div>
<div class="form-item">
<label for="name">组件名称</label>
<label for="name">{{= i18n.$t('user.component_name') }}</label>
<input
type="text"
id="name"
/>
</div>
<div class="form-item">
<label for="image">背景图片</label>
<label for="image">{{= i18n.$t('user.background_image') }}</label>
<select id="image">
<option value="">请选择</option>
<option value="">{{= i18n.$t('user.please_select') }}</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
@ -126,22 +131,22 @@
</select>
</div>
<div class="form-item">
<label for="background">背景颜色</label>
<label for="background">{{= i18n.$t('user.background') }}</label>
<div id="background"></div>
</div>
<div class="form-item">
<label for="fontSize">文字大小</label>
<label for="fontSize">{{= i18n.$t('user.font_size') }}</label>
<input
type="text"
id="fontSize"
/>
</div>
<div class="form-item">
<label for="color">文字颜色</label>
<label for="color">{{= i18n.$t('user.font_color') }}</label>
<div id="color"></div>
</div>
<div class="form-item">
<label for="text">文字内容</label>
<label for="text">{{= i18n.$t('user.text_content') }}</label>
<input
type="text"
id="text"
@ -225,6 +230,7 @@
</div>
</div>
</div>
</template>
</body>
</html>
<script src="./js/index.js"></script>

48
demoHtml/flex/js/i18n.js
Unescape Escape View File

@ -0,0 +1,48 @@
var userLangConfig = {
zhCN: {
user: {
component_list: '组件列表',
component_text: '文本',
delete_btn: '拖动删除',
save_btn: '保存布局',
welcome_page: '欢迎页',
main_page: '首页',
component_prop: '组件属性',
page_prop: '页面属性',
empty_component: '请选择组件',
component_child_type: '组件子类型',
component_name: '组件名称',
background_image: '背景图片',
please_select: '请选择',
background: '背景颜色',
font_size: '文字大小',
font_color: '文字颜色',
text_content: '文字内容',
},
},
en: {
colorpicker: {
clear: 'clear',
confirm: 'confirm',
},
user: {
component_list: 'component list',
component_text: 'text',
delete_btn: 'drag delete',
save_btn: 'save layout',
welcome_page: 'welcome page',
main_page: 'main page',
component_prop: 'component property',
page_prop: 'page property',
empty_component: 'please select component',
component_child_type: 'component child type',
component_name: 'component name',
background_image: 'background image',
please_select: 'please select',
background: 'background color',
font_size: 'font size',
font_color: 'font color',
text_content: 'text content',
},
},
};

37
demoHtml/flex/js/index.js
Unescape Escape View File

@ -10,6 +10,7 @@
let currentComponent = null;
let cellHeight = 60;
var initGridStack = () => {
// 让gridstack知道如何渲染，组件children中的content直接渲染html
GridStack.renderCB = function (el, w) {
el.innerHTML = w.content;
@ -59,6 +60,7 @@
focusedStyle_scale: 1,
},
]);
};
// 生成唯一id
var generateUniqueId = function () {
@ -310,7 +312,13 @@
//将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) {
// 设置标题
$('#props-panel .panel-title span').text(isScreen(component.type) ? '画布属性' : '组件属性');
if (isScreen(component.type)) {
$('#component-prop').hide();
$('#page-prop').show();
} else {
$('#component-prop').show();
$('#page-prop').hide();
}
const form = $('#props-panel').find('form');
if (component.hasOwnProperty('childrenType')) {
@ -626,8 +634,34 @@
}
};
var i18n = function () {
return new Promise((resolve) => {
setTimeout(() => {
// 设置语言
layui.i18n.set({
locale: 'en',
messages: {
// 扩展其他语言包
en: userLangConfig.en,
'zh-CN': userLangConfig.zhCN,
},
});
// 渲染页面模板
const template = $('#template').html();
const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
$('#root').html(html);
resolve();
}, 500);
});
};
/** 执行方法 */
$(function () {
(async function () {
// 国际化
await i18n();
// 初始化
initGridStack();
init('welcome', welcome);
init('main', main);
// 调用绑定
@ -638,5 +672,6 @@
handleSaveClick();
// 处理画布点击事件
handleCanvasClick();
})();
});
})();

Write Preview
Loading…
Cancel
Save