Element-ui安装之MessageBox详解
1.首先根据官方文档进行Element-ui的安装,这个过程很简单(通过webpack-simple)
1) vue init webpack-simple element-ui
2) cd element-ui
3) npm install (如果失败的话,多安装几次,还是不行就使用cnpm安装)
4)npm install style-loader -S (因为webpack-simple默认没有安装style-loader)
5)npm install element-ui -S (安装element-ui)
6) 修改webpack.json,加入style,file加载模块
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] },
7 修改main.js(全局引入element-ui)
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) })
8.编写MessageBox组件
<template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { props:{ contents:{ type:String, default:'这是一段内容' }, title:{ type:String, default:'标题名称' }, confirmTitle:{ type:String, default:'确认' } }, methods: { open() { var _this = this this.$alert(this.contents, this.title, { confirmButtonText: this.confirmTitle, callback: function() { // 这里是回调函数,因为作为一个组件,是个个地方都通用的,只是提供外部访问接口 _this.$emit('callConfirm'); } }); } } } </script>
9 修改App.vue
<template> <div id="app"> <MessageBox @callConfirm="thisCallConfirm" title="我是传过来的标题" contents="我是传过来的内容" confirmTitle="确认按钮"></MessageBox> </div> </template> <script> import MessageBox from './components/MessageBox.vue' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ thisCallConfirm(){ alert('我是回调过来的'); } }, mounted(){ }, components:{ MessageBox } }
10.完成编译
11.浏览器运行代码