Ant Design Vue

2022-02-25 20:02:30 阅读：271 来源： 互联网

标签：nextTick Vue DOM Ant hover Design 组件 store

popover组件内容如果包裹的不是一个块级标签，第一次隐藏动画会变的不正常
实现hover效果可以使用css

/* B元素默认不显示 */
.B {
    display: none;
}
/* A元素hover时显示B */
.A:hover .B {
    display: block;
}

tree组件获取选中节点

onSelect (selectedKeys, e) {
    this.selectedNode = e.node.$vnode.data.props.dataRef
}

VUEX中的dispatch()异步操作和commit()同步操作

commit: 同步操作
存储this.$store.commit('changeValue',name)
取值this.$store.state.changeValue

dispatch: 异步操作
存储this.$store.dispatch('getlists',name)
取值this.$store.getters.getlists

父子组件传递对象或者数组

props: {
      dataSource: {
        type: Array,
        default: () => {
          return []
        }
      }
    },

子组件监听父组件数据变化

watch: {
      dataSource: {
        handler (newValue, oldValue) {
          this.data = newValue ? [...newValue] : []
        },
        deep: true,  // 深度监听
        immediate: true // 初次绑定就执行
      }
    },

Vue.nextTick()

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。  
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，  
在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；
通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

Axios不支持通过GET请求的body来传参数
VUE过滤器 utils/filter.js


{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

日期格式化
<a-table-column key="createTime" title="创建时间" data-index="createTime" width="20%" align="center">
    <template slot-scope="text">
      {{ text | moment }}
      {{ text | moment('YYYY-MM-DD HH:mm:ss') }}
    </template>
</a-table-column>

通用Mapper的insertList要求实体类有且只有一个@Id 或者没有@Id
阻止事件冒泡

<a @click.stop="handleEdit(row)">编辑</a>
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。

vue ant popconfirm 阻止事件冒泡
<a-popconfirm>
  <a-icon type="minus-circle-o" @click.stop/>
</a-popconfirm>

vue在DOM渲染完成后执行一些代码

{
  created () {
    this.$nextTick(() => {
      // 可以使用回调函数的写法
      // 这个函数中DOM必定渲染完成
    })

    this.$nextTick().then(() => {
      // 也支持promise
      // 这个函数中DOM必定渲染完成
    })
  }
}

VUE 组件实现双向绑定

props: {
  // 值
  value: {
    type: String,
    default: ''
  }
},
this.$emit('input',value)

接口上的注解 AOP无法拦截
https://www.cnblogs.com/yihuihui/p/14864158.html

标签：nextTick,Vue,DOM,Ant,hover,Design,组件,store
来源： https://www.cnblogs.com/ranger-dev/p/15937604.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ant Design Vue