jobsys-explore 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/.eslintignore +4 -0
  2. package/.eslintrc.cjs +38 -0
  3. package/.prettierrc.cjs +38 -0
  4. package/README.md +42 -0
  5. package/components/button/ExButton.jsx +119 -0
  6. package/components/button/index.js +4 -0
  7. package/components/button/index.less +8 -0
  8. package/components/form/ExAddress.jsx +125 -0
  9. package/components/form/ExCascader.jsx +98 -0
  10. package/components/form/ExCheckbox.jsx +59 -0
  11. package/components/form/ExDate.jsx +130 -0
  12. package/components/form/ExDatetime.jsx +152 -0
  13. package/components/form/ExField.jsx +123 -0
  14. package/components/form/ExFieldUploader.jsx +44 -0
  15. package/components/form/ExForm.jsx +395 -0
  16. package/components/form/ExNumber.jsx +49 -0
  17. package/components/form/ExRadio.jsx +58 -0
  18. package/components/form/ExRate.jsx +47 -0
  19. package/components/form/ExSelect.jsx +151 -0
  20. package/components/form/ExSlider.jsx +53 -0
  21. package/components/form/ExSwitch.jsx +49 -0
  22. package/components/form/ExTime.jsx +104 -0
  23. package/components/form/FormItem.jsx +229 -0
  24. package/components/form/PickerWrapper.jsx +111 -0
  25. package/components/form/addressData.json +1 -0
  26. package/components/form/index.js +37 -0
  27. package/components/form/index.less +108 -0
  28. package/components/form/utils.js +47 -0
  29. package/components/grid/ExGrid.jsx +53 -0
  30. package/components/grid/index.js +4 -0
  31. package/components/grid/index.less +3 -0
  32. package/components/index.js +9 -0
  33. package/components/pagination/ExPagination.jsx +148 -0
  34. package/components/pagination/index.js +5 -0
  35. package/components/pagination/index.less +15 -0
  36. package/components/provider/ExProvider.jsx +91 -0
  37. package/components/provider/index.js +4 -0
  38. package/components/qrcode/ExQrcode.jsx +86 -0
  39. package/components/qrcode/index.js +5 -0
  40. package/components/qrcode/index.less +8 -0
  41. package/components/result/ExResult.jsx +122 -0
  42. package/components/result/index.js +5 -0
  43. package/components/result/index.less +60 -0
  44. package/components/search/ExSearch.jsx +252 -0
  45. package/components/search/components/Expand.jsx +77 -0
  46. package/components/search/components/Field.jsx +27 -0
  47. package/components/search/components/Quick.jsx +53 -0
  48. package/components/search/components/index.js +5 -0
  49. package/components/search/index.js +5 -0
  50. package/components/search/index.less +119 -0
  51. package/components/search/utils.js +30 -0
  52. package/components/theme/ExTheme.jsx +10 -0
  53. package/components/theme/index.js +4 -0
  54. package/components/theme/index.less +97 -0
  55. package/components/uploader/ExUploader.jsx +248 -0
  56. package/components/uploader/index.js +5 -0
  57. package/components/utils.js +150 -0
  58. package/dist/__vite-browser-external-2447137e.mjs +5 -0
  59. package/dist/__vite-browser-external-2447137e.mjs.map +1 -0
  60. package/dist/__vite-browser-external-b3701507.js +2 -0
  61. package/dist/__vite-browser-external-b3701507.js.map +1 -0
  62. package/dist/hooks.cjs +2 -0
  63. package/dist/hooks.cjs.map +1 -0
  64. package/dist/hooks.js +35 -0
  65. package/dist/hooks.js.map +1 -0
  66. package/dist/index-82d74e5f.mjs +2120 -0
  67. package/dist/index-82d74e5f.mjs.map +1 -0
  68. package/dist/index-b8729555.js +2 -0
  69. package/dist/index-b8729555.js.map +1 -0
  70. package/dist/jobsys-explore.cjs +9 -0
  71. package/dist/jobsys-explore.cjs.map +1 -0
  72. package/dist/jobsys-explore.js +18673 -0
  73. package/dist/jobsys-explore.js.map +1 -0
  74. package/dist/style.css +1 -0
  75. package/docgen.config.cjs +9 -0
  76. package/docs/.vitepress/cache/deps/_metadata.json +19 -0
  77. package/docs/.vitepress/cache/deps/package.json +3 -0
  78. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +162 -0
  79. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +7 -0
  80. package/docs/.vitepress/cache/deps/vue.js +10795 -0
  81. package/docs/.vitepress/cache/deps/vue.js.map +7 -0
  82. package/docs/.vitepress/config.mjs +43 -0
  83. package/docs/.vitepress/dist/404.html +19 -0
  84. package/docs/.vitepress/dist/assets/app.e0eb4814.js +1 -0
  85. package/docs/.vitepress/dist/assets/chunks/framework.7a64ad8e.js +2 -0
  86. package/docs/.vitepress/dist/assets/chunks/theme.ffc5f35c.js +7 -0
  87. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 +0 -0
  88. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.ea42a392.woff2 +0 -0
  89. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.4fbe9427.woff2 +0 -0
  90. package/docs/.vitepress/dist/assets/inter-italic-greek.8f4463c4.woff2 +0 -0
  91. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.bd8920cc.woff2 +0 -0
  92. package/docs/.vitepress/dist/assets/inter-italic-latin.bd3b6f56.woff2 +0 -0
  93. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.6ce511fb.woff2 +0 -0
  94. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.e75737ce.woff2 +0 -0
  95. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.5f2c6c8c.woff2 +0 -0
  96. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.ab0619bc.woff2 +0 -0
  97. package/docs/.vitepress/dist/assets/inter-roman-greek.d5a6d92a.woff2 +0 -0
  98. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.0030eebd.woff2 +0 -0
  99. package/docs/.vitepress/dist/assets/inter-roman-latin.2ed14f66.woff2 +0 -0
  100. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.14ce25a6.woff2 +0 -0
  101. package/docs/.vitepress/dist/assets/style.6747f984.css +1 -0
  102. package/docs/.vitepress/dist/hashmap.json +1 -0
  103. package/docs/.vitepress/theme/index.css +0 -0
  104. package/docs/.vitepress/theme/index.js +12 -0
  105. package/hooks/cipher.js +40 -0
  106. package/hooks/form.js +176 -0
  107. package/hooks/index.js +4 -0
  108. package/hooks/network.js +153 -0
  109. package/hooks/utils.js +61 -0
  110. package/index.html +17 -0
  111. package/index.js +10 -0
  112. package/package.json +75 -0
  113. package/playground/App.vue +45 -0
  114. package/playground/TestButton.vue +15 -0
  115. package/playground/TestForm.vue +271 -0
  116. package/playground/TestFormItem.vue +110 -0
  117. package/playground/TestGrid.vue +22 -0
  118. package/playground/TestPagination.vue +89 -0
  119. package/playground/TestQrcode.vue +7 -0
  120. package/playground/TestResult.vue +12 -0
  121. package/playground/TestSearch.vue +84 -0
  122. package/playground/http.js +23 -0
  123. package/playground/main.js +12 -0
  124. package/postcss.config.cjs +8 -0
  125. package/utils/style.js +13 -0
  126. package/utils/withInstall.js +7 -0
  127. package/vite.config.js +52 -0
