如何在vue中使用ant-design-vue組件

更新時間：2023年01月29日 14:36:26 作者：Onemorelight95

這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在vue中使用ant-design-vue組件

1. 安裝

首先使用vue-cli創(chuàng)建項目，然后進入項目，使用npm安裝ant-design-vue庫：

npm i --save ant-design-vue@next

然后在package.json文件中的dependencies中看見剛剛下載的庫：

在這里插入圖片描述

2. 引入組件庫

然后在main.js中引入，注意要按照順序：

# 引入組件庫
import ant from 'ant-design-vue'
# 引入樣式表
import 'ant-design-vue/dist/antd.css'

引入順序如圖所示：

在這里插入圖片描述

接著需要use該組件庫的句柄：

在這里插入圖片描述

然后在要使用的vue文件中也引入組件庫，比如我要在項目默認的App.vue中使用組件庫：

import 'ant-design-vue/dist/antd'

在這里插入圖片描述

3. 使用

3.1 按鈕樣式

直接將代碼復制到component標簽中即可，要注意component標簽中只能允許有一個根標簽。

在這里插入圖片描述

3.2 導航欄樣式

可以選擇顏色的導航欄

<template>
  <div>
    <a-switch :checked="mode === 'vertical'" @change="changeMode" />
    Change Mode
    <span class="ant-divider" style="margin: 0 1em" />
    <a-switch :checked="theme === 'dark'" @change="changeTheme" />
    Change Theme
    <br />
    <br />
    <a-menu
      style="width: 256px"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      :mode="mode"
      :theme="theme"
    >
      <a-menu-item key="1">
        <template #icon>
          <MailOutlined />
        </template>
        Navigation One
      </a-menu-item>
      <a-menu-item key="2">
        <template #icon>
          <CalendarOutlined />
        </template>
        Navigation Two
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>Navigation Three</template>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
        <a-sub-menu key="sub1-2" title="Submenu">
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option 6</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #icon>
          <SettingOutlined />
        </template>

        <template #title>Navigation Four</template>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
        <a-menu-item key="9">Option 9</a-menu-item>
        <a-menu-item key="10">Option 10</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
  setup() {
    const state = reactive({
      mode: 'inline',
      theme: 'light',
      selectedKeys: ['1'],
      openKeys: ['sub1'],
    });

    const changeMode = checked => {
      state.mode = checked ? 'vertical' : 'inline';
    };

    const changeTheme = checked => {
      state.theme = checked ? 'dark' : 'light';
    };

    return { ...toRefs(state), changeMode, changeTheme };
  },

  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
});
</script>

在這里插入圖片描述

頂部導航欄

<template>
  <a-menu v-model:selectedKeys="current" mode="horizontal">
    <a-menu-item key="mail">
      <template #icon>
        <mail-outlined />
      </template>
      Navigation One
    </a-menu-item>
    <a-menu-item key="app" disabled>
      <template #icon>
        <appstore-outlined />
      </template>
      Navigation Two
    </a-menu-item>
    <a-sub-menu>
      <template #icon>
        <setting-outlined />
      </template>
      <template #title>Navigation Three - Submenu</template>
      <a-menu-item-group title="Item 1">
        <a-menu-item key="setting:1">Option 1</a-menu-item>
        <a-menu-item key="setting:2">Option 2</a-menu-item>
      </a-menu-item-group>
      <a-menu-item-group title="Item 2">
        <a-menu-item key="setting:3">Option 3</a-menu-item>
        <a-menu-item key="setting:4">Option 4</a-menu-item>
      </a-menu-item-group>
    </a-sub-menu>
    <a-menu-item key="alipay">
      <a  rel="external nofollow"  target="_blank" rel="noopener noreferrer">
        Navigation Four - Link
      </a>
    </a-menu-item>
  </a-menu>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  setup() {
    const current = ref(['mail']);
    return {
      current,
    };
  },

  components: {
    MailOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
});
</script>

在這里插入圖片描述

3.3 表單樣式

內聯(lián)登錄欄

<template>
  <a-form
    layout="inline"
    :model="formState"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item>
      <a-input v-model:value="formState.user" placeholder="Username">
        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="formState.password" type="password" placeholder="Password">
        <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        :disabled="formState.user === '' || formState.password === ''"
      >
        Log in
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  setup() {
    const formState = reactive({
      user: '',
      password: '',
    });

    const handleFinish = values => {
      console.log(values, formState);
    };

    const handleFinishFailed = errors => {
      console.log(errors);
    };

    return {
      formState,
      handleFinish,
      handleFinishFailed,
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>

在這里插入圖片描述

到此這篇關于在vue中使用ant-design-vue組件的文章就介紹到這了,更多相關vue使用ant-design-vue組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應式數據的兩個核心函數,在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下
2024-09-09
vue項目中jsonp跨域獲取qq音樂首頁推薦問題
這篇文章主要介紹了vue項目中jsonp跨域獲取qq音樂首頁推薦問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-05-05
Vue根據條件添加click事件的方式
今天小編就為大家分享一篇Vue根據條件添加click事件的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下
2018-02-02
vue?watch監(jiān)聽方法總結
這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結，偵聽器一般來說是用來監(jiān)聽數據的變化，默認是在數據發(fā)生變化時執(zhí)行。監(jiān)聽的數據名放到這里面作為函數名，這個函數里面有兩個參數，一個是新值，一個是舊值。下面我們就一起進入文章了解更具體的內容吧
2021-12-12
Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網頁和移動應用中的內容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下
2024-08-08
Vue內部渲染視圖的方法
這篇文章主要介紹了Vue內部渲染視圖的方法，本文通過實例代碼圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
Vue3中的unref詳解與常見使用方法
這篇文章主要給大家介紹了關于Vue3中unref詳解與常見使用的相關資料,Vue3中的unref是一個實用工具,用于簡化訪問響應式引用和普通值的過程,通過自動判斷類型,unref可以處理任何類型的值,從而使代碼更加簡潔和易讀,需要的朋友可以參考下
2024-11-11
vue3+ts+vite中“@“路徑失效的解決辦法
這篇文章主要介紹了vue3+ts+vite中“@“路徑失效的解決辦法,在使用vite腳手架生成項目時,解決引入路徑失敗的錯誤,可以按照本文介紹的步驟操作,需要的朋友可以參考下
2024-11-11
vue實現下拉加載其實沒那么復雜
這篇文章主要給大家介紹了關于vue實現下拉加載的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-08-08