elementui使用

认真的六六發表於2024-05-02

 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 去官網,找樣式,複製,貼上

elementui使用
  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>
樣式示例

相關文章