github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: dmeo

pull/4606/head
tangjinzhou 2021-09-02 09:26:52 +08:00
parent 3f01f1430c
commit 547a55b722
102 changed files with 274 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc.js
View File

@ -44,6 +44,16 @@ module.exports = {
{
files: ['*.vue'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
},
rules: {
'no-console': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{ vars: 'all', args: 'after-used', ignoreRestSiblings: true },
],
},
},
],
rules: {

2
.prettierrc
View File

@ -1,9 +1,11 @@
{
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "lf",
"printWidth": 100,
"proseWrap": "never",
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"overrides": [
{
"files": ".prettierrc",

8
components/alert/demo/custom-icon.vue
View File

@ -20,16 +20,16 @@ Custom Icon make information more clear and more friendly.
<a-alert message="showIcon = false" type="success">
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Success Tips" type="success" showIcon>
<a-alert message="Success Tips" type="success" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Informational Notes" type="info" showIcon>
<a-alert message="Informational Notes" type="info" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Warning" type="warning" showIcon>
<a-alert message="Warning" type="warning" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Error" type="error" showIcon>
<a-alert message="Error" type="error" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert

2
components/anchor/demo/customizeHighlight.vue
View File

@ -16,7 +16,7 @@ Customize the anchor highlight.
</docs>
<template>
<a-anchor :affix="false" :getCurrentAnchor="getCurrentAnchor">
<a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
<a-anchor-link href="#API" title="API">

6
components/auto-complete/demo/certain-category.vue
View File

@ -105,15 +105,15 @@ const dataSource = [
},
];
export default defineComponent({
components: {
SearchOutlined,
},
setup() {
return {
value: ref(''),
dataSource,
};
},
components: {
SearchOutlined,
},
});
</script>

2
components/auto-complete/demo/uncertain-category.vue
View File

@ -39,7 +39,7 @@ Lookup-Patterns - Uncertain Category.
<span class="global-search-item-count">{{ item.count }} results</span>
</a-select-option>
</template>
<a-input-search size="large" placeholder="input here" enterButton></a-input-search>
<a-input-search size="large" placeholder="input here" enter-button></a-input-search>
</a-auto-complete>
</div>
</template>

2
components/breadcrumb/demo/router.vue
View File

@ -19,7 +19,7 @@ Used together with `vue-router`
<template>
<div>
<a-breadcrumb :routes="routes">
<template #itemRender="{ route, routes, paths }">
<template #itemRender="{ route, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{ route.breadcrumbName }}
</span>

2
components/card/demo/meta.vue
View File

@ -24,7 +24,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
</template>
<template class="ant-card-actions" #actions>
<template #actions class="ant-card-actions">
<setting-outlined key="setting" />
<edit-outlined key="edit" />
<ellipsis-outlined key="ellipsis" />

2
components/collapse/demo/index.vue
View File

@ -34,7 +34,7 @@ export default {
Mix,
Noarrow,
Extra,
Ghost
Ghost,
},
};
</script>

50
components/color-picker/demo/index.vue
View File

@ -1,50 +0,0 @@
<script>
import Basic from './basic';
import Colors from './colors';
import Size from './size';
import Alpha from './alpha';
import Hue from './hue';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
const md = {
cn: `# ColorPicker 颜色选择器 (测试版)
用于颜色选择，支持多种颜色格式，支持颜色预设。
## 代码演示
`,
us: `# ColorPicker (Beta)
For color selection, support for multiple color formats and color presets.
## Examples
`,
};
export default {
category: 'Components',
subtitle: '取色器',
type: 'DataEntry',
title: 'ColorPicker',
cols: 1,
render() {
return (
<div>
<Md cn={md.cn} us={md.us} />
<demo-sort cols={2}>
<Basic />
<Alpha />
<Hue />
<Colors />
<Size />
</demo-sort>
<api vSlots={{ cn: () => <CN /> }}>
<US />
</api>
</div>
);
},
};
</script>

2
components/comment/demo/editor.vue
View File

@ -43,7 +43,7 @@ Comment can be used as editor, user can customize the editor component.
</template>
<template #content>
<a-form-item>
<a-textarea :rows="4" v-model:value="value" />
<a-textarea v-model:value="value" :rows="4" />
</a-form-item>
<a-form-item>
<a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">

2
components/date-picker/demo/disabled-date.vue
View File

@ -35,8 +35,8 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
:disabled-date="disabledDate"
/>
<a-range-picker
style="width: 400px"
v-model:value="value4"
style="width: 400px"
:disabled-date="disabledDate"
:disabled-time="disabledRangeTime"
:show-time="{

2
components/date-picker/demo/index.vue
View File

@ -55,7 +55,7 @@ export default defineComponent({
Suffix,
SelectInRnage,
Bordered,
RangePicker
RangePicker,
},
});
</script>

2
components/date-picker/demo/presetted-ranges.vue
View File

@ -20,8 +20,8 @@ We can set presetted ranges to RangePicker to improve user experience.
<a-space direction="vertical" :size="12">
<a-range-picker v-model:value="value1" :ranges="ranges" />
<a-range-picker
style="width: 400px"
v-model:value="value2"
style="width: 400px"
:ranges="ranges"
show-time
format="YYYY/MM/DD HH:mm:ss"

2
components/date-picker/demo/range-picker.vue
View File

@ -19,7 +19,7 @@ Set range picker type by `picker` prop.
<template>
<a-space direction="vertical" :size="12">
<a-range-picker v-model:value="value1" />
<a-range-picker v-model:value="value2" showTime />
<a-range-picker v-model:value="value2" show-time />
<a-range-picker v-model:value="value3" picker="week"/>
<a-range-picker v-model:value="value4" picker="month"/>
<a-range-picker v-model:value="value5" picker="year"/>

8
components/date-picker/demo/suffix.vue
View File

@ -23,7 +23,7 @@ Customize the suffix icon through `suffixIcon`
<SmileOutlined />
</template>
</a-date-picker>
<a-date-picker @change="onChange" placeholder="Select month" picker="month">
<a-date-picker placeholder="Select month" picker="month" @change="onChange">
<template #suffixIcon>
<SmileOutlined />
</template>
@ -33,15 +33,15 @@ Customize the suffix icon through `suffixIcon`
<SmileOutlined />
</template>
</a-range-picker>
<a-date-picker @change="onChange" placeholder="Select week" picker="week">
<a-date-picker placeholder="Select week" picker="week" @change="onChange">
<template #suffixIcon>
<SmileOutlined />
</template>
</a-date-picker>
<a-date-picker suffix-icon="ab" @change="onChange" />
<a-date-picker suffix-icon="ab" placeholder="Select month" @change="onChange" picker="month"/>
<a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange"/>
<a-range-picker suffix-icon="ab" @change="onChange" />
<a-date-picker suffix-icon="ab" placeholder="Select week" @change="onChange" picker="week"/>
<a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange"/>
</a-space>
</template>
<script lang="ts">

2
components/drawer/demo/basic.vue
View File

@ -19,10 +19,10 @@ Basic drawer.
<template>
<a-button type="primary" @click="showDrawer">Open</a-button>
<a-drawer
v-model:visible="visible"
title="Basic Drawer"
placement="right"
:closable="false"
v-model:visible="visible"
:after-visible-change="afterVisibleChange"
>
<p>Some contents...</p>

6
components/drawer/demo/form-in-drawer.vue
View File

@ -50,7 +50,7 @@ Use form in drawer with submit button.
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="Owner" name="owner">
<a-select placeholder="Please a-s an owner" v-model:value="form.owner">
<a-select v-model:value="form.owner" placeholder="Please a-s an owner">
<a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
<a-select-option value="mao">Maomao Zhou</a-select-option>
</a-select>
@ -58,7 +58,7 @@ Use form in drawer with submit button.
</a-col>
<a-col :span="12">
<a-form-item label="Type" name="type">
<a-select placeholder="Please choose the type" v-model:value="form.type">
<a-select v-model:value="form.type" placeholder="Please choose the type">
<a-select-option value="private">Private</a-select-option>
<a-select-option value="public">Public</a-select-option>
</a-select>
@ -68,7 +68,7 @@ Use form in drawer with submit button.
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="Approver" name="approver">
<a-select placeholder="Please choose the approver" v-model:value="form.approver">
<a-select v-model:value="form.approver" placeholder="Please choose the approver">
<a-select-option value="jack">Jack Ma</a-select-option>
<a-select-option value="tom">Tom Liu</a-select-option>
</a-select>

2
components/drawer/demo/placement.vue
View File

@ -17,7 +17,7 @@ The Drawer can appear from any edge of the screen.
</docs>
<template>
<a-radio-group style="margin-right: 8px" v-model:value="placement">
<a-radio-group v-model:value="placement" style="margin-right: 8px">
<a-radio value="top">top</a-radio>
<a-radio value="right">right</a-radio>
<a-radio value="bottom">bottom</a-radio>

8
components/dropdown/demo/dropdown-button.vue
View File

@ -105,6 +105,10 @@ import { defineComponent } from 'vue';
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
UserOutlined,
DownOutlined,
},
setup() {
const handleButtonClick = (e: Event) => {
console.log('click left button', e);
@ -117,10 +121,6 @@ export default defineComponent({
handleMenuClick,
};
},
components: {
UserOutlined,
DownOutlined,
},
});
</script>
<style lang="less" scoped>

