《PC端UI框架》Element-UI

搭配Vue使用。

安装:

1. npm安装:npm i element-ui -S
2. cdn安装:

   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   

引入:

1. 完整引入:

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

2. 按需引入:
   借助 babel-plugin-component，可以只引入需要的组件，以达到减小项目体积的目的。
   • 首先，安装 babel-plugin-component：npm install babel-plugin-component -D
   • 然后，将 .babelrc 修改为：

     {
       "presets": [["es2015", { "modules": false }]],
       "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ]
        ]
     }
     

   • 引入部分组件:

     import { Button, Select } from 'element-ui';
     Vue.use(Button);
     Vue.use(Select);
     

全局配置:

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。

1. 完整引入:

   import Element from 'element-ui';
   Vue.use(Element, { size: 'small', zIndex: 3000 });
   

2. 按需引入:

   import { Button } from 'element-ui';
   
   Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
   Vue.use(Button);
   

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。

上传：

使用 before-upload限制上传图片的尺寸为710*390，大小不超过2M，格式为JPG：

beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        const isSize = new Promise(function (resolve, reject) {
          let width = 710
          let height = 390    
          let _URL = window.URL || window.webkitURL
          //new Image()用来建立图像对象
          let img = new Image()         
          img.onload = function () {
            let valid = img.width === width && img.height === height
            valid ? resolve() : reject()
          }
          //src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错
          //window.URL.createObjectURL()创建参数中给出的对象的URL
          img.src = _URL.createObjectURL(file)
        }).then(() => {
          return file
        }).catch(() => {
          this.$message({
            message: '图片尺寸只能为710*390!',
            type: 'warning'
          })
          return Promise.reject()
        })

        if (!isJPG) {
          this.$message.error('图片只能是JPG格式!')
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过2MB!')
        }

        return isJPG && isLt2M && isSize
}

不使用action上传图片，使用http-request覆盖默认的上传行为，自定义上传的实现：

<el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="#"
          :before-upload="beforeUpload"
          :http-request="handleUpload"
          >
          <img v-if="formData.coverImage" :src="formData.coverImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

 // 使用上传图片之前的钩子获取要上传的图片对象
beforeUpload (file) {
        this.files = new FormData()
        this.files.append('file', file)
},
async handleUpload (data) {
        let response = await upload(this.files)
        if (response.code === 0) {
          this.formData.coverImage = response.data
        }
}

无限滚动：

在要实现滚动加载的元素上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

必须给要实现滚动加载的元素设置明确的height和overflow不为hidden。

<div v-infinite-scroll="onLoad" infinite-scroll-immediate="false"></div>

getArticleData() {
     //总页数小于所要请求的页数
     if (this.totalPage && this.totalPage < this.pageNum) {
        return false;
     }

     getArticleList({
        current: this.pageNum,
        size: this.pageSize
     }).then(res => {
        if(res.code === 0){
          this.articleData = this.articleData.concat(res.data.list);
          this.totalPage = res.data.totalPage;
        }
     })
},
//滚动触底加载下一页
onLoad(){
     this.pageNum++;
     this.getArticleData();
}

远程搜索：

<el-autocomplete
   style="width:180px;"
   prefix-icon="el-icon-circle-plus-outline"
   v-model="compareValue"
   :fetch-suggestions="querySearchAsync"
   placeholder="添加对比地块"
   @select="handleSelect"
>
     <template slot-scope="{item}">
         <div class="compare-name">{{item.title }}</div>
     </template>
</el-autocomplete>

 //输入字符后过滤查询
createFilter(queryString) {
    var _this = this;
    return (item) => {
       return (item.title.toLowerCase().indexOf(queryString.toLowerCase()) > 0);
    };
},
//返回输入建议的方法
querySearchAsync(queryString, cb) {
    //queryString是动态获取到的输入框输入的字符
    var _this = this;
    
    //_this.compareLandList是全部列表的数据
    var compareOptions =  _this.compareLandList;
    
    //如果queryString存在，则filter遍历每一项，判断输入值是否存在于数组的项中，存在即返回，最后返回一个数组；
    //如果queryString不存在，则显示全部的数据；
    var results = queryString ? compareOptions.filter(_this.createFilter(queryString)) : compareOptions;

    //函数防抖
    clearTimeout(_this.timeout);
    _this.timeout = setTimeout(() => {
        //调用 callback 返回建议列表的数据
        cb(results);
   }, 3000* Math.random());
},
//选择数据触发的方法
handleSelect：function(item){}