Element-ui安装之MessageBox详解
2017-05-14 17:36
1446 查看
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加载模块
7 修改main.js(全局引入element-ui)
8.编写MessageBox组件
9 修改App.vue
10.完成编译
11.浏览器运行代码
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.浏览器运行代码
相关文章推荐
- 详解ElementUI之表单验证、数据绑定、路由跳转
- elementUI select 组件使用详解
- 基于Windows系统的VMWare Workstation及Linux-CentOS系统下载及安装最全ui详解关联
- element-ui的回调函数Events的用法详解
- 详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
- vue 2.0项目中如何引入element-ui详解
- 安装Element-UI
- 国内用cnpm安装更新element-ui有很多不明错误,该怎样解决
- 4、electron-vue安装element-ui
- Element-UI安装和项目开发
- element-ui安装使用
- 关于element-ui 中使用Notice组件(Message、MessageBox、Notification)所遇到的坑
- element-ui使用导航栏跳转路由的用法详解
- ElementUI安装
- element-ui 安装
- vue新建项目(二)安装element-ui
- 【element-ui】messageBox弹窗提示消息换行问题。
- 详解VUE 对element-ui中的ElTableColumn扩展
- 利用vue+elementUI实现部分引入组件的方法详解
- Linux下软件安装详解- -