mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2024-11-10 09:39:20 +08:00
1. 替换vue-i18n多语言实现；
2. 修复一丢丢小问题。
This commit is contained in:
vdpAdmin
parent
8fbb9f4647
commit
f7885d5774
260
README.md
260
README.md
@ -5,135 +5,135 @@
|
||||
|
||||
<br/>
|
||||
|
||||
#### 立即体验VForm 3
|
||||
[在线Demo](http://120.92.142.115:81/vform3/)
|
||||
### 立即体验VForm 3
|
||||
[在线Demo](http://120.92.142.115:81/vform3/)
|
||||
|
||||
### 友情链接
|
||||
[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）
|
||||
### 友情链接
|
||||
[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）
|
||||
|
||||
[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
|
||||
|
||||
### 功能一览
|
||||
```
|
||||
> 拖拽式可视化表单设计；
|
||||
> 支持PC、Pad、H5三种布局；
|
||||
> 支持运行时动态加载表单；
|
||||
> 支持表单复杂交互控制；
|
||||
> 支持自定义CSS样式；
|
||||
> 支持自定义校验逻辑；
|
||||
> 支持国际化多语言；
|
||||
> 可导出Vue组件、HTML源码；
|
||||
> 可导出Vue的SFC单文件组件；
|
||||
> 支持开发自定义组件；
|
||||
> 支持响应式自适应布局；
|
||||
> 支持VS Code插件；
|
||||
> 更多功能等你探究...；
|
||||
```
|
||||
|
||||
### 浏览器兼容性
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari```
|
||||
|
||||
<br/>
|
||||
|
||||
### 跟Vue 3.x项目集成
|
||||
|
||||
<br/>
|
||||
|
||||
#### 1. 安装包
|
||||
```bash
|
||||
npm i vform3-builds
|
||||
```
|
||||
或
|
||||
```bash
|
||||
yarn add vform3-builds
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 2. 引入并全局注册VForm 3组件
|
||||
```
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus' //引入element-plus库
|
||||
import 'element-plus/dist/index.css' //引入element-plus样式
|
||||
|
||||
import VForm3 from 'vform3-builds' //引入VForm 3库
|
||||
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus) //全局注册element-plus
|
||||
app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 3. 在Vue 3.x模板中使用表单设计器组件
|
||||
```bash
|
||||
<template>
|
||||
<v-form-designer ref="vfdRef"></v-form-designer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const vfdRef = ref(null)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 4. 在Vue 3.x模板中使用表单渲染器组件
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
|
||||
</v-form-render>
|
||||
<el-button type="primary" @click="submitForm">Submit</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
|
||||
const formData = reactive({})
|
||||
const optionData = reactive({})
|
||||
const vFormRef = ref(null)
|
||||
|
||||
const submitForm = () => {
|
||||
vFormRef.value.getFormData().then(formData => {
|
||||
// Form Validation OK
|
||||
alert( JSON.stringify(formData) )
|
||||
}).catch(error => {
|
||||
// Form Validation failed
|
||||
ElMessage.error(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### 资源链接
|
||||
<hr>
|
||||
|
||||
文档官网：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
|
||||
|
||||
在线演示：<a href="http://120.92.142.115:81/vform3/" target="_blank">http://120.92.142.115:81/vform3/</a>
|
||||
|
||||
Github仓库：<a href="https://github.com/vform666/variant-form3-vite" target="_blank">https://github.com/vform666/variant-form3-vite</a>
|
||||
|
||||
Gitee仓库：<a href="https://gitee.com/vdpadmin/variant-form3-vite" target="_blank">https://gitee.com/vdpadmin/variant-form3-vite</a>
|
||||
|
||||
更新日志：<a href="https://www.vform666.com/pages/changelog/" target="_blank">https://www.vform666.com/pages/changelog/</a>
|
||||
|
||||
技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群
|
||||
|
||||
|
||||
[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
|
||||
|
||||
### 功能一览
|
||||
```
|
||||
> 拖拽式可视化表单设计；
|
||||
> 支持PC、Pad、H5三种布局；
|
||||
> 支持运行时动态加载表单；
|
||||
> 支持表单复杂交互控制；
|
||||
> 支持自定义CSS样式；
|
||||
> 支持自定义校验逻辑；
|
||||
> 支持国际化多语言；
|
||||
> 可导出Vue组件、HTML源码；
|
||||
> 可导出Vue的SFC单文件组件；
|
||||
> 支持开发自定义组件；
|
||||
> 支持响应式自适应布局；
|
||||
> 支持VS Code插件；
|
||||
> 更多功能等你探究...；
|
||||
```
|
||||
|
||||
### 浏览器兼容性
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari```
|
||||
|
||||
<br/>
|
||||
|
||||
### 跟Vue 3.x项目集成
|
||||
|
||||
<br/>
|
||||
|
||||
#### 1. 安装包
|
||||
```bash
|
||||
npm i vform3-builds
|
||||
```
|
||||
或
|
||||
```bash
|
||||
yarn add vform3-builds
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 2. 引入并全局注册VForm 3组件
|
||||
```
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus' //引入element-plus库
|
||||
import 'element-plus/dist/index.css' //引入element-plus样式
|
||||
|
||||
import VForm3 from 'vform3-builds' //引入VForm 3库
|
||||
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus) //全局注册element-plus
|
||||
app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 3. 在Vue 3.x模板中使用表单设计器组件
|
||||
```bash
|
||||
<template>
|
||||
<v-form-designer ref="vfdRef"></v-form-designer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const vfdRef = ref(null)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 4. 在Vue 3.x模板中使用表单渲染器组件
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
|
||||
</v-form-render>
|
||||
<el-button type="primary" @click="submitForm">Submit</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
|
||||
const formData = reactive({})
|
||||
const optionData = reactive({})
|
||||
const vFormRef = ref(null)
|
||||
|
||||
const submitForm = () => {
|
||||
vFormRef.value.getFormData().then(formData => {
|
||||
// Form Validation OK
|
||||
alert( JSON.stringify(formData) )
|
||||
}).catch(error => {
|
||||
// Form Validation failed
|
||||
ElMessage.error(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### 资源链接
|
||||
<hr>
|
||||
|
||||
文档官网：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
|
||||
|
||||
在线演示：<a href="http://120.92.142.115:81/vform3/" target="_blank">http://120.92.142.115:81/vform3/</a>
|
||||
|
||||
Github仓库：<a href="https://github.com/vform666/variant-form3-vite" target="_blank">https://github.com/vform666/variant-form3-vite</a>
|
||||
|
||||
Gitee仓库：<a href="https://gitee.com/vdpadmin/variant-form3-vite" target="_blank">https://gitee.com/vdpadmin/variant-form3-vite</a>
|
||||
|
||||
更新日志：<a href="https://www.vform666.com/pages/changelog/" target="_blank">https://www.vform666.com/pages/changelog/</a>
|
||||
|
||||
技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群
|
||||
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
"mitt": "^3.0.0",
|
||||
"sortablejs": "1.14.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-i18n": "^9.2.0-beta.23",
|
||||
"vue3-quill": "^0.2.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
19
src/App.vue
19
src/App.vue
@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<el-config-provider :locale="elLocale">
|
||||
<div id="app">
|
||||
<VFormDesigner />
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VFormDesigner from './components/form-designer/index.vue'
|
||||
|
||||
import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import enUSLang from 'element-plus/lib/locale/lang/en'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
@ -16,9 +21,21 @@ export default {
|
||||
return {
|
||||
formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
|
||||
formData: {},
|
||||
optionData: {}
|
||||
optionData: {},
|
||||
|
||||
elLocaleMap: {
|
||||
'zh-CN': zhCNLang,
|
||||
'en-US': enUSLang,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
elLocale() {
|
||||
let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
|
||||
return this.elLocaleMap[curLocale]
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.vFormRef.getFormData().then(formData => {
|
||||
|
||||
@ -287,14 +287,7 @@
|
||||
border: 1px dashed #336699;
|
||||
margin: 3px;
|
||||
|
||||
//min-height: 36px;
|
||||
height: 100%;
|
||||
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*right: 0;*/
|
||||
/*bottom: 0;*/
|
||||
/*left: 0;*/
|
||||
}
|
||||
|
||||
.table-cell-action{
|
||||
@ -307,6 +300,9 @@
|
||||
background: $--color-primary;
|
||||
z-index: 999;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
|
||||
import i18n, { changeLocale } from "@/utils/i18n"
|
||||
import axios from 'axios'
|
||||
import SvgIcon from "@/components/svg-icon/index";
|
||||
import SvgIcon from "@/components/svg-icon/index"
|
||||
|
||||
export default {
|
||||
name: "VFormDesigner",
|
||||
@ -123,12 +123,13 @@
|
||||
return {
|
||||
vFormVersion: VARIANT_FORM_VERSION,
|
||||
curLangName: '',
|
||||
curLocale: '',
|
||||
|
||||
vsCodeFlag: false,
|
||||
caseName: '',
|
||||
|
||||
docUrl: 'https://www.vform666.com/document.html',
|
||||
gitUrl: 'https://github.com/vform666/variant-form',
|
||||
docUrl: 'https://www.vform666.com/document3.html',
|
||||
gitUrl: 'https://github.com/vform666/variant-form3-vite',
|
||||
chatUrl: 'https://www.vform666.com/chat-group.html',
|
||||
subScribeUrl: 'https://www.vform666.com/subscribe.html',
|
||||
|
||||
@ -225,14 +226,14 @@
|
||||
},
|
||||
|
||||
initLocale() {
|
||||
let curLocale = localStorage.getItem('v_form_locale')
|
||||
this.curLocale = localStorage.getItem('v_form_locale')
|
||||
if (!!this.vsCodeFlag) {
|
||||
curLocale = curLocale || 'en-US'
|
||||
this.curLocale = this.curLocale || 'en-US'
|
||||
} else {
|
||||
curLocale = curLocale || 'zh-CN'
|
||||
this.curLocale = this.curLocale || 'zh-CN'
|
||||
}
|
||||
this.curLangName = this.i18nt('application.' + curLocale)
|
||||
this.changeLanguage(curLocale)
|
||||
this.curLangName = this.i18nt('application.' + this.curLocale)
|
||||
this.changeLanguage(this.curLocale)
|
||||
},
|
||||
|
||||
loadFieldListFromServer() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
|
||||
import { createI18n } from './smart-vue-i18n/index'
|
||||
|
||||
import enLocaleElement from "element-plus/lib/locale/lang/en";
|
||||
import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn";
|
||||
@ -33,36 +33,33 @@ const langResources = {
|
||||
}
|
||||
}
|
||||
|
||||
//locale.i18n((key, value) => i18n.t(key, value))
|
||||
|
||||
export const changeLocale = function(langName) {
|
||||
//i18n.locale = langName //此行切换语言无效！！
|
||||
i18n.global.locale = langName
|
||||
localStorage.setItem('v_form_locale', langName)
|
||||
}
|
||||
|
||||
export const translate = function(key) {
|
||||
return i18n.global.t(key, i18n.locale)
|
||||
}
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: localStorage.getItem('v_form_locale') || 'zh-CN',
|
||||
messages: langResources
|
||||
})
|
||||
|
||||
export const changeLocale = function(langName) {
|
||||
i18n.setLang(langName)
|
||||
localStorage.setItem('v_form_locale', langName)
|
||||
}
|
||||
|
||||
export const translate = function(key) {
|
||||
return i18n.$st(key)
|
||||
}
|
||||
|
||||
export const installI18n = (app) => {
|
||||
app.use(i18n)
|
||||
//
|
||||
}
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
i18nt(key) {
|
||||
return i18n.global.t(key, i18n.locale)
|
||||
return i18n.$st(key)
|
||||
},
|
||||
|
||||
/* 如果key1不存在，则查找key2 */
|
||||
i18n2t(key1, key2) {
|
||||
return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale)
|
||||
return i18n.$st2(key1, key2)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
30
src/utils/smart-vue-i18n/index.js
Normal file
30
src/utils/smart-vue-i18n/index.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { reactive } from 'vue'
|
||||
import { get } from './utils'
|
||||
|
||||
let locale = reactive({
|
||||
lang: localStorage.getItem('v_form_locale') || 'zh-CN',
|
||||
})
|
||||
|
||||
export function createI18n(options) {
|
||||
return {
|
||||
messages: options.messages,
|
||||
|
||||
$st(path, ...args) {
|
||||
const message = get(this.messages[locale.lang], path)
|
||||
return typeof message === 'function'
|
||||
? message(...args)
|
||||
: (message !== null ? message : path)
|
||||
},
|
||||
|
||||
$st2(path, path2) {
|
||||
let messages = this.messages[locale.lang]
|
||||
const message = get(messages, path)
|
||||
return (message !== null) ? message : get(messages, path2)
|
||||
},
|
||||
|
||||
setLang(lang) {
|
||||
locale.lang = lang
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
47
src/utils/smart-vue-i18n/utils.js
Normal file
47
src/utils/smart-vue-i18n/utils.js
Normal file
@ -0,0 +1,47 @@
|
||||
// 值存在
|
||||
export function isDef(value) {
|
||||
return value !== undefined && value !== null
|
||||
}
|
||||
|
||||
// 对象映射 'a.b' {a: {b: 'val'}}
|
||||
export function get(object, path) {
|
||||
const keys = path.split('.')
|
||||
let result = object
|
||||
|
||||
keys.forEach(key => {
|
||||
result = isDef(result) && isDef(result[key]) ? result[key] : null
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 是否是对象
|
||||
export function isObj(x) {
|
||||
const type = typeof x
|
||||
return x !== null && (type === 'object' || type === 'function')
|
||||
}
|
||||
|
||||
// 深拷贝
|
||||
const { hasOwnProperty } = Object.prototype
|
||||
|
||||
function assignKey(to, from, key) {
|
||||
const val = from[key]
|
||||
|
||||
if (!isDef(val)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!hasOwnProperty.call(to, key) || !isObj(val)) {
|
||||
to[key] = val
|
||||
} else {
|
||||
to[key] = deepAssign(Object(to[key]), from[key])
|
||||
}
|
||||
}
|
||||
|
||||
export function deepAssign(to, from) {
|
||||
Object.keys(from).forEach(key => {
|
||||
assignKey(to, from, key)
|
||||
})
|
||||
|
||||
return to
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user