56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="经度" :prop="longitudeProps" style="flex: 1">
|
||
|
|
<el-input :value="longitude" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div style="display: flex">
|
||
|
|
<el-form-item label="纬度" :prop="latitudeProps" style="flex: 1">
|
||
|
|
<el-input :value="latitude" disabled />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label-width="10px">
|
||
|
|
<el-button type="primary" @click="mapVisible = true">
|
||
|
|
点击定位
|
||
|
|
</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<app-map-selector
|
||
|
|
v-model:visible="mapVisible"
|
||
|
|
v-model:longitude="longitude"
|
||
|
|
v-model:latitude="latitude"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import AppMapSelector from "./map.vue";
|
||
|
|
import { ElCol, ElFormItem, ElInput, ElButton } from "element-plus";
|
||
|
|
import "element-plus/es/components/col/style/css";
|
||
|
|
import "element-plus/es/components/form-item/style/css";
|
||
|
|
import "element-plus/es/components/input/style/css";
|
||
|
|
import "element-plus/es/components/button/style/css";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "AppMap",
|
||
|
|
});
|
||
|
|
defineProps({
|
||
|
|
longitudeProps: { type: String, default: "longitude" },
|
||
|
|
latitudeProps: { type: String, default: "latitude" },
|
||
|
|
});
|
||
|
|
const longitude = defineModel("longitude", {
|
||
|
|
type: [Number, String],
|
||
|
|
required: true,
|
||
|
|
default: "",
|
||
|
|
});
|
||
|
|
const latitude = defineModel("latitude", {
|
||
|
|
type: [Number, String],
|
||
|
|
required: true,
|
||
|
|
default: "",
|
||
|
|
});
|
||
|
|
const mapVisible = ref(false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss"></style>
|