6
components/dropdown/demo/event.vue
View File

@ -43,6 +43,9 @@ interface MenuInfo {
}
export default defineComponent({
components: {
DownOutlined,
},
setup() {
const onClick = ({ key }: MenuInfo) => {
console.log(`Click on item ${key}`);
@ -51,8 +54,5 @@ export default defineComponent({
onClick,
};
},
components: {
DownOutlined,
},
});
</script>

6
components/dropdown/demo/overlay-visible.vue
View File

@ -42,6 +42,9 @@ interface MenuInfo {
domEvent: MouseEvent;
}
export default defineComponent({
components: {
DownOutlined,
},
setup() {
const visible = ref(false);
const handleMenuClick = (e: MenuInfo) => {
@ -54,8 +57,5 @@ export default defineComponent({
handleMenuClick,
};
},
components: {
DownOutlined,
},
});
</script>

2
components/empty/demo/config-provider.vue
View File

@ -18,9 +18,9 @@ Use ConfigProvider set global Empty style.
<template>
<a-switch
v-model:checked="customize"
un-checked-children="default"
checked-children="customize"
v-model:checked="customize"
/>
<a-divider />
<a-config-provider>

2
components/form/demo/custom-validation.vue
View File

@ -20,8 +20,8 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
<template>
<a-form
name="custom-validation"
ref="formRef"
name="custom-validation"
:model="formState"
:rules="rules"
v-bind="layout"

8
components/form/demo/dynamic-form-item.vue
View File

@ -63,6 +63,10 @@ interface Domain {
key: number;
}
export default defineComponent({
components: {
MinusCircleOutlined,
PlusOutlined,
},
setup() {
const formRef = ref();
const formItemLayout = {
@ -120,10 +124,6 @@ export default defineComponent({
addDomain,
};
},
components: {
MinusCircleOutlined,
PlusOutlined,
},
});
</script>
<style>

8
components/form/demo/horizontal-login.vue
View File

@ -52,6 +52,10 @@ interface FormState {
password: string;
}
export default defineComponent({
components: {
UserOutlined,
LockOutlined,
},
setup() {
const formState: UnwrapRef<FormState> = reactive({
user: '',
@ -69,9 +73,5 @@ export default defineComponent({
handleFinishFailed,
};
},
components: {
UserOutlined,
LockOutlined,
},
});
</script>

2
components/form/demo/index.vue
View File

@ -46,7 +46,7 @@ export default {
UseFormNested,
UseFormTrigger,
UseFormMerge,
LableWidth
LableWidth,
},
};
</script>

4
components/icon/demo/two-tone.vue
View File

@ -19,8 +19,8 @@ You can set `twoToneColor` prop to specific primary color for two-tone icons.
<template>
<div class="icons-list">
<SmileTwoTone />
<HeartTwoTone twoToneColor="#eb2f96" />
<CheckCircleTwoTone twoToneColor="#52c41a" />
<HeartTwoTone two-tone-color="#eb2f96" />
<CheckCircleTwoTone two-tone-color="#52c41a" />
</div>
</template>
<script>

2
components/input-number/demo/disabled.vue
View File

@ -18,7 +18,7 @@ Click the button to toggle between available and disabled states.
<template>
<div>
<a-input-number :min="1" :max="10" :disabled="disabled" v-model:value="value" />
<a-input-number v-model:value="value" :min="1" :max="10" :disabled="disabled" />
<div style="margin-top: 20px">
<a-button type="primary" @click="toggle">Toggle disabled</a-button>
</div>

6
components/input-number/demo/size.vue
View File

@ -18,9 +18,9 @@ There are three sizes available to a numeric input box. By default, the size is
<template>
<div>
<a-input-number size="large" :min="1" :max="100000" v-model:value="value1" />
<a-input-number :min="1" :max="100000" v-model:value="value2" />
<a-input-number size="small" :min="1" :max="100000" v-model:value="value3" />
<a-input-number v-model:value="value1" size="large" :min="1" :max="100000" />
<a-input-number v-model:value="value2" :min="1" :max="100000" />
<a-input-number v-model:value="value3" size="small" :min="1" :max="100000" />
</div>
</template>
<script lang="ts">

2
components/input/demo/addon.vue
View File

@ -18,7 +18,7 @@ Using pre & post tabs example.
<template>
<div>
<div style="margin-bottom: 16px">
<a-input addon-before="Http://" addon-after=".com" v-model:value="value1" />
<a-input v-model:value="value1" addon-before="Http://" addon-after=".com" />
</div>
<div style="margin-bottom: 16px">
<a-input v-model:value="value2">

10
components/input/demo/group.vue
View File

@ -31,8 +31,8 @@ Note: You don't need `Col` to control the width in the `compact` mode.
</a-input-group>
<br />
<a-input-group compact>
<a-input style="width: 20%" v-model:value="value1" />
<a-input style="width: 30%" v-model:value="value2" />
<a-input v-model:value="value1" style="width: 20%" />
<a-input v-model:value="value2" style="width: 30%" />
</a-input-group>
<br />
<a-input-group compact>
@ -40,7 +40,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
<a-select-option value="Zhejiang">Zhejiang</a-select-option>
<a-select-option value="Jiangsu">Jiangsu</a-select-option>
</a-select>
<a-input style="width: 50%" v-model:value="value4" />
<a-input v-model:value="value4" style="width: 50%" />
</a-input-group>
<br />
<a-input-group compact>
@ -48,11 +48,11 @@ Note: You don't need `Col` to control the width in the `compact` mode.
<a-select-option value="Option1">Option1</a-select-option>
<a-select-option value="Option2">Option2</a-select-option>
</a-select>
<a-input style="width: 50%" v-model:value="value6" />
<a-input v-model:value="value6" style="width: 50%" />
</a-input-group>
<br />
<a-input-group compact>
<a-input style="width: 50%" v-model:value="value7" />
<a-input v-model:value="value7" style="width: 50%" />
<a-date-picker v-model:value="value8" style="width: 50%" />
</a-input-group>
<br />

2
components/input/demo/presuffix.vue
View File

@ -17,7 +17,7 @@ Add prefix or suffix icons inside input.
</docs>
<template>
<div class="components-input-demo-presuffix">
<a-input placeholder="Basic usage" v-model:value="userName">
<a-input v-model:value="userName" placeholder="Basic usage">
<template #prefix>
<user-outlined type="user" />
</template>

2
components/input/demo/show-count.vue
View File

@ -16,7 +16,7 @@ Show character counting.
</docs>
<template>
<a-textarea v-model:value="value" showCount :maxlength="100" />
<a-textarea v-model:value="value" show-count :maxlength="100" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

2
components/layout/demo/custom-trigger.vue
View File

@ -19,7 +19,7 @@ If you want to use a customized trigger, you can hide the default one by setting
<a-layout>
<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
<div class="logo" />
<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="1">
<user-outlined />
<span>nav 1</span>

12
components/layout/demo/fixed-sider.vue
View File

@ -20,7 +20,7 @@ When dealing with long content, a fixed sider can provide a better user experien
<a-layout>
<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
<div class="logo" />
<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="1">
<user-outlined />
<span class="nav-text">nav 1</span>
@ -175,11 +175,6 @@ import {
} from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
selectedKeys: ref<string[]>(['4']),
};
},
components: {
UserOutlined,
VideoCameraOutlined,
@ -190,6 +185,11 @@ export default defineComponent({
TeamOutlined,
ShopOutlined,
},
setup() {
return {
selectedKeys: ref<string[]>(['4']),
};
},
});
</script>

2
components/layout/demo/fixed.vue
View File

@ -21,9 +21,9 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
<a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>

2
components/layout/demo/responsive.vue
View File

@ -26,7 +26,7 @@ Layout.Sider supports responsive layout.
@breakpoint="onBreakpoint"
>
<div class="logo" />
<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="1">
<user-outlined />
<span class="nav-text">nav 1</span>

2
components/layout/demo/side.vue
View File

@ -23,7 +23,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
<a-layout style="min-height: 100vh">
<a-layout-sider v-model:collapsed="collapsed" collapsible>
<div class="logo" />
<a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="1">
<pie-chart-outlined />
<span>Option 1</span>

4
components/layout/demo/top-side-2.vue
View File

@ -20,9 +20,9 @@ Both the top navigation and the sidebar, commonly used in application site.
<a-layout-header class="header">
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys1"
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys1"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
@ -33,9 +33,9 @@ Both the top navigation and the sidebar, commonly used in application site.
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
mode="inline"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">

4
components/layout/demo/top-side.vue
View File

@ -20,9 +20,9 @@ Both the top navigation and the sidebar, commonly used in documentation site.
<a-layout-header class="header">
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys1"
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys1"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
@ -39,9 +39,9 @@ Both the top navigation and the sidebar, commonly used in documentation site.
<a-layout style="padding: 24px 0; background: #fff">
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
mode="inline"
style="height: 100%"
>
<a-sub-menu key="sub1">

2
components/layout/demo/top.vue
View File

@ -24,9 +24,9 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
<a-layout-header>
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>

2
components/list/demo/vertical.vue
View File

@ -28,7 +28,7 @@ Setting `itemLayout` property with `vertical` to create a vertical list.
<a-list-item key="item.title">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px" />
<component :is="type" style="margin-right: 8px" />
{{ text }}
</span>
</template>

2
components/mentions/demo/basic.vue
View File

@ -16,7 +16,7 @@ Basic usage.
</docs>
<template>
<a-mentions autofocus v-model:value="value" @select="onSelect">
<a-mentions v-model:value="value" autofocus @select="onSelect">
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>

4
components/mentions/demo/form.vue
View File

@ -24,7 +24,7 @@ to work with `Form`.
name="coders"
v-bind="validateInfos.coders"
>
<a-mentions rows="1" v-model:value="modelRef.coders">
<a-mentions v-model:value="modelRef.coders" rows="1">
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
<a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
@ -38,9 +38,9 @@ to work with `Form`.
v-bind="validateInfos.bio"
>
<a-mentions
v-model:value="modelRef.bio"
rows="3"
placeholder="You can use @ to ref user here"
v-model:value="modelRef.bio"
>
<a-mentions-option value="afc163">afc163</a-mentions-option>
<a-mentions-option value="zombieJ">zombieJ</a-mentions-option>

4
components/mentions/demo/prefix.vue
View File

@ -22,8 +22,8 @@ Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also
:prefix="['@', '#']"
@search="onSearch"
>
<a-mentions-option v-for="value in options" :key="value" :value="value">
{{ value }}
<a-mentions-option v-for="val in options" :key="val" :value="val">
{{ val }}
</a-mentions-option>
</a-mentions>
</template>

10
components/menu/demo/horizontal.vue
View File

@ -55,16 +55,16 @@ Horizontal top navigation menu.
import { defineComponent, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const current = ref<string[]>(['mail']);
return {
current,
};
},
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

24
components/menu/demo/inline-collapsed.vue
View File

@ -22,16 +22,16 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
<template>
<div style="width: 256px">
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuFoldOutlined v-else />
</a-button>
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
>
<a-menu-item key="1">
<template #icon>
@ -89,6 +89,15 @@ import {
AppstoreOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
components: {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
},
setup() {
const state = reactive({
collapsed: false,
@ -113,14 +122,5 @@ export default defineComponent({
toggleCollapsed,
};
},
components: {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
},
});
</script>

14
components/menu/demo/inline.vue
View File

@ -18,9 +18,9 @@ Vertical menu with inline submenus.
<template>
<a-menu
id="dddddd"
style="width: 256px"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
style="width: 256px"
mode="inline"
@click="handleClick"
>
@ -70,6 +70,12 @@ Vertical menu with inline submenus.
import { defineComponent, ref, watch } from 'vue';
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
QqOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
@ -93,11 +99,5 @@ export default defineComponent({
titleClick,
};
},
components: {
MailOutlined,
QqOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

14
components/menu/demo/sider-current.vue
View File

@ -19,10 +19,10 @@ Click the menu and you will see that all the other menus gets collapsed to keep
<template>
<div>
<a-menu
v-model:selectedKeys="selectedKeys"
style="width: 256px"
mode="inline"
:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
:open-keys="openKeys"
@openChange="onOpenChange"
>
<a-sub-menu key="sub1">
@ -65,6 +65,11 @@ Click the menu and you will see that all the other menus gets collapsed to keep
import { defineComponent, reactive, toRefs } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const state = reactive({
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
@ -84,10 +89,5 @@ export default defineComponent({
onOpenChange,
};
},
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

14
components/menu/demo/switch-mode.vue
View File

@ -26,9 +26,9 @@ Show the dynamic switching mode (between `inline` and `vertical`).
<br />
<br />
<a-menu
style="width: 256px"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
style="width: 256px"
:mode="mode"
:theme="theme"
>
@ -79,6 +79,12 @@ import {
SettingOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const state = reactive({
mode: 'inline',
@ -98,11 +104,5 @@ export default defineComponent({
changeTheme,
};
},
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

16
components/menu/demo/template.vue
View File

@ -16,7 +16,7 @@ Use the single file method to recursively generate menus.
<template>
<div style="width: 256px">
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuFoldOutlined v-else />
</a-button>
@ -37,7 +37,7 @@ Use the single file method to recursively generate menus.
</a-menu-item>
</template>
<template v-else>
<sub-menu :menu-info="item" :key="item.key" />
<sub-menu :key="item.key" :menu-info="item" />
</template>
</template>
</a-menu>
@ -103,6 +103,12 @@ const list = [
},
];
export default defineComponent({
components: {
'sub-menu': SubMenu,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
},
setup() {
const collapsed = ref<boolean>(false);
@ -115,11 +121,5 @@ export default defineComponent({
toggleCollapsed,
};
},
components: {
'sub-menu': SubMenu,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
},
});
</script>

14
components/menu/demo/theme.vue
View File

@ -27,9 +27,9 @@ There are two built-in themes: `light` and `dark`. The default value is `light`.
<br />
<br />
<a-menu
style="width: 256px"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
style="width: 256px"
mode="inline"
:theme="theme"
>
@ -79,6 +79,12 @@ import {
SettingOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const state = reactive({
theme: 'dark',
@ -94,11 +100,5 @@ export default defineComponent({
changeTheme,
};
},
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

12
components/menu/demo/vertical.vue
View File

@ -76,6 +76,12 @@ interface MenuInfo {
domEvent: MouseEvent;
}
export default defineComponent({
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const state = reactive({
selectedKeys: [],
@ -89,11 +95,5 @@ export default defineComponent({
handleClick,
};
},
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>

2
components/modal/demo/async.vue
View File

@ -21,8 +21,8 @@ you can use this pattern when you submit a form.
<div>
<a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
<a-modal
title="Title"
v-model:visible="visible"
title="Title"
:confirm-loading="confirmLoading"
@ok="handleOk"
>

4
components/modal/demo/fullscreen.vue
View File

@ -22,9 +22,9 @@ Full screen by custom style.
<a-modal
v-model:visible="visible"
title="Basic Modal"
@ok="handleOk"
width="100%"
wrapClassName="full-modal"
wrap-class-name="full-modal"
@ok="handleOk"
>
<p>Some contents...</p>
<p>Some contents...</p>

2
components/modal/demo/position.vue
View File

@ -22,9 +22,9 @@ You can use `centered`,`style.top` or other styles to set position of modal dial
Display a modal dialog at 20px to Top
</a-button>
<a-modal
v-model:visible="modal1Visible"
title="20px to Top"
style="top: 20px"
v-model:visible="modal1Visible"
@ok="setModal1Visible(false)"
>
<p>some contents...</p>

2
components/page-header/demo/actions.vue
View File

@ -47,7 +47,7 @@ Use the operating area and customize the sub-nodes, suitable for use in the need
<template #tags>
<a-tag color="blue">Running</a-tag>
</template>
<template v-slot:extra>
<template #extra>
<a-button key="3">Operation</a-button>
<a-button key="2">Operation</a-button>
<a-button key="1" type="primary">Primary</a-button>

12
components/page-header/demo/content.vue
View File

@ -25,10 +25,10 @@ Show all props provided by PageHeader.
:avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
:breadcrumb="{ routes }"
>
<template v-slot:tags>
<template #tags>
<a-tag color="blue">Running</a-tag>
</template>
<template v-slot:extra>
<template #extra>
<a-button key="3">Operation</a-button>
<a-button key="2">Operation</a-button>
<a-button key="1" type="primary">Primary</a-button>
@ -36,7 +36,7 @@ Show all props provided by PageHeader.
<a-button :style="{ border: 'none', padding: 0 }">
<EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
</a-button>
<template v-slot:overlay>
<template #overlay>
<a-menu>
<a-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
@ -128,15 +128,15 @@ const iconLinks: IconLink[] = [
];
export default defineComponent({
components: {
EllipsisOutlined,
},
setup() {
return {
routes,
iconLinks,
};
},
components: {
EllipsisOutlined,
},
});
</script>
<style scoped>

2
components/pagination/demo/changer.vue
View File

@ -18,9 +18,9 @@ Change `pageSize`.
<template>
<div>
<a-pagination
show-size-changer
v-model:current="current1"
v-model:pageSize="pageSize"
show-size-changer
:total="500"
@showSizeChange="onShowSizeChange"
/>

2
components/pagination/demo/itemRender.vue
View File

@ -17,7 +17,7 @@ Use text link for prev and next button.
<template>
<a-pagination v-model:current="current" :total="500">
<template #itemRender="{ page, type, originalElement }">
<template #itemRender="{ type, originalElement }">
<a v-if="type === 'prev'">Previous</a>
<a v-else-if="type === 'next'">Next</a>
<component :is="originalElement" v-else></component>

4
components/pagination/demo/jump.vue
View File

@ -16,11 +16,11 @@ Jump to a page directly.
</docs>
<template>
<div>
<a-pagination show-quick-jumper v-model:current="current1" :total="500" @change="onChange" />
<a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
<br />
<a-pagination
show-quick-jumper
v-model:current="current2"
show-quick-jumper
:total="500"
disabled
show-less-items

2
components/pagination/demo/simple.vue
View File

@ -15,7 +15,7 @@ title:
Simple mode.
</docs>
<template>
<a-pagination simple v-model:current="current" :total="50" />
<a-pagination v-model:current="current" simple :total="50" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

4
components/pagination/demo/total.vue
View File

@ -18,17 +18,17 @@ You can show the total number of data by setting `showTotal`.
<template>
<div>
<a-pagination
v-model:current="current1"
:total="85"
:show-total="total => `Total ${total} items`"
:page-size="20"
v-model:current="current1"
/>
<br />
<a-pagination
v-model:current="current2"
:total="85"
:show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
:page-size="20"
v-model:current="current2"
/>
</div>
</template>

2
components/radio/demo/radioButton.vue
View File

@ -34,7 +34,7 @@ The combination of radio button style.
</a-radio-group>
</div>
<div :style="{ marginTop: '16px' }">
<a-radio-group disabled v-model:value="value3">
<a-radio-group v-model:value="value3" disabled>
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>

2
components/radio/demo/radioGroup-options.vue
View File

@ -17,7 +17,7 @@ Render radios by configuring `options`.
</docs>
<template>
<div>
<a-radio-group :options="plainOptions" v-model:value="value1" />
<a-radio-group v-model:value="value1" :options="plainOptions" />
<br />
<a-radio-group v-model:value="value2" :options="options" />
<br />

2
components/radio/demo/radioGroup-with-name.vue
View File

@ -16,7 +16,7 @@ Passing the `name` property to all `input[type="radio"]` that are in the same Ra
</docs>
<template>
<a-radio-group name="radioGroup" v-model:value="value">
<a-radio-group v-model:value="value" name="radioGroup">
<a-radio value="1">A</a-radio>
<a-radio value="2">B</a-radio>
<a-radio value="3">C</a-radio>

8
components/rate/demo/character.vue
View File

@ -17,7 +17,7 @@ Replace the default star to other character like alphabet, digit, iconfont or ev
</docs>
<template>
<div>
<a-rate v-model:value="value1" allowHalf>
<a-rate v-model:value="value1" allow-half>
<template #character>
<heart-outlined />
</template>
@ -33,6 +33,9 @@ Replace the default star to other character like alphabet, digit, iconfont or ev
import { HeartOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
HeartOutlined,
},
setup() {
const value1 = ref<number>(2);
const value2 = ref<number>(2.5);
@ -43,8 +46,5 @@ export default defineComponent({
value3,
};
},
components: {
HeartOutlined,
},
});
</script>

2
components/rate/demo/clear.vue
View File

@ -20,7 +20,7 @@ Support set allow to clear star when click again.
<a-rate v-model:value="value1" />
<span class="ant-rate-text">allowClear: true</span>
<br />
<a-rate :allow-clear="false" v-model:value="value2" />
<a-rate v-model:value="value2" :allow-clear="false" />
<span class="ant-rate-text">allowClear: false</span>
</div>
</template>

2
components/skeleton/demo/list.vue
View File

@ -24,7 +24,7 @@ Use skeleton in list component.
<a-list-item key="item.title">
<template v-if="!loading" #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px"></component>
<component :is="type" style="margin-right: 8px"></component>
{{ text }}
</span>
</template>

4
components/slider/demo/basic.vue
View File

@ -18,9 +18,9 @@ Basic slider. When `range` is `true`, display as dual thumb mode. When `disable`
<template>
<div>
<a-slider id="test" v-model:value="value1" :disabled="disabled" />
<a-slider range v-model:value="value2" :disabled="disabled" />
<a-slider v-model:value="value2" range :disabled="disabled" />
Disabled:
<a-switch size="small" v-model:checked="disabled" />
<a-switch v-model:checked="disabled" size="small" />
</div>
</template>
<script lang="ts">

2
components/slider/demo/event.vue
View File

@ -18,7 +18,7 @@ The `onChange` callback function will fire when the user changes the slider's va
<template>
<div class="code-box-demo">
<a-slider v-model:value="value1" @afterChange="onAfterChange" />
<a-slider range :step="10" v-model:value="value2" @afterChange="onAfterChange" />
<a-slider v-model:value="value2" range :step="10" @afterChange="onAfterChange" />
</div>
</template>
<script lang="ts">

2
components/slider/demo/icon-slider.vue
View File

@ -18,7 +18,7 @@ You can add an icon beside the slider to make it meaningful.
<template>
<div class="icon-wrapper">
<frown-outlined :style="{ color: preColor }" />
<a-slider :min="0" :max="20" v-model:value="sliderValue" />
<a-slider v-model:value="sliderValue" :min="0" :max="20" />
<smile-outlined :style="{ color: nextColor }" />
</div>
</template>

52
components/slider/demo/mark.vue
View File

@ -18,46 +18,56 @@ Using `marks` property to mark a graduated slider, use `value` to specify the po
<template>
<div id="components-slider-demo-mark">
<h4>included=true</h4>
<a-slider :marks="marks" v-model:value="value1">
<template #mark="{label, point }">
<template v-if="point === 100"><strong>{{label}}</strong></template>
<template v-else>{{label}}</template>
<a-slider v-model:value="value1" :marks="marks">
<template #mark="{ label, point }">
<template v-if="point === 100">
<strong>{{ label }}</strong>
</template>
<template v-else>{{ label }}</template>
</template>
</a-slider>
<a-slider range :marks="marks" v-model:value="value2">
<template #mark="{label, point }">
<template v-if="point === 100"><strong>{{label}}</strong></template>
<template v-else>{{label}}</template>
<a-slider v-model:value="value2" range :marks="marks">
<template #mark="{ label, point }">
<template v-if="point === 100">
<strong>{{ label }}</strong>
</template>
<template v-else>{{ label }}</template>
</template>
</a-slider>
<h4>included=false</h4>
<a-slider :marks="marks" :included="false" v-model:value="value3">
<template #mark="{label, point }">
<template v-if="point === 100"><strong>{{label}}</strong></template>
<template v-else>{{label}}</template>
<a-slider v-model:value="value3" :marks="marks" :included="false">
<template #mark="{ label, point }">
<template v-if="point === 100">
<strong>{{ label }}</strong>
</template>
<template v-else>{{ label }}</template>
</template>
</a-slider>
<h4>marks & step</h4>
<a-slider :marks="marks" :step="10" v-model:value="value4">
<template #mark="{label, point }">
<template v-if="point === 100"><strong>{{label}}</strong></template>
<template v-else>{{label}}</template>
<a-slider v-model:value="value4" :marks="marks" :step="10">
<template #mark="{ label, point }">
<template v-if="point === 100">
<strong>{{ label }}</strong>
</template>
<template v-else>{{ label }}</template>
</template>
</a-slider>
<h4>step=null</h4>
<a-slider :marks="marks" :step="null" v-model:value="value5">
<template #mark="{label, point }">
<template v-if="point === 100"><strong>{{label}}</strong></template>
<template v-else>{{label}}</template>
<a-slider v-model:value="value5" :marks="marks" :step="null">
<template #mark="{ label, point }">
<template v-if="point === 100">
<strong>{{ label }}</strong>
</template>
<template v-else>{{ label }}</template>
</template>
</a-slider>
</div>
</template>
<script lang="ts">
import { defineComponent, createVNode, ref } from 'vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {

4
components/slider/demo/reverse.vue
View File

@ -18,9 +18,9 @@ Using `reverse` to render slider reversely.
<template>
<div>
<a-slider v-model:value="value1" :reverse="reverse" />
<a-slider range v-model:value="value2" :reverse="reverse" />
<a-slider v-model:value="value2" range :reverse="reverse" />
Reversed:
<a-switch size="small" v-model:checked="reverse" />
<a-switch v-model:checked="reverse" size="small" />
</div>
</template>
<script lang="ts">

6
components/slider/demo/vertical.vue
View File

@ -18,13 +18,13 @@ The vertical Slider.
<template>
<div style="height: 300px">
<div style="display: inline-block; height: 300px; margin-left: 70px">
<a-slider vertical v-model:value="value1" />
<a-slider v-model:value="value1" vertical />
</div>
<div style="display: inline-block; height: 300px; margin-left: 70px">
<a-slider vertical range :step="10" v-model:value="value2" />
<a-slider v-model:value="value2" vertical range :step="10" />
</div>
<div style="display: inline-block; height: 300px; margin-left: 70px">
<a-slider vertical range :marks="marks" v-model:value="value3" />
<a-slider v-model:value="value3" vertical range :marks="marks" />
</div>
</div>
</template>

2
components/steps/demo/index.vue
View File

@ -46,7 +46,7 @@ export default defineComponent({
CustomizedProgressDot,
Clickable,
Nav,
Progress
Progress,
},
setup() {
return {};

4
components/switch/demo/loading.vue
View File

@ -17,9 +17,9 @@ Mark a pending state of switch.
</docs>
<template>
<div>
<a-switch loading v-model:checked="checked1" />
<a-switch v-model:checked="checked1" loading />
<br />
<a-switch size="small" loading v-model:checked="checked2" />
<a-switch v-model:checked="checked2" size="small" loading />
</div>
</template>

2
components/switch/demo/size.vue
View File

@ -20,7 +20,7 @@ title:
<div>
<a-switch v-model:checked="checked1" />
<br />
<a-switch size="small" v-model:checked="checked2" />
<a-switch v-model:checked="checked2" size="small" />
</div>
</template>

14
components/switch/demo/text.vue
View File

@ -18,9 +18,9 @@ With text and icon.
<template>
<div>
<a-switch checked-children="开" un-checked-children="关" v-model:checked="checked1" />
<a-switch v-model:checked="checked1" checked-children="开" un-checked-children="关" />
<br />
<a-switch checked-children="1" un-checked-children="0" v-model:checked="checked2" />
<a-switch v-model:checked="checked2" checked-children="1" un-checked-children="0" />
<br />
<a-switch v-model:checked="checked3">
<template #checkedChildren><check-outlined /></template>
@ -32,6 +32,11 @@ With text and icon.
import { defineComponent, reactive, toRefs } from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
CheckOutlined,
CloseOutlined,
},
setup() {
const state = reactive({
checked1: true,
@ -40,10 +45,5 @@ export default defineComponent({
});
return { ...toRefs(state) };
},
components: {
CheckOutlined,
CloseOutlined,
},
});
</script>

8
components/table/demo/basic.vue
View File

@ -108,15 +108,15 @@ const data = [
];
export default defineComponent({
components: {
SmileOutlined,
DownOutlined,
},
setup() {
return {
data,
columns,
};
},
components: {
SmileOutlined,
DownOutlined,
},
});
</script>

2
components/table/demo/custom-filter-panel.vue
View File

@ -54,8 +54,8 @@ Implement a customized column search example via `filterDropdown`.
>
<mark
v-if="fragment.toLowerCase() === searchText.toLowerCase()"
class="highlight"
:key="i"
class="highlight"
>
{{ fragment }}
</mark>

2
components/table/demo/edit-cell.vue
View File

@ -17,7 +17,7 @@ Table with editable cells.
</docs>
<template>
<a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">Add</a-button>
<a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button>
<a-table bordered :data-source="dataSource" :columns="columns">
<template #name="{ text, record }">
<div class="editable-cell">

6
components/table/demo/index.vue
View File

@ -22,7 +22,7 @@
<RowSelection />
<Size />
<Stripe />
<Template />
<TemplateCom />
</demo-sort>
</template>
@ -48,7 +48,7 @@ import RowSelectionAndOperation from './row-selection-and-operation.vue';
import RowSelectionCustom from './row-selection-custom.vue';
import RowSelection from './row-selection.vue';
import Size from './size.vue';
import Template from './template.vue';
import TemplateCom from './template.vue';
import Ellipsis from './ellipsis.vue';
import Stripe from './stripe.vue';
import CN from '../index.zh-CN.md';
@ -79,7 +79,7 @@ export default {
RowSelectionCustom,
RowSelection,
Size,
Template,
TemplateCom,
Stripe,
},
};

139
components/table/demo/resizable-column.vue
View File

@ -1,139 +0,0 @@
<cn>
#### 可伸缩列
集成 [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable) 来实现可伸缩列。
</cn>
<us>
#### Resizable column
Implement resizable column by integrate with [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable).
</us>
<template>
<a-table bordered :columns="columns" :components="components" :data-source="data">
<template #action>
<a>Delete</a>
</template>
</a-table>
</template>
<script lang="ts">
import { reactive } from 'vue';
const columns = [
{
title: 'Date',
dataIndex: 'date',
width: 200,
},
{
title: 'Amount',
dataIndex: 'amount',
width: 100,
},
{
title: 'Type',
dataIndex: 'type',
width: 100,
},
{
title: 'Note',
dataIndex: 'note',
width: 100,
},
{
title: 'Action',
key: 'action',
slots: { customRender: 'action' },
},
];
const data = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const draggingMap = {};
columns.forEach(col => {
draggingMap[col.key] = col.width;
});
const draggingState = reactive(draggingMap);
const ResizeableTitle = (props, children) => {
let thDom = null;
const { key, ...restProps } = props;
const col = columns.find(col => {
const k = col.dataIndex || col.key;
return k === key;
});
if (!col.width) {
return <th {...restProps}>{children}</th>;
}
const onDrag = x => {
draggingState[key] = 0;
col.width = Math.max(x, 1);
};
const onDragstop = () => {
draggingState[key] = thDom.getBoundingClientRect().width;
};
return (
<th {...restProps} ref={r => (thDom = r)} width={col.width} class="resize-table-th">
{children}
<VueDraggableResizable
key={col.key}
class="table-draggable-handle"
w={10}
x={draggingState[key] || col.width}
z={1}
axis="x"
draggable={true}
resizable={false}
onDragging={onDrag}
onDragstop={onDragstop}
/>
</th>
);
};
export default {
name: 'App',
data() {
this.components = {
header: {
cell: ResizeableTitle,
},
};
return {
data,
columns,
};
},
};
</script>
<style lang="less">
.resize-table-th {
position: relative;
.table-draggable-handle {
height: 100% !important;
bottom: 0;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
}
}
</style>

4
components/table/demo/stripe.vue
View File

@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
size="middle"
:columns="columns"
:data-source="data"
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
/>
<a-table
class="ant-table-striped"
size="middle"
:columns="columns"
:data-source="data"
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
bordered
/>
</template>

2
components/tabs/demo/card.vue
View File

@ -17,7 +17,7 @@ Another type Tabs, which doesn't support vertical mode.
</docs>
<template>
<a-tabs type="card" v-model:activeKey="activeKey">
<a-tabs v-model:activeKey="activeKey" type="card">
<a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>

8
components/tabs/demo/icon.vue
View File

@ -42,14 +42,14 @@ The Tab with Icon.
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
AppleOutlined,
AndroidOutlined,
},
setup() {
return {
activeKey: ref('1'),
};
},
components: {
AppleOutlined,
AndroidOutlined,
},
});
</script>

2
components/tabs/demo/slide.vue
View File

@ -23,11 +23,11 @@ In order to fit in more tabs, they can slide left and right (or up and down).
<a-radio-button value="left">Vertical</a-radio-button>
</a-radio-group>
<a-tabs
v-model:activeKey="activeKey"
:tab-position="mode"
:style="{ height: '200px' }"
@prevClick="callback"
@nextClick="callback"
v-model:activeKey="activeKey"
>
<a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`">Content of tab {{ i }}</a-tab-pane>
</a-tabs>

4
components/tag/demo/control.vue
View File

@ -30,14 +30,14 @@ Generating a set of Tags by array, you can add and remove dynamically.
<a-input
v-if="inputVisible"
ref="inputRef"
v-model:value="inputValue"
type="text"
size="small"
:style="{ width: '78px' }"
v-model:value="inputValue"
@blur="handleInputConfirm"
@keyup.enter="handleInputConfirm"
/>
<a-tag v-else @click="showInput" style="background: #fff; border-style: dashed">
<a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
<plus-outlined />
New Tag
</a-tag>

2
components/time-picker/demo/index.vue
View File

@ -40,7 +40,7 @@ export default {
Size,
Suffix,
Bordered,
RangePicker
RangePicker,
},
};
</script>

4
components/tooltip/demo/color.vue
View File

@ -54,8 +54,8 @@ const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
export default defineComponent({
setup() {
return {
colors: colors,
customColors: customColors,
colors,
customColors,
};
},
});

2
components/transfer/demo/basic.vue
View File

@ -30,9 +30,9 @@ The most basic usage of `Transfer` involves providing the source data and target
@scroll="handleScroll"
/>
<a-switch
v-model:checked="disabled"
un-checked-children="enabled"
checked-children="disabled"
v-model:checked="disabled"
style="margin-top: 16px"
/>
</div>

4
components/transfer/demo/table-transfer.vue
View File

@ -62,15 +62,15 @@ Customize render list with Table component.
</template>
</a-transfer>
<a-switch
v-model:checked="disabled"
un-checked-children="disabled"
checked-children="disabled"
v-model:checked="disabled"
style="margin-top: 16px"
/>
<a-switch
v-model:checked="showSearch"
un-checked-children="showSearch"
checked-children="showSearch"
v-model:checked="showSearch"
style="margin-top: 16px"
/>
</div>

4
components/tree/demo/dynamic.vue
View File

@ -18,10 +18,10 @@ To load data asynchronously when click to expand a treeNode.
<template>
<a-tree
:load-data="onLoadData"
:tree-data="treeData"
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
:load-data="onLoadData"
:tree-data="treeData"
/>
</template>

2
components/tree/demo/index.vue
View File

@ -43,7 +43,7 @@ export default defineComponent({
SwitcherIcon,
ReplaceFields,
ContextMenu,
VirtualScroll
VirtualScroll,
},
setup() {
return {};

18
components/typography/demo/interactive.vue
View File

@ -17,8 +17,8 @@ Provide additional interactive capacity of editable and copyable.
<template>
<a-typography-paragraph v-model:content="editableStr" editable />
<a-typography-paragraph v-model:content="customIconStr" editable>
<template v-slot:editableIcon><HighlightOutlined /></template>
<template v-slot:editableTooltip>click to edit text</template>
<template #editableIcon><HighlightOutlined /></template>
<template #editableTooltip>click to edit text</template>
</a-typography-paragraph>
<a-typography-paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }" />
<a-typography-paragraph
@ -31,11 +31,11 @@ Provide additional interactive capacity of editable and copyable.
Replace copy text.
</a-typography-paragraph>
<a-typography-paragraph copyable content="Custom Copy icon and replace tooltips text.">
<template v-slot:copyableIcon="{ copied }">
<template #copyableIcon="{ copied }">
<SmileOutlined v-if="!copied" key="copy-icon" />
<SmileFilled v-else key="copied-icon" />
</template>
<template v-slot:copyableTooltip="{ copied }">
<template #copyableTooltip="{ copied }">
<span v-if="!copied" key="copy-tooltip">click here</span>
<span v-else key="copied-tooltip">you clicked!!</span>
</template>
@ -49,6 +49,11 @@ import { defineComponent, ref, watch } from 'vue';
import { HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons-vue';
export default defineComponent({
components: {
HighlightOutlined,
SmileOutlined,
SmileFilled,
},
setup() {
const editableStr = ref('This is an editable text.');
watch(editableStr, () => {
@ -61,10 +66,5 @@ export default defineComponent({
lengthLimitedStr: ref('This is an editable text with limited length.'),
};
},
components: {
HighlightOutlined,
SmileOutlined,
SmileFilled,
},
});
</script>

2
components/upload/demo/defaultFileList.vue
View File

@ -16,7 +16,7 @@ Use `defaultFileList` for uploaded files when page init.
</docs>
<template>
<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model:file-list="fileList">
<a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
<a-button>
<upload-outlined></upload-outlined>
Upload

2
components/upload/demo/picture-card.vue
View File

@ -18,9 +18,9 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
<template>
<div class="clearfix">
<a-upload
v-model:file-list="fileList"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture-card"
v-model:file-list="fileList"
@preview="handlePreview"
>
<div v-if="fileList.length < 8">

4
components/upload/demo/picture-style.vue
View File

@ -18,9 +18,9 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
<template>
<div>
<a-upload
v-model:file-list="fileList"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture"
v-model:file-list="fileList"
>
<a-button>
<upload-outlined></upload-outlined>
@ -30,9 +30,9 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
<br />
<br />
<a-upload
v-model:file-list="fileList1"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
list-type="picture"
v-model:file-list="fileList1"
class="upload-list-inline"
>
<a-button>

Some files were not shown because too many files have changed in this diff Show More