chore: upgrade to vue3
Amour1688
parent
5acc7671a3
commit
adee8604b2
|
|
@ -2,24 +2,25 @@
|
|||
|
||||
module.exports = function(modules) {
|
||||
const plugins = [
|
||||
require.resolve('babel-plugin-transform-vue-jsx'),
|
||||
require.resolve('babel-plugin-inline-import-data-uri'),
|
||||
require.resolve('babel-plugin-transform-es3-member-expression-literals'),
|
||||
require.resolve('babel-plugin-transform-es3-property-literals'),
|
||||
require.resolve('babel-plugin-transform-object-assign'),
|
||||
require.resolve('babel-plugin-transform-object-rest-spread'),
|
||||
require.resolve('babel-plugin-transform-class-properties'),
|
||||
require.resolve('@babel/plugin-transform-member-expression-literals'),
|
||||
require.resolve('@babel/plugin-transform-property-literals'),
|
||||
require.resolve('@babel/plugin-proposal-export-default-from'),
|
||||
require.resolve('@babel/plugin-transform-object-assign'),
|
||||
require.resolve('@babel/plugin-transform-template-literals'),
|
||||
require.resolve('@babel/plugin-proposal-object-rest-spread'),
|
||||
require.resolve('@babel/plugin-proposal-class-properties'),
|
||||
];
|
||||
plugins.push([
|
||||
require.resolve('babel-plugin-transform-runtime'),
|
||||
require.resolve('@babel/plugin-transform-runtime'),
|
||||
{
|
||||
polyfill: false,
|
||||
helpers: false,
|
||||
},
|
||||
]);
|
||||
return {
|
||||
presets: [
|
||||
[
|
||||
require.resolve('babel-preset-env'),
|
||||
require.resolve('@babel/preset-env'),
|
||||
{
|
||||
modules,
|
||||
targets: {
|
||||
|
|
@ -34,6 +35,7 @@ module.exports = function(modules) {
|
|||
},
|
||||
},
|
||||
],
|
||||
require.resolve('@ant-design-vue/babel-preset-jsx'),
|
||||
],
|
||||
plugins,
|
||||
env: {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 814b848dea1d5877f17987d512a0d74fdc99cb1a
|
||||
Subproject commit cbf75b264e8f00f820a73fd2204183d17ca8648b
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { nextTick } from 'vue';
|
||||
import TransitionEvents from './css-animation/Event';
|
||||
import raf from './raf';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
|
|
@ -22,7 +23,7 @@ export default {
|
|||
name: 'Wave',
|
||||
props: ['insertExtraNode'],
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
nextTick(() => {
|
||||
const node = this.$el;
|
||||
if (node.nodeType !== 1) {
|
||||
return;
|
||||
|
|
@ -161,9 +162,10 @@ export default {
|
|||
},
|
||||
|
||||
render() {
|
||||
if (this.configProvider.csp) {
|
||||
this.csp = this.configProvider.csp;
|
||||
const csp = this.configProvider().csp;
|
||||
if (csp) {
|
||||
this.csp = csp;
|
||||
}
|
||||
return this.$slots.default && this.$slots.default[0];
|
||||
return this.$slots.default() && this.$slots.default()[0];
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Transition } from 'vue';
|
||||
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
||||
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
|
||||
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
|
||||
|
|
@ -92,22 +93,23 @@ const Alert = {
|
|||
},
|
||||
},
|
||||
|
||||
render(h) {
|
||||
render() {
|
||||
const { prefixCls: customizePrefixCls, banner, closing, closed } = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const getPrefixCls = this.configProvider().getPrefixCls;
|
||||
const prefixCls = getPrefixCls('alert', customizePrefixCls);
|
||||
|
||||
let { closable, type, showIcon } = this;
|
||||
const closeText = getComponentFromProp(this, 'closeText');
|
||||
const description = getComponentFromProp(this, 'description');
|
||||
const message = getComponentFromProp(this, 'message');
|
||||
const icon = getComponentFromProp(this, 'icon');
|
||||
const { closeText, description, message, icon } = this.$props;
|
||||
// const closeText = getComponentFromProp(this, 'closeText');
|
||||
// const description = getComponentFromProp(this, 'description');
|
||||
// const message = getComponentFromProp(this, 'message');
|
||||
// const icon = getComponentFromProp(this, 'icon');
|
||||
// banner模式默认有 Icon
|
||||
showIcon = banner && showIcon === undefined ? true : showIcon;
|
||||
// banner模式默认为警告
|
||||
type = banner && type === undefined ? 'warning' : type || 'info';
|
||||
|
||||
const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
|
||||
const IconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
|
||||
|
||||
// closeable when closeText is assigned
|
||||
if (closeText) {
|
||||
|
|
@ -129,30 +131,29 @@ const Alert = {
|
|||
</a>
|
||||
) : null;
|
||||
|
||||
const iconNode =
|
||||
(icon &&
|
||||
(isValidElement(icon) ? (
|
||||
cloneElement(icon, {
|
||||
class: `${prefixCls}-icon`,
|
||||
})
|
||||
) : (
|
||||
<span class={`${prefixCls}-icon`}>{icon}</span>
|
||||
))) ||
|
||||
h(iconType, { class: `${prefixCls}-icon` });
|
||||
const iconNode = (icon &&
|
||||
(isValidElement(icon) ? (
|
||||
cloneElement(icon, {
|
||||
class: `${prefixCls}-icon`,
|
||||
})
|
||||
) : (
|
||||
<span class={`${prefixCls}-icon`}>{icon}</span>
|
||||
))) || <IconType class={`${prefixCls}-icon`} />;
|
||||
// h(iconType, { class: `${prefixCls}-icon` });
|
||||
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
|
||||
appear: false,
|
||||
afterLeave: this.animationEnd,
|
||||
});
|
||||
return closed ? null : (
|
||||
<transition {...transitionProps}>
|
||||
<Transition {...transitionProps}>
|
||||
<div v-show={!closing} class={alertCls} data-show={!closing}>
|
||||
{showIcon ? iconNode : null}
|
||||
<span class={`${prefixCls}-message`}>{message}</span>
|
||||
<span class={`${prefixCls}-description`}>{description}</span>
|
||||
{closeIcon}
|
||||
</div>
|
||||
</transition>
|
||||
</Transition>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
icon,
|
||||
$slots,
|
||||
} = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const getPrefixCls = this.configProvider().getPrefixCls;
|
||||
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
||||
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
|
||||
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
break;
|
||||
}
|
||||
const iconType = sLoading ? 'loading' : icon;
|
||||
const children = filterEmpty($slots.default);
|
||||
const children = filterEmpty($slots.default());
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
|
|
@ -130,11 +130,12 @@ export default {
|
|||
},
|
||||
isNeedInserted() {
|
||||
const { icon, $slots, type } = this;
|
||||
return $slots.default && $slots.default.length === 1 && !icon && type !== 'link';
|
||||
const children = filterEmpty($slots.default());
|
||||
return children && children.length === 1 && !icon && type !== 'link';
|
||||
},
|
||||
},
|
||||
render() {
|
||||
this.icon = this.$scopedSlots.icon && this.$scopedSlots.icon();
|
||||
this.icon = this.$slots.icon && this.$slots.icon();
|
||||
const classes = this.getClasses();
|
||||
const { type, htmlType, icon, disabled, handleClick, sLoading, $slots, $attrs } = this;
|
||||
const buttonProps = {
|
||||
|
|
@ -148,9 +149,9 @@ export default {
|
|||
click: handleClick,
|
||||
},
|
||||
};
|
||||
const iconNode = sLoading ? <LoadingOutlined /> : icon || null;
|
||||
const children = filterEmpty($slots.default);
|
||||
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
|
||||
const iconNode = sLoading ? <LoadingOutlined /> : icon;
|
||||
const children = $slots.default();
|
||||
const autoInsertSpace = this.configProvider().autoInsertSpaceInButton !== false;
|
||||
const kids = children.map(child =>
|
||||
this.insertSpace(child, this.isNeedInserted() && autoInsertSpace),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
methods: {
|
||||
removeTab(targetKey, e) {
|
||||
e.stopPropagation();
|
||||
if(isValid(targetKey)) {
|
||||
if (isValid(targetKey)) {
|
||||
this.$emit('edit', targetKey, 'remove');
|
||||
}
|
||||
},
|
||||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
hideAdd,
|
||||
renderTabBar,
|
||||
} = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const getPrefixCls = this.configProvider().getPrefixCls;
|
||||
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
|
||||
const children = filterEmpty(this.$slots.default);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Transition } from 'vue';
|
||||
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
|
|
@ -119,7 +120,7 @@ export default {
|
|||
|
||||
render() {
|
||||
const { prefixCls: customizePrefixCls } = this.$props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const getPrefixCls = this.configProvider().getPrefixCls;
|
||||
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
||||
const { _visible: visible } = this.$data;
|
||||
const tag = (
|
||||
|
|
@ -129,7 +130,7 @@ export default {
|
|||
class={this.getTagClassName(prefixCls)}
|
||||
style={this.getTagStyle()}
|
||||
>
|
||||
{this.$slots.default}
|
||||
{this.$slots.default()}
|
||||
{this.renderCloseIcon()}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -138,7 +139,7 @@ export default {
|
|||
});
|
||||
return (
|
||||
<Wave>
|
||||
<transition {...transitionProps}>{tag}</transition>
|
||||
<Transition {...transitionProps}>{tag}</Transition>
|
||||
</Wave>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-button type="primary">
|
||||
<a-button type="primary" block @click="onClick">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button>Default</a-button>
|
||||
<a-button type="dashed">
|
||||
<a-button block>
|
||||
Default
|
||||
</a-button>
|
||||
<a-button type="dashed" block>
|
||||
Dashed
|
||||
</a-button>
|
||||
<a-button type="danger">
|
||||
<a-button type="danger" block>
|
||||
Danger
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
按钮
|
||||
</a-button>
|
||||
<a-button type="link">
|
||||
<a-button type="link" block>
|
||||
Link
|
||||
</a-button>
|
||||
</div>
|
||||
|
|
@ -22,5 +21,10 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'Demo',
|
||||
methods: {
|
||||
onClick() {
|
||||
console.log(1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
import 'babel-polyfill';
|
||||
import Vue from 'vue';
|
||||
import '@babel/polyfill';
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/style.js';
|
||||
import Button from 'ant-design-vue/button';
|
||||
import 'ant-design-vue/button/style/index.less';
|
||||
|
||||
Vue.use(Antd);
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App),
|
||||
});
|
||||
createApp(App)
|
||||
.use(Button)
|
||||
.mount('#app');
|
||||
|
|
|
|||
39
package.json
39
package.json
|
|
@ -58,36 +58,35 @@
|
|||
"vue-template-compiler": ">=2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design-vue/babel-plugin-jsx": "^1.0.0-alpha.3",
|
||||
"@babel/cli": "^7.8.4",
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.8.3",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
|
||||
"@babel/plugin-transform-member-expression-literals": "^7.8.3",
|
||||
"@babel/plugin-transform-object-assign": "^7.8.3",
|
||||
"@babel/plugin-transform-property-literals": "^7.8.3",
|
||||
"@babel/plugin-transform-template-literals": "^7.8.3",
|
||||
"@babel/polyfill": "^7.8.7",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@commitlint/cli": "^8.0.0",
|
||||
"@commitlint/config-conventional": "^8.0.0",
|
||||
"@octokit/rest": "^16.0.0",
|
||||
"@vue/cli-plugin-eslint": "^4.0.0",
|
||||
"@vue/compiler-sfc": "^3.0.0-beta.14",
|
||||
"@vue/server-test-utils": "1.0.0-beta.16",
|
||||
"@vue/test-utils": "1.0.0-beta.16",
|
||||
"acorn": "^7.0.0",
|
||||
"autoprefixer": "^9.6.0",
|
||||
"axios": "^0.19.0",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-jest": "^23.6.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-import": "^1.1.1",
|
||||
"babel-plugin-inline-import-data-uri": "^1.0.1",
|
||||
"babel-plugin-istanbul": "^6.0.0",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-decorators": "^6.24.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-plugin-transform-object-assign": "^6.22.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "~6.23.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.7.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"case-sensitive-paths-webpack-plugin": "^2.1.2",
|
||||
"chalk": "^3.0.0",
|
||||
|
|
@ -109,7 +108,7 @@
|
|||
"fs-extra": "^8.0.0",
|
||||
"glob": "^7.1.2",
|
||||
"gulp": "^4.0.1",
|
||||
"gulp-babel": "^7.0.0",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-strip-code": "^0.1.4",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"husky": "^4.0.0",
|
||||
|
|
@ -150,7 +149,7 @@
|
|||
"terser-webpack-plugin": "^2.3.1",
|
||||
"through2": "^3.0.0",
|
||||
"url-loader": "^3.0.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue": "^3.0.0-beta.14",
|
||||
"vue-antd-md-loader": "^1.1.0",
|
||||
"vue-clipboard2": "0.3.1",
|
||||
"vue-draggable-resizable": "^2.1.0",
|
||||
|
|
@ -158,12 +157,12 @@
|
|||
"vue-i18n": "^8.3.2",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-jest": "^2.5.0",
|
||||
"vue-loader": "^15.6.2",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-loader": "^16.0.0-beta.2",
|
||||
"vue-router": "^4.0.0-alpha.12",
|
||||
"vue-server-renderer": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vue-virtual-scroller": "^1.0.0",
|
||||
"vuex": "^3.1.0",
|
||||
"vuex": "^4.0.0-beta.2",
|
||||
"webpack": "^4.28.4",
|
||||
"webpack-cli": "^3.2.1",
|
||||
"webpack-dev-server": "^3.1.14",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
|
||||
const webpack = require('webpack');
|
||||
const WebpackBar = require('webpackbar');
|
||||
const path = require('path');
|
||||
|
|
@ -21,7 +21,7 @@ module.exports = {
|
|||
options: {
|
||||
presets: [
|
||||
[
|
||||
'env',
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
browsers: [
|
||||
|
|
@ -37,10 +37,11 @@ module.exports = {
|
|||
],
|
||||
],
|
||||
plugins: [
|
||||
'transform-vue-jsx',
|
||||
'transform-object-assign',
|
||||
'transform-object-rest-spread',
|
||||
'transform-class-properties',
|
||||
['@ant-design-vue/babel-plugin-jsx', { transformOn: true, compatibleProps: true }],
|
||||
'@babel/plugin-transform-object-assign',
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -54,7 +55,7 @@ module.exports = {
|
|||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
{ loader: 'vue-style-loader' },
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { sourceMap: true },
|
||||
|
|
@ -72,14 +73,14 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader'],
|
||||
use: ['css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'ant-design-vue': path.join(__dirname, './components'),
|
||||
vue$: 'vue/dist/vue.esm.js',
|
||||
// vue$: 'vue/dist/vue.esm.js',
|
||||
},
|
||||
extensions: ['.js', '.jsx', '.vue'],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue