前端【VUE】18-PC组件库【ElementUI】【使用介绍】【给组件绑定原生事件】
1、介绍
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
2、安装
1 npm i element-ui -S
3、引入依赖
全局引入：
main.js引入依赖
1 import Vue from 'vue'; 2 import ElementUI from 'element-ui'; // 导入js 3 import 'element-ui/lib/theme-chalk/index.css'; // 导入样式 4 import App from './App.vue'; 5 6 Vue.use(ElementUI); // 注册到vue实例 7 8 new Vue({ 9 el: '#app', 10 render: h => h(App) 11 });
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
1 npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
1 { 2 "presets": [["es2015", { "modules": false }]], 3 "plugins": [ 4 [ 5 "component", 6 { 7 "libraryName": "element-ui", 8 "styleLibraryName": "theme-chalk" 9 } 10 ] 11 ] 12 }
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
1 import Vue from 'vue'; 2 import { Button, Select } from 'element-ui'; 3 import App from './App.vue'; 4 5 Vue.component(Button.name, Button); 6 Vue.component(Select.name, Select); 7 /* 或写为 8 * Vue.use(Button) 9 * Vue.use(Select) 10 */ 11 12 new Vue({ 13 el: '#app', 14 render: h => h(App) 15 });
完整组件列表和引入方式
1 import Vue from 'vue'; 2 import { 3 Pagination, 4 Dialog, 5 Autocomplete, 6 Dropdown, 7 DropdownMenu, 8 DropdownItem, 9 Menu, 10 Submenu, 11 MenuItem, 12 MenuItemGroup, 13 Input, 14 InputNumber, 15 Radio, 16 RadioGroup, 17 RadioButton, 18 Checkbox, 19 CheckboxButton, 20 CheckboxGroup, 21 Switch, 22 Select, 23 Option, 24 OptionGroup, 25 Button, 26 ButtonGroup, 27 Table, 28 TableColumn, 29 DatePicker, 30 TimeSelect, 31 TimePicker, 32 Popover, 33 Tooltip, 34 Breadcrumb, 35 BreadcrumbItem, 36 Form, 37 FormItem, 38 Tabs, 39 TabPane, 40 Tag, 41 Tree, 42 Alert, 43 Slider, 44 Icon, 45 Row, 46 Col, 47 Upload, 48 Progress, 49 Spinner, 50 Badge, 51 Card, 52 Rate, 53 Steps, 54 Step, 55 Carousel, 56 CarouselItem, 57 Collapse, 58 CollapseItem, 59 Cascader, 60 ColorPicker, 61 Transfer, 62 Container, 63 Header, 64 Aside, 65 Main, 66 Footer, 67 Timeline, 68 TimelineItem, 69 Link, 70 Divider, 71 Image, 72 Calendar, 73 Backtop, 74 PageHeader, 75 CascaderPanel, 76 Loading, 77 MessageBox, 78 Message, 79 Notification 80 } from 'element-ui'; 81 82 Vue.use(Pagination); 83 Vue.use(Dialog); 84 Vue.use(Autocomplete); 85 Vue.use(Dropdown); 86 Vue.use(DropdownMenu); 87 Vue.use(DropdownItem); 88 Vue.use(Menu); 89 Vue.use(Submenu); 90 Vue.use(MenuItem); 91 Vue.use(MenuItemGroup); 92 Vue.use(Input); 93 Vue.use(InputNumber); 94 Vue.use(Radio); 95 Vue.use(RadioGroup); 96 Vue.use(RadioButton); 97 Vue.use(Checkbox); 98 Vue.use(CheckboxButton); 99 Vue.use(CheckboxGroup); 100 Vue.use(Switch); 101 Vue.use(Select); 102 Vue.use(Option); 103 Vue.use(OptionGroup); 104 Vue.use(Button); 105 Vue.use(ButtonGroup); 106 Vue.use(Table); 107 Vue.use(TableColumn); 108 Vue.use(DatePicker); 109 Vue.use(TimeSelect); 110 Vue.use(TimePicker); 111 Vue.use(Popover); 112 Vue.use(Tooltip); 113 Vue.use(Breadcrumb); 114 Vue.use(BreadcrumbItem); 115 Vue.use(Form); 116 Vue.use(FormItem); 117 Vue.use(Tabs); 118 Vue.use(TabPane); 119 Vue.use(Tag); 120 Vue.use(Tree); 121 Vue.use(Alert); 122 Vue.use(Slider); 123 Vue.use(Icon); 124 Vue.use(Row); 125 Vue.use(Col); 126 Vue.use(Upload); 127 Vue.use(Progress); 128 Vue.use(Spinner); 129 Vue.use(Badge); 130 Vue.use(Card); 131 Vue.use(Rate); 132 Vue.use(Steps); 133 Vue.use(Step); 134 Vue.use(Carousel); 135 Vue.use(CarouselItem); 136 Vue.use(Collapse); 137 Vue.use(CollapseItem); 138 Vue.use(Cascader); 139 Vue.use(ColorPicker); 140 Vue.use(Transfer); 141 Vue.use(Container); 142 Vue.use(Header); 143 Vue.use(Aside); 144 Vue.use(Main); 145 Vue.use(Footer); 146 Vue.use(Timeline); 147 Vue.use(TimelineItem); 148 Vue.use(Link); 149 Vue.use(Divider); 150 Vue.use(Image); 151 Vue.use(Calendar); 152 Vue.use(Backtop); 153 Vue.use(PageHeader); 154 Vue.use(CascaderPanel); 155 156 Vue.use(Loading.directive); 157 158 Vue.prototype.$loading = Loading.service; 159 Vue.prototype.$msgbox = MessageBox; 160 Vue.prototype.$alert = MessageBox.alert; 161 Vue.prototype.$confirm = MessageBox.confirm; 162 Vue.prototype.$prompt = MessageBox.prompt; 163 Vue.prototype.$notify = Notification; 164 Vue.prototype.$message = Message;
4、使用
1 <template> 2 <div class="login-page"> 3 <el-button>默认按钮</el-button> 4 <el-button type="primary">主要按钮</el-button> 5 <el-button type="success">成功按钮</el-button> 6 <el-button type="info">信息按钮</el-button> 7 <el-button type="warning">警告按钮</el-button> 8 <el-button type="danger">危险按钮</el-button> 9 </div> 10 </template> 11 12 <script> 13 export default { 14 } 15 </script> 16 17 <style lang="scss" scoped> 18 </style>
5、配置主题色
新建 src/styles/index.scss，新增如下内容
1 /* 改变主题色变量 */ 2 $--color-primary: teal; // 这里便是修改主题的颜色 3 4 /* 改变 icon 字体路径变量，必需 */ 5 $--font-path: '~element-ui/lib/theme-chalk/fonts'; 6 7 @import "~element-ui/packages/theme-chalk/src/index";
之后，在项目的入口文件main.js中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
1 import Vue from 'vue' 2 import Element from 'element-ui' 3 import '@/styles/index.scss' 4 5 Vue.use(Element)
6、给组件绑定原生事件
1 <div class="navbar"> 2 <div class="right-menu"> 3 <el-dropdown class="avatar-container" trigger="click"> 4 <div class="avatar-wrapper"> 5 <!-- 用户名称 --> 6 <span class="name">管理员</span> 7 </div> 8 <el-dropdown-menu slot="dropdown" class="user-dropdown"> 9 <router-link to="/"> 10 <el-dropdown-item> 首页 </el-dropdown-item> 11 </router-link> 12 <a target="_blank"> 13 <el-dropdown-item> 项目地址 </el-dropdown-item> 14 </a> 15 <!-- 组件不能绑定原生事件 --> 16 <!-- <el-button @click="handleClick">登录</el-button> --> 17 <!-- el-button能绑定click事件，因为它内部实现了this.emit('click') 子传父，子组件通过this.emit()定义事件, 由父组件来监听这个事件，这样父组件才能绑定这个事件 --> 18 <!-- el-dropdown-item不能绑定click事件，因为其内部并没有实现 this.emit('click') --> 19 <!-- 如果想给el-dropdown-item绑定原生事件，那么可以使用@click.native，实际上这个原生事件是绑定给了组件内部最外层的元素 --> 20 <el-dropdown-item divided @click.native="logout"> 21 <span style="display: block">退出登录</span> 22 </el-dropdown-item> 23 </el-dropdown-menu> 24 </el-dropdown> 25 </div> 26 </div>
