feat: update alert && update anchor
parent
75cc96eefd
commit
08821561ab
|
@ -5,6 +5,7 @@ import PropTypes from '../_util/vue-types';
|
|||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import { getComponentFromProp, isValidElement } from '../_util/props-util';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
function noop() {}
|
||||
export const AlertProps = {
|
||||
/**
|
||||
|
@ -32,9 +33,12 @@ export const AlertProps = {
|
|||
};
|
||||
|
||||
const Alert = {
|
||||
name: 'AAlert',
|
||||
props: AlertProps,
|
||||
mixins: [BaseMixin],
|
||||
name: 'AAlert',
|
||||
inject: {
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
closing: true,
|
||||
|
@ -65,7 +69,10 @@ const Alert = {
|
|||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls = 'ant-alert', banner, closing, closed } = this;
|
||||
const { prefixCls: customizePrefixCls, banner, closing, closed } = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('alert', customizePrefixCls);
|
||||
|
||||
let { closable, type, showIcon, iconType } = this;
|
||||
const closeText = getComponentFromProp(this, 'closeText');
|
||||
const description = getComponentFromProp(this, 'description');
|
||||
|
|
|
@ -6,6 +6,7 @@ import getScroll from '../_util/getScroll';
|
|||
import raf from 'raf';
|
||||
import { initDefaultProps } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
function getDefaultContainer() {
|
||||
return window;
|
||||
|
@ -91,14 +92,16 @@ export default {
|
|||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(AnchorProps, {
|
||||
prefixCls: 'ant-anchor',
|
||||
affix: true,
|
||||
showInkInFixed: false,
|
||||
getContainer: getDefaultContainer,
|
||||
}),
|
||||
|
||||
inject: {
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
data() {
|
||||
this.links = [];
|
||||
this._sPrefixCls = '';
|
||||
return {
|
||||
activeLink: null,
|
||||
};
|
||||
|
@ -200,8 +203,8 @@ export default {
|
|||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
const { prefixCls } = this;
|
||||
const linkNode = this.$el.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
|
||||
const { _sPrefixCls } = this;
|
||||
const linkNode = this.$el.getElementsByClassName(`${_sPrefixCls}-link-title-active`)[0];
|
||||
if (linkNode) {
|
||||
this.$refs.linkNode.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
|
||||
}
|
||||
|
@ -209,7 +212,11 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls, offsetTop, affix, showInkInFixed, activeLink, $slots, getContainer } = this;
|
||||
const { prefixCls: customizePrefixCls, offsetTop, affix, showInkInFixed, activeLink, $slots, getContainer } = this;
|
||||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
|
||||
this._sPrefixCls = prefixCls;
|
||||
|
||||
const inkClass = classNames(`${prefixCls}-ink-ball`, {
|
||||
visible: activeLink,
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { initDefaultProps, getComponentFromProp } from '../_util/props-util';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
export const AnchorLinkProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
|
@ -11,12 +12,12 @@ export const AnchorLinkProps = {
|
|||
export default {
|
||||
name: 'AAnchorLink',
|
||||
props: initDefaultProps(AnchorLinkProps, {
|
||||
prefixCls: 'ant-anchor',
|
||||
href: '#',
|
||||
}),
|
||||
inject: {
|
||||
antAnchor: { default: () => ({}) },
|
||||
antAnchorContext: { default: () => ({}) },
|
||||
configProvider: { default: () => ({}) },
|
||||
},
|
||||
watch: {
|
||||
href(val, oldVal) {
|
||||
|
@ -44,7 +45,11 @@ export default {
|
|||
},
|
||||
},
|
||||
render() {
|
||||
const { prefixCls, href, $slots } = this;
|
||||
const { prefixCls: customizePrefixCls, href, $slots } = this;
|
||||
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
|
||||
|
||||
const title = getComponentFromProp(this, 'title');
|
||||
const active = this.antAnchor.$data.activeLink === href;
|
||||
const wrapperClassName = classNames(`${prefixCls}-link`, {
|
||||
|
|
|
@ -12,7 +12,7 @@ The simplest usage.
|
|||
<template>
|
||||
<a-anchor>
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
|
|
|
@ -12,7 +12,7 @@ Clicking on an anchor does not record history.
|
|||
<template>
|
||||
<a-anchor :affix="false" @click="handleClick">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
|
|
|
@ -12,7 +12,7 @@ Do not change state when page is scrolling.
|
|||
<template>
|
||||
<a-anchor :affix="false">
|
||||
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
|
||||
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<a-anchor-link href="#API" title="API">
|
||||
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
|
||||
<a-anchor-link href="#Link-Props" title="Link Props" />
|
||||
|
|
Loading…
Reference in New Issue