展现自己小技能

小凡爱睡觉
172 阅读5分钟

技能四十六 正确使用第三方map(百度，高德，腾讯)实现地图效果

如果你想使用第三方地图服务（如百度地图，高德地图，腾讯地图等）实现地图效果，你需要首先注册相关服务的开发者账号，并获取相关的API密钥。

接下来，你需要在你的项目中引入相关的第三方地图库，通常这些地图库都会提供相应的使用文档和示例代码。

一般来说，实现地图效果需要以下步骤：

1.初始化地图：一般需要指定地图的容器和初始的中心位置及缩放级别。 例如，在百度地图中，可以使用 BMap.Map 对象进行初始化：var map = new BMap.Map("container",{center:new BMap.Point(116.404, 39.915),zoom:14});，这里 container 是指地图容器的 DOM 元素。

2.添加覆盖物：覆盖物主要用于在地图上标注点、折线、多边形等，不同的地图库所支持的覆盖物类型可能不同。 例如，在百度地图中，可以使用 BMap.Marker 对象来添加点覆盖物：var marker = new BMap.Marker(point); map.addOverlay(marker);，这里 point 是 BMap.Point 对象表示的点的经纬度。

3.事件处理：地图上的事件处理和普通的 DOM 元素事件处理类似，你可以在地图相关的对象上绑定事件处理函数来响应相应的事件。 例如，在百度地图中，可以使用 BMap.Map 对象的 addEventListener 方法来绑定事件处理函数：map.addEventListener("click", function(e){ alert(e.point.lng + ", " + e.point.lat); });，这里的 click 事件表示地图被点击时触发，e 表示事件对象，e.point.lng 和 e.point.lat 分别表示点的经度和纬度。

示例代码: 简单的示例代码，以百度地图为例：

1.初始化地图：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>百度地图示例</title>
    <style type="text/css">
      #map{
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your-app-key"></script>
    <script type="text/javascript">
      var map = new BMap.Map("map", { 
        center: new BMap.Point(116.404, 39.915), 
        zoom: 15 
      });
    </script>
  </body>
</html>

html复制代码

2.添加覆盖物：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>百度地图示例</title>
    <style type="text/css">
      #map{
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your-app-key"></script>
    <script type="text/javascript">
      var map = new BMap.Map("map", { 
        center: new BMap.Point(116.404, 39.915), 
        zoom: 15 
      });

      var point = new BMap.Point(116.404, 39.915);
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
    </script>
  </body>
</html>

html复制代码

3.事件处理：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>百度地图示例</title>
    <style type="text/css">
      #map{
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your-app-key"></script>
    <script type="text/javascript">
      var map = new BMap.Map("map", { 
        center: new BMap.Point(116.404, 39.915), 
        zoom: 15 
      });

      map.addEventListener("click", function(e) {
        alert(e.point.lng + ", " + e.point.lat);
      });
    </script>
  </body>
</html>

html复制代码

这些示例只是一些简单的用法，更多的使用方法需要参考相应的地图库文档和示例代码。注意在使用这些代码时，需要将 your-app-key 替换为你申请到的 API 密钥。

技能四十七 el-form和el-tree做数据回填

el-form 的数据回填，你可以将数据传递给 model 属性即可。例如：

<template>
  <el-form :model="formData">
    <el-form-item label="姓名">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: null
      }
    }
  },
  methods: {
    handleSubmit() {
      // 处理表单提交
    }
  },
  mounted() {
    // 模拟数据回填
    this.formData.name = '张三'
    this.formData.age = 18
  }
}
</script>

html复制代码

对于 el-tree 的数据回填，你需要遍历数据，判断节点是否需要勾选，并调用 setCheckedKeys 方法进行设置。例如：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-expanded-keys="[1]"
    @check="handleCheck">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级菜单',
          children: [
            {
              id: 2,
              label: '二级菜单-1',
              children: [
                {
                  id: 3,
                  label: '三级菜单-1'
                },
                {
                  id: 4,
                  label: '三级菜单-2'
                }
              ]
            },
            {
              id: 5,
              label: '二级菜单-2'
            }
          ]
        }
      ]
    }
  },
  computed: {
    treeProps() {
      return {
        label: 'label',
        children: 'children',
        nodeKey: 'id',
        checkStrictly: true
      }
    }
  },
  methods: {
    handleCheck(data, checked) {
      data.forEach(node => {
        if (node.children) {
          this.handleCheck(node.children, checked)
        }
        if (checked) {
          // 模拟数据回填，假设 id 为 4 的节点需要勾选
          if (node.id === 4) {
            this.$refs.tree.setCheckedKeys([node.id], true)
          }
        } else {
          this.$refs.tree.setCheckedKeys([node.id], false)
        }
      })
    }
  }
}
</script>

html复制代码

