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; border-bottom: 2px solid #667eea;
} }
.panel-title span:nth-child(2) {
display: none;
}
/* 组件面板 */ /* 组件面板 */
#components-panel { #components-panel {
position: relative; position: relative;

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

@ -19,12 +19,16 @@
rel="stylesheet" rel="stylesheet"
href="./css/index.css" 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/gridstack-all.js"></script>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./layui/layui.js"></script> <script src="./layui/layui.js"></script>
<script src="./js/color.js"></script>
</head> </head>
<body> <body>
<div id="root"></div>
<template id="template">
{{ const i18n = layui.i18n; }}
<div id="app"> <div id="app">
<!-- <div id="header"> <!-- <div id="header">
<h1>可视化布局编辑器</h1> <h1>可视化布局编辑器</h1>
@ -36,7 +40,7 @@
<!-- 组件列表 --> <!-- 组件列表 -->
<div id="components-panel"> <div id="components-panel">
<div class="panel-title"> <div class="panel-title">
<span>组件列表</span> <span>{{= i18n.$t('user.component_list') }}</span>
</div> </div>
<div class="components-list"> <div class="components-list">
<div class="component-item grid-stack-item"> <div class="component-item grid-stack-item">
@ -48,7 +52,7 @@
</div> </div>
</div> </div>
<div class="component-item grid-stack-item"> <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> </div>
<div <div
@ -57,11 +61,11 @@
> >
<div class="trash-container"> <div class="trash-container">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
<span>拖动删除</span> <span>{{= i18n.$t('user.delete_btn') }}</span>
</div> </div>
<div class="save-container"> <div class="save-container">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
<span>保存布局</span> <span>{{= i18n.$t('user.save_btn') }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -72,13 +76,13 @@
class="tab-button active" class="tab-button active"
data-tab="welcome-screen" data-tab="welcome-screen"
> >
欢迎页 {{= i18n.$t('user.welcome_page') }}
</button> </button>
<button <button
class="tab-button" class="tab-button"
data-tab="main-screen" data-tab="main-screen"
> >
首页 {{= i18n.$t('user.main_page') }}
</button> </button>
</div> </div>
<!-- <div class="global-save-button-container"> <!-- <div class="global-save-button-container">
@ -96,28 +100,29 @@
<!-- 当前选中组件属性 --> <!-- 当前选中组件属性 -->
<div id="props-panel"> <div id="props-panel">
<div class="panel-title"> <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>
<div class="wait-box">请选择组件</div> <div class="wait-box">{{= i18n.$t('user.empty_component') }}</div>
<form class="hidden"> <form class="hidden">
<div class="form-item"> <div class="form-item">
<label for="childrenType">组件子类型</label> <label for="childrenType">{{= i18n.$t('user.component_child_type') }}</label>
<input <input
type="text" type="text"
id="childrenType" id="childrenType"
/> />
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="name">组件名称</label> <label for="name">{{= i18n.$t('user.component_name') }}</label>
<input <input
type="text" type="text"
id="name" id="name"
/> />
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="image">背景图片</label> <label for="image">{{= i18n.$t('user.background_image') }}</label>
<select id="image"> <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/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/1.png">图片一</option>
<option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option> <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
@ -126,22 +131,22 @@
</select> </select>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="background">背景颜色</label> <label for="background">{{= i18n.$t('user.background') }}</label>
<div id="background"></div> <div id="background"></div>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="fontSize">文字大小</label> <label for="fontSize">{{= i18n.$t('user.font_size') }}</label>
<input <input
type="text" type="text"
id="fontSize" id="fontSize"
/> />
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="color">文字颜色</label> <label for="color">{{= i18n.$t('user.font_color') }}</label>
<div id="color"></div> <div id="color"></div>
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="text">文字内容</label> <label for="text">{{= i18n.$t('user.text_content') }}</label>
<input <input
type="text" type="text"
id="text" id="text"
@ -225,6 +230,7 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</body> </body>
</html> </html>
<script src="./js/index.js"></script> <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 currentComponent = null;
let cellHeight = 60; let cellHeight = 60;
var initGridStack = () => {
// 让gridstack知道如何渲染，组件children中的content直接渲染html // 让gridstack知道如何渲染，组件children中的content直接渲染html
GridStack.renderCB = function (el, w) { GridStack.renderCB = function (el, w) {
el.innerHTML = w.content; el.innerHTML = w.content;
@ -59,6 +60,7 @@
focusedStyle_scale: 1, focusedStyle_scale: 1,
}, },
]); ]);
};
// 生成唯一id // 生成唯一id
var generateUniqueId = function () { var generateUniqueId = function () {
@ -310,7 +312,13 @@
//将当前选中组件的属性显示在右侧列表中 //将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) { 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'); const form = $('#props-panel').find('form');
if (component.hasOwnProperty('childrenType')) { 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 () { $(function () {
(async function () {
// 国际化
await i18n();
// 初始化
initGridStack();
init('welcome', welcome); init('welcome', welcome);
init('main', main); init('main', main);
// 调用绑定 // 调用绑定
@ -638,5 +672,6 @@
handleSaveClick(); handleSaveClick();
// 处理画布点击事件 // 处理画布点击事件
handleCanvasClick(); handleCanvasClick();
})();
}); });
})(); })();

Write Preview
Loading…
Cancel
Save