编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

vue结合element-ui开发项目 一学就会

wxchong 2024-08-22 03:44:03 开源技术 19 ℃ 0 评论

element-ui安装与测试

Element UI一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.

安装element-ui，使用命令(官方给出的安装少了file-loader，导致引用css文件报错，所以一起安装了)：

cnpm install element-ui --save 或 cnpm i element-ui -S
?
[注意]电脑上的安全防护软件，可能会提示你继续安装会有安全问题，不用管，允许运行就好，不然无法安装。
?
cnpm install element-theme -g (使用全局安装，后面使用少坑)
?
cnpm install element-theme-chalk -D
?
cnpm install file-loader --save //无法法解析element-ui的字体文件element-icons.ttf文件，需要我们进行配置
?
1）cnpm install file-loader --save-dev
2）webpack.config.js
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'

初始化element-ui的css文件，输入命令：

et -i

会在当前目录生成一个文件element-variables.sass，再次输入命令：

et -o src/theme-et/ --意思是在src/theme-et文件夹下初始化

在main.js文件引入element UI的CSS 和插件

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

按需引入

借助 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"
    }
  ]]]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

...
import { Button, Select } from 'element-ui'
...
?
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
?
new Vue({
  el: '#app',
  render: h => h(App)
})

测试一下

打开 HelloWorld.vue文件将class="hello"这个div整个删除只剩下template：

<template></template>
<script>
export default{
    name:'HelloWorld',
    data(){
        return{
            msg:'...'
        }
    }
?
}
</script>
<style scoped>
?
</style>

然后加入：

<div>
     <el-row>
         <el-button>默认按钮</el-button>
         <el-button type="primary">主要按钮</el-button>
         <el-button type="success">成功按钮</el-button>
         <el-button type="info">信息按钮</el-button>
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">危险按钮</el-button>
     </el-row>
 </div>



Element-ui 基本使用

一般组件使用

radio组件(链接)的第一个代码：

<template>
  <div>
      <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1"
    };
  }
};
</script>

可以看出element-ui的上手使用,只需要以下步骤：

1.找想要的样式组件 2.复制代码到对应的.vue文件 3.修改对应的数据

非组件样式使用

非组件样式，比如：字体图标、全局指令、全局事件等，


图标样式使用

一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（有icon属性的组件，例如el-button），设置icon属性为对应的图标名即可

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

指令样式使用

例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了，举例：

<template>
  <div>
    <div v-loading="isLoading">使用v-loading指令，true时loading</div>
    <el-button @click=handle>{{clickText}}</el-button>
  </div>
</template>
?
<script>
export default {
  data() {
    return {
      isLoading: true,
      clickText: "取消loading"
    }
  },
  methods:{
      handle(){
          this.isLoading = !this.isLoading
          if (this.isLoading) {
              this.clickText = "取消loading"
          } else {
              this.clickText = "继续loading"
          }
      }
  }
};
</script>


事件样式使用

例如Message消息提示（链接），其提供是也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性选项即可

<template>
  <el-alert
    title="成功提示的文案"
    type="success">
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info">
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning">
  </el-alert>
  <el-alert
    title="错误提示的文案"
    type="error">
  </el-alert>
</template>
<template>
  <el-button :plain="true" @click="open">打开消息提示</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
</template>
?
<script>
  export default {
    methods: {
      open() {
        this.$message('这是一条消息提示');
      },
?
      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      }
    }
  }
</script>



文档读法

element-ui文档提供了很多示例代码，一般情况下我们直接拷下示例代码稍微看着改改数据之类的就够用了。但是在某些场景下，我们可能又需要使用到一些特殊的功能和属性，而这些功能属性一般在官方提供的组件中都已经内置了，所以我们可以直接先从文档中寻找查看是否有属性或者方法等能够满足我们的需求，从而避免重复造轮子。下面就来说明下文档里提供的属性、方法等如何阅读以及使用。

attribute读法

顾名思义，就是官方提供的属性，使用很简单，直接设置属性和对应的值就行了，直接拿el-input组件(链接)来说，例如其提供的Input Attributes里面有maxlength（最大输入长度，number型）和clearable（是否可清空，boolean型），那么：对于非boolean型的属性，需要直接设置值的内容；对于boolean型的属性，一般默认是false，而直接添加该属性，默认就是设置为true，下面是使用了这两个属性的示例代码：

<template>
  <div>
    <el-input v-model="name" maxlength="10" clearable></el-input>
    <!-- 最大长度为10，设置可清空，添加该boolean属性即默认为true，等同于：clearable="true" -->
  </div>
</template>
?
<script>
export default {
  data() {
    return {
      name: "aaa"
    };
  }
};
</script>

slot读法

slot的使用和普通的slot用法没什么区别，直接在该组件当中定义一个标签，并设置该标签的slot属性即可，还是拿el-input组件举例，其Input slots下提供了prepend（输入框头部内容，只对 type="text" 有效），下面是使用了该slot的代码示例：

<template>
  <div>
    <el-input v-model="name">
      <template slot="prepend">aaa</template>
      <!-- 定义一个template标签，设置slot为对应的值，里面插入对应的内容，不一定要用template标签，别的也可以 -->
    </el-input>
  </div>
</template>
?
<script>
export default {
  data() {
    return {
      name: "aaa"
    };
  }
};
</script>

event读法

event就是提供的监听事件，直接使用v-on（简写@）绑定该event即可，例如el-input组件的Input Events下提供了change方法，并且看到回调参数里包括value，那么该事件将会传递这个参数，下面使用该事件举例：

<template> <div> <el-input v-model="name" @change="handleChange"></el-input> <!-- 监听change事件，并绑定对应的处理方法 --> </div> </template>

<script> export default { data() { return { name: "aaa" }; }, methods: { handleChange(value) { // 监听事件的处理方法，回调时会获取到修改后的值 alert(`值被修改为：${value}`); } } }; </script>

method读法

method就是该组件内置的方法，使用时可以通过ref属性调用，使用步骤如下：

组件设置ref属性（具体ref属性用法参考：https://www.cnblogs.com/wu50401/p/10213081.html） 通过this.$refs.ref属性名.方法()调用组件自身的method方法 例如el-input组件提供了focus()方法，举例如下：

<template> <div> <el-input v-model="name" ref="nameInput"></el-input> <!-- 设置一个ref属性 --> <el-button @click="handle">focus in input</el-button> </div> </template>

<script> export default { data() { return { name: "aaa" }; }, methods: { handle() { this.$refs.nameInput.focus(); // 调用文档提供的focus方法聚焦到对应的组件 } } }; </script>

注： 这里实际上就是父组件调用子组件方法的场景

option读法

option一般是一些attribute的类型为object类型时，该attribute对象里的键值参考，这里拿el-time-select组件（时间选择器，链接）举例，该组件里的picker-options属性是object类型，而文档也提供了Time Select Options的参数说明，下面是使用示例：

<template> <div> <el-time-select v-model="value1" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" ></el-time-select> <!-- 直接照搬官方文档提供了...这里加下说明：picker-options是object类型，option里则提供了各种该对象里的参数 --> </div> </template>

<script> export default { data() { return { value1: "" }; } }; </script>

子组件读法

很多提供的组件里都含有子组件，比如el-select下就有子组件el-option，那么使用时只需要将其嵌套在父组件，而对应子组件的attributes、slot等的使用方式也是一样的，这里提供el-select结合子组件el-option的使用示例：

<template> <div> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> <!-- 子组件el-option嵌套在父组件el-select中，其他都像普通组件一样使用 --> </el-select> </div> </template>

<script> export default { data() { return { options: [ { value: "选项1", label: "黄金糕" }, { value: "选项2", label: "双皮奶" } ], value: "" }; } }; </script>

常见问题

样式修改不生效问题

element-ui本身提供了很多样式，但有时候想要稍微修改一下组件里面的样式，发现修改样式竟然不生效？ 别急，下面两种办法可以搞定：

方法一：在设置样式属性时，前面加上>>>来修改样式，但是这个在使用scss的时候可能不会生效，那么此时就使用方法二 方法二：使用/deep/（记得用空格隔开）来修改样式，本质上和>>>是一样的，相当于别名，举例： /deep/ .el-xxx { ... } 方法三：如果上面的也都不行，就使用::v-deep（记得用空格隔开）试试，举例： ::v-deep .el-xxx { ... } 查了下原因，原来是因为由于提供的组件样式设置了scope关键字，导致其样式处于局部，我们无法随便更改，如果非要修改局部的样式，那么就使用上面提供的关键字来实现。 （这也不算是element-ui的问题，在vue的组件化开发中就是规定如此，只不过平常自己开发的组件样式都可以自己规定，所以一般不会发现这个问题...）

element-ui导航栏报错：vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

当多次访问同一路由时会报的错，虽然报错了，但本身不影响使用，只需要将该报错屏蔽即可，参考： https://www.jianshu.com/p/af280206d57c

element-ui中组件方法重写问题

有些官方提供的组件其内部实现的函数并非是我们希望，比如el-image组件的click事件定义如下：

clickHandler() { // prevent body scroll prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.showViewer = true; }, 该事件导致的结果就是点击图片以后会发现页面无法滚动，让人产生一种页面卡死的错觉，因此我们可以通过以下方式来解决该问题：

在使用组件的地方重写该方法，具体步骤就是通过ref绑定该组件，然后重写该组件的方法（其中this指向问题需要注意，我们可以通过call/apply/bind方式改变其指向），举例： <el-image ... ref="test"> ... </el-image> ... mounted() { // 重写clickHandler方法，并使用call方式在调用时修改指向 this.$refs.test.clickHandler = () => { function test() { console.log(this.src); } test.call(this.$refs.test); };

// 使用bind方式修改方法指向 // this.$refs.test.clickHandler = function() { // console.log(this.src); // }.bind(this.$refs.test); }, 在引入Element前重写该方法，这种方式适合大量引用该组件时使用，避免代码的重复，举例： Element.Image.methods.clickHandler = function() { console.log(this.src); }; ... Vue.use(Element); 直接重写该组件（组件的定义在element-ui的package目录下），直接把对应的.vue文件拷下来改写，之后我们直接引入改写后的组件即可，这种方式适合对组件进行大改动的时候，一次改写，一劳永逸

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2