2020年11月30日(antd-design-vue)

2020年11月30日(antd-design-vue)

1.关于antd-design中from的踩坑

我使用的是from表单里面的input，在提交表单时，通过name来获取值，但输入内容之后，清空，发现在调用提交方法时，这个name还是会有一个字符，可是输入框内什么内容都没有了呀，比如当我输入1111之后，我请清空了，打印出来的name是1,很少疑惑，上网百度之后也没发现为什么，可以看到这个表单是放在一个背景为黑色的div里，这个是我封装的一个组件，因为有很多地方要用到这样的背景,所以封装了一个组件

代码如下:

<template>
  <div class="outerbox" :style="{width, height, padding, transition}">
    <slot name="title"/>
    <slot name="content"/>
  </div>
</template>
<script>
export default {
  name: 'HeritageContainer',
  data () {
    return {}
  },
  props: {
    width: {
       type: String,
       default: '400px'
    },
    transition: {
      type: String,
      default: 'all 0.3s'
    },
    height: {
      type: String,
      default: '650px'
    },
    padding: {
      type: String,
      default: '10px 14px'
    }
  }
}
</script>
<style lang="less" scoped>
.outerbox{
  background: rgba(0,0,0,0.6);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
    h2, h3{
      color: #ffffff;
      font-size: 18px;
    }
}
</style>

我之前的代码是把from放在HeritageContainer这个组件里，后来发现问题就在这个组件上，当我把from代码移出来之后，就好了，莫名其妙:bust_in_silhouette:,现在当我清空之后就没有值了是个空字符串，提交也不会有什么问题，可是我现在要做一个历史记录的功能

当我点击其中的一项，对应的内容放在对于的输入框里，那就要用到v-model了，好家伙，用了v-model，之后placeholder不显示了，设置为’’，null都不显示，最后改为undefined就显示了，而且他们的placeholder样式还不一样Cascader ，input，select,查看placeholder的样式

好了，就可以看placeholder的样式了

对于vue-amap的搜索，真的难用呀，当输入框没有内容时，提示框居然还在，他也没有别的事件，封装的一个组件，本来想通过ref来获取value，压根获取不了

2.表格合并

根据不同的数据，对应生成不同的表格格式，antd的table就提供了一个方法，element也是

提供了一个customRender方法，在封装一个mergeCells方法

mergeCells (text, data, key, index) {
    // 上一行该列数据是否一样
    if (index !== 0 && text === data[index - 1][key]) {
      return 0
    }
    let rowSpan = 1
    // 判断下一行是否相等
    for (let i = index + 1; i < data.length; i++) {
      if (text !== data[i][key]) {
        break
      }
      rowSpan++
    }
    return rowSpan
}

3.v-show和v-if

都知道v-show就是普通的显示和隐藏，但是v-if是重新创建和生成，但是有时候写着写着就没有注意那么多，多人开发的时候更不用说了，

这是同事加的判断，是一个更加滑动鼠标，使地图缩放，根据缩放的距离显示隐藏对应的组件，这个base-box之前是v-if，当我缩放到一定的距离，这个组件就销毁了，所以当我监听他里面的属性时，咋就没反应？？？还以为是我的vuex写的有问题，检查了好久,唉！vue和redux都是基于flux的思想、模式

4.transtion

有时候的折叠效果，如果直接设置width或者其他的属性就会很单调，加上一个transtion就会好很多，因为有一个元素的height不确定，我就想用auto，折叠的时候就是0,结果没效果，后来发现设置具体值就可以,也可以使用可以使用 max-height 进行 hack

5.vite

虽然没有用到项目中，但是今天用vite创建了一个小demo，瞬间觉得webpack又丑又重，但是vite现在还是beta，说的是不久之后就会有正式版，估计还是会要一段事件的，太新的东西，也不敢在项目当中顺便瞎用呀:smiley: