ant-design-vue使用之路

发布时间:2022-07-29 发布网站:https://blog.csdn.net/qq_39692513
前端之家收集整理的这篇文章主要介绍了ant-design-vue使用之路前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


引入ant-design-vue

1.全局引入

1. 命令行使用npm安装
npm install ant-design-vue --save
2. main.ts文件中导入
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

2. 局部引入

为了减小打包大小,提高加载速度,更推荐这种做法

局部引入组件

1. 命令行安装ant-design-vue包
npm install ant-design-vue --save

2 创建antPlugin.js文件,按需引入组件都可在这个文件中写,以button组件为例
import Vue from 'vue'
import {Button} from 'ant-design-vue' // 官方文档中组件去掉a,首字母大写如a-form-model, 按需引入组件就是 FormModel
Vue.use(Button)

3 main.ts 导入此文件
import ‘@/util/antPlugin’

4 babel.config.js 添加import插件,自动引入组件对应样式
module.exports = {
  // ...
  plugins: [
    [
      'import',{ libraryName: 'ant-design-vue',libraryDirectory: 'es',style: 'css' }
    ]
  ]
}

5 坑
引入样式时,需要npm安装less-loader去解析,less-loader版本过高超过6.0后,会报错。
需手动设置javascriptEnabled。故我们在vue.config.js文件中设置(*楼主当时设置了好多遍也没起效,最后发现是less-loader没安装完全,多安装几次就好了*)
modules.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

局部引入图标

按需采用吧,而且要注意ant-design-vue组件中,自带的图标,也要引用进来,不然组件图标会消失。

1 在项目中创建文件icons.ts ,引入并导出你需要的图标
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'
export { default as QuestionCircleTwoTone } from '@ant-design/icons/lib/twotone/QuestionCircleTwoTone'
export { default as ForkOutline } from '@ant-design/icons/lib/outline/ForkOutline'
2 在vue.config.js中配置将从npm包中导入映射从你创建的文件中导入
module.exports = {
 configureWebpack: {
    resolve: {
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/util/icons.ts')
      }
    },plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['zh-CN']
      })
    ]
  },}
3 坑
记得找到组件自身所引入图标,也导入进来

使用

1message的使用

可在js中方便的调用message弹窗

1 创建message.js
import { message } from 'ant-design-vue'
2 定义sucess、error等方法,并导出,即可方便使用了
function success (msg: string) {
  message.success(msg)
}
export default { success,error,warn,info }

2 日期范围组件本地化

讲一下日期选择器本地化,这里讲一下多处
多处本地化,推荐使用config-provider
一个地方组件化,推荐使用组件中locale参数

tempate中使用a-config-provider
<a-config-provider :locale="locale">
					<a-range-picker :ranges="range" v-model="dateData" :disabledDate="getDisabledTime" :allowClear="false" format="YYYY-MM-DD HH:mm:ss" />
				</a-config-provider>
				
js中
import moment from 'moment'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
 		class类中
 			public locale = zhCN //定义语言
 			
	public range = { //设置快捷选项
		今天: [moment().startOf('day'),moment()],昨天: [
			moment()
				.startOf('day')
				.subtract(1,'days'),moment()
				.endOf('day')
				.subtract(1,'days')
		],最近三天: [
			moment()
				.startOf('day')
				.subtract(2,moment()
		],最近一周: [
			moment()
				.startOf('day')
				.subtract(1,'weeks'),moment()
		]
	}
	
	public getDisabledTime(current: any) { //定义选择范围
		return current < moment().subtract(7,'day') || current > moment()
	}

3组件化的小技巧

主要是依靠[] 操作符和,传递父方法。以list和form为例

list

1 子组件中
 template中
 
  <a-list item-layout="horizontal" :data-source="data">
    <div v-if="headerButtons.length !== 0" slot="header" class="button-postion">
     <a-button type="primary" class="button-margin"  v-for="(button) in headerButtons" :key="button.name" @click="emitParent(button.funcName,button.type)">
        {{button.name}}
      </a-button>
    </div>   //  【顶部按钮,传递想展示按钮以及方法】
    <a-list-item slot="renderItem" slot-scope="item">
      <a-list-item-meta
        :description="item[name]"
      >
        <a href="javascript:void(0);" class="title-width" v-if="mainListFunc" slot="title"  @click="emitRouter(item)">{{ item[id] }}</a>
        <span type="link" v-else slot="title" >{{ item[id] }}</span>
      </a-list-item-meta>  //【 list列表,将展示字段传递,使用item[字段]来调用】
       <div class="content-width">{{item[remark]}}</div>
      <a slot="actions">
        <a-button size="small" type="link"  v-for="(button) in buttons" :key="button.name" @click="emitParent(button.funcName,button.type,item)">
        {{button.name}}
      </a-button> //【传递按钮时,同时传递方法】
      </a>
    </a-list-item>
  </a-list>

js中,接收参数并调用父方法

 public emitParent (funcName: string,type: number,data: object = {}) {
     this.$emit(funcName,type,data)
   }


2 父组件中
template中引入子组件,并传递参数

<list :headerButtons="headerButtons" :id="id" :name="name" :remark="remark" :data="data" :buttons="buttons" :mainListFunc="mainListFunc" @addOrEditData="startForm"  @startSureShow="startSureShow" @mainIdFunc="gotoRouter"></list>

js中 定义传递按钮参数及其他参数
public buttons =[{ name: '编辑',funcName: 'addOrEditData',type: 2 },{ name: '删除',funcName: 'startSureShow',type: 3 }]/

form

1 子组件
template中
  <a-form-model
    ref="ruleForm"
    :model="formData"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item class="item-margin-bottom" v-for="item in formLabel" :key="item.propName" :label="item.label" :prop="item.propName"> // 【使用form循环来遍历输入列表,传入formLabel】
      <a-radio-group v-if="item.type === 1" v-model="formData[item.propName]" :disabled="item.disabled">  // 【使用formData[item.propName]】来双向绑定
        <a-radio v-for="radio in item.values" :key="radio.value" :value="radio.value">{{radio.label}}</a-radio>
      </a-radio-group>
       <a-input v-else-if="item.type === 2" v-model="formData[item.propName]" type="textarea" :disabled="item.disabled" />
      <a-input v-else v-model="formData[item.propName]" :disabled="item.disabled" />
    </a-form-model-item>
    </a-form-model>

2父组件中
template中引入并传递参数
<dialog-form :title="title" :visible="visible" :confirmLoading="confirmLoading" :formData="formData" :formLabel="formLabel" :rules="rules" @saveFunc="saveScenceData" @cancelFunc="closeDialog"></dialog-form>

js中定义参数

  public formLabel = [{ label: '场景id',propName: 'businessid',disabled: false },// 标签显示
    { label: '场景名称',propName: 'businessname',{ label: '场景描述',propName: 'remark',]
   public formData= { // 表单数据
    businessid: '',businessname: '',remark: ‘’
  }

优化

webpack分析插件

vue.config.js中
module.exports = {
  chainWebpack: (config) => {
     config
       .plugin('webpack-bundle-analyzer')
       .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
   },}
运行后,打开地址,可看到各个文件的打包大小,进而选择性的优化

优化强依赖插件moment

去除其他语言包,只保留中文和英文(英文内置,不可去除)
module.exports ={
    plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['zh-CN']
      })
    ]
  },}

总结


以上是前端之家为你收集整理的ant-design-vue使用之路全部内容,希望文章能够帮你解决ant-design-vue使用之路所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。