大家好，圖標(biāo)在UI設(shè)計(jì)中占了一席之地，不同風(fēng)格的圖標(biāo)會影響頁面整體風(fēng)格效果。前面2篇文章分別介紹了《線性圖標(biāo)》、《面性圖標(biāo)》，今天我跟大家分享一下線面結(jié)合圖標(biāo)的一些設(shè)計(jì)樣式。

于Element UI

Element UI是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，一套為開 發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計(jì) 資源，幫助網(wǎng)站快速成型。

Element UI的官方網(wǎng)址是：https://element.eleme.cn/

Element UI預(yù)定義了幾乎所有標(biāo)簽的常規(guī)設(shè)計(jì)樣式，在絕大 部分情況下，你不需要考慮例如按鈕的寬度、高度、背景顏色、文本大小、 文本顏色等樣式規(guī)則，只需要直接使用即可，例如Element UI提供的按 鈕：

當(dāng)然，除了按鈕以外，對于表格、表單、表單中各控件、彈出框等常見的 頁面元素，Element UI都設(shè)計(jì)了非常簡約美觀的樣式，例如：

Element UI之所以被稱之為“組件庫”，是因?yàn)樗辉偈褂脗鹘y(tǒng)的HTML 標(biāo)簽，而是自行定制了一系列的標(biāo)簽（包括 標(biāo)簽屬性），以按鈕為例， 其源代碼大概是這樣的：

<el-button type="primary">主要按鈕</el-button>

除了樣式以外，Element UI還提 供了便利的表單控件的驗(yàn)證方式， 執(zhí)行效果例如：

由于Element UI定義了大量的組件，每個組件都有許多屬性，所以，學(xué) 習(xí)Element UI時需要記憶大量的組件特征，這將是一個非常漫長的過程， 通常不建議刻意的死記硬背，應(yīng)該重點(diǎn)關(guān)注Element UI可以做到什么， 例如有哪些樣式，各組件的核心屬性等用法，然后結(jié)合官方文檔 （https://element.eleme.cn/#/zh-CN/component/）進(jìn)行開發(fā)。

安裝Element UI

• 首先進(jìn)入工程文件夾（如果使用IntelliJ IDEA打開了此工程，直接點(diǎn)擊 IntelliJ IDEA下面的Terminal即可）：

//我的項(xiàng)目是放在這個位置，你們根據(jù)自己項(xiàng)目進(jìn)入工程即可
cd d:/Vue-Workspace/vue-project-02

• 然后使用npm命令安裝Element UI，以下2條命令是等效的（注意：以下 命令區(qū)分大小寫，例如最后的-S的字母是大寫的）

//推薦第一種安裝命令
npm i element-ui -S
//或者下面這種寫法
npm install --save element-ui

• 安裝完成后，在工程的main.js中導(dǎo)入并使用Element UI：

// main.js  文件配置中加入下面三行
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI);

在頁面中顯示Element UI組件

1)：通過此前的學(xué)習(xí)，你應(yīng)該知道有些文件在此工程中是可以不必保留的，應(yīng)該將這些文件刪除，例如：

• – 刪除router/index.js中不必要的配置，

– 刪除import HomeView from '../views/HomeView.vue'

– 刪除routes常量中各對象（值為空數(shù)組即可）

• – 刪除src/components/HelloWorld.vue
• – 刪除src/views/HomeView.vue
• – 刪除src/views/AboutView.vue

2)：如果你認(rèn)為這些頁面元素占據(jù)了100%寬度，并且默認(rèn)是靠左對齊的 （當(dāng)占據(jù)100%寬度時你可能看不出來），這樣的顯示效果不夠美觀，你可 以自行做一些調(diào)整：

//使用你已經(jīng)掌握的CSS樣式進(jìn)行調(diào)整，例如：
<div style="width: 500px; margin: 0 auto;"> <!-- 頁面元素 --> </div>
  //學(xué)習(xí)更多的Element UI的做法，例如：
  <div style="width: 500px; margin: 0 auto;"> 
    <!-- 頁面元素 --> 
    </div> 
<el-row type="flex" justify="center"> 
  <el-col :span="12"> 
    <!-- 頁面元素 --> 
    </el-col> 
</el-row>

設(shè)計(jì)登錄視圖Demo

修改APP.vue頁面，代碼如下：

<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <h3>用戶登錄</h3>
<el-divider></el-divider>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用戶名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="pass">
  <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>

<script>
      export default {
data() {
  var checkUsername=(rule, value, callback)=> {
    if (!value) {
      return callback(new Error('用戶名不能為空'));
    }
    callback();
  };
  var validatePass=(rule, value, callback)=> {
    if (value==='') {
      callback(new Error('請輸入密碼'));
    }
    callback();
  };
  return {
    ruleForm: {
      pass: '',
      username: ''
    },
    rules: {
      pass: [
        { validator: validatePass, trigger: 'blur' }
      ],
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ]
    }
  };
},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid)=> {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
  </script>

學(xué)習(xí)記錄，如有侵權(quán)請聯(lián)系刪除