实习期间碰到的前端问题3

1.el-input只希望输入正整数

oninput = "value=value.replace(/[^\d]+/g,'')" 

限制只能输入数字，如果输入非数字，会被替换为空（负号和小数点也会被替换，所有实际上等于只能输入正整数）

value.replace(/[^\d]+/g,'')：

• value 是要进行替换操作的字符串。
• replace() 是 JavaScript 的字符串方法，用于将匹配到的字符串进行替换。
• /[^\d]+/g 是一个正则表达式，用于匹配除了数字（\d）之外的任意字符。其中，[^\d] 表示非数字字符，+ 表示匹配一个或多个连续的非数字字符，g 表示全局匹配，即匹配所有符合条件的非数字字符。
• '' 是替换后的字符串，这里为空字符串，表示将匹配到的非数字字符替换为空格。

按照上述解释，可以进行更多自定义输入限制

2.组件间参数传递

之前只知道能以父组件为桥梁使得兄弟组件进行参数传递。这样问题就是限制太大，还必须要改父组件中代码，以及只能是兄弟组件。后面了解到可以使用eventBus实现参数传递。本质上就是使用eventBus来作为桥梁。

参考文献：Vue事件总线（EventBus）使用详细介绍 - 知乎 (zhihu.com)

3.watch和props

watch可以监听props并将新值赋予给当前组件内的变量

4.添加高德地图

实现结果示例：

首先需要（最先应该需要去官网注册开发者）

npm i @amap/amap-jsapi-loader --save

map.vue:

<template>
  <div>
    <div class="coordinate">
      <div class="toolbar">
        <div>坐标: [ {{ lng }} , {{ lat }} ]</div>
        <div>地址: {{ address }}</div>
      </div>
      <div style="width: 100%;height: 300px;">
        <div id="coordinateMap" class="coordinateMap" />
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "gaode",
  data() {
    return {
      map: null, //初始化 map 对象
      input:'',
      overlays: [],
      lng: '',
      lat: '',
      address: '',
      marker: '',
      geocoder: null,
      mouseTool: null,
    }
  },
  methods: {
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: '填写你的安全代码' // 开发环境使用，为了安全考虑，正式环境不要暴露安全代码  
        //正式环境方案： https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode
      }
      AMapLoader.load({
        key: "填写你的key", //此处填入我们注册账号后获取的Key
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale','AMap.DistrictSearch', 'AMap.MouseTool', 'AMap.Geocoder'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        const that = this
        that.map = new AMap.Map('coordinateMap', {
          center: [104.06, 30.67],
          resizeEnable: true,
          expandZoomRange: true,
          zoom: 13,
          zooms: [3, 21]
        })
        that.drawBounds(that.map)
        // 异步同时加载多个插件
        // AMap.plugin([], function () {
        //   that.scale = new AMap.Scale()
        //   that.map.addControl(that.scale)
        // })
        that.mouseTool = new AMap.MouseTool(that.map)
        // 监听draw事件可获取画好的覆盖物
        that.mouseTool.on('draw', function (e) {
          that.overlays.push(e.obj)
          that.mouseTool.close()
        })

        that.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        })
        that.marker = new AMap.Marker()
        // 点击获取坐标
        const clickHandler = function (e) {
          that.lng = e.lnglat.getLng()
          that.lat = e.lnglat.getLat()
          that.$emit("update:lng", that.lng);
          that.$emit("update:lat", that.lat);

          const lnglat = [that.lng, that.lat]
          that.map.add(that.marker)
          that.marker.setPosition(lnglat)
          that.getAddress(that.lng, that.lat)
        }
        that.map.on('click', clickHandler)
        
      }).catch(e => {
        console.log(e);
      })
    },

      selectAddress(e) {
        //这里获得点选地点的经纬度
        let location = e.selected.data.location;
        console.log('lng',location.lng);
        console.log('lat',location.lat);
        // Do Something
      },

    // 获取地址
    getAddress(lng, lat) {
      const that = this
      that.geocoder.getAddress([lng, lat], function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            that.address = result.regeocode.formattedAddress
            that.$emit("update:address", that.address);
            that.$nextTick()
          }
        }
      })
    },
    // 限制地图区域
    drawBounds(map) {
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      const district = new AMap.DistrictSearch(opts)
      district.setLevel('中国')
      district.search('中国', (status, result) => {
        const outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ]
        const holes = result.districtList[0].boundaries

        const pathArray = [outer]
        pathArray.push.apply(pathArray, holes)
        const polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#001826',
          strokeWeight: 1,
          strokeOpacity: 0.5,
          fillColor: '#ffffff',
          fillOpacity: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 2, 10]
        })
        polygon.setPath(pathArray)
        map.add(polygon)
      })
    },
    // 限制地图区域END
    close() {
      this.mouseTool.close(true)
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style>
#container {
  width: 80%;
  height: 400px;
  margin: 100px auto;
  border: 1px solid red;
}
</style>

<style lang="scss" scoped>
.coordinate {
  width: 100%;
  height: 100%;

  .coordinateMap {
    width: 100%;
    height: 100%;
  }
}
</style>

<style type="text/css">
  html,body,#app{
    height: 100%;
    width: 100%;
  }
  #panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 80px;
    right: 10px;
    width: 280px;
  }
</style>

然后在需要的地方以组件引入就可以了。
使用.sync可以将组件内部属性和外部绑定（要配合this.$emit(“update:xxx”, this.xxx)）。
示例：

<gaode :lng.sync="dataForm1.longitude" :lat.sync="dataForm1.latitude" :address.sync="dataForm1.warehouseAddress"></gaode>

参考文献：

1.vue 高德地图点击获取坐标与地理位置_vue 高德地图点击覆盖物获取数据_发根强劲的博客-CSDN博客 （主要是参考这位大佬的，实现结果是一样的，只不过根据链接2大佬的内容微调了一下）
2.Vue项目中引入高德地图步骤详解_vue引入地图插件_小马大咖的博客-CSDN博客
3.彻底明白Vue2中.sync修饰符_vue2 .sync_duansamve的博客-CSDN博客

5.el-tabs切换时生命周期不起效果

使用v-if在每个el-tab-pane内的组件上判断 v-if="标签页名称==='xxx'" 可触发mounted，但是不触发activated。在使用keep-alive标签包裹后，成功触发activated

  <el-tab-pane label="标签页名称" name="标签页名称">
	<keep-alive>
        <自定义组件 ref="" v-show="tabName==='标签页名称'"></自定义组件>
    </keep-alive>
  </el-tab-pane>

参考：
1.

2. keep-alive 用法 及activated,deactivated这两个生命周期函数-CSDN博客