一期Ant Design of Vue 组件 a-image-preview-group 切换图片，a-date-picker时间显示，a-switch开关0.1，a-tooltip卡片排版

现在csdn 写的太杂了 ，找的全部是没办法解决问题的。基本都是乱写 。

写的毫无水平，全部是乱丢代码

本人不忍心 一个一个问题全部解决出来！！

目录

1.关于 a-image-preview-group 切换图片 

1.1效果

2.关于a-date-picker时间显示 报错date.locale is not a function

2.1效果

3.a-switch开关0或者1

3.1效果图

4.vd的a-tooltip卡片显示排版问题

4.1效果图

1.关于 a-image

---

一个点 在 a-image-preview-group 绑定一个属性:preview="{visible}"  visible 定义 ture 或者false  

显示 图片是否展示   不要写在<a-image> 标签  previewimg是我的数组 有问题直接私信我！！

---

   <!--v-if 判断数组长度-->

                    <!--visible 显示 ture 不显示false-->

                    <a-image-preview-group v-if="previewimg && previewimg.length > 0"

                        :preview="{visible}">

                        <div style="display: none">

                    <!--循环图片数组 -->

                    <a-image :width="200"

                     v-for="(item, index) in previewimg"

                    :key="index"

                    :src="item.img" />

                    <!--展示每一张图片-->

                </div>

1.1效果

2.关于a-date-picker时间显示 报错date.locale is not a function

很多人用肯定 会报错date.locale is not a function 错误  一个点 时间显示 不对  网上教的全部是错误的 要看官网 

前端 肯定 是要 "'YYYY-MM-DD HH:mm:ss'"  后端是字符保存 问题就是转换的时候 没有写对

在组件中不需要使用任何js库 解决办法 添加 :valueFormat="'YYYY-MM-DD HH:mm:ss'" ！！！！！ 解决ntd组件库日期组件日期回显时,date.locale is not a function 格式不正确的全部问题  需要一个dayjs 

记得导入 

上代码！！！ 有问题评论

  <a-form-item label="套餐截取时间" name="deadlinef">
          <a-date-picker   style=" width:100%" v-model:value="formData.deadlinef"
          :valueFormat="'YYYY-MM-DD HH:mm:ss'"
          :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
          locale="zh-CN"
          @change="onChange"  @ok="onOk" />

2.1效果

3.a-switch开关0或者1

默认是 true 和false 根据业务来

二个重点

checkedValue='1'    unCheckedValue='0'  第一个是开的情况  二个是关的情况

  
                    <a-space direction="vertical">
                        <a-switch v-model:checked="record.stautsf"
                        checkedValue='1' unCheckedValue='0'
                     @change="handleSwitchChange(record)"/> 
                    </a-space>

3.1效果图

4.vd的a-tooltip卡片显示排版问题

使用插值表达式  首先 看你在js还是vue页面 先 排版好 这个是使用 js排版的效果

因为 vd的a-tooltip 没有排版的这些方法属性 

<a-tooltip placement="top" overlayClassName="tooltip_class" >
                     <!-- p v-html 是 我调用了js先排版好了 在用插值表达式-->           
                                <template #title  >
                                    <p v-html="handleMouseOver(value.datas)"></p>
                                   </template>

                                <!-- 这是我的样式 x-->
                                <div
                                    style="max-width: 200px; overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis; background-color: #90EE90; color: #fff; padding: 0 5px; border-radius: 2px; margin-right: 5px;">
                                    {{ value.region }}
                                </div>
                            </a-tooltip>
                            
                            //样式 不用spoced
 <style lang="less">
.tooltip_class {
  max-width: 350px;  
}
</style>

4.1效果图

解决 业务上与Ant Design of Vue的问题 适应版本是 4.2.3 其他版本需要自己测试 属于自己摸索出来的，认证我 前端 这套框架常见的问题  有什么阅读 官网的方法 也是有问题  帮助给位少走弯路吧