vue安装element-ui并使用

54 阅读 0 评论 36 点赞

我是靠谱客的博主羞涩项链，最近开发中收集的这篇文章主要介绍vue安装element-ui并使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1 npm i element-ui -S
2 在main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在项目中
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

然后在所需要的项目中加入搜索框

<el-autocomplete
  style="width:100%;"
  popper-class="autoAddressClass"
  v-model="form.address"
  :fetch-suggestions="querySearchAsync"
  :trigger-on-focus="false"
  placeholder="详细地址"
  @select="handleSelect"
  clearable>
  <template slot-scope="{ item }">
    <i class="el-icon-search fl mgr10"></i>
    <div style="overflow:hidden;">
      <div class="title">{{ item.title }}</div>
      <span class="address ellipsis">{{ item.address }}</span>
    </div>
  </template>
</el-autocomplete>

搜索事件如下(首先创建百度地图,并设置为全局变量)

querySearchAsync(str,cb){
  var options = {
    onSearchComplete: function(res){ //检索完成后的回调函数
      var s = [];
      if (local.getStatus() == BMAP_STATUS_SUCCESS){
        for (var i = 0; i < res.getCurrentNumPois(); i ++){
          s.push(res.getPoi(i));
        }
        cb(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
      } else{
        cb(s)
      }
    }
  }
  var local = new BMap.LocalSearch(this.map, options) //创建LocalSearch构造函数
  local.search(str) //调用search方法，根据检索词str发起检索
}

点中建议选项后的事件

handleSelect(item) {
  this.form.address = item.address + item.title; //记录详细地址，含建筑物名
  this.form.addrPoint = item.point; //记录当前选中地址坐标
  this.map.clearOverlays() //清除地图上所有覆盖物
  this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
  this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
  this.map.panTo(item.point) //将地图的中心点更改为选定坐标点
}

下拉框样式调整

.autoAddressClass{
  li {
    i.el-icon-search {margin-top:11px;}
    .mgr10 {margin-right: 10px;}
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}