<template> <div> <Coordinates ref="coordinates" v-model="value"></Coordinates> <el-button @click="changeValue" type="primary"> change value </el-button> <br> <span>value：{{value.toString()}}</span> <br> <span>度分秒格式：{{formatString.toString()}}</span> <el-button @click="refresh" type="primary"> refresh </el-button> </div> </template> <script> import Coordinates from '@/components/Coordinates' export default { name: 'index', components: { Coordinates }, data () { return { value: [12.34, -45.67], formatString: [] } }, mounted () { this.refresh () }, methods: { changeValue () { this.$set(this.value, 0, (this.value[0] + 2) >= 180 ? 0 : (this.value[0] + 2)) this.$set(this.value, 1, (this.value[1] + 2) >= 90 ? 0 : (this.value[1] + 2)) setTimeout(() => { refresh () }, 10); }, refresh () { // 获取度分秒格式 this.formatString = this.$refs.coordinates.formatString } } } </script> <style lang="less" scoped> #example { padding: 20px; } .el-button { margin: 20px; } span { font-size: 17px; } </style>
效果
修改子组件值 父组件的value会改变，修改父组件的value，子组件会自动修改， [change value] 按钮 可以修改value [refresh] 按钮 通过ref获取度分秒格式的经纬度
总结
以上所述是小编给大家介绍的基于elementUI使用v-model实现经纬度输入的vue组件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: