前端Vue专辑

vue项目中引入element组件

2020-05-07  本文已影响0人  执剑饮烈酒

一、全局安装element-ui

npm install element-ui --save

有淘宝镜像的情况下cnpm install element-ui --save 或者cnpm install element-ui -S

二、在main.js文件中加入以下内容,这样就可以全局使用;

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

三、直接在.vue文件中引入element中的组件

例如弹框:

<template>

  <el-button type="text" @click="open"  style="color:red;fontSize:30px;">点击where</el-button>

</template>

<script>

  export default {

    methods: {

      open() {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          this.$message({

            type: 'success',

            message: '删除成功!'

          });

        }).catch(() => {

          this.$message({

            type: 'info',

            message: '已取消删除'

          });         

        });

      }

    }

  }

</script>

如图就是成功之后的内容

上一篇 下一篇

猜你喜欢

热点阅读