element-ui

基本使用

https://element.eleme.cn/#/zh-CN/component/installation

現在的前端開發更多的是關注邏輯，很少關注樣式，因為ui框架提供給我們足夠多的ui組件

我們學習vue使用ui框架，更多的是element-ui和iview-ui

 

如何使用ui框架，我們從element-ui入手

首先我們要安裝element-ui框架的依賴

npm i element-ui -S

• 第一步要在main.js中引入element-ui
• 第二步use使用
• 第三步要引入index.css文件

import Vue from 'vue'
// 相對路徑引入的App.vue文件
import App from './App.vue'
// 引入ui框架
import elementUi from 'element-ui'
//引入css
import 'element-ui/lib/theme-chalk/index.css'
//使用element-ui
Vue.use(elementUi)
new Vue({
    // 渲染節點
    render: h => h(App),
}).$mount('#app')

然后我們就可以在全局使用element-ui

App.vue文件

<template>
<div>
 <el-input v-model="input" placeholder="請輸入內容"></el-input>
</div>
</template>
<script>
  export default {
  }
</script>
<style lang="scss" scoped>
</style>

相關的組件css樣式位置：node_modules/element-ui/lib/theme-chalk，里面有所有的css樣式。

 

如何正確使用ui框架

以CheckBox組件為例

 

 

 

首先提供給我們多種樣式進行選擇

 

 

 

其次是當前的組件可用的屬性

 

 

 

最后是當前的組件可用的事件監聽

總結：

　　　三步走，第一步先去找組件，第二步找對應的需要的樣式狀態，最后一步設置需要的屬性和事件（組件提供的可用的事件和屬性）

 

Form表單

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據

 

如何進行校驗

首先要設置對應的rules規則

 

rules: {
    name: [{
            required: true,
            message: '請輸入活動名稱',
            trigger: 'blur'
        },
        {
            min: 3,
            max: 5,
            message: '長度在 3 到 5 個字符',
            trigger: 'blur'
        }
    ],
    region: [{
        required: true,
        message: '請選擇活動區域',
        trigger: 'change'
    }],
    date1: [{
        type: 'date',
        required: true,
        message: '請選擇日期',
        trigger: 'change'
    }],
    date2: [{
        type: 'date',
        required: true,
        message: '請選擇時間',
        trigger: 'change'
    }],
    type: [{
        type: 'array',
        required: true,
        message: '請至少選擇一個活動性質',
        trigger: 'change'
    }]
}

 

然后在我們的el-form組件上添加rules屬性

 

<el-form ref="formName"  :rules="rules" label-width="80px">

 

第三步要在我們的el-form組件上添加model屬性

model屬性接受的是一個對象，內容就是要和內部表單元素v-model綁定屬性

 

form: {
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
}

 

<el-form ref="formName" :model="form" :rules="rules" label-width="80px">

 

第三步在對應的需要校驗的表單元素上添加對應prop屬性，注意三者統一，rules規則里面的屬性和prop和v-model的屬性必須都一樣

 

<div class='info-box'>
    <el-form ref="formName" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="活動名稱" prop='name'>
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活動區域" prop='region'>
            <el-select v-model="form.region" placeholder="請選擇活動區域">
                <el-option label="區域一" value="shanghai"></el-option>
                <el-option label="區域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活動時間" prop='date1'>
            <el-col :span="11">
                <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即時配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活動性質" prop='type'>
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
                <el-checkbox label="地推活動" name="type"></el-checkbox>
                <el-checkbox label="線下主題活動" name="type"></el-checkbox>
                <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊資源" prop='resource'>
            <el-radio-group v-model="form.resource">
                <el-radio label="線上品牌商贊助"></el-radio>
                <el-radio label="線下場地免費"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活動形式" prop='desc'>
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">立即創建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

 

最后的設置提交校驗

 

  methods: {
     submitForm() {
    // refs選擇的是被校驗的表單from內部的表單，回調函數中valid是一個布爾值，如果是true則代表所有的表單元素都通過了校驗，如果有一個沒有通過校驗，會返回false
    this.$refs['formName'].validate((valid) => {
        if (valid) {
            alert('submit!');
        } else {
            console.log('error submit!!');
            return false;
        }
    });
},
    }

 

 

 

 

如果加上校驗規則的表單元素會有紅色星號

提交時如果沒有通過

 

我們的表單校驗不僅僅只能進行必填校驗，還有自定義校驗

比如我們的name屬性校驗

 

name: [{
        required: true,
        message: '請輸入活動名稱',
        trigger: 'blur'
    },
    {
        validator: validatePass,
        trigger: 'blur'
    }
]

validator的值validatePass是一個函數

const validatePass = function (rule, value, callback) {
    if (value.length !== 11) {
        return callback(new Error("請輸入正確的手機號"))
    }
}

rule返回的是一個json，內部是校驗的一些信息

vlaue返回的是輸入的文本內容

callback是回調函數

 

一個表單元素可以設置一個或者多個校驗規則，第一個參數都是關於校驗的，最后一個參數trigger指的是觸發方式有兩種，分別是blur和change，blur用於輸入框指的是當光標失去焦點的時候觸發，change是當內容進行改變的時候觸發。

 

 

Table表格

用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作

表格是組合el-table和el-table-column的組合

data屬性是必要屬性，接收的是對應的需要加載顯示的table數據

 table接收幾個必要屬性

data屬性時必要屬性，接收的是對應的需要加載顯示的table數據

 

<template>
  <div>
      <el-table :data="tableData" style="width:100%">
           <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column  prop="address"  label="地址">
      </el-table-column>
      </el-table>
  </div>
</template>

 

內部是el-table-column組件，該組件上有幾個必要的屬性

• prop屬性：需要加載的tableData中的json屬性值
• label屬性：顯示的表頭名稱
• width：當前列的寬度

 

data(){
      return {
        tableData:[
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, 
           {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, 
        ]
      }
    }