feat: update alert && update anchor

pull/666/head
wangxueliang 6 years ago
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…
Cancel
Save