Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 32ccceb

Browse files
buqiyuanbuqiyuan
committed
feat: ✨add component style config
1 parent c99baf7 commit 32ccceb

File tree

43 files changed

+766
-537
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+766
-537
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@ JSON.stringify(
9090
.replace(/\"/g, "'")
9191
```
9292
93+
## 部分功能演示
94+
95+
[![RHfBbn.gif](https://z3.ax1x.com/2021/07/07/RHfBbn.gif)](https://imgtu.com/i/RHfBbn)
96+
9397
## 浏览器支持
9498
9599
本地开发推荐使用`Chrome 80+` 浏览器

‎components.d.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ declare module 'vue' {
1313
ElDropdown: typeof import('element-plus/es/el-dropdown')['default']
1414
ElDropdownItem: typeof import('element-plus/es/el-dropdown-item')['default']
1515
ElDropdownMenu: typeof import('element-plus/es/el-dropdown-menu')['default']
16-
ElForm: typeof import('element-plus/es/el-form')['default']
17-
ElFormItem: typeof import('element-plus/es/el-form-item')['default']
1816
ElHeader: typeof import('element-plus/es/el-header')['default']
19-
ElInput: typeof import('element-plus/es/el-input')['default']
2017
ElMain: typeof import('element-plus/es/el-main')['default']
2118
ElPopconfirm: typeof import('element-plus/es/el-popconfirm')['default']
2219
ElPopover: typeof import('element-plus/es/el-popover')['default']

‎package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
"prepare": "husky install"
2121
},
2222
"dependencies": {
23-
"@vant/touch-emulator": "^1.3.0",
24-
"@vueuse/core": "^5.0.3",
25-
"@vueuse/integrations": "^5.0.3",
23+
"@vant/touch-emulator": "^1.3.1",
24+
"@vueuse/core": "^5.1.3",
25+
"@vueuse/integrations": "^5.1.3",
2626
"animate.css": "^4.1.1",
2727
"axios": "^0.21.1",
28-
"dayjs": "^1.10.5",
28+
"dayjs": "^1.10.6",
2929
"dexie": "^3.0.3",
3030
"element-plus": "1.0.2-beta.54",
3131
"lodash": "^4.17.21",
@@ -44,8 +44,8 @@
4444
"@commitlint/cli": "^12.1.4",
4545
"@commitlint/config-conventional": "^12.1.4",
4646
"@types/node": "^16.0.0",
47-
"@typescript-eslint/eslint-plugin": "^4.28.1",
48-
"@typescript-eslint/parser": "^4.28.1",
47+
"@typescript-eslint/eslint-plugin": "^4.28.2",
48+
"@typescript-eslint/parser": "^4.28.2",
4949
"@vitejs/plugin-legacy": "^1.4.3",
5050
"@vitejs/plugin-vue": "^1.2.4",
5151
"@vitejs/plugin-vue-jsx": "^1.1.6",
@@ -58,9 +58,9 @@
5858
"eslint-config-prettier": "^8.3.0",
5959
"eslint-plugin-import": "^2.23.4",
6060
"eslint-plugin-prettier": "^3.4.0",
61-
"eslint-plugin-vue": "^7.12.1",
61+
"eslint-plugin-vue": "^7.13.0",
6262
"gh-pages": "^3.2.3",
63-
"husky": "^7.0.0",
63+
"husky": "^7.0.1",
6464
"lint-staged": "^11.0.0",
6565
"prettier": "^2.3.2",
6666
"pretty-quick": "^3.1.1",
@@ -70,11 +70,11 @@
7070
"stylelint-config-standard": "^22.0.0",
7171
"stylelint-order": "^4.1.0",
7272
"typescript": "^4.3.5",
73-
"vite": "2.3.8",
74-
"vite-plugin-components": "^0.12.0",
73+
"vite": "2.4.1",
74+
"vite-plugin-components": "^0.12.2",
7575
"vite-plugin-style-import": "^1.0.1",
76-
"vite-plugin-windicss": "^1.2.0",
77-
"vue-eslint-parser": "^7.7.2",
76+
"vite-plugin-windicss": "^1.2.4",
77+
"vue-eslint-parser": "^7.8.0",
7878
"vue-tsc": "^0.2.0",
7979
"windicss": "^3.1.4"
8080
},

‎preview/views/comp-render.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/*
22
* @Author: 卜启缘
33
* @Date: 2021-05-04 05:36:58
4-
* @LastEditTime: 2021-07-04 17:21:34
4+
* @LastEditTime: 2021-07-06 23:51:26
55
* @LastEditors: 卜启缘
66
* @Description:
77
* @FilePath: \vite-vue3-lowcode\preview\views\comp-render.tsx
88
*/
99
import { defineComponent, PropType } from 'vue'
10-
import type { VisualEditorBlockData, VisualEditorConfig } from '@/visual-editor/visual-editor.utils'
10+
import type { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils'
1111
import { visualConfig } from '@/visual.config'
1212

1313
export default defineComponent({
@@ -21,7 +21,7 @@ export default defineComponent({
2121
setup(props) {
2222
return () =>
2323
visualConfig.componentMap[props.element.componentKey].render({
24-
size: {},
24+
styles: props.element.styles || {},
2525
props: props.element.props || {},
2626
model: {},
2727
block: props.element,

‎src/packages/base-widgets/button/index.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,13 @@ export default {
1212
moduleName: 'baseWidgets',
1313
label: '按钮',
1414
preview: () => <Button type={'primary'}>按钮</Button>,
15-
render: ({ props, block, size }) => {
15+
render: ({ props, block, styles }) => {
1616
const { registerRef } = useGlobalProperties()
1717

1818
return (
19-
<Button
20-
ref={(el) => registerRef(el, block._vid)}
21-
style={{
22-
height: size.height ? `${size.height}px` : null,
23-
width: size.width ? `${size.width}px` : null
24-
}}
25-
{...props}
26-
></Button>
19+
<div style={styles}>
20+
<Button ref={(el) => registerRef(el, block._vid)} {...props}></Button>
21+
</div>
2722
)
2823
},
2924
resize: {

‎src/packages/base-widgets/checkbox/index.tsx

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: 卜启缘
33
* @Date: 2021-06-01 09:45:21
4-
* @LastEditTime: 2021-07-04 16:50:19
4+
* @LastEditTime: 2021-07-07 10:54:50
55
* @LastEditors: 卜启缘
66
* @Description: 表单项类型 - 复选框
77
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\checkbox\index.tsx
@@ -32,7 +32,7 @@ export default {
3232
</Checkbox>
3333
</CheckboxGroup>
3434
),
35-
render: ({ size, block, props }) => {
35+
render: ({ styles, block, props }) => {
3636
const { registerRef } = useGlobalProperties()
3737

3838
const state = reactive({
@@ -41,29 +41,28 @@ export default {
4141
})
4242

4343
return (
44-
<Field
45-
{...props}
46-
modelValue={''}
47-
style={{
48-
width: size.width ? `${size.width}px` : null
49-
}}
50-
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
51-
v-slots={{
52-
input: () => (
53-
<CheckboxGroup
54-
ref={(el) => registerRef(el, block._vid)}
55-
{...props}
56-
v-model={state.checkList}
57-
>
58-
{props.options?.map((item) => (
59-
<Checkbox name={item.value} style={{ marginBottom: '5px' }} shape="square">
60-
{item.label}
61-
</Checkbox>
62-
))}
63-
</CheckboxGroup>
64-
)
65-
}}
66-
/>
44+
<div style={styles}>
45+
<Field
46+
{...props}
47+
modelValue={''}
48+
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
49+
v-slots={{
50+
input: () => (
51+
<CheckboxGroup
52+
ref={(el) => registerRef(el, block._vid)}
53+
{...props}
54+
v-model={state.checkList}
55+
>
56+
{props.options?.map((item) => (
57+
<Checkbox name={item.value} style={{ marginBottom: '5px' }} shape="square">
58+
{item.label}
59+
</Checkbox>
60+
))}
61+
</CheckboxGroup>
62+
)
63+
}}
64+
/>
65+
</div>
6766
)
6867
},
6968
props: {

‎src/packages/base-widgets/datetimePicker/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default {
2626
moduleName: 'baseWidgets',
2727
label: '表单项类型 - 时间选择器',
2828
preview: () => <Field name="datetimePicker" label="时间选择器" placeholder={'点击选择'}></Field>,
29-
render: ({ size, block, props }) => {
29+
render: ({ styles, block, props }) => {
3030
const { registerRef } = useGlobalProperties()
3131

3232
const { attrs } = getCurrentInstance()!
@@ -46,16 +46,13 @@ export default {
4646
}
4747

4848
const PopupPicker = () => (
49-
<>
49+
<div style={styles}>
5050
<Field
5151
v-model={props.modelValue}
5252
{...props}
5353
readonly
5454
clickable
5555
onClick={() => (state.showPicker = true)}
56-
style={{
57-
width: size.width ? `${size.width}px` : null
58-
}}
5956
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
6057
v-slots={{
6158
input: () =>
@@ -76,7 +73,7 @@ export default {
7673
onCancel={() => (state.showPicker = false)}
7774
/>
7875
</Popup>
79-
</>
76+
</div>
8077
)
8178

8279
return <PopupPicker />

‎src/packages/base-widgets/divider/index.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: 卜启缘
33
* @Date: 2021-06-01 09:45:21
4-
* @LastEditTime: 2021-06-25 08:49:31
4+
* @LastEditTime: 2021-07-07 21:10:10
55
* @LastEditors: 卜启缘
66
* @Description: 分割线
77
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\divider\index.tsx
@@ -21,20 +21,23 @@ export default {
2121
moduleName: 'baseWidgets',
2222
label: '分割线',
2323
preview: () => <Divider style="width:190px">文本</Divider>,
24-
render: ({ props, block }) => {
24+
render: ({ props, block, styles }) => {
2525
const { registerRef } = useGlobalProperties()
2626

2727
const style = {
28+
width: '100%',
2829
color: props['text-color'],
2930
borderColor: props['divider-color']
3031
}
3132

3233
return (
33-
<Divider ref={(el) => registerRef(el, block._vid)} {...props} style={style}>
34-
{{
35-
default: () => props.text
36-
}}
37-
</Divider>
34+
<div style={styles}>
35+
<Divider ref={(el) => registerRef(el, block._vid)} {...props} style={style}>
36+
{{
37+
default: () => props.text
38+
}}
39+
</Divider>
40+
</div>
3841
)
3942
},
4043
props: {

‎src/packages/base-widgets/image/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: 卜启缘
33
* @Date: 2021-06-01 09:45:21
4-
* @LastEditTime: 2021-07-04 16:53:22
4+
* @LastEditTime: 2021-07-07 10:56:20
55
* @LastEditors: 卜启缘
66
* @Description: 图片组件
77
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\image\index.tsx
@@ -30,10 +30,14 @@ export default {
3030
</div>
3131
</div>
3232
),
33-
render: ({ props, block }) => {
33+
render: ({ props, block, styles }) => {
3434
const { registerRef } = useGlobalProperties()
3535

36-
return <Image ref={(el) => registerRef(el, block._vid)} {...props} />
36+
return (
37+
<div style={styles}>
38+
<Image ref={(el) => registerRef(el, block._vid)} {...props} />
39+
</div>
40+
)
3741
},
3842
props: {
3943
src: createEditorInputProp({

‎src/packages/base-widgets/input/index.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: 卜启缘
33
* @Date: 2021-05-04 05:36:58
4-
* @LastEditTime: 2021-07-03 09:45:56
4+
* @LastEditTime: 2021-07-07 10:56:39
55
* @LastEditors: 卜启缘
66
* @Description: 表单项类型 - 输入框
77
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\input\index.tsx
@@ -18,7 +18,7 @@ export default {
1818
preview: () => (
1919
<Field name="用户名" label="用户名" labelWidth={50} colon placeholder="请输入用户名" />
2020
),
21-
render: ({ model, size, block, props, custom }) => {
21+
render: ({ model, styles, block, props, custom }) => {
2222
const { registerRef } = useGlobalProperties()
2323

2424
let rules = []
@@ -27,18 +27,17 @@ export default {
2727
} catch (e) {}
2828

2929
return (
30-
<Field
31-
ref={(el) => registerRef(el, block._vid)}
32-
{...custom}
33-
{...props}
34-
{...model.default}
35-
v-model={props.modelValue}
36-
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
37-
rules={rules}
38-
style={{
39-
width: size.width ? `${size.width}px` : null
40-
}}
41-
/>
30+
<div style={styles}>
31+
<Field
32+
ref={(el) => registerRef(el, block._vid)}
33+
{...custom}
34+
{...props}
35+
{...model.default}
36+
v-model={props.modelValue}
37+
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
38+
rules={rules}
39+
/>
40+
</div>
4241
)
4342
},
4443
events: [

0 commit comments

Comments
 (0)