Skip to content

Commit 1060fac

Browse files
dream2023dream2023
committed
init
0 parents  commit 1060fac

19 files changed

+13011
-0
lines changed

‎.browserslistrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎.editorconfig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'@vue/standard'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
}
17+
}

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎.npmignore‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
node_modules
2+
tests
3+
docs
4+
documentation
5+
public
6+
vue.config.js
7+
coverage
8+
example
9+
jest.config.js
10+
.eslintrc.js
11+
cypress.json
12+
.browserslistrc
13+
postcss.config.js
14+
babel.config.js
15+
.editorconfig
16+
.cypress.json
17+
dist/demo.html
18+
.env.dev-doc
19+
.env.dev-example

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 二当家的
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.m

‎README.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
# vue-ele-form-bmap | vue-ele-form 的百度地图组件
2+
3+
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)
4+
[![npm](https://img.shields.io/npm/v/vue-ele-form-bmap.svg)](https://www.npmjs.com/package/vue-ele-form-bmap)
5+
[![download](https://img.shields.io/npm/dw/vue-ele-form-bmap.svg)](https://npmcharts.com/compare/vue-ele-form-bmap?minimal=true)
6+
7+
## 介绍
8+
9+
vue-ele-form-bmap 做为 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 的第三方扩展, 通过对 [vue-baidu-map](https://github.com/Dafrok/vue-baidu-map) 的二次封装, 实现了地理位置的获取和定位
10+
11+
![image](https://raw.githubusercontent.com/dream2023/images/master/vue-ele-form-bmap.ty18r4ibm5p.gif)
12+
13+
## 安装
14+
15+
```bash
16+
npm install vue-ele-form-bmap --save
17+
```
18+
19+
## 使用
20+
21+
```js
22+
import EleForm from 'vue-ele-form'
23+
import EleFormBmap from 'vue-ele-form-bmap'
24+
// 注册 vue-ele-form
25+
Vue.use(EleForm, {
26+
// 可以为编辑器配置全局属性, 每个实例都共享这个属性
27+
bmap: {
28+
// 比如设置 ak 后, 所有的 bmap 编辑器上传图片都会采用这个属性值
29+
ak: 'YOUR_APP_KEY'
30+
}
31+
})
32+
33+
// 注册 bmap 组件
34+
Vue.component('bmap', EleFormBmap)
35+
```
36+
37+
```js
38+
formData: {
39+
// 这里注意, 请参考值的设置
40+
location: {
41+
address: '深圳市宝安区'
42+
lat: 22.54605355,
43+
lng: 114.02597366
44+
}
45+
},
46+
formDesc: {
47+
location: {
48+
label: 'xxx',
49+
type: 'bmap', // 只需要在这里指定为 bmap 即可
50+
// 组件属性, 具体参考下面 Props 部分
51+
attrs: {
52+
ak: 'YOUR_APP_KEY',
53+
zoom: 15
54+
}
55+
}
56+
}
57+
```
58+
59+
## bmap 类型字段的值
60+
61+
```js
62+
// bmap类型的字段的四种情况
63+
64+
// 1.字符串
65+
formData: {
66+
location: '深圳市'
67+
}
68+
69+
// 2.经纬度
70+
formData: {
71+
location: {
72+
lat: 22.54605355, // 这里key必须是 lat
73+
lng: 114.02597366 // 这里key必须是 lng
74+
}
75+
}
76+
77+
// 3.混合
78+
formData: {
79+
location: {
80+
address: '深圳市', // key必须是address
81+
lat: 22.54605355, // key必须是lat
82+
lng: 114.02597366 // key必须是lnt
83+
}
84+
}
85+
86+
// 4.从服务器获取的key不符合的情况
87+
// 可以利用valueFormatter 和 displayFormatter
88+
// 假如从服务器获取的数据如下:
89+
formData: { longitude: 114.02597366, latitude: 22.54605355, address: '深圳市' },
90+
91+
formDesc: {
92+
latitude: {
93+
type: 'hide', // 隐藏
94+
valueFormatter (val, data) {
95+
// 最终提交时, 获取值
96+
return data.address ? data.address.lat : null
97+
}
98+
},
99+
longitude: {
100+
type: 'hide', // 隐藏
101+
valueFormatter (val, data) {
102+
// 最终提交时, 获取值
103+
return data.address ? data.address.lng : null
104+
}
105+
},
106+
address: {
107+
label: '位置',
108+
type: 'bmap', // 设置为 bmap 类型
109+
displayFormatter: (address) => {
110+
// 设置显示的值
111+
if (typeof address === 'string') {
112+
return {
113+
address: address,
114+
lat: this.formData.latitude,
115+
lng: this.formData.longitude
116+
}
117+
} else {
118+
return address
119+
}
120+
},
121+
valueFormatter (val) {
122+
// 最终提交时
123+
return val && val.address ? val.address : null
124+
},
125+
attrs: {
126+
ak: 'LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL'
127+
}
128+
}
129+
}
130+
```
131+
132+
## Props
133+
134+
> 属性具体含义可以参考 vue-baidu-map https://github.com/Dafrok/vue-baidu-map
135+
136+
```js
137+
props: {
138+
// 密钥(必填)
139+
ak: {
140+
type: String,
141+
required: true
142+
},
143+
// 缩放比
144+
zoom: {
145+
type: Number,
146+
default: 12
147+
},
148+
// 滚轮缩放大小
149+
isScrollWheelZoom: {
150+
type: Boolean,
151+
default: false
152+
},
153+
// 地图高度
154+
mapHeight: {
155+
type: Number,
156+
default: 400
157+
},
158+
// 是否显示缩略控件
159+
isShowNavigation: {
160+
type: Boolean,
161+
default: true
162+
},
163+
// 是否显示自动定位控件
164+
isShowGeolocation: {
165+
type: Boolean,
166+
default: true
167+
},
168+
// 搜索占位
169+
placeholder: {
170+
type: String,
171+
default: '请搜索位置'
172+
}
173+
}
174+
```
175+
176+
## 相关链接
177+
178+
- [vue-baidu-map](https://github.com/Dafrok/vue-baidu-map)
179+
- [vue-ele-form](https://github.com/dream2023/vue-ele-form)
180+
- [element-ui](http://element-cn.eleme.io)

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎example/App.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<el-card
3+
header="ele-form-bmap 演示"
4+
shadow="never"
5+
style="max-width: 1250px;margin: 20px auto;min-height: 1600px"
6+
>
7+
<ele-form
8+
:form-data="formData"
9+
:form-desc="formDesc"
10+
:request-fn="handleRequest"
11+
@request-success="handleSuccess"
12+
/>
13+
</el-card>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'App',
19+
data () {
20+
return {
21+
formData: { longitude: 114.02597366, latitude: 22.54605355, address: '深圳市' },
22+
formDesc: {
23+
latitude: {
24+
type: 'hide', // 隐藏
25+
valueFormatter (val, data) {
26+
// 最终提交时, 获取值
27+
return data.address ? data.address.lat : null
28+
}
29+
},
30+
longitude: {
31+
type: 'hide', // 隐藏
32+
valueFormatter (val, data) {
33+
// 最终提交时, 获取值
34+
return data.address ? data.address.lng : null
35+
}
36+
},
37+
address: {
38+
label: '位置',
39+
type: 'bmap', // 设置为 bmap 类型
40+
displayFormatter: (address) => {
41+
// 设置显示的值
42+
if (typeof address === 'string') {
43+
return {
44+
address: address,
45+
lat: this.formData.latitude,
46+
lng: this.formData.longitude
47+
}
48+
} else {
49+
return address
50+
}
51+
},
52+
valueFormatter (val) {
53+
// 最终提交时
54+
return val && val.address ? val.address : null
55+
},
56+
attrs: {
57+
ak: 'LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL',
58+
mapHeight: 300
59+
}
60+
}
61+
}
62+
}
63+
},
64+
methods: {
65+
handleRequest (data) {
66+
console.log(data)
67+
return Promise.resolve()
68+
},
69+
handleSuccess () {
70+
this.$message.success('提交成功')
71+
}
72+
}
73+
}
74+
</script>
75+
76+
<style>
77+
body {
78+
background-color: #f0f2f5;
79+
}
80+
</style>

‎example/main.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import ElementUI from 'element-ui'
4+
import EleForm from 'vue-ele-form'
5+
import EleFormBmap from '../lib/index'
6+
import 'element-ui/lib/theme-chalk/index.css'
7+
8+
Vue.config.productionTip = false
9+
10+
Vue.use(ElementUI)
11+
Vue.use(EleForm)
12+
Vue.component('bmap', EleFormBmap)
13+
14+
new Vue({
15+
render: h => h(App)
16+
}).$mount('#app')

0 commit comments

Comments
 (0)