package/hooks/utils.js ADDED
@@ -0,0 +1,61 @@
1
+ import { find, reduce } from "lodash-es"
2
+
3
+ /**
4
+ * 从 options 中根据 value 获取 text
5
+ * @param value
6
+ * @param options
7
+ * @return {*|string|string}
8
+ */
9
+ export function useTextFromOptionsValue(value, options) {
10
+ if (!options) {
11
+ return ""
12
+ }
13
+ const option = options.find((option) => option.value === value)
14
+ return option ? option.text : ""
15
+ }
16
+
17
+ /**
18
+ * 从嵌套的 options 中根据 value 获取 label
19
+ * @param {Array} options
20
+ * @param {Array} path
21
+ * @param {Object} [adapter]
22
+ * @return {*[]}
23
+ */
24
+ export function useFindLabelsFromPath(options, path, adapter) {
25
+ adapter = adapter || {
26
+ value: "value",
27
+ label: "label",
28
+ children: "children",
29
+ }
30
+
31
+ let labels = []
32
+ reduce(
33
+ path,
34
+ (acc, value) => {
35
+ const item = find(acc, { [adapter.value]: value })
36
+ if (item) {
37
+ labels.push(item[adapter.label])
38
+ return item[adapter.children]
39
+ }
40
+ },
41
+ options,
42
+ )
43
+ return labels
44
+ }
45
+
46
+ /**
47
+ * [移动端适配]
48
+ * 从嵌套的 options 中根据 value 获取 text
49
+ * @param {Array} options
50
+ * @param {Array} path
51
+ * @param {Object} [adapter]
52
+ * @return {*[]}
53
+ */
54
+ export function useFindTextsFromPath(options, path, adapter) {
55
+ adapter = adapter || {
56
+ value: "value",
57
+ label: "text",
58
+ children: "children",
59
+ }
60
+ return useFindLabelsFromPath(options, path, adapter)
61
+ }
package/index.html ADDED
@@ -0,0 +1,17 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
8
+ <meta name="apple-mobile/src-web-app-capable" content="yes">
9
+ <meta name="apple-mobile/src-web-app-status-bar-style" content="black">
10
+ <meta name="author" content="广州职迅信息科技有限公司(https://jobsys.cn)">
11
+ <title>Explore UI Playground</title>
12
+ </head>
13
+ <body>
14
+ <div id="app"></div>
15
+ <script type="module" src="./playground/main.js"></script>
16
+ </body>
17
+ </html>
package/index.js ADDED
@@ -0,0 +1,10 @@
1
+ import * as components from "./components"
2
+
3
+ export default {
4
+ install(app) {
5
+ for (const componentKey in components) {
6
+ const component = components[componentKey]
7
+ app.use(component)
8
+ }
9
+ },
10
+ }
package/package.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "name": "jobsys-explore",
3
+ "version": "1.0.1",
4
+ "description": "Enhanced component based on vant",
5
+ "type": "module",
6
+ "main": "./dist/jobsys-explore.cjs",
7
+ "module": "./dist/jobsys-explore.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/jobsys-explore.js",
11
+ "require": "./dist/jobsys-explore.cjs"
12
+ },
13
+ "./hooks": {
14
+ "import": "./dist/hooks.js",
15
+ "require": "./dist/hooks.cjs"
16
+ },
17
+ "./*": {
18
+ "import": "./*",
19
+ "require": "./*"
20
+ }
21
+ },
22
+ "scripts": {
23
+ "dev": "vite",
24
+ "build": "vite build",
25
+ "release": "release-it",
26
+ "styleguide": "concurrently \"vue-docgen --watch\" \"vitepress dev docs\"",
27
+ "styleguide:build": "vitepress build docs"
28
+ },
29
+ "keywords": [
30
+ "jobsys",
31
+ "explore",
32
+ "ui"
33
+ ],
34
+ "author": "sinceow@163.com",
35
+ "license": "ISC",
36
+ "dependencies": {
37
+ "@vueuse/core": "^10.2.1",
38
+ "qrcode": "^1.5.3",
39
+ "sm-crypto-v2": "^1.7.0"
40
+ },
41
+ "peerDependencies": {
42
+ "axios": "^1.4.0",
43
+ "dayjs": "^1.11.9",
44
+ "lodash-es": "^4.17.21",
45
+ "vant": "^4.6.6",
46
+ "vue": "^3.3.4"
47
+ },
48
+ "devDependencies": {
49
+ "@vitejs/plugin-vue": "^4.2.3",
50
+ "@vitejs/plugin-vue-jsx": "^3.0.1",
51
+ "@vue/compiler-sfc": "^3.3.4",
52
+ "autoprefixer": "^10.4.14",
53
+ "concurrently": "^8.2.0",
54
+ "eslint": "^8.45.0",
55
+ "eslint-config-prettier": "^8.8.0",
56
+ "eslint-plugin-import": "^2.27.5",
57
+ "eslint-plugin-prettier": "^5.0.0",
58
+ "eslint-plugin-vue": "^9.15.1",
59
+ "globby": "^13.2.2",
60
+ "less": "^4.1.3",
61
+ "postcss": "^8.4.27",
62
+ "postcss-pxtorem": "^6.0.0",
63
+ "prettier": "^3.0.0",
64
+ "prismjs": "^1.29.0",
65
+ "unplugin-vue-components": "^0.25.1",
66
+ "vite": "^4.4.5",
67
+ "vite-plugin-eslint": "^1.8.1",
68
+ "vitepress": "1.0.0-rc.4",
69
+ "vue-docgen-cli": "^4.67.0"
70
+ },
71
+ "repository": {
72
+ "type": "git",
73
+ "url": "https://github.com/jobsys/explore-ui"
74
+ }
75
+ }
package/playground/App.vue ADDED
@@ -0,0 +1,45 @@
1
+ <template>
2
+ <div>
3
+ <!-- <TestButton></TestButton>-->
4
+ <!-- <TestGrid></TestGrid>-->
5
+ <!-- <TestFormItem></TestFormItem>-->
6
+ <!-- <TestForm></TestForm>-->
7
+ <!-- <TestResult></TestResult>-->
8
+ <!-- <TestQrcode></TestQrcode>-->
9
+ <!-- <TestSearch></TestSearch>-->
10
+ <TestPagination></TestPagination>
11
+ </div>
12
+ </template>
13
+
14
+ <script setup>
15
+ import TestButton from "./TestButton.vue"
16
+ import TestGrid from "./TestGrid.vue"
17
+ import TestFormItem from "./TestFormItem.vue"
18
+ import TestForm from "./TestForm.vue"
19
+ import TestResult from "./TestResult.vue"
20
+ import TestQrcode from "./TestQrcode.vue"
21
+ import TestSearch from "./TestSearch.vue"
22
+ import TestPagination from "./TestPagination.vue"
23
+
24
+ import { useStyleTag, useWindowSize } from "@vueuse/core"
25
+ import { onMounted, watch } from "vue"
26
+
27
+ //根据屏幕决定字体大小
28
+ const { width } = useWindowSize()
29
+ const { css } = useStyleTag("")
30
+ const setWidth = (width) => {
31
+ css.value = `html{font-size:${width.value / 10}px}`
32
+ }
33
+
34
+ onMounted(() => setWidth(width))
35
+
36
+ watch(
37
+ () => width,
38
+ () => {
39
+ setWidth(width)
40
+ },
41
+ {
42
+ deep: true,
43
+ },
44
+ )
45
+ </script>
package/playground/TestButton.vue ADDED
@@ -0,0 +1,15 @@
1
+ <template>
2
+ <div>
3
+ <ExButton type="primary">注册</ExButton>
4
+
5
+ <Space style="margin-top: 20px" fill :size="20">
6
+ <ExButton type="primary">注册</ExButton>
7
+ <ExButton type="primary">注册</ExButton>
8
+ </Space>
9
+ </div>
10
+ </template>
11
+
12
+ <script setup>
13
+ import { Space } from "vant"
14
+ import ExButton from "../components/button/ExButton.jsx"
15
+ </script>
package/playground/TestForm.vue ADDED
@@ -0,0 +1,271 @@
1
+ <template>
2
+ <div>
3
+ <ExForm
4
+ :form="getForm()"
5
+ title="测试表单"
6
+ inset
7
+ label-width="100"
8
+ :divider-props="{ dashed: true }"
9
+ :before-submit="onBeforeSubmit"
10
+ submit-confirm-text="请检查好您的数据"
11
+ >
12
+ <template #footer>
13
+ <div style="font-size: 13px">
14
+ <Checkbox v-model="checked">《活动参与协议》</Checkbox>
15
+ </div>
16
+ </template>
17
+ </ExForm>
18
+ </div>
19
+ </template>
20
+ <script setup>
21
+ import ExForm from "../components/form/ExForm.jsx"
22
+ import { Checkbox, showFailToast } from "vant"
23
+ import { ref } from "vue"
24
+
25
+ const checked = ref(false)
26
+
27
+ const onBeforeSubmit = ({ formatForm }) => {
28
+ if (!checked.value) {
29
+ showFailToast("请先同意参与协议")
30
+ return false
31
+ }
32
+
33
+ return formatForm
34
+ }
35
+
36
+ const getForm = () => [
37
+ {
38
+ key: "address",
39
+ title: "地址 Address",
40
+ type: "address",
41
+ required: true,
42
+ },
43
+ {
44
+ key: "text",
45
+ title: "文本 Text",
46
+ type: "text",
47
+ defaultValue: "默认值",
48
+ },
49
+ {
50
+ key: "input",
51
+ title: "输入 Input",
52
+ required: true,
53
+ },
54
+ {
55
+ key: "uploader",
56
+ title: "上传图片",
57
+ type: "uploader",
58
+ },
59
+ {
60
+ key: "uploader",
61
+ title: "上传文件",
62
+ type: "uploader",
63
+ defaultProps: {
64
+ exUploaderProps: {
65
+ type: "text",
66
+ },
67
+ },
68
+ },
69
+ /*{
70
+ key: "members",
71
+ title: "参赛选手",
72
+ type: "group",
73
+ columnIndex: [0, 2],
74
+ children: [
75
+ {
76
+ title: "姓名",
77
+ key: "name",
78
+ },
79
+ {
80
+ title: "年龄",
81
+ key: "age",
82
+ type: "number",
83
+ cellProps: {
84
+ align: "center",
85
+ customRender: ({ record }) => {
86
+ return h("span", { style: { color: "red" } }, `${record.age}岁`)
87
+ },
88
+ },
89
+ },
90
+ {
91
+ title: "性别",
92
+ key: "gender",
93
+ type: "select",
94
+ options: [
95
+ { label: "男", value: 1 },
96
+ { label: "女", value: 2 },
97
+ ],
98
+ },
99
+ ],
100
+ },*/
101
+ {
102
+ key: "password",
103
+ title: "密码 Password",
104
+ type: "password",
105
+ },
106
+ {
107
+ key: "textarea",
108
+ title: "长文本 Textarea",
109
+ type: "textarea",
110
+ break: "一个新的行",
111
+ },
112
+ /* {
113
+ key: "html",
114
+ title: "HTML",
115
+ type: "html",
116
+ defaultValue: "<p style='color: #ff0000; margin: 0;'>插播一条 HTML</p>",
117
+ },*/
118
+ {
119
+ key: "number",
120
+ title: "数字 Number",
121
+ type: "number",
122
+ },
123
+ {
124
+ key: "radio",
125
+ title: "单选 Radio",
126
+ type: "radio",
127
+ options: ["选项1", "选项2"],
128
+ defaultValue: "选项1",
129
+ defaultProps: {
130
+ direction: "horizontal",
131
+ },
132
+ },
133
+ {
134
+ key: "checkbox",
135
+ title: "多选 Checkbox",
136
+ type: "Checkbox",
137
+ options: ["选项1", "选项2"],
138
+ defaultValue: ["选项2"],
139
+ },
140
+ {
141
+ key: "cascade",
142
+ title: "级联选择器 Cascader",
143
+ type: "cascade",
144
+ break: true,
145
+ options: [
146
+ {
147
+ value: "zhejiang",
148
+ label: "Zhejiang",
149
+ children: [
150
+ {
151
+ value: "hangzhou",
152
+ label: "Hangzhou",
153
+ children: [
154
+ {
155
+ value: "xihu",
156
+ label: "West Lake",
157
+ },
158
+ ],
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ value: "jiangsu",
164
+ label: "Jiangsu",
165
+ children: [
166
+ {
167
+ value: "nanjing",
168
+ label: "Nanjing",
169
+ children: [
170
+ {
171
+ value: "zhonghuamen",
172
+ label: "Zhong Hua Men",
173
+ },
174
+ ],
175
+ },
176
+ ],
177
+ },
178
+ ],
179
+ },
180
+ {
181
+ key: "switch",
182
+ title: "开关 switch",
183
+ type: "switch",
184
+ options: ["开", "关"],
185
+ },
186
+ {
187
+ key: "date",
188
+ title: "日期 Date",
189
+ type: "date",
190
+ defaultProps: {
191
+ dateProps: {
192
+ onChange: (val) => {
193
+ console.log(val)
194
+ },
195
+ },
196
+ },
197
+ },
198
+ {
199
+ key: "datetime",
200
+ title: "日期+时间 Datetime",
201
+ type: "datetime",
202
+ dateProps: {
203
+ calendarProps: {
204
+ onChange: (val) => {
205
+ console.log(val)
206
+ },
207
+ },
208
+ },
209
+ },
210
+ {
211
+ key: "time",
212
+ title: "时间 Time",
213
+ type: "time",
214
+ defaultProps: {
215
+ timeProps: {
216
+ onChange: (val) => {
217
+ console.log(val)
218
+ },
219
+ },
220
+ },
221
+ },
222
+ /*{
223
+ key: "remote",
224
+ title: "远程检索 Remote",
225
+ type: "remote",
226
+ url: "https://suggest.taobao.com/sug",
227
+ keyword: "q",
228
+ onSearch: (res) => {
229
+ return res.result.map((item) => {
230
+ return {
231
+ label: item[0],
232
+ value: item[1],
233
+ }
234
+ })
235
+ },
236
+ },*/
237
+ {
238
+ key: "select",
239
+ title: "选择 Select",
240
+ type: "select",
241
+ options: [
242
+ [
243
+ {
244
+ label: "选项1",
245
+ value: "1",
246
+ },
247
+ {
248
+ label: "选项2",
249
+ value: "2",
250
+ },
251
+ ],
252
+ [
253
+ {
254
+ label: "选项3",
255
+ value: "3",
256
+ },
257
+ {
258
+ label: "选项4",
259
+ value: "4",
260
+ },
261
+ ],
262
+ ],
263
+ },
264
+ ]
265
+ </script>
266
+
267
+ <style>
268
+ body {
269
+ background: #f3f9f8;
270
+ }
271
+ </style>
package/playground/TestFormItem.vue ADDED
@@ -0,0 +1,110 @@
1
+ <template>
2
+ <Form :label-width="80" @submit="onSubmit">
3
+ <ExField v-model="form.name" label="姓名" help="好好填啊" placeholder="填写点东西吧"></ExField>
4
+
5
+ <ExAddress v-model="form.address" title="请选择地址" label="地址" help="有什么话就写在这里">
6
+ <template #button>
7
+ <Icon name="fire-o"></Icon>
8
+ </template>
9
+ </ExAddress>
10
+ <ExCheckbox v-model="form.checkbox" label="多选" required :options="getOptions" help="选哪个？">
11
+ <template #button>
12
+ <Icon name="fire-o"></Icon>
13
+ </template>
14
+ </ExCheckbox>
15
+
16
+ <ExFieldUploader v-model="form.uploader" label="上传文件" :ex-uploader-props="{ maxNum: 2 }"></ExFieldUploader>
17
+
18
+ <ExCascader v-model="form.cascader" :options="state.options" label="级联" required :rules="[{ required: true, message: '请选择级联' }]">
19
+ </ExCascader>
20
+
21
+ <ExDate v-model="form.date" :date-props="{ columnsType: ['year', 'month'] }" label="日期" help="行不行的？"></ExDate>
22
+
23
+ <ExNumber v-model="form.number" label="数字" rquired></ExNumber>
24
+
25
+ <ExRadio v-model="form.radio" label="单选" required :options="getOptions" help="选哪个？"></ExRadio>
26
+
27
+ <ExDatetime v-model="form.datetime" label="日期与时间"></ExDatetime>
28
+
29
+ <ExSelect label="选择" v-model="form.select" :options="state.options"></ExSelect>
30
+
31
+ <ExRate v-model="form.rate" label="评分" rquired></ExRate>
32
+
33
+ <ExSlider v-model="form.slider" label="评分" rquired :slider-props="{ range: true }">
34
+ <template #leftButton>
35
+ <Button>Hello</Button>
36
+ </template>
37
+ </ExSlider>
38
+
39
+ <ExSwitch v-model="form.switch" label="开关" rquired></ExSwitch>
40
+
41
+ <ExButton :button-props="{ nativeType: 'submit' }">提交</ExButton>
42
+ </Form>
43
+
44
+ <div style="margin-top: 20px">
45
+ <ExButton @click="state.options = state.options2">换选项</ExButton>
46
+ <ExButton @click="onChangeDatetime">换DateTime时间</ExButton>
47
+ <ExButton @click="form.select = 'option1'">改 Select 为选项1</ExButton>
48
+ </div>
49
+ </template>
50
+
51
+ <script setup>
52
+ import {
53
+ ExAddress,
54
+ ExButton,
55
+ ExCascader,
56
+ ExCheckbox,
57
+ ExNumber,
58
+ ExRadio,
59
+ ExDatetime,
60
+ ExSelect,
61
+ ExDate,
62
+ ExField,
63
+ ExSwitch,
64
+ ExRate,
65
+ ExSlider,
66
+ ExFieldUploader,
67
+ } from "../components"
68
+ import { reactive } from "vue"
69
+ import { Form, Icon, Button } from "vant"
70
+
71
+ const state = reactive({
72
+ options: [
73
+ { text: "选项一", value: "option1" },
74
+ { text: "选项二", value: "option2" },
75
+ ],
76
+
77
+ options2: [
78
+ { text: "选项三", value: "option3" },
79
+ { text: "选项四", value: "option4" },
80
+ ],
81
+ })
82
+
83
+ const getOptions = () => {
84
+ return state.options
85
+ }
86
+
87
+ const form = reactive({
88
+ name: "",
89
+ address: ["110000", "110100", "110101"],
90
+ cascader: ["option2"],
91
+ checkbox: ["option1"],
92
+ date: null,
93
+ number: "",
94
+ radio: null,
95
+ datetime: null,
96
+ select: "option1",
97
+ switch: true,
98
+ rate: 0,
99
+ slider: [],
100
+ uploader: {},
101
+ })
102
+
103
+ const onChangeDatetime = () => {
104
+ form.datetime = new Date("2011/01/01 08:12")
105
+ }
106
+
107
+ const onSubmit = () => {
108
+ console.log(form)
109
+ }
110
+ </script>
package/playground/TestGrid.vue ADDED
@@ -0,0 +1,22 @@
1
+ <template>
2
+ <div>
3
+ <ExButton type="primary">注册</ExButton>
4
+
5
+ <Space style="margin-top: 20px" fill :size="20">
6
+ <ExButton type="primary">注册</ExButton>
7
+ <ExButton type="primary">注册</ExButton>
8
+ </Space>
9
+
10
+ <ExGrid :gutter="[10, 10]" style="margin-top: 20px">
11
+ <ExButton type="primary">注册</ExButton>
12
+ <ExButton type="primary">注册</ExButton>
13
+ <ExButton type="primary">注册</ExButton>
14
+ </ExGrid>
15
+ </div>
16
+ </template>
17
+
18
+ <script setup>
19
+ import { Space } from "vant"
20
+ import ExButton from "../components/button/ExButton.jsx"
21
+ import ExGrid from "../components/grid/ExGrid.jsx"
22
+ </script>