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加载模块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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.浏览器运行代码
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!