ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈嘍哈嘍，這期帶來螞蟻金服的一個?Ant Design 的 Vue 實現。
樣式還是很現代化的，嗯...現在是2019年9月17，對現在來說還很fashion過幾年就不知道了。
話不多說直接上手，喜歡記得關注，順手右上角來個賞我兩個大手贊，讓我體驗笑出個豬叫聲一下。
正文
要做這種樣式，我們一般在項目中全局引入一下，類似的還有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
入門一般先來個導航欄，咱用Antd的Menu組件
官方會給你一組寫好的死數據的實例，但是在項目中我們一般寫成動態。
vue中寫動態數據，方便的亞批，不僅代碼優美，還簡潔易讀。
HTML:
style="width: 256px"
v-model="currentSelectChild"
@openChange="onOpenChange"
:openKeys="currentParent"
theme="dark"
mode="inline">
{{itParent.Title}}
{{itChild.Title}}
數據格式：
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("上一個關閉了");//普通的
});
2)：Notification
這個不同于Message,他需要配置一些參數，所以不建議每個頁面直接this去調用
以下是我的做法
在main.js里引入并掛載全局：
//main.js
import global from '@/Global' // 引入global
Vue.prototype.$global = global;掛載到vue上，就能直接this出來了
在Global里寫下如下代碼import { notification } from 'ant-design-vue'//引入
notification.config({//寫配置//一些參你也可以配置到動態的，看個人需要
placement: 'topRight',
top: '50px',
duration: 3,
});
function AntNotice(type, Tit, Cont) {
notification[type]({
message: Tit,
description: Cont,
});
}
export default {//頁面返回
AntNotice,
}
//調用：?this.$global.AntNotice('success','Click Me','哈哈哈')
3、布局
先用上這個一般管理系統的通用布局
collapsible
v-model="collapsed">
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="()=> collapsed = !collapsed" />
Content
效果如下：
主要講解：柵格的響應式布局
我們在content位置寫下如下代碼
Col
Col
Col
Col
這樣寫很舒服的，響應式處理，會根據不同屏幕寬給你顯示不同寬度，
官網沒有強調，特地拿出來引起注意下：
xs
<576px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
-
sm
≥576px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
-
md
≥768px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
-
lg
≥992px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
-
xl
≥1200px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
-
xxl
≥1600px?響應式柵格，可為柵格數或一個包含其他屬性的對象
number|object
總結
以上是生活随笔為你收集整理的ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区的全部內容，希望文章能夠幫你解決所遇到的問題。
