Skip to content

Commit c352330

Browse files
yaoleyaotouoOxiejianxiong
authored andcommitted
feat: init formily vant
1 parent 4c41688 commit c352330

File tree

224 files changed

+5289
-9992
lines changed

Some content is hidden

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

224 files changed

+5289
-9992
lines changed

docs/.vuepress/components/createCodeSandBox.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ const CodeSandBoxHTML = '<div id="app"></div>'
44
const CodeSandBoxJS = `
55
import Vue from 'vue'
66
import App from './App.vue'
7-
import Element from 'vant';
8-
import 'vant/lib/theme-chalk/index.css';
7+
import Vant from 'vant'
8+
import 'vant/lib/index.css'
99
1010
Vue.config.productionTip = false
11-
Vue.use(Element, { size: 'small' });
11+
Vue.use(Vant)
1212
1313
new Vue({
1414
render: h => h(App),
@@ -68,7 +68,7 @@ export function createCodeSandBox(codeStr) {
6868
'@formily/vant': 'latest',
6969
axios: '^0.21.1',
7070
'core-js': '^3.6.5',
71-
vant: 'latest',
71+
vant: '^2.12.44',
7272
'vue-demi': 'latest',
7373
vue: '^2.6.11',
7474
},
@@ -108,7 +108,7 @@ export function createCodeSandBox(codeStr) {
108108
action: 'https://codesandbox.io/api/v1/sandboxes/define',
109109
data: {
110110
parameters,
111-
query: 'file=/src/App.vue',
111+
query: 'file=/src/App.vue&resolutionWidth=360&resolutionHeight=675',
112112
},
113113
})
114114
}

docs/.vuepress/components/dumi-previewer.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,12 @@ export default {
177177
border-radius: 1px;
178178
179179
.dumi-previewer-demo {
180+
background-color: #f7f8fa;
181+
border-radius: 10px;
182+
margin: 0 auto;
180183
padding: 40px 24px;
184+
width: 360px;
185+
max-height: 675px;
181186
}
182187
183188
.dumi-previewer-actions {

docs/.vuepress/config.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ const utils = require('./util')
44
const componentFiles = utils
55
.getFiles(path.resolve(__dirname, '../guide'))
66
.map((item) => item.replace(/(\.md)/g, ''))
7-
.filter((item) => !['el-form', 'el-form-item', 'index'].includes(item))
7+
.filter((item) => !['index'].includes(item))
88

99
module.exports = {
10-
title: 'Formily Vant',
10+
title: 'Van',
1111
dest: './doc-site',
1212
theme: '@vuepress-dumi/dumi',
1313
head: [
@@ -18,6 +18,13 @@ module.exports = {
1818
href: '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
1919
},
2020
],
21+
[
22+
'link',
23+
{
24+
rel: 'stylesheet',
25+
href: 'https://unpkg.com/vant@2.12.44/lib/index.css',
26+
},
27+
],
2128
],
2229
themeConfig: {
2330
logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
@@ -53,4 +60,16 @@ module.exports = {
5360
},
5461
],
5562
],
63+
configureWebpack: (config, isServer) => {
64+
return {
65+
resolve: {
66+
alias: {
67+
'@formily/vant': path.resolve(
68+
__dirname,
69+
'../../packages/components/src'
70+
),
71+
},
72+
},
73+
}
74+
},
5675
}

docs/.vuepress/enhanceApp.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import pageComponents from '@internal/page-components'
2+
import Vant from 'vant'
3+
import '@formily/vant/style.ts'
24

35
export default ({ Vue }) => {
46
for (const [name, component] of Object.entries(pageComponents)) {
57
Vue.component(name, component)
68
}
9+
Vue.use(Vant)
710
}

docs/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
home: true
3-
heroText: Formily Vant
4-
tagline: 基于 Vant 封装的Formily2.x组件体系
5-
actionText: 开发指南
3+
heroText: Formily Van
4+
tagline: 基于 Van 封装的Formily2.x组件体系
5+
actionText: 组件文档
66
actionLink: /guide/
77
features:
88
- title: 更易用
@@ -19,7 +19,7 @@ footer: Open-source MIT Licensed | Copyright © 2019-present
1919
vue2:
2020

2121
```bash
22-
$ npm install --save vant
22+
$ npm install --save vant@latest-v2
2323
$ npm install --save @formily/core @formily/vue @vue/composition-api @formily/vant
2424
```
2525

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<Form :form="form">
3+
<SchemaField :schema="schema" />
4+
<Submit :style="{ 'margin-top': '16px' }" round block @submit="log">
5+
提交
6+
</Submit>
7+
</Form>
8+
</template>
9+
10+
<script>
11+
import { createForm } from '@formily/core'
12+
import { createSchemaField } from '@formily/vue'
13+
import { Form, Area, Submit } from '@formily/vant'
14+
15+
const { SchemaField } = createSchemaField({
16+
components: {
17+
Area,
18+
},
19+
})
20+
21+
export default {
22+
components: { Form, SchemaField, Submit },
23+
data() {
24+
const schema = {
25+
type: 'object',
26+
properties: {
27+
area: {
28+
type: 'array',
29+
'x-component': 'Area',
30+
'x-component-props': {
31+
formItemProps: {
32+
format: (val) =>
33+
(val || [])
34+
.filter((item) => !!item)
35+
.map((item) => item && item.name)
36+
.join('/'),
37+
label: '城市',
38+
placeholder: '选择城市',
39+
},
40+
popupProps: {},
41+
areaProps: {
42+
areaList: {
43+
province_list: {
44+
110000: '北京市',
45+
120000: '天津市',
46+
},
47+
city_list: {
48+
110100: '北京市',
49+
120100: '天津市',
50+
},
51+
county_list: {
52+
110101: '东城区',
53+
110102: '西城区',
54+
},
55+
},
56+
},
57+
fieldListeners: {},
58+
popupListeners: {},
59+
areaListeners: {},
60+
},
61+
},
62+
},
63+
}
64+
65+
const form = createForm()
66+
67+
return {
68+
form,
69+
schema,
70+
}
71+
},
72+
methods: {
73+
log(value) {
74+
console.log(value)
75+
},
76+
},
77+
}
78+
</script>
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<Form :form="form">
3+
<SchemaField>
4+
<SchemaStringField
5+
name="area"
6+
x-component="Area"
7+
:x-component-props="{
8+
formItemProps: {
9+
label: '城市',
10+
placeholder: '选择城市',
11+
format: (val) =>
12+
(val || [])
13+
.filter((item) => !!item)
14+
.map((item) => item && item.name)
15+
.join('/'),
16+
},
17+
popupProps: {},
18+
areaProps: {
19+
areaList: {
20+
province_list: {
21+
110000: '北京市',
22+
120000: '天津市',
23+
},
24+
city_list: {
25+
110100: '北京市',
26+
120100: '天津市',
27+
},
28+
county_list: {
29+
110101: '东城区',
30+
110102: '西城区',
31+
},
32+
},
33+
},
34+
fieldListeners: {},
35+
popupListeners: {},
36+
areaListeners: {},
37+
}"
38+
/>
39+
</SchemaField>
40+
<Submit :style="{ 'margin-top': '16px' }" round block @submit="log"
41+
>提交</Submit
42+
>
43+
</Form>
44+
</template>
45+
46+
<script>
47+
import { createForm } from '@formily/core'
48+
import { createSchemaField } from '@formily/vue'
49+
import { Area, Submit, Form } from '@formily/vant'
50+
51+
const form = createForm()
52+
const fields = createSchemaField({
53+
components: {
54+
Area,
55+
},
56+
})
57+
58+
export default {
59+
components: { ...fields, Submit, Form },
60+
data() {
61+
return {
62+
form,
63+
}
64+
},
65+
methods: {
66+
log(value) {
67+
console.log(value)
68+
},
69+
},
70+
}
71+
</script>

docs/demos/guide/area/template.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<Form :form="form">
3+
<Field
4+
name="area"
5+
:component="[
6+
Area,
7+
{
8+
formItemProps: {
9+
format: (val) =>
10+
(val || [])
11+
.filter((item) => !!item)
12+
.map((item) => item && item.name)
13+
.join('/'),
14+
label: '城市',
15+
placeholder: '选择城市',
16+
},
17+
popupProps: {},
18+
areaProps: {
19+
areaList: {
20+
province_list: {
21+
110000: '北京市',
22+
120000: '天津市',
23+
},
24+
city_list: {
25+
110100: '北京市',
26+
120100: '天津市',
27+
},
28+
county_list: {
29+
110101: '东城区',
30+
110102: '西城区',
31+
},
32+
},
33+
},
34+
fieldListeners: {},
35+
popupListeners: {},
36+
areaListeners: {},
37+
},
38+
]"
39+
/>
40+
<Submit :style="{ 'margin-top': '16px' }" round block @submit="log">
41+
提交
42+
</Submit>
43+
</Form>
44+
</template>
45+
46+
<script>
47+
import { createForm } from '@formily/core'
48+
import { Field } from '@formily/vue'
49+
import { Area, Submit, Form } from '@formily/vant'
50+
51+
const form = createForm()
52+
53+
export default {
54+
components: { Form, Field, Submit },
55+
data() {
56+
return {
57+
Area,
58+
form,
59+
}
60+
},
61+
methods: {
62+
log(value) {
63+
console.log(value)
64+
},
65+
},
66+
}
67+
</script>

0 commit comments

Comments
 (0)