哈嘍哈嘍，這期帶來螞蟻金服的一個?Ant Design 的 Vue 實現(xiàn)。

樣式還是很現(xiàn)代化的，嗯...現(xiàn)在是2019年9月17，對現(xiàn)在來說還很fashion過幾年就不知道了。

話不多說直接上手，喜歡記得關(guān)注，順手右上角來個賞我兩個大手贊，讓我體驗笑出個豬叫聲一下。

正文

要做這種樣式，我們一般在項目中全局引入一下，類似的還有reqwest這種http方法。

反正就是常用的組件都在main中引入一下，這樣每個頁面用起來方便，不需要像我上個login那樣單個頁面引入。

First of all：

引入Ant design

在npm cmd命令控制臺輸入如下語句

npm install ant-design-vue --save

安裝完成以后我們在全局引用一下，

main.js里寫入

import Vue from 'vue';

import Antd from 'ant-design-vue'// 引入Ant Design Vue組件

import 'ant-design-vue/dist/antd.css' // 引入Ant Design Vue樣式

Vue.use(Antd) //掛載到vue中

我講一些剛開始使用的坑，Ant design以下簡稱Antd

1、Menu

入門一般先來個導(dǎo)航欄，咱用Antd的Menu組件

官方會給你一組寫好的死數(shù)據(jù)的實例，但是在項目中我們一般寫成動態(tài)。

vue中寫動態(tài)數(shù)據(jù)，方便的亞批，不僅代碼優(yōu)美，還簡潔易讀。

HTML:

style="width: 256px"

v-model="currentSelectChild"

@openChange="onOpenChange"

:openKeys="currentParent"

theme="dark"

mode="inline">

{{itParent.Title}}

{{itChild.Title}}

數(shù)據(jù)格式：

NavData: [

{

NavID: 100,

Icons:"dashboard",

Title:"操作",

Path:"",

Child: [

{

NavID: 101,

Icons: "",

Title: "用戶",

Path: "/UserInfo",

}, {

NavID: 102,

Icons: "",

Title: "公司",

Path: "/CompanyInfo",

},{

NavID: 103,

Icons: "",

Title: "部門",

Path: "/TeamInfo",

},

]

},{

NavID: 300,

Icons:"audit",

Title:"報表",

Path:"",

Child: [{

NavID: 301,

Icons: "",

Title: "打卡",

Path: "/Card",

}]

}

]

2、全局通知

全局的通知在Antd里面有各種炫酷的UI：Message、Notification

(Modal其實也可以算，只不過是一種確認提示框)

1)：Message

//只要一開始全局引入了Antd，并且掛載到vue上了，就能直接this出來

//Message,頁面頂部的通知

this.$message.success('Click Me', 2.5, ()=>{//帶callback的

this.$message.warning("上一個關(guān)閉了");//普通的

});

2)：Notification

這個不同于Message,他需要配置一些參數(shù)，所以不建議每個頁面直接this去調(diào)用

以下是我的做法

在main.js里引入并掛載全局：

//main.js

import global from '@/Global' // 引入global

Vue.prototype.$global = global;掛載到vue上，就能直接this出來了

在Global里寫下如下代碼import { notification } from 'ant-design-vue'//引入

notification.config({//寫配置//一些參你也可以配置到動態(tài)的，看個人需要

placement: 'topRight',

top: '50px',

duration: 3,

});

function AntNotice(type, Tit, Cont) {

notification[type]({

message: Tit,

description: Cont,

});

}

export default {//頁面返回

AntNotice,

}

//調(diào)用：?this.$global.AntNotice('success','Click Me','哈哈哈')

3、布局

先用上這個一般管理系統(tǒng)的通用布局

collapsible

v-model="collapsed">

:type="collapsed ? 'menu-unfold' : 'menu-fold'"

@click="()=> collapsed = !collapsed" />

Content

效果如下：

主要講解：柵格的響應(yīng)式布局

我們在content位置寫下如下代碼

Col

Col

Col

Col

這樣寫很舒服的，響應(yīng)式處理，會根據(jù)不同屏幕寬給你顯示不同寬度，

官網(wǎng)沒有強調(diào)，特地拿出來引起注意下：

xs

<576px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

-

sm

≥576px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

-

md

≥768px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

-

lg

≥992px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

-

xl

≥1200px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

-

xxl

≥1600px?響應(yīng)式柵格，可為柵格數(shù)或一個包含其他屬性的對象

number|object

總結(jié)

以上是生活随笔為你收集整理的ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。