Antdv 备忘

www.antdv.com

1. 神奇的冒号：<a-select 默认选中： 

<a-select :value="refreshInterval" 

 <a-radio-group v-model:value="specialPolicy.resRuleType">
                <a-radio :value="1">平台定制</a-radio> 
              </a-radio-group>
就可以选中。

2.使用Drawer (单独页面方式)

<template>

<a @click="changeTheme" style="padding-right: 20px">切换主题</a>

  <SettingDrawer ref="settingDrawer" />
</template>

<script setup>

import SettingDrawer from "./SettingDrawer.vue";

const settingDrawer = ref();
const changeTheme = () => {
  settingDrawer.value.showDrawer();
};

</script>

SettingDrawer.vue:

<template>
  <a-drawer
      :visible="visibleFlag"
      class="custom-class"
      style="color: red"
      title="设置"
      @close="closeDrawer"
      placement="right"
  >
    <p>Some contents...</p>
  </a-drawer>
</template>
<script setup>

import {ref} from "vue";

const visibleFlag = ref(false);
function showDrawer(){
  visibleFlag.value = true;
}
function closeDrawer(){
  visibleFlag.value = false;
}
defineExpose({showDrawer,})
</script>

如有回调，则：emits('reloadList'); //在合适的方法里执行。

const emits = defineEmits(['reloadList']);

<FormDrawer ref="formDrawer" @reloadList="queryList"/>

3.给输入框加提示：

<a-form-item name="password" label="新密码" :rules="[{ required: true, message: '密码不能为空！' }, { min: 5, max: 20, message: '密码长度需在5到20个字符之间！' }]">
  <a-input v-model:value="resetPasswordForm.data.password"  :maxlength="20" type="password" placeholder="请填写新密码"></a-input>
</a-form-item>

4.数据绑定：

v-model、:attribute 和 attribute 用于绑定属性

v-model 是双向数据绑定，用法 v-model:current = "queryForm.page"

:attr  是单向数据绑定  :total = "total"     全写形式： v-bind:attr= "total"

atrribute=""  ，静态数据绑定，不会被 vue解析。

@是事件绑定。

<a-pagination showSizeChanger
              v-model:current="queryForm.pageNum"
              v-model:pageSize="queryForm.pageSize"
              :total="total"
              @change="queryList" />

5.给菜单添加一个新的icon:

在AutoeeIcon.js中加入一行：

if (iconName === 'auto') {
  iconName = 'font-colors-outlined';
}

 font-colors-outlined是要确保icon库中存在的图标，即可在编辑modal中输入auto 来显示相应的icon。

6.defineEmits，defineExpose，defineProps 组件三定义的含义及用法：

defineProps：获取组件传值

defineExpose:组件暴露自己的属性

defineEmits:子组件向父组件事件传递

参考：vue3：语法糖内的defineProps及defineEmits、defineExpose_vue3 'defineexpose' is not defined-CSDN博客

7.如果npm run dev 执行后页面很慢才出来，检查一个浏览器F12，关闭 “不使用缓存” 项。