这里使用了 setCheckedKeys 方法，第一个参数为要选中的节点的 id 数组，第二个参数表示是否选中。如果需要默认选中节点，可以将要选中节点的 id 数组传递给 default-checked-keys 属性即可。

技能四十八 使用vue.use对自定义组件|指令进行快速注册

在 Vue 中，通过使用 Vue.use 方法可以快速注册自定义组件和指令，方便我们在全局范围内使用。以下是具体的使用方法：

  1. 在自定义组件或指令文件中，使用 Vue.component 或 Vue.directive 方法注册组件或指令：
// 自定义组件
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  // ...
}

// 自定义指令
export default {
  // ...
  directives: {
    myDirective: {
      // 指令定义
    }
  }
}

js复制代码
  1. 在入口文件 (如 main.js 中)，使用 Vue.use 方法注册自定义组件和指令，例如：
import Vue from 'vue'
import MyComponent from '@/components/MyComponent.vue'
import MyDirective from '@/directives/MyDirective.js'
import App from './App.vue'

Vue.use(MyComponent)
Vue.use(MyDirective)

new Vue({
  render: h => h(App)
}).$mount('#app')

js复制代码
  1. 现在，在任何 Vue 组件或实例中，都可以使用你注册的自定义组件和指令了：
<template>
  <div>
    <my-component/>
    <div v-my-directive>Select me</div>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

vue复制代码

注意事项：

  • 使用 Vue.use 方法注册的组件和指令必须是 Vue.component 和 Vue.directive 所注册的组件和指令。如果你的组件或指令已经被注册过，会产生警告提示。
  • 如果你的组件或指令依赖了一些库，确保在注册前已经安装并引入了这些依赖。
  • 通常情况下，建议仅在全局范围需要用到的组件和指令上使用 Vue.use 方法进行注册，避免全局污染。对于只需要在局部组件中使用的组件和指令，可以直接在组件内使用局部注册的方式进行注册，例如：components 和 directives 属性。

技能四十九 实现el-table的行内编辑效果

el-table 中实现行内编辑的效果，可以采用以下的步骤。

  1. 首先，我们需要为表格添加一个 edit 属性，用于记录当前正在编辑的行的 row 数据。
<el-table :data="tableData" style="width: 100%;" @row-click="handleRowClick">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="primary" icon="el-icon-edit" @click.stop="handleEdit(scope.row)">编辑</el-button>
      <el-button type="danger" icon="el-icon-delete" @click.stop="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

vue复制代码

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      edit: {} // 记录当前编辑的行的数据
    }
  },
  methods: {
    handleEdit(row) {
      this.edit = Object.assign({}, row) // 克隆一份数据用于编辑
    },
    handleDelete(row) {
      // ...
    },
    handleRowClick(row, column, event) {
      if (!this.edit.hasOwnProperty('name') || confirm('确认取消编辑？')) {
        this.edit = {} // 点击空白处或其他行时，清空正在编辑的行的数据
      }
    }
  }
}

js复制代码
  1. 接下来，我们需要在 el-table-column 中添加额外的 slot-scope，用于判断是否处于编辑状态。同时，添加一个 input 组件，与 row 数据进行双向绑定，实现编辑数据的效果。
<el-table-column prop="name" label="姓名">
  <template slot-scope="{ row }">
    <template v-if="edit === row">
      <el-input v-model="edit.name" size="mini" @blur="handleSave"></el-input>
    </template>
    <template v-else>{{ row.name }}</template>
  </template>
</el-table-column>

vue复制代码

export default {
  // ...
  methods: {
    // ...
    handleSave() {
      Object.assign(this.edit, { age: parseInt(this.edit.age) }) // 修改提交的数据
      Object.assign(this.tableData.find(row => row.name === this.edit.name), this.edit) // 将编辑后的数据复制回原数据中
      this.edit = {} // 清空编辑的数据
    }
  }
}

js复制代码
  1. 最后，我们需要在操作列中添加一个保存和取消按钮，用于提交和取消编辑操作。我们同样需要使用 slot-scope 来进行判断，是否处于编辑状态。
<el-table-column label="操作">
  <template slot-scope="scope">
    <template v-if="edit === scope.row">
      <el-button type="success" size="mini" @click="handleSave">保存</el-button>
      <el-button size="mini" @click="handleCancel">取消</el-button>
    </template>
    <template v-else>
      <el-button type="primary" icon="el-icon-edit" size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click.stop="handleDelete(scope.row)">删除</el-button>
    </template>
  </template>
</el-table-column>

vue复制代码

export default {
  // ...
  methods: {
    // ...
    handleCancel() {
      this.edit = {} // 清空正在编辑的行的数据
    }
  }
}

js复制代码

到此为止，行内编辑的功能就完成了。

avatar
文章
阅读
粉丝