1 # 1 开源的样式库，方便在vue中使用 2 -elementui：饿了么团队开源的 web端 3 https://element.eleme.cn/#/zh-CN 4 -vant：有赞团队，移动端 5 https://vant-ui.github.io/vant/#/zh-CN 6 -ant design:阿里团队 7 https://1x.antdv.com/docs/vue/introduce-cn/ 8 -iView 9 https://v2.iviewui.com/components/grid 10 -nutui：京东团队 11 https://nutui.jd.com/2x/#/dialog 12 13 # 2 项目中集成 14 1 安装：cnpm i element-ui -S 15 2 集成到项目：main.js 中加入 16 import ElementUI from 'element-ui'; 17 import 'element-ui/lib/theme-chalk/index.css'; 18 Vue.use(ElementUI); // 使用插件 19 3 去官网，找样式，复制，粘贴
1 <template>
2 <div class="Element">
3 <h1>栅格</h1>
4 <el-row :gutter="20">
5 <el-col :span="16"><div class="left"></div></el-col>
6 <el-col :span="8"><div class="right"></div></el-col>
7 </el-row>
8 <el-row :gutter="20">
9 <el-col :span="12" :offset="6"><div class="center"></div></el-col>
10 </el-row>
11
12 <h2>布局容器</h2>
13 <el-container>
14 <el-header>Header</el-header>
15 <el-container>
16 <el-aside width="200px">Aside</el-aside>
17 <el-container>
18 <el-main>Main</el-main>
19 <el-footer>Footer</el-footer>
20 </el-container>
21 </el-container>
22 </el-container>
23
24 <h1>小图标</h1>
25 <span class="el-icon-video-camera">打开摄像机</span>
26
27 <h1>按钮</h1>
28 <el-row>
29 <el-button>默认按钮</el-button>
30 <el-button type="primary">主要按钮</el-button>
31 <el-button type="success">成功按钮</el-button>
32 <el-button type="info">信息按钮</el-button>
33 <el-button type="warning" plain>警告按钮</el-button>
34 <el-button type="danger" round>危险按钮</el-button>
35 </el-row>
36
37 <h1>链接文字</h1>
38 <div>
39 <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
40 <br>
41 <el-link type="primary">主要链接</el-link>
42 <el-link type="success">成功链接</el-link>
43 <el-link type="warning">警告链接</el-link>
44 <el-link type="danger">危险链接</el-link>
45 <el-link type="info">信息链接</el-link>
46 </div>
47
48
49 <h1>单选</h1>
50 <div>
51 <el-radio-group v-model="radio1">
52 <el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button>
53 </el-radio-group>
54 </div>
55
56 <h1>多选</h1>
57 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
58 <div style="margin: 15px 0;"></div>
59 <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
60 <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
61 </el-checkbox-group>
62
63 <h1>input框</h1>
64 <div class="demo-input-suffix">
65 属性方式：
66 <el-input
67 placeholder="请选择日期"
68 suffix-icon="el-icon-date">
69 </el-input>
70 <el-input
71 placeholder="请输入内容"
72 prefix-icon="el-icon-search">
73 </el-input>
74 </div>
75 <div class="demo-input-suffix">
76 slot 方式：
77 <el-input
78 placeholder="请选择日期">
79 <i slot="suffix" class="el-input__icon el-icon-date"></i>
80 </el-input>
81 <el-input
82 placeholder="请输入内容">
83 <i slot="prefix" class="el-input__icon el-icon-search"></i>
84 </el-input>
85 </div>
86
87 <h1>表格</h1>
88 <el-table
89 :data="tableData"
90 style="width: 100%"
91 :row-class-name="tableRowClassName">
92 <el-table-column
93 prop="date"
94 label="日期"
95 width="180">
96 </el-table-column>
97 <el-table-column
98 prop="name"
99 label="姓名"
100 width="180">
101 </el-table-column>
102 <el-table-column
103 prop="address"
104 label="地址">
105 </el-table-column>
106 </el-table>
107
108 <h1>message提示</h1>
109 <el-button :plain="true" @click="open4">错误</el-button>
110 <h1>警告</h1>
111 <el-button :plain="true" @click="open">错误</el-button>
112
113
114 </div>
115 </template>
116 <script>
117 const cityOptions = ['上海', '北京', '广州', '深圳'];
118 export default {
119 name: 'Element',
120 data(){
121 return {
122 // citys:['上海','北京','天剑'],
123 // radio1:'上海',
124
125 checkAll: false,
126 checkedCities: ['上海', '北京'],
127 cities: cityOptions,
128 isIndeterminate: true,
129 tableData: [{
130 date: '2016-05-02',
131 name: '王小虎',
132 address: '上海市普陀区金沙江路 1518 弄',
133 }, {
134 date: '2016-05-04',
135 name: '王小虎',
136 address: '上海市普陀区金沙江路 1518 弄'
137 }, {
138 date: '2016-05-01',
139 name: '王小虎',
140 address: '上海市普陀区金沙江路 1518 弄',
141 }, {
142 date: '2016-05-03',
143 name: '王小虎',
144 address: '上海市普陀区金沙江路 1518 弄'
145 }]
146 }
147 },
148 methods:{
149 handleCheckAllChange(val) {
150 this.checkedCities = val ? cityOptions : [];
151 this.isIndeterminate = false;
152 },
153 handleCheckedCitiesChange(value) {
154 let checkedCount = value.length;
155 this.checkAll = checkedCount === this.cities.length;
156 this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
157 },
158 tableRowClassName({row, rowIndex}) {
159 if (rowIndex === 1) {
160 return 'warning-row';
161 } else if (rowIndex === 3) {
162 return 'success-row';
163 }
164 return '';
165 },
166 open4(){
167 this.$message({
168 message: '恭喜你，这是一条成功消息',
169 type: 'success'
170 });
171 },
172 open() {
173 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
174 confirmButtonText: '确定',
175 cancelButtonText: '取消',
176 type: 'warning'
177 }).then(() => {
178 this.$message({
179 type: 'success',
180 message: '删除成功!'
181 });
182 }).catch(() => {
183 this.$message({
184 type: 'info',
185 message: '已取消删除'
186 });
187 });
188 }
189 }
190
191 }
192 </script>
193
194 <style scoped>
195 .left{
196 background-color: aqua;
197 height: 200px;
198 }
199 .right{
200 background-color: pink;
201 height: 200px;
202 }
203 .center{
204 background-color: green;
205 height: 200px;
206 }
207
208 .el-header{
209 height: 50px;
210 background-color: rebeccapurple;
211 }
212 .el-aside{
213 height: 700px;
214 background-color: aquamarine;
215 }
216 .el-main{
217 height: 500px;
218 background-color: #67C23A;
219 }
220 .el-footer{
221 height: 200px;
222 background-color: blue;
223 }
224 .el-table .warning-row {
225 background: oldlace;
226 }
227
228 .el-table .success-row {
229 background: #f0f9eb;
230 }
231
232 </style>
样式示例
标签：el,elementui,color,按钮,height,background,使用,message From： https://www.cnblogs.com/liuliu1/p/18170232