forked from opentiny/tiny-vue
feat(TinyVue): 同步内部代码，解决若干bug
This commit is contained in:
zzcr
parent
598d173029
commit
ae97ad85e0
13
.eslintrc.js
13
.eslintrc.js
|
|
@ -4,9 +4,12 @@
|
|||
module.exports = {
|
||||
extends: '@antfu',
|
||||
rules: {
|
||||
'vue/component-tags-order': ['error', {
|
||||
order: [['script', 'template'], 'style'],
|
||||
}],
|
||||
'vue/component-tags-order': [
|
||||
'error',
|
||||
{
|
||||
order: [['script', 'template'], 'style']
|
||||
}
|
||||
],
|
||||
'vue/order-in-components': 'off',
|
||||
'vue/component-name-in-template-casing': 'off',
|
||||
'vue/custom-event-name-casing': 'off',
|
||||
|
|
@ -38,6 +41,6 @@ module.exports = {
|
|||
'@typescript-eslint/brace-style': 'off',
|
||||
'@typescript-eslint/restrict-plus-operands': 'off',
|
||||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
'@typescript-eslint/restrict-template-expressions': 'off',
|
||||
},
|
||||
'@typescript-eslint/restrict-template-expressions': 'off'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,16 +8,12 @@ allDist/
|
|||
packages/**/runtime
|
||||
coverage/
|
||||
|
||||
/packages/vue-icon-saas/src
|
||||
/packages/vue-icon-saas/index.ts
|
||||
/packages/vue/index.ts
|
||||
/packages/vue/pc.ts
|
||||
/packages/vue/mobile.ts
|
||||
/packages/vue/app.ts
|
||||
/packages/vue-icon/src/index.ts
|
||||
|
||||
/examples/**/playwright-report
|
||||
/examples/docs/.vitepress/cache
|
||||
vite.config.ts.timestamp*
|
||||
vitest.config.ts.timestamp*
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ pnpm i
|
|||
pnpm dev
|
||||
|
||||
# Vue.js 2
|
||||
pnpm dev:vue2
|
||||
pnpm dev2
|
||||
```
|
||||
|
||||
Open your browser and visit: [http://127.0.0.1:7130/](http://127.0.0.1:7130/)
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ pnpm i
|
|||
pnpm dev
|
||||
|
||||
# 启动 Vue2 项目
|
||||
pnpm dev:vue2
|
||||
pnpm dev2
|
||||
```
|
||||
|
||||
打开浏览器访问：[http://127.0.0.1:7130/](http://127.0.0.1:7130/)
|
||||
|
|
|
|||
|
|
@ -25,9 +25,8 @@ import { ButtonGroup, Link } from '@opentiny/vue'
|
|||
import TinyPc from './pc.vue'
|
||||
import TinyMobile from './mobile.vue'
|
||||
import TinyMobileFirst from './mobile-first.vue'
|
||||
import { hooks, provideDesignConfig } from '@opentiny/vue-common'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { useModeCtx } from './uses'
|
||||
import designAuroraConfig from '@opentiny/vue-design-aurora'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -48,9 +47,6 @@ export default {
|
|||
vueVersion: hooks.version
|
||||
})
|
||||
|
||||
// 注入aurora主题规范
|
||||
provideDesignConfig(designAuroraConfig)
|
||||
|
||||
hooks.onMounted(() => {
|
||||
hooks.watch(
|
||||
() => modeState.mode,
|
||||
|
|
|
|||
|
|
@ -10,12 +10,16 @@
|
|||
</div>
|
||||
<div class="fi-1 f-c px20 pb30 f-c pr200 of-auto">
|
||||
<!-- 标题 -->
|
||||
<div class="py20 f24 fw-bold text-center">
|
||||
{{ modeState.pathName }}
|
||||
<div class="py20">
|
||||
<component :is="state.currMd" class="component-md"></component>
|
||||
</div>
|
||||
<div id="preview" class="bg-white">
|
||||
<div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
|
||||
<div class="mr20 fw-bold">{{ state.currDemo?.name['zh-CN'] }}({{ state.currDemo?.codeFiles[0] }}):</div>
|
||||
<div class="mr20 fw-bold">
|
||||
{{ state.currDemo?.name['zh-CN'] }}
|
||||
(<span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
|
||||
>):
|
||||
</div>
|
||||
<div v-html="state.currDemo?.desc['zh-CN']"></div>
|
||||
</div>
|
||||
<!-- 预览 -->
|
||||
|
|
@ -40,23 +44,29 @@
|
|||
<div class="f18 py28">
|
||||
{{ key }}
|
||||
</div>
|
||||
<tiny-grid :data="oneApiArr" border auto-resize>
|
||||
<tiny-grid-column field="name" width="15%" title="名称">
|
||||
<template #default="data">
|
||||
<a v-if="data.row.demoId" class="c-primary h:c-error" @click="fn.selectDemo(data.row.demoId)">{{
|
||||
data.row.name
|
||||
}}</a>
|
||||
<span v-else>{{ data.row.name }}</span>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
<tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
|
||||
<tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
|
||||
<tiny-grid-column field="desc" title="说明">
|
||||
<template #default="{ row }">
|
||||
<div v-html="row.desc['zh-CN']"></div>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="15%">名称</th>
|
||||
<th width="20%">类型</th>
|
||||
<th width="20%">默认值</th>
|
||||
<th width="55%">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in oneApiArr" :key="row.name">
|
||||
<td>
|
||||
<a v-if="row.demoId" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.demoId)">{{
|
||||
row.name
|
||||
}}</a>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,9 +94,9 @@
|
|||
|
||||
<script>
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Floatbar, TreeMenu, Button, Grid, GridColumn, Tooltip } from '@opentiny/vue'
|
||||
import { Floatbar, TreeMenu, Button, Tooltip } from '@opentiny/vue'
|
||||
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
|
||||
import { menuData, apis, demoStr, demoVue } from './resourceMobileFirst.js'
|
||||
import { menuData, apis, demoStr, demoVue, mds } from './resourceMobileFirst.js'
|
||||
import { useModeCtx } from './uses'
|
||||
|
||||
export default {
|
||||
|
|
@ -94,8 +104,6 @@ export default {
|
|||
TinyFloatbar: Floatbar,
|
||||
TinyTreeMenu: TreeMenu,
|
||||
TinyButton: Button,
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn,
|
||||
TinyTooltip: Tooltip,
|
||||
IconStarIcon: iconStarActive(),
|
||||
IconOpeninVscode: iconSelect()
|
||||
|
|
@ -108,7 +116,8 @@ export default {
|
|||
currDemo: null, // 选中的demo
|
||||
currApi: [], // 当前path下的api
|
||||
comp: null, // 当前示例的组件实例
|
||||
currDemoSrc: ''
|
||||
currDemoSrc: '',
|
||||
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`])
|
||||
})
|
||||
const fn = {
|
||||
// 菜单搜索：忽略大小写
|
||||
|
|
@ -179,3 +188,11 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.component-md h1,
|
||||
.component-md h2 {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,15 @@
|
|||
</div>
|
||||
<div class="fi-1 f-c px20 pb30 f-c pr200 of-auto">
|
||||
<!-- 标题 -->
|
||||
<div class="py20 f24 fw-bold text-center">
|
||||
{{ modeState.pathName }}
|
||||
<div class="py20">
|
||||
<component :is="state.currMd"></component>
|
||||
</div>
|
||||
<div id="preview" class="bg-white">
|
||||
<div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
|
||||
<div class="mr20 fw-bold">{{ state.currDemo?.name['zh-CN'] }}({{ state.currDemo?.codeFiles[0] }}):</div>
|
||||
<div class="mr20 fw-bold">
|
||||
{{ state.currDemo?.name['zh-CN'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
|
||||
>):
|
||||
</div>
|
||||
<div v-html="state.currDemo?.desc['zh-CN']"></div>
|
||||
</div>
|
||||
<!-- 预览 -->
|
||||
|
|
@ -44,23 +47,30 @@
|
|||
<div class="f18 py28">
|
||||
{{ key }}
|
||||
</div>
|
||||
<tiny-grid :data="oneApiArr" border auto-resize>
|
||||
<tiny-grid-column field="name" width="15%" title="名称">
|
||||
<template #default="data">
|
||||
<a v-if="data.row.demoId" class="c-primary h:c-error" @click="fn.selectDemo(data.row.demoId)">{{
|
||||
data.row.name
|
||||
}}</a>
|
||||
<span v-else>{{ data.row.name }}</span>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
<tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
|
||||
<tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
|
||||
<tiny-grid-column field="desc" title="说明">
|
||||
<template #default="{ row }">
|
||||
<div v-html="row.desc['zh-CN']"></div>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
</tiny-grid>
|
||||
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="15%">名称</th>
|
||||
<th width="20%">类型</th>
|
||||
<th width="20%">默认值</th>
|
||||
<th width="55%">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in oneApiArr" :key="row.name">
|
||||
<td>
|
||||
<a v-if="row.demoId" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.demoId)">{{
|
||||
row.name
|
||||
}}</a>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,9 +98,9 @@
|
|||
|
||||
<script>
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Floatbar, TreeMenu, Button, Grid, GridColumn, Tooltip } from '@opentiny/vue'
|
||||
import { Floatbar, TreeMenu, Button, Tooltip } from '@opentiny/vue'
|
||||
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
|
||||
import { menuData, apis, demoStr, demoVue } from './resourceMobile.js'
|
||||
import { menuData, apis, demoStr, demoVue, mds } from './resourceMobile.js'
|
||||
import { useModeCtx } from './uses'
|
||||
|
||||
export default {
|
||||
|
|
@ -98,8 +108,6 @@ export default {
|
|||
TinyFloatbar: Floatbar,
|
||||
TinyTreeMenu: TreeMenu,
|
||||
TinyButton: Button,
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn,
|
||||
TinyTooltip: Tooltip,
|
||||
IconStarIcon: iconStarActive(),
|
||||
IconOpeninVscode: iconSelect()
|
||||
|
|
@ -111,7 +119,8 @@ export default {
|
|||
currDemo: null, // 选中的demo
|
||||
currApi: [], // 当前path下的api
|
||||
comp: null, // 当前示例的组件实例
|
||||
currDemoSrc: ''
|
||||
currDemoSrc: '',
|
||||
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`])
|
||||
})
|
||||
const fn = {
|
||||
// 菜单搜索：忽略大小写
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<template>
|
||||
<div class="wp100 hp100 f-r of-hidden">
|
||||
<div class="w230 pt20 of-auto">
|
||||
<tiny-tree-menu class="!w213" :data="menuData" :filter-node-method="fn.searchMenu" @current-change="fn.clickMenu"></tiny-tree-menu>
|
||||
<tiny-tree-menu
|
||||
class="!w213"
|
||||
:data="menuData"
|
||||
:filter-node-method="fn.searchMenu"
|
||||
@current-change="fn.clickMenu"
|
||||
></tiny-tree-menu>
|
||||
</div>
|
||||
<div class="fi-1 f-c px20 pb30 f-c pr200 of-auto" ref="rightRef">
|
||||
<!-- 标题 -->
|
||||
|
|
@ -12,7 +17,7 @@
|
|||
<!-- 标题 + 组件说明 -->
|
||||
<div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
|
||||
<div class="mr20 fw-bold">
|
||||
{{ state.currDemo?.title }}({{ state.currDemo?.demoId }}.vue ):
|
||||
{{ state.currDemo?.title }}( <span class="allselect">{{ state.currDemo?.demoId }}</span>.vue ):
|
||||
</div>
|
||||
<div v-html="state.currDemo?.content"></div>
|
||||
</div>
|
||||
|
|
@ -36,25 +41,41 @@
|
|||
<div class="my8 f22 fw-bold">
|
||||
{{ key }}
|
||||
</div>
|
||||
<tiny-grid :data="apiTable" border auto-resize>
|
||||
<tiny-grid-column field="name" width="15%" title="名称">
|
||||
<template #default="data">
|
||||
<a v-if="data.row.sample" class="c-primary h:c-error" @click="fn.selectDemo(data.row.sample)">{{
|
||||
data.row.name
|
||||
}}</a>
|
||||
<span v-else>{{ data.row.name }}</span>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
<tiny-grid-column field="type" width="20%" title="类型"></tiny-grid-column>
|
||||
<tiny-grid-column field="defaultValue" width="20%" title="默认值"></tiny-grid-column>
|
||||
<tiny-grid-column field="desc" title="说明"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="15%">名称</th>
|
||||
<th width="20%">类型</th>
|
||||
<th width="20%">默认值</th>
|
||||
<th width="55%">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in apiTable" :key="row.name">
|
||||
<td>
|
||||
<a v-if="row.sample" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.sample)">{{
|
||||
row.name
|
||||
}}</a>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td>{{ row.desc }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边浮动所有的demos -->
|
||||
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
|
||||
<div class="f12 ofy-auto" style="max-height: calc(100vh - 240px)">
|
||||
<div v-for="demo in state.demos" :key="demo.demoId" @click="fn.selectDemo(demo.demoId)" class="w130 px10 py4 bg-light f-r f-pos-between" :class="{ 'c-error': state.currDemo === demo }">
|
||||
<div
|
||||
v-for="demo in state.demos"
|
||||
:key="demo.demoId"
|
||||
@click="fn.selectDemo(demo.demoId)"
|
||||
class="w130 px10 py4 bg-light f-r f-pos-between"
|
||||
:class="{ 'c-error': state.currDemo === demo }"
|
||||
>
|
||||
<div class="link-primary h:c-error h:td-under ellipsis">
|
||||
{{ demo.title }}
|
||||
<Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
|
||||
|
|
@ -70,13 +91,25 @@
|
|||
</span>
|
||||
<template #dropdown>
|
||||
<tiny-dropdown-menu placement="top">
|
||||
<tiny-dropdown-item label="tiny-default-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-default-theme' }">
|
||||
<tiny-dropdown-item
|
||||
label="tiny-default-theme"
|
||||
class="minw160"
|
||||
:class="{ '!c-primary': currThemeLabel === 'tiny-default-theme' }"
|
||||
>
|
||||
Default Theme
|
||||
</tiny-dropdown-item>
|
||||
<tiny-dropdown-item label="tiny-aurora-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-aurora-theme' }">
|
||||
<tiny-dropdown-item
|
||||
label="tiny-aurora-theme"
|
||||
class="minw160"
|
||||
:class="{ '!c-primary': currThemeLabel === 'tiny-aurora-theme' }"
|
||||
>
|
||||
Aurora Theme
|
||||
</tiny-dropdown-item>
|
||||
<tiny-dropdown-item label="tiny-smb-theme" class="minw160" :class="{ '!c-primary': currThemeLabel === 'tiny-smb-theme' }">
|
||||
<tiny-dropdown-item
|
||||
label="tiny-smb-theme"
|
||||
class="minw160"
|
||||
:class="{ '!c-primary': currThemeLabel === 'tiny-smb-theme' }"
|
||||
>
|
||||
SMB Theme
|
||||
</tiny-dropdown-item>
|
||||
</tiny-dropdown-menu>
|
||||
|
|
@ -91,8 +124,6 @@ import {
|
|||
Floatbar,
|
||||
TreeMenu,
|
||||
Button,
|
||||
Grid,
|
||||
GridColumn,
|
||||
Tooltip,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
|
|
@ -104,14 +135,13 @@ import { menuData, zhDemo, demoVue, demoStr, zhApi } from './resourcePc.js'
|
|||
import { useTheme, useModeCtx } from './uses'
|
||||
import SvgTheme from './assets/theme.svg'
|
||||
import designSmbConfig from '@opentiny/vue-design-smb'
|
||||
import designAuroraConfig from '@opentiny/vue-design-aurora'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFloatbar: Floatbar,
|
||||
TinyTreeMenu: TreeMenu,
|
||||
TinyButton: Button,
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn,
|
||||
TinyTooltip: Tooltip,
|
||||
TinyDropdown: Dropdown,
|
||||
TinyDropdownMenu: DropdownMenu,
|
||||
|
|
@ -197,7 +227,8 @@ export default {
|
|||
}
|
||||
|
||||
const designConfigMap = {
|
||||
'tiny-smb-theme': designSmbConfig
|
||||
'tiny-smb-theme': designSmbConfig,
|
||||
'tiny-aurora-theme': designAuroraConfig
|
||||
}
|
||||
|
||||
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@ export const demoVue = import.meta.glob('../resources/mobile/app/**/*.vue', { ea
|
|||
// api属性
|
||||
export const apis = import.meta.glob('../resources/mobile/app/*/webdoc/*.js', { eager: false })
|
||||
|
||||
// 组件的md
|
||||
const allMD = import.meta.glob('../resources/mobile/app/*/webdoc/*.cn.md', { eager: true })
|
||||
export const mds = {}
|
||||
for (const path in allMD) {
|
||||
let key = path.split('/').slice(-1)[0]
|
||||
mds[key] = allMD[path].default
|
||||
}
|
||||
|
||||
const menuData = cmpMenus.slice(0)
|
||||
function processMenu(menu, isTop) {
|
||||
menu.id = menu.key
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ export const demoVue = import.meta.glob('../resources/mobile-first/app/**/*.vue'
|
|||
// api属性
|
||||
export const apis = import.meta.glob('../resources/mobile-first/app/*/webdoc/*.js', { eager: false })
|
||||
|
||||
// 组件的md
|
||||
const allMD = import.meta.glob('../resources/mobile-first/app/*/webdoc/*.cn.md', { eager: true })
|
||||
export const mds = {}
|
||||
for (const path in allMD) {
|
||||
let key = path.split('/').slice(-1)[0]
|
||||
mds[key] = allMD[path].default
|
||||
}
|
||||
|
||||
const menuData = cmpMenus.slice(0)
|
||||
function processMenu(menu, isTop) {
|
||||
menu.id = menu.key
|
||||
|
|
|
|||
|
|
@ -16,6 +16,26 @@ body,
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.api-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #252b3a;
|
||||
}
|
||||
.api-table tbody tr:hover {
|
||||
background-color: #f2f5fc;
|
||||
}
|
||||
.api-table th {
|
||||
background-color: #f2f5fc;
|
||||
border: 1px solid #bdbdbd;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.api-table td {
|
||||
font-size: 14px;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--none: none;
|
||||
--transparent: transparent;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"@opentiny/vue-common": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-theme-mobile": "workspace:~",
|
||||
"@opentiny/vue-theme-saas": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@playwright/test": "^1.29.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: ActionSheet 动作面板组件
|
||||
---
|
||||
|
||||
# ActionSheet 动作面板组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: ActionSheet 动作面板组件
|
||||
---
|
||||
|
||||
# ActionSheet 动作面板组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'action',
|
||||
name: {
|
||||
'zh-CN': '操作列表模式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['action.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show',
|
||||
name: {
|
||||
'zh-CN': '显示隐藏',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask',
|
||||
name: {
|
||||
'zh-CN': '遮罩层1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mask.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask-event',
|
||||
name: {
|
||||
'zh-CN': '遮罩层2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mask-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -111,6 +111,19 @@ export default {
|
|||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-foldable',
|
||||
name: {
|
||||
'zh-CN': '带标题可折叠样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-foldable.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Badge 标记
|
||||
---
|
||||
|
||||
# Badge 标记
|
||||
|
||||
<div>
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Badge 标记
|
||||
---
|
||||
|
||||
# Badge 标记
|
||||
|
||||
<div>
|
||||
Badge 展示指定数据信息，如：我的待办数、新任务数等。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'base',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': '默认主題样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`type` 设置显示主题，可选值：danger(默认)、primary、success、warning、info<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'type-left',
|
||||
name: {
|
||||
'zh-CN': '圆点向左排列样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`show-left` 设置是否向左展示，仅对圆点生效<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['type-left.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'is-dot',
|
||||
name: {
|
||||
'zh-CN': '小圆点标记',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过`is-dot` 显示小圆点标记<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['is-dot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'max',
|
||||
name: {
|
||||
'zh-CN': '计数最大值',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`max` 超过最大值会显示 `{max}+` <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['max.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'target',
|
||||
name: {
|
||||
'zh-CN': '跳转链接',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`href`定义跳转链接<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['target.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-default',
|
||||
name: {
|
||||
'zh-CN': '自定义标记目标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`default slot` 标记内容自定义<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-default.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-content',
|
||||
name: {
|
||||
'zh-CN': '自定义提示内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`content slot` 自定义提示内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-content.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dynamic-hidden',
|
||||
name: {
|
||||
'zh-CN': '消息已读动态隐藏标记',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`hidden` 隐藏标记<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-hidden.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'props-content',
|
||||
name: {
|
||||
'zh-CN': '属性传值显示内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过绑定`data`属性传入自定义内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['props-content.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>过滤类型 <code>type</code> 包括 <code>单选、多选、枚举单选 (radio | checkbox | enum-radio)<code>。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'column-num',
|
||||
name: {
|
||||
'zh-CN': '面板每行标签数',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>column-num</code> 属性设置面板每行标签数，默认值为 3。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['column-num.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'filter-group',
|
||||
name: {
|
||||
'zh-CN': '过滤组',
|
||||
'en-US': '过滤组'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组类型 <code>type</code> 包括 <code>单选、多选 (radio | checkbox)</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['filter-group.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'enumeration',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置过滤类型 <code>type: "enum-radio"</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['enumeration.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@ export default {
|
|||
'<p>用户传入的日期为<code> 当前日期</code>，当前日期所在月份为<code> 当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。 使用<code> config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日； 使用<code> config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； 使用<code> config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['marked.vue']
|
||||
codeFiles: ['workday.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Card 卡片
|
||||
---
|
||||
|
||||
# Card 卡片
|
||||
|
||||
<div>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Card 卡片
|
||||
---
|
||||
|
||||
# Card 卡片
|
||||
|
||||
<div>
|
||||
|
||||
基础容器，可承载文字、列表、图片、段落等
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-type',
|
||||
name: {
|
||||
'zh-CN': '卡片类型',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 `text image video logo` 4 种类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持`mini small medium large`4 个尺寸的卡片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置属性`disabled`禁用卡片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-group',
|
||||
name: {
|
||||
'zh-CN': '卡片组',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`card-group` 与 `card` 结合一起使用，提供响应式布局的能力<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-group.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-status',
|
||||
name: {
|
||||
'zh-CN': '卡片状态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 `success warning alerting danger` 4 种状态<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-type-radio',
|
||||
name: {
|
||||
'zh-CN': '单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`check-type="radio"`设置卡片单选，需同时设置 label。 注意：目前仅支持在 text 类型开启单选<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['check-type-radio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-type-checkbox',
|
||||
name: {
|
||||
'zh-CN': '多选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`check-type="checkbox"`设置卡片多选，需同时设置 label。注意：目前仅支持在 text 类型开启多选<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['check-type-checkbox.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义 class',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>属性`card-class`可自定义卡片的 class，属性`height`可设置卡片内容区的高度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'operate-bar',
|
||||
name: {
|
||||
'zh-CN': '操作栏选项配置',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过`options`属性配置操作栏，支持按钮的禁用（`disabled: true`）与隐藏（`hidden: true`）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['operate-bar.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-events',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`change` 事件：卡片勾选和取消勾选时触发;`icon-click` 事件：操作栏按钮点击时触发<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['card-events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>组件提供`default、title-left、title-right、footer`4 个插槽<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Carousel 走马灯
|
||||
---
|
||||
|
||||
# Carousel 走马灯
|
||||
|
||||
<div>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Carousel 走马灯
|
||||
---
|
||||
|
||||
# Carousel 走马灯
|
||||
|
||||
<div>
|
||||
|
||||
常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'indicator-trigger',
|
||||
name: {
|
||||
'zh-CN': '指示器和触发方式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['indicator-trigger.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'manual-play',
|
||||
name: {
|
||||
'zh-CN': '手动轮播',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['manual-play.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'close-loop',
|
||||
name: {
|
||||
'zh-CN': '关闭循环轮播',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['close-loop.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'autoplay',
|
||||
name: {
|
||||
'zh-CN': '自动切换',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['autoplay.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'play-interval',
|
||||
name: {
|
||||
'zh-CN': '轮播间隔时间',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['play-interval.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'up-down-carousel',
|
||||
name: {
|
||||
'zh-CN': '纵向轮播',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['up-down-carousel.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-title',
|
||||
name: {
|
||||
'zh-CN': '显示标题',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'carousel-arrow-always',
|
||||
name: {
|
||||
'zh-CN': '总是显示切换箭头',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-always.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'carousel-arrow-hover',
|
||||
name: {
|
||||
'zh-CN': 'hover 时显示切换箭头',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-hover.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'carousel-arrow-never',
|
||||
name: {
|
||||
'zh-CN': '隐藏切换箭头',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-never.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'aspect-ratio',
|
||||
name: {
|
||||
'zh-CN': '宽高比',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['aspect-ratio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'indicator-style',
|
||||
name: {
|
||||
'zh-CN': '指示器样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['indicator-style.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderSelect 级联选择
|
||||
---
|
||||
|
||||
# CascaderSelect 级联选择
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderSelect 级联选择
|
||||
---
|
||||
|
||||
# CascaderSelect 级联选择
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>使用 `v-model` 绑定组件 `当前值`，使用 `options` 绑定组件 `选项列表`，这两个数组长度必须相同。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'cycle-roll',
|
||||
name: {
|
||||
'zh-CN': '循环滚动',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置属性 `cycle-roll` 为 `true` 打开选项循环滚动功能。默认值为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['cycle-roll.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled-array',
|
||||
name: {
|
||||
'zh-CN': '数组选项禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>如果组件 `选项列表` 是数组值，可以使用属性 `disabled` 配置一个方法判断选项是否禁用。 此方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，返回 `true` 则禁用选项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['disabled-array.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '对象选项禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>如果组件 `选项列表` 是对象值，使用 `optionMethod` 生成选项时即可指定是否禁用。<br>`optionMethod` 方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，设置返回值的 `disabled` 为 `true` 则禁用选项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'object-option',
|
||||
name: {
|
||||
'zh-CN': '对象选项',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>组件的 `选项列表` 可以是对象值。此方式更方便生成动态选项值，但是选项值必须为数字值。<br>此对象需配置选项范围 `range`，和生成方法 `optionMethod`。选项范围也可以指定为生成方法 `rangeMethod`。<br>`rangeMethod` 的参数是组件当前聚焦值。<br>`optionMethod` 的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['object-option.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'text-color-class',
|
||||
name: {
|
||||
'zh-CN': '文字颜色',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['text-color-class.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'cities',
|
||||
name: {
|
||||
'zh-CN': '城市级联',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['cities.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Checkbox 复选框
|
||||
---
|
||||
|
||||
# Checkbox 复选框
|
||||
|
||||
<div>
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Checkbox 复选框
|
||||
---
|
||||
|
||||
# Checkbox 复选框
|
||||
|
||||
<div>
|
||||
用于配置不同场景的选项，提供用户可在一组选项中进行多选。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'checkbox-group',
|
||||
name: {
|
||||
'zh-CN': '复选框组',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组，在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checkbox-group.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'group-options',
|
||||
name: {
|
||||
'zh-CN': '配置式复选框组',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>提供 `options` 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。<br />`options` 对象数组中包括三个字段：`label`、`text`、`events`。<br />另外还提供 `type` 属性，配合 `options` 属性一起使用，默认值为 `checkbox`。还可以配置为 `button`，配置后复选框组将以按钮的形式展示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['group-options.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'indeterminate',
|
||||
name: {
|
||||
'zh-CN': '全选与半选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后，勾选框将展示为半选的样式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['indeterminate.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'min-max',
|
||||
name: {
|
||||
'zh-CN': '可选数量限制',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['min-max.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'checked',
|
||||
name: {
|
||||
'zh-CN': '当前是否勾选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `checked` 当前是否勾选，通过 `disabled` 设置组件是否禁用。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checked.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'vertical-checkbox',
|
||||
name: {
|
||||
'zh-CN': '垂直布局',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `checkbox-group` 元素上设置 `vertical` 为 true，则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['vertical-checkbox.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'content-overflow',
|
||||
name: {
|
||||
'zh-CN': '内容超出时的提示信息',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>若复选框后的介绍文字超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。<br />在 `checkbox` 元素上配置 `border` 属性为 true，可显示边框。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['content-overflow.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'checkbox-slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>Checkbox 的内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checkbox-slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Collapse 折叠面板
|
||||
---
|
||||
|
||||
# Collapse 折叠面板
|
||||
|
||||
<div>
|
||||
内容区可指定动态页面或自定义 html 等，支持展开收起操作。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Collapse 折叠面板
|
||||
---
|
||||
|
||||
# Collapse 折叠面板
|
||||
|
||||
<div>
|
||||
内容区可指定动态页面或自定义 html 等，支持展开收起操作。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'accordion',
|
||||
name: {
|
||||
'zh-CN': '手风琴效果',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 `accordion` 属性为 true 后，折叠面板将展示手风琴效果。配置 `v-model` 设置当前激活的面板(如果是手风琴模式，绑定值类型需要为 string ，否则为 array )；`change` 事件，在当前激活面板改变时触发，参数为当前的 value 值；配置 `name` 属性作为每个 collapse-item 的唯一标志符<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['accordion.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dynamic-disable',
|
||||
name: {
|
||||
'zh-CN': '禁用状态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `collapse-item` 元素上配置 `disabled` 属性为 true 后，将禁用指定的折叠面板项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-collapse-title',
|
||||
name: {
|
||||
'zh-CN': '自定义面板标题',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题，比如在标题前增加图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-collapse-title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-collapse-title-right',
|
||||
name: {
|
||||
'zh-CN': '自定义面板标题右侧内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-collapse-title-right.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'collapse-events',
|
||||
name: {
|
||||
'zh-CN': '折叠面板事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>激活面板的值改变时将触发 `change` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['collapse-events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'block-close',
|
||||
name: {
|
||||
'zh-CN': '阻止折叠面板关闭事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>:before-close 折叠面板关闭前事件,方法里面 return true/false，表示是否可以关闭<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['block-close.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'nested-grid',
|
||||
name: {
|
||||
'zh-CN': '嵌套表格',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表格。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['nested-grid.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'nested-form',
|
||||
name: {
|
||||
'zh-CN': '嵌套表单',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表单。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['nested-form.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'enumeration',
|
||||
name: {
|
||||
'zh-CN': '自定义 Title 展示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 title 插槽实现自定义标题展示<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['enumeration.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-title-right',
|
||||
name: {
|
||||
'zh-CN': '自定义 Title 右侧内容展示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-title-right.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-icon',
|
||||
name: {
|
||||
'zh-CN': '自定义 icon 图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 icon 插槽实现图标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-icon.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item v-model="value" show-radio label="1" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item v-model="value" show-radio label="2">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ColumnListItem } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyColumnListItem: ColumnListItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: ColumnListItem 分区列表项
|
||||
---
|
||||
|
||||
# ColumnListItem 分区列表项
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: ColumnListItem 分区列表项
|
||||
---
|
||||
|
||||
# ColumnListItem 分区列表项
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '设置尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `size` 属性可以设置分区列表项的大小，支持 small 和 medium 两种尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'content-slot',
|
||||
name: {
|
||||
'zh-CN': '内容区插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽，最多支持 4 个内容插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['content-slot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-width',
|
||||
name: {
|
||||
'zh-CN': '自定义内容插槽宽度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br />通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-width.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'icon-click-event',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮点击事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `icon-click` 给按钮加点击事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['icon-click-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'icon-disabled',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮隐藏与禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>操作列配置项 options 中添加属性 hidden 可以隐藏按钮，可以通过 disabled 属性禁用操作按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['icon-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'image-operate-slot',
|
||||
name: {
|
||||
'zh-CN': '图片和操作列插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#image` 可以设置图片插槽，通过 `#operate` 可以设置操作列插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['image-operate-slot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-radio',
|
||||
name: {
|
||||
'zh-CN': '单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过属性`show-radio`设置卡片单选，需同时设置 label，`disabled` 属性可以禁用单选按钮 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-radio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-checkbox',
|
||||
name: {
|
||||
'zh-CN': '多选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过属性`show-checkbox`设置卡片多选，需同时设置 label，`disabled` 属性可以禁用复选按钮 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-checkbox.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'list-group',
|
||||
name: {
|
||||
'zh-CN': '列表组',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过引入`column-list-group`组件来对列表进行分组，使用列表组结合复选功能时，需要给 item 设置 label，以此来记录选中的列表项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['list-group.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: DatePickerMobile 日期选择器组件
|
||||
---
|
||||
|
||||
# DatePickerMobile 日期选择器组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: DatePickerMobile 日期选择器组件
|
||||
---
|
||||
|
||||
# DatePickerMobile 日期选择器组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性默认值为 `date`，以日期的形式进行选择。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'datetime',
|
||||
name: {
|
||||
'zh-CN': '选择日期时间',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性为 `datetime`，以日期时间的形式进行选择。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['datetime.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'date-range',
|
||||
name: {
|
||||
'zh-CN': '选择日期范围',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性为 `daterange`，以日期范围的形式进行选择。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['date-range.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'datetime-range',
|
||||
name: {
|
||||
'zh-CN': '选择日期时间范围',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性为 `datetimerange`，以日期时间范围的形式进行选择。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['datetime-range.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Drawer 抽屉组件
|
||||
---
|
||||
|
||||
# Drawer 抽屉组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Drawer 抽屉组件
|
||||
---
|
||||
|
||||
# Drawer 抽屉组件
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'placement',
|
||||
name: {
|
||||
'zh-CN': '抽屉方向',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `placement` 属性设置抽屉的方向，可选值有 `left|right|top|bottom`，默认值为 `right`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['placement.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'width',
|
||||
name: {
|
||||
'zh-CN': '抽屉宽度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `width` 属性设置抽屉的宽度，默认值为 `300px`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['width.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dragable',
|
||||
name: {
|
||||
'zh-CN': '拖拽功能',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `dragable` 属性开启抽屉宽度拖拽功能，默认值为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dragable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask',
|
||||
name: {
|
||||
'zh-CN': '遮罩层1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mask.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask-event',
|
||||
name: {
|
||||
'zh-CN': '遮罩层2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mask-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show',
|
||||
name: {
|
||||
'zh-CN': '显示隐藏',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>- show-header: 显示头部，默认值为 true；- show-footer: 显示底部，默认值为 false；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>- hide: 关闭抽屉事件；- confirm: 确认事件，设置 :show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Dropdown 下拉菜单
|
||||
---
|
||||
|
||||
# Dropdown 下拉菜单
|
||||
|
||||
<div>
|
||||
将动作或菜单折叠到下拉菜单中。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Dropdown 下拉菜单
|
||||
---
|
||||
|
||||
# Dropdown 下拉菜单
|
||||
|
||||
<div>
|
||||
将动作或菜单折叠到下拉菜单中。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'checked-status',
|
||||
name: {
|
||||
'zh-CN': '选中态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`checked-status`属性实现选中态，其中必须添加索引值`current-index`和选中态`selected`属性<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checked-status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'label-over',
|
||||
name: {
|
||||
'zh-CN': '标签超出显示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当文字超出规定范围展示全部信息<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['label-over.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'button-dropdown',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以通过 `split-button` 属性设置按钮下拉菜单。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-dropdown.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'button-type',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以通过 `type` 属性设置下拉菜单按钮类型，仅支持`primary`类型。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'button-size',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮3',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'multi-stage',
|
||||
name: {
|
||||
'zh-CN': '二级下拉触发对象',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>将动作或菜单折叠到下拉菜单中。（暂不支持三级菜单）可以通过 `multi-stage` 属性设置二级下拉菜单，通过添加`level="2"`以便区分二级层级。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['multi-stage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'many-dropdown',
|
||||
name: {
|
||||
'zh-CN': '更多图标下拉',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`show-self-icon`属性自定义用户图标,无旋旋转动画；通过添加`:show-icon="false"`属性自定义用户图标,有旋旋转动画。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['many-dropdown.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'arrow-button',
|
||||
name: {
|
||||
'zh-CN': '箭头按钮1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加`border`属性可实现箭头按钮<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['arrow-button.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'border-size',
|
||||
name: {
|
||||
'zh-CN': '箭头按钮2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['border-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events-visible-change',
|
||||
name: {
|
||||
'zh-CN': 'visible-change 事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>内置事件包含：`button-click`、`item-click`、`visible-change` 事件。`visible-change` 事件：下拉框出现/隐藏时触发<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['events-visible-change.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events-item-click',
|
||||
name: {
|
||||
'zh-CN': 'item-click 事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击菜单项时触发的事件回调。可以通过`itemData`，获取菜单项中设置的`item-data`属性<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['events-item-click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'events-button-click',
|
||||
name: {
|
||||
'zh-CN': 'button-click 事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当下拉触发元素呈现为按钮组，即`split-button`属性为`true`时，点击左侧按钮的事件回调<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['events-button-click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'trigger-event',
|
||||
name: {
|
||||
'zh-CN': '触发方式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以配置 `click` 激活或者 `hover` 激活。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['trigger-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'pop-direction',
|
||||
name: {
|
||||
'zh-CN': '弹出方向',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`palcement`来设置菜单弹出位置。可选值（top/top-start/top-end/bottom/bottom-start/bottom-end），默认：bottom-start;top：上居中;top-start：上偏左;top-end：上偏右;bottom 下居中;bottom-start 下偏左;bottom-end 下偏右 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['pop-direction.vue']
|
||||
},
|
||||
{
|
||||
demoId: '/max-height',
|
||||
name: {
|
||||
'zh-CN': '最大高度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加`max-height`属性可设置下拉最大高度<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['/max-height.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Exception 缺省页
|
||||
---
|
||||
|
||||
# Exception 缺省页
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Exception 缺省页
|
||||
---
|
||||
|
||||
# Exception 缺省页
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'message',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['message.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'page-empty',
|
||||
name: {
|
||||
'zh-CN': '页面级空态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`page-empty`属性展示页面级空态，其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`<br> 对应场景：<br>`pagenoperm` ：无访问权限<br>`pageweaknet` ：网络异常<br>`pagenothing` ：你访问的页面不存在<br>`pageservererror`：服务器异常 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['page-empty.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'component-empty',
|
||||
name: {
|
||||
'zh-CN': '组件级空态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['component-empty.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'sub-message',
|
||||
name: {
|
||||
'zh-CN': '自定义二级标题内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过`sub-message`自定义二级标题<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['sub-message.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'button-text',
|
||||
name: {
|
||||
'zh-CN': '自定义插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>已去除`button-text`自定义按钮文本，直接可以通过插槽自定义<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-text.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: FileUpload 文件上传
|
||||
---
|
||||
|
||||
# FileUpload 文件上传
|
||||
|
||||
<div>
|
||||
可以设定文件的类型与上传的个数等。可自定义上传服务。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: FileUpload 文件上传
|
||||
---
|
||||
|
||||
# FileUpload 文件上传
|
||||
|
||||
<div>
|
||||
可以设定文件的类型与上传的个数等。可自定义上传服务。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>属性 action(type：String) 上传服务器地址。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'file-type',
|
||||
name: {
|
||||
'zh-CN': '可上传的文件类型',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 `accept(.doc,.docx)` 来限制上传文件的格式为 `.doc .docx`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['file-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'file-list',
|
||||
name: {
|
||||
'zh-CN': '上传的文件列表',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `fileList` 配置需要显示的文件列表。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['file-list.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-title',
|
||||
name: {
|
||||
'zh-CN': '隐藏标题',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `show-title` 为 `false` 隐藏标题，默认为 `true`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'title',
|
||||
name: {
|
||||
'zh-CN': '自定义标题',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `title` 可自定义标题。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'preview',
|
||||
name: {
|
||||
'zh-CN': '文件预览',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `preview` 事件，已上传的文件会显示预览按钮，点击预览图标会触发 `preview` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'preview-picture',
|
||||
name: {
|
||||
'zh-CN': '图片预览',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `preview` 事件，已上传的文件会显示预览图标，点击预览图标会触发 `preview` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview-picture.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'download-all',
|
||||
name: {
|
||||
'zh-CN': '下载全部',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['download-all.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'download',
|
||||
name: {
|
||||
'zh-CN': '文件下载',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['download.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'download-picture',
|
||||
name: {
|
||||
'zh-CN': '图片下载',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['download-picture.vue']
|
||||
},
|
||||
{
|
||||
demoId: 're-upload',
|
||||
name: {
|
||||
'zh-CN': '文件重新上传',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload.vue']
|
||||
},
|
||||
{
|
||||
demoId: 're-upload-picture',
|
||||
name: {
|
||||
'zh-CN': '图片重新上传',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload-picture.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only',
|
||||
name: {
|
||||
'zh-CN': '文件只读模式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>文件上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only-picture',
|
||||
name: {
|
||||
'zh-CN': '图片只读模式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图片上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-picture.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only-video-audio',
|
||||
name: {
|
||||
'zh-CN': '音视频只读模式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>音视频上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-video-audio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'picture',
|
||||
name: {
|
||||
'zh-CN': '图片上传--picture-single',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `picture-single`，展示单图片模式。可配置 `file-list` 属性展示对应的图片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['picture.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'picture-card',
|
||||
name: {
|
||||
'zh-CN': '图片上传--picture-card',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `picture-card`，展示图片墙模式。可配置 `file-list` 属性展示对应的图片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['picture-card.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'picture-show-name',
|
||||
name: {
|
||||
'zh-CN': '图片上传--show-name',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `show-name` 控制是否展示图片名字<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['picture-show-name.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'video',
|
||||
name: {
|
||||
'zh-CN': '视频上传',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `list-type` 为 `picture-single` 时，设置 `source-type` 为 `video` 时展示视频<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['video.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'audio',
|
||||
name: {
|
||||
'zh-CN': '音频上传',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `list-type` 为 `picture-single` 时，设置 `source-type` 为 `audio` 时展示视频<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['audio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'multi-media',
|
||||
name: {
|
||||
'zh-CN': '多媒体上传1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `list-type` 为 `picture-card` 时，设置 `source-type` 为 `video/audio/picture` 时进行视频、音频、图片上传，`source-type` 支持 `video、audio、picture` 的互相组合<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['multi-media.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'multi-media-native',
|
||||
name: {
|
||||
'zh-CN': '多媒体上传2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>同时在多媒体上传模式下，可配置hwh5属性，进行原生上传。可在 `trigger-click` 事件中进行文件选取操作并上传，可在 `play` 事件中进行音视频播放操作<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['multi-media-native.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'drag',
|
||||
name: {
|
||||
'zh-CN': '拖拽上传',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `drag-single`，开启单文件拖拽上传。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['drag.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'drag-file-list',
|
||||
name: {
|
||||
'zh-CN': '拖拽上传显示文件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['drag-file-list.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-trigger-click',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-trigger-click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'assist-content',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`assist-content` 辅助内容插槽<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['assist-content.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: FilterBar 过滤栏
|
||||
---
|
||||
|
||||
# FilterBar 过滤栏
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: FilterBar 过滤栏
|
||||
---
|
||||
|
||||
# FilterBar 过滤栏
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'readonly',
|
||||
name: {
|
||||
'zh-CN': '选中项只读',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击事件不改变选中项。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['readonly.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可使用右侧 `icon` 自定义插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>过滤类型 <code>type</code> 包括 <code>单选、多选、枚举单选 (radio | checkbox | enum-radio)<code>。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'column-num',
|
||||
name: {
|
||||
'zh-CN': '面板每行标签数',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>column-num</code> 属性设置面板每行标签数，默认值为 3。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['column-num.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'filter-group',
|
||||
name: {
|
||||
'zh-CN': '过滤组',
|
||||
'en-US': '过滤组'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组类型 <code>type</code> 包括 <code>单选、多选 (radio | checkbox)</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['filter-group.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'enumeration',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置过滤类型 <code>type: "enum-radio"</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['enumeration.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<tiny-flowchart ref="chart" :data="chartData" :config="chartConfig" @click-node="onClickNode" @click-link="onClickLink" @click-blank="onClickBlank">
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Modal } from '@opentiny/vue'
|
||||
|
||||
const { createConfig, Node, resizeMixin } = Flowchart
|
||||
const nodeWrapperSize = 32
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
|
||||
},
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
col: 1,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
col: 2,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
info: {
|
||||
col: 3,
|
||||
row: 0,
|
||||
status: 2,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
info: {
|
||||
col: 4,
|
||||
row: 0,
|
||||
status: 4,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
|
||||
}
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{ from: '0', to: '1', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '1', to: '2', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '2', to: '3', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
|
||||
{ from: '3', to: '4', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } }
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'left',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'bottom',
|
||||
renderOuter: (h, node) => {
|
||||
return h(Node, { props: { node, config: chartConfig } })
|
||||
},
|
||||
type: 'dot',
|
||||
nodeWrapperSize
|
||||
})
|
||||
|
||||
export default {
|
||||
mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
|
||||
components: {
|
||||
TinyFlowchart: Flowchart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: hooks.markRaw(chartData),
|
||||
chartConfig: hooks.markRaw(chartConfig)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
// console.log(afterNode, e)
|
||||
Modal.message('click-node')
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
// console.log(afterLink, e)
|
||||
Modal.message('click-link')
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
// console.log(param, e)
|
||||
Modal.message('click-blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
@click-group="onClickGroup"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Modal } from '@opentiny/vue'
|
||||
|
||||
const { createConfig, Node, resizeMixin } = Flowchart
|
||||
const nodeWrapperSize = 32
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 0,
|
||||
status: 1,
|
||||
other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
|
||||
},
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 1,
|
||||
status: 1,
|
||||
other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 2,
|
||||
status: 1,
|
||||
other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 3,
|
||||
status: 2,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
info: {
|
||||
col: 1,
|
||||
row: 3,
|
||||
status: 4,
|
||||
other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
info: {
|
||||
col: 0,
|
||||
row: 4,
|
||||
status: 3,
|
||||
other: { title: '复核会计', subtitle: '协同：张三、张四', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
info: { col: 0, row: 5, status: 3, other: { title: '结束' } },
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{ from: '0', to: '1', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{ from: '1', to: '2', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{ from: '2', to: '3', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
|
||||
{
|
||||
from: '2',
|
||||
to: '4',
|
||||
fromJoint: 'bottom',
|
||||
toJoint: 'top',
|
||||
linkOffset: 96,
|
||||
showArrow: false,
|
||||
info: { status: 1, style: 'solid', other: { title: '条件1' } }
|
||||
},
|
||||
{ from: '3', to: '5', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'solid' } },
|
||||
{
|
||||
from: '4',
|
||||
to: '5',
|
||||
fromJoint: 'bottom',
|
||||
toJoint: 'top',
|
||||
arrowEndMinus: 96,
|
||||
// showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件2' } }
|
||||
},
|
||||
{ from: '5', to: '6', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'dashed' } }
|
||||
],
|
||||
groups: [
|
||||
{
|
||||
nodes: ['2', '3'],
|
||||
padding: [20, 100],
|
||||
// fillStyle: '#f5f6f8',
|
||||
lineDash: [6, 6],
|
||||
strokeStyle: '#8d959e',
|
||||
title: '主账',
|
||||
titlePosition: 'top-left' /* top/top-left */,
|
||||
titleClass: 'bg-color-bg-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
height: 0,
|
||||
gap: 60,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'left',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#0067D1', 2: '#0067d1', 3: 'rgba(22,30,38,0.2)', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'right',
|
||||
type: 'dot',
|
||||
renderOuter: (h, node) => {
|
||||
return h(Node, { props: { node, config: chartConfig, titleClass: 'bg-color-bg-1' } })
|
||||
},
|
||||
nodeLayout: 'left-right' /* up-down/left-right */,
|
||||
nodeSize: 'medium' /* mini/small/medium */,
|
||||
nodeWrapperSize,
|
||||
titleMaxWidth: 90,
|
||||
linkEndMinus: 6,
|
||||
showOnly: '' /* icon/title */,
|
||||
linkPath: [
|
||||
{
|
||||
filter: { from: '4', to: '5' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0 / 2, y: y0 + h0 }
|
||||
// 终点
|
||||
const t = { x: x1 + w1, y: y1 + h1 / 2 }
|
||||
// 拐点
|
||||
const c = { x: f.x, y: t.y }
|
||||
// // a. 返回连线路径
|
||||
// return [f, c, t]
|
||||
// b. 返回连线路径、中点、线性渐变
|
||||
return {
|
||||
path: [f, c, t],
|
||||
mid: { x: (f.x + c.x) / 2, y: (f.y + c.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['gold', 'blue'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '2', to: '4' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1 + w1 / 2, y: y1 }
|
||||
// 拐点
|
||||
const c = { x: t.x, y: f.y }
|
||||
// a. 返回连线路径
|
||||
return [f, c, t]
|
||||
// // b. 返回连线路径、中点
|
||||
// return { path: [f, c, t], mid: c }
|
||||
}
|
||||
}
|
||||
],
|
||||
condClass: 'bg-color-bg-1'
|
||||
})
|
||||
|
||||
export default {
|
||||
mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
|
||||
components: {
|
||||
TinyFlowchart: Flowchart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: hooks.markRaw(chartData),
|
||||
chartConfig: hooks.markRaw(chartConfig)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
// console.log(afterNode, e)
|
||||
Modal.message('click-node')
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
// console.log(afterLink, e)
|
||||
Modal.message('click-link')
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
// console.log(param, e)
|
||||
Modal.message('click-blank')
|
||||
},
|
||||
onClickGroup(afterGroup, e) {
|
||||
// console.log(afterGroup, e)
|
||||
Modal.message('click-group')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Modal } from '@opentiny/vue'
|
||||
|
||||
const { createConfig, resizeMixin } = Flowchart
|
||||
const nodeWrapperSize = 130
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
row: 0,
|
||||
col: 1,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
row: 0,
|
||||
col: 2,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
row: 1,
|
||||
col: 0,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
info: {
|
||||
row: 1,
|
||||
col: 3,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
info: {
|
||||
row: 1,
|
||||
col: 4,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
info: {
|
||||
row: 2,
|
||||
col: 1.5,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{
|
||||
from: '2',
|
||||
to: '0',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件1' } }
|
||||
},
|
||||
{
|
||||
from: '0',
|
||||
to: '1',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件2' } }
|
||||
},
|
||||
{
|
||||
from: '1',
|
||||
to: '3',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件3' } }
|
||||
},
|
||||
{
|
||||
from: '3',
|
||||
to: '4',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件4' } }
|
||||
},
|
||||
{
|
||||
from: '2',
|
||||
to: '5',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件5' } }
|
||||
},
|
||||
{
|
||||
from: '5',
|
||||
to: '3',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件6' } }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
height: 240,
|
||||
gap: 24,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'center',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'bottom',
|
||||
nodeWrapperSize,
|
||||
type: 'dot',
|
||||
lineWidth: 20,
|
||||
hoverHit: 10,
|
||||
autoAdjust: false,
|
||||
layout: ({ afterNodes, graphHeight, graphWidth }) => {
|
||||
const colSize = graphWidth / 5
|
||||
const rowSize = graphHeight / 3
|
||||
|
||||
return afterNodes.map((afterNode) => ({
|
||||
x: ~~((afterNode.col + 0.5) * colSize) - 70,
|
||||
y: ~~((afterNode.row + 0.5) * rowSize) - 28
|
||||
}))
|
||||
},
|
||||
linkPath: [
|
||||
{
|
||||
filter: { from: '2', to: '0' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 - 10 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
const c0 = { x: f.x + 30, y: f.y }
|
||||
const c1 = { x: c0.x, y: t.y }
|
||||
|
||||
return {
|
||||
path: [f, c0, c1, t],
|
||||
mid: { x: (c1.x + t.x) / 2, y: (c1.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '2', to: '5' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 + 10 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
const c0 = { x: f.x + 30, y: f.y }
|
||||
const c1 = { x: c0.x, y: t.y }
|
||||
|
||||
return {
|
||||
path: [f, c0, c1, t],
|
||||
mid: { x: (c1.x + t.x) / 2, y: (c1.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '0', to: '1' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
|
||||
return {
|
||||
path: [f, t],
|
||||
mid: { x: (f.x + t.x) / 2, y: (f.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '1', to: '3' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 - 10 }
|
||||
const c1 = { x: t.x - 30, y: t.y }
|
||||
const c0 = { x: c1.x, y: f.y }
|
||||
|
||||
return {
|
||||
path: [f, c0, c1, t],
|
||||
mid: { x: (c1.x + t.x) / 2, y: (c1.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '5', to: '3' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 + 10 }
|
||||
const c1 = { x: t.x - 30, y: t.y }
|
||||
const c0 = { x: c1.x, y: f.y }
|
||||
|
||||
return {
|
||||
path: [f, c0, c1, t],
|
||||
mid: { x: (c1.x + t.x) / 2, y: (c1.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '3', to: '4' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
|
||||
return {
|
||||
path: [f, t],
|
||||
mid: { x: (f.x + t.x) / 2, y: (f.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
renderOuter: (h, node) => {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: { width: '100%', height: '100%', background: 'white', border: '1px solid #4facfe', borderRadius: '4px' }
|
||||
},
|
||||
`自定义区域-${node.name}`
|
||||
)
|
||||
},
|
||||
renderCond: (h, afterLink, cfg) => {
|
||||
const { raw: link } = afterLink
|
||||
// link.info.other.title
|
||||
return h('div', `${link.from}-${link.to}`)
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
|
||||
components: {
|
||||
TinyFlowchart: Flowchart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: hooks.markRaw(chartData),
|
||||
chartConfig: hooks.markRaw(chartConfig)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
// console.log(afterNode, e)
|
||||
Modal.message('click-node')
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
// console.log(afterLink, e)
|
||||
Modal.message('click-link')
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
// console.log(param, e)
|
||||
Modal.message('click-blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
[data-tag='tiny-flow-chart__node'] {
|
||||
background-color: white;
|
||||
}
|
||||
[data-tag='tiny-flow-chart__node'] > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flowchart from '@opentiny/vue-flowchart'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
import { Modal } from '@opentiny/vue'
|
||||
|
||||
const { createConfig, resizeMixin } = Flowchart
|
||||
const nodeWrapperSize = 130
|
||||
|
||||
const chartData = {
|
||||
nodes: [
|
||||
{
|
||||
name: '0',
|
||||
info: {
|
||||
row: 0,
|
||||
col: 0,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
info: {
|
||||
row: 0,
|
||||
col: 1,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
info: {
|
||||
row: 0,
|
||||
col: 2,
|
||||
width: 130,
|
||||
height: 56,
|
||||
shape: 'rectangle',
|
||||
status: 1,
|
||||
other: { main: '', auxi: '' }
|
||||
}
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{
|
||||
from: '0',
|
||||
to: '1',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件1' } }
|
||||
},
|
||||
{
|
||||
from: '1',
|
||||
to: '2',
|
||||
fromJoint: 'right',
|
||||
toJoint: 'left',
|
||||
showArrow: false,
|
||||
info: { status: 3, style: 'solid', other: { title: '条件2' } }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chartConfig = createConfig()
|
||||
|
||||
Object.assign(chartConfig, {
|
||||
width: 0,
|
||||
height: 0,
|
||||
gap: 24,
|
||||
padding: 12,
|
||||
prior: 'vertical',
|
||||
align: 'center',
|
||||
status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
|
||||
colors: { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' },
|
||||
ongoingBackgroundColor: '#f3f8fe',
|
||||
popoverPlacement: 'bottom',
|
||||
nodeWrapperSize,
|
||||
type: 'dot',
|
||||
lineWidth: 20,
|
||||
hoverHit: 10,
|
||||
linkPath: [
|
||||
{
|
||||
filter: { from: '0', to: '1' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
|
||||
return {
|
||||
path: [f, t],
|
||||
mid: { x: (f.x + t.x) / 2, y: (f.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
filter: { from: '1', to: '2' },
|
||||
method: ({ afterLink, afterNodes }) => {
|
||||
const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
|
||||
afterNodes.find((afterNode) => afterNode.raw.name === name)
|
||||
)
|
||||
const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
|
||||
const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
|
||||
// 起点
|
||||
const f = { x: x0 + w0, y: y0 + h0 / 2 }
|
||||
// 终点
|
||||
const t = { x: x1, y: y1 + h1 / 2 }
|
||||
|
||||
return {
|
||||
path: [f, t],
|
||||
mid: { x: (f.x + t.x) / 2, y: (f.y + t.y) / 2 },
|
||||
linear: { stops: [0, 1], colors: ['#4facfe', '#00f2fe'] } // '#43e97b','#38f9d7'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
renderOuter: (h, node) => {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: { width: '100%', height: '100%', background: 'white', border: '1px solid #4facfe', borderRadius: '4px' }
|
||||
},
|
||||
`自定义区域-${node.name}`
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default {
|
||||
mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
|
||||
components: {
|
||||
TinyFlowchart: Flowchart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: hooks.markRaw(chartData),
|
||||
chartConfig: hooks.markRaw(chartConfig)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickNode(afterNode, e) {
|
||||
// console.log(afterNode, e)
|
||||
Modal.message('click-node')
|
||||
},
|
||||
onClickLink(afterLink, e) {
|
||||
// console.log(afterLink, e)
|
||||
Modal.message('click-link')
|
||||
},
|
||||
onClickBlank(param, e) {
|
||||
// console.log(param, e)
|
||||
Modal.message('click-blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
[data-tag='tiny-flow-chart__node'] {
|
||||
background-color: white;
|
||||
}
|
||||
[data-tag='tiny-flow-chart__node'] > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<tiny-flowchart ref="chart" :data="chartData" :config="chartConfig" @click-node="onClickNode" @click-link="onClickLink" @click-blank="onClickBlank">
|
||||
<tiny-flowchart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:config="chartConfig"
|
||||
@click-node="onClickNode"
|
||||
@click-link="onClickLink"
|
||||
@click-blank="onClickBlank"
|
||||
>
|
||||
</tiny-flowchart>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Flowchart 流程图
|
||||
---
|
||||
|
||||
# Flowchart 流程图
|
||||
|
||||
<div>
|
||||
基本用法
|
||||
该组件可以用来定制流程图，不依赖其它库或组件。默认的实现支持有状态的节点和连线，支持节点和连线以及空白区域的点击事件。
|
||||
点模式
|
||||
提供了节点组件 Node 用于定制多端流程图的节点样式
|
||||
|
||||
业务场景
|
||||
提供了节点组件 Node 用于定制多端流程图的节点样式
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Flowchart 流程图
|
||||
---
|
||||
|
||||
# Flowchart 流程图
|
||||
|
||||
<div>
|
||||
基本用法
|
||||
该组件可以用来定制流程图，不依赖其它库或组件。默认的实现支持有状态的节点和连线，支持节点和连线以及空白区域的点击事件。
|
||||
点模式
|
||||
提供了节点组件 Node 用于定制多端流程图的节点样式
|
||||
|
||||
业务场景
|
||||
提供了节点组件 Node 用于定制多端流程图的节点样式
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: '/basic-usage',
|
||||
name: {
|
||||
'zh-CN': '垂直图形',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['/basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'horizon',
|
||||
name: {
|
||||
'zh-CN': '水平图形',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['horizon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dot-vertical',
|
||||
name: {
|
||||
'zh-CN': '点模式-垂直图形',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dot-vertical.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dot-horizon',
|
||||
name: {
|
||||
'zh-CN': '点模式-水平图形',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dot-horizon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'holistic',
|
||||
name: {
|
||||
'zh-CN': '全景图',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['holistic.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'holistic-fork',
|
||||
name: {
|
||||
'zh-CN': '全景图-分叉',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['holistic-fork.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -130,7 +130,6 @@ export default {
|
|||
.demo-ruleForm .tiny-form-item .tiny-form-item__content {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
button:first-of-type {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Form 表单
|
||||
---
|
||||
|
||||
# Form 表单
|
||||
|
||||
<div>
|
||||
由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Form 表单
|
||||
---
|
||||
|
||||
# Form 表单
|
||||
|
||||
<div>
|
||||
由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'frequently-used-form',
|
||||
name: {
|
||||
'zh-CN': '常用表单',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 Form 组件中，每一个表单域由一个 FormItem 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['frequently-used-form.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-in-row',
|
||||
name: {
|
||||
'zh-CN': '行内表单',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>当垂直方向空间受限且表单较简单时，可以在一行内放置表单，设置 `inline` 属性可以让表单域变为行内的表单域。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-in-row.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-validation',
|
||||
name: {
|
||||
'zh-CN': '表单校验',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>包括常用的必填、日期、时间、URL、邮件等校验规则。通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。<br>校验时若校验类型为 `date`，则需要使用 `DatePicker` 组件进行日期选择，若使用 `Input` 组件进行日期输入，建议使用自定义校验规则。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-validation.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-validation-rule',
|
||||
name: {
|
||||
'zh-CN': '自定义校验规则',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validator` 选项进行自定义校验，校验方法中 `callback` 必须被调用。通过配置 `validate-on-rule-change` 属性,设置是否在 `rules` 属性改变后立即触发一次验证<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-validation-rule.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'validation-position',
|
||||
name: {
|
||||
'zh-CN': '校验提示位置',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validate-position` 可自定义错误提示出现的位置，在 `Form` 组件上设置后，子组件`FormItem`会继承父组件设置。单独在 `FormItem` 组件上进行设置优先级高于在 `From`上的设置。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['validation-position.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'popper-options-bubbling',
|
||||
name: {
|
||||
'zh-CN': '校验提示跟随表单项移动',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过配置 `popperOptions.bubbling` 为 `true` ，可实现表单的校验提示跟随 Form 表单外部的滚动条滚动。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['popper-options-bubbling.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'switch-from-item',
|
||||
name: {
|
||||
'zh-CN': '动态切换 FormItem',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在表单中通过 `v-if` 切换两个 `FormItem` 控制页面元素时，会存在错误提示错位问题，原因时 Vue 复用了 ToolTip 组件，这时需要将 form-item 上加上 `key` 属性标识<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['switch-from-item.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'no-validate-to-add',
|
||||
name: {
|
||||
'zh-CN': 'RichText 等无校验的组件添加校验的方法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['no-validate-to-add.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '表单尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过在 `tiny-form` 标签上设置 `size` 属性可以改变表单内组件尺寸；设置 `disabled` 属性可以改变表单内组件禁用状态<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-clear-validate',
|
||||
name: {
|
||||
'zh-CN': '移除表单项的校验结果',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组，如不传则移除整个表单的校验结果。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-clear-validate.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-label',
|
||||
name: {
|
||||
'zh-CN': '标签文本插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在 `label` 插槽，自定义标签文本的内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-label.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-item-tip',
|
||||
name: {
|
||||
'zh-CN': '给表单项 label 添加提示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过给 form-item 添加 tip-content 属性给 label 添加提示信息<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-item-tip.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'validate-type',
|
||||
name: {
|
||||
'zh-CN': '校验提示的形式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validate-type` 可设置校验提示信息是以 `text` 文本显示还是以 `tip` 提示框的形式显示，默认为 `tip` 。也可直接配置在某一个 `<form-item>` 上控制某一项的校验提示形式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['validate-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-disabled',
|
||||
name: {
|
||||
'zh-CN': '表单禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `disabled` 可设置表单是否禁用，默认为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form-display-only',
|
||||
name: {
|
||||
'zh-CN': '只读 display-only',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `display-only` 属性，开启只读模式<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form-display-only.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'validate-debounce',
|
||||
name: {
|
||||
'zh-CN': '防抖处理',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置 FormItem 的属性 `validate-debounce` 为 `true`，可以开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验。默认为 `false` 不开启。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['validate-debounce.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <tiny-radio v-model="viewType" label="default">默认视图</tiny-radio> -->
|
||||
<tiny-radio v-model="viewType" label="mf">表格视图</tiny-radio>
|
||||
<tiny-radio v-model="viewType" label="card">卡片视图</tiny-radio>
|
||||
<tiny-grid :data="tableData" auto-resize :select-config="selectConfig" :view-type="viewType" :mf-show="mfShow" :card-config="cardConfig" @card-click="onCardClick" height="480">
|
||||
<template #link>
|
||||
<icon-chevron-right class="mf-table-more cursor-pointer fill-brand"></icon-chevron-right>
|
||||
</template>
|
||||
<tiny-grid-column type="selection"></tiny-grid-column>
|
||||
<tiny-grid-column type="operation" title="操作" :operation-config="operationConfig"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal, Tag, Radio } from '@opentiny/vue'
|
||||
import {
|
||||
IconChevronRight,
|
||||
IconAreaChart,
|
||||
IconBarChart,
|
||||
IconDotChart,
|
||||
IconLineChart,
|
||||
IconPieChart
|
||||
} from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn,
|
||||
TinyRadio: Radio,
|
||||
IconChevronRight: IconChevronRight()
|
||||
},
|
||||
methods: {
|
||||
clickHandler(e, { row, buttonConfig }) {
|
||||
Modal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
|
||||
},
|
||||
onCardClick(row, e) {
|
||||
Modal.message('onCardClick')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewType: 'card',
|
||||
mfShow: 'card', // 可选值为list, card
|
||||
selectConfig: {
|
||||
checkMethod({ rowIndex }) {
|
||||
return rowIndex !== 5
|
||||
}
|
||||
},
|
||||
cardConfig: {
|
||||
primaryField: 'name',
|
||||
contentFields: ['area', 'address', 'introduction'],
|
||||
logoField: [
|
||||
'logo',
|
||||
{ render: ({ h, row, field, value, config }) => h('img', { class: 'w-full h-full', attrs: { src: value } }) }
|
||||
],
|
||||
tagFields: [
|
||||
'tag1',
|
||||
'tag2',
|
||||
[
|
||||
'tag3',
|
||||
{
|
||||
render: ({ h, row, field, value, config, color }) =>
|
||||
h(
|
||||
Tag,
|
||||
{
|
||||
props: { size: 'mini', type: color, customClass: 'inline-block truncate max-w-[6.25rem] h-[18px]' }
|
||||
},
|
||||
value
|
||||
)
|
||||
}
|
||||
]
|
||||
],
|
||||
tagColorFields: ['tagColor1', 'tagColor2', 'tagColor3']
|
||||
},
|
||||
operationConfig: {
|
||||
buttons: [
|
||||
{ name: '操作1', icon: IconAreaChart(), click: this.clickHandler, disabled: true },
|
||||
{ name: '操作2', icon: IconBarChart(), click: this.clickHandler, disabled: (row) => row.id === '1' },
|
||||
{ name: '操作3', icon: IconDotChart(), click: this.clickHandler, hidden: true },
|
||||
{ name: '操作4', icon: IconLineChart(), click: this.clickHandler, hidden: (row) => row.id === '2' },
|
||||
{ name: '操作5', icon: IconPieChart(), click: this.clickHandler }
|
||||
]
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司GFD科技有限公司',
|
||||
area: '华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWWW科技有限公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB有限公司',
|
||||
area: '华北区',
|
||||
address: '梅州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技有限公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '交通',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '康康物业有限公司',
|
||||
area: '华北区',
|
||||
address: '广州天河区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
|
||||
logo: 'webnova/static/images/9.jpg',
|
||||
tag1: 'NA',
|
||||
tag2: '如果内容超过100px',
|
||||
tag3: '总集',
|
||||
tagColor1: '',
|
||||
tagColor2: '',
|
||||
tagColor3: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Grid 表格
|
||||
---
|
||||
|
||||
# Grid 表格
|
||||
|
||||
<div>
|
||||
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Grid 表格
|
||||
---
|
||||
|
||||
# Grid 表格
|
||||
|
||||
<div>
|
||||
表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'column-anchor',
|
||||
name: {
|
||||
'zh-CN': '列锚点',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['column-anchor.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'operation-column',
|
||||
name: {
|
||||
'zh-CN': '操作列',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['operation-column.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Image 图片预览
|
||||
---
|
||||
|
||||
# Image 图片预览
|
||||
|
||||
<div>
|
||||
图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等功能。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Image 图片预览
|
||||
---
|
||||
|
||||
# Image 图片预览
|
||||
|
||||
<div>
|
||||
图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等功能。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `image-size` 设置预览的图片尺寸大小，通过`round`设置是否展示圆形。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'show-hover',
|
||||
name: {
|
||||
'zh-CN': '图片悬浮',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `show-hover` 设置预览的图片的悬浮效果。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-hover.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'auto-fit-container-size',
|
||||
name: {
|
||||
'zh-CN': '自适应容器尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `fit` 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br> object-fit 说明<br>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>contain：被替换的内容大小可以填充元素的内容框<br> cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>none：被替换的内容尺寸不会被改变<br>scale-down：内容的尺寸就像是指定了 none 或 contain，取决于哪一个将导致更小的对象尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['auto-fit-container-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'preview-src-list',
|
||||
name: {
|
||||
'zh-CN': '预览大图',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `preview-src-list` 开启预览大图的功能，通过添加`show-index`开启图片序列号展示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview-src-list.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Input 输入框
|
||||
---
|
||||
|
||||
# Input 输入框
|
||||
|
||||
<div>
|
||||
通过鼠标或键盘输入字符。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Input 输入框
|
||||
---
|
||||
|
||||
# Input 输入框
|
||||
|
||||
<div>
|
||||
通过鼠标或键盘输入字符。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,471 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'clearable',
|
||||
name: {
|
||||
'zh-CN': '可清空',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `clearable` 属性设置输入框显示清空图标按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['clearable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-password',
|
||||
name: {
|
||||
'zh-CN': '密码显示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>当 `type` 为 `password` 时，可通过 `show-password` 属性设置输入框显示密码显示/隐藏切换图标按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-password.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': 'type 属性',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通对应的 type 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `size` 属性设置尺寸大小，可选值：`medium / small / mini`。注意：只在 `type!="textarea"` 时有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'form',
|
||||
name: {
|
||||
'zh-CN': 'form',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `form` 属性设置原生属性 form 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['form.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'enumnameeration',
|
||||
name: {
|
||||
'zh-CN': 'name',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `name` 原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['name.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'label',
|
||||
name: {
|
||||
'zh-CN': '输入框关联文字',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `label` 属性设置输入框关联的 label 文字。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['label.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'prefix-icon',
|
||||
name: {
|
||||
'zh-CN': '头部图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `prefix-icon` 属性设置输入框头部图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['prefix-icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'suffix-icon',
|
||||
name: {
|
||||
'zh-CN': '尾部图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p> 可通过 `suffix-icon` 属性设置输入框尾部图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['suffix-icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-prefix',
|
||||
name: {
|
||||
'zh-CN': '可通过 slot="prefix" 设置头部图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-prefix.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-suffix',
|
||||
name: {
|
||||
'zh-CN': '可通过 slot="suffix" 设置尾部图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-suffix.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'resize',
|
||||
name: {
|
||||
'zh-CN': '可缩放文本域',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `resize` 属性设置文本域的缩放。可选值：`none / both / horizontal / vertical`。注意：只在 `type="textarea"` 时有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['resize.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'rows',
|
||||
name: {
|
||||
'zh-CN': '文本域行数',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `rows` 属性设置文本域显示行数。注意：只在 `text="textarea"` 时有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['rows.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'cols',
|
||||
name: {
|
||||
'zh-CN': '文本域宽度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `cols` 属性设置文本域显示宽度。注意：只在 `text="textarea"` 时有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['cols.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'autosize',
|
||||
name: {
|
||||
'zh-CN': '可自适应文本高度的文本域',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `autosize` 属性设置文本域自适应内容高度。可传入对象，如`{ minRows: 2, maxRows: 6 }`。注意：只对 `type="textarea"` 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['autosize.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'tabindex',
|
||||
name: {
|
||||
'zh-CN': '输入框的 tabindex',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `tabindex` 属性设置输入框的 tabindex<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['tabindex.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-prepend',
|
||||
name: {
|
||||
'zh-CN': '前置内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `prepend` slot，设置输入框前置内容，注意：只对 `type="text"` 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-prepend.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-append',
|
||||
name: {
|
||||
'zh-CN': '后置内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `append` slot，设置输入框后置内容，注意：只对 `type="text"` 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-append.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-prefix',
|
||||
name: {
|
||||
'zh-CN': '头部内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `prefix` slot，设置输入框头部内容，注意：只对 `type="text"` 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-prefix.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot-suffix',
|
||||
name: {
|
||||
'zh-CN': '尾部内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `suffix` slot，设置输入框尾部内容，注意：只对 `type="text"` 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot-suffix.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'max',
|
||||
name: {
|
||||
'zh-CN': '最大值',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `max` 属性设置输入框最大值。`max` 是原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['max.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'min',
|
||||
name: {
|
||||
'zh-CN': '最小值',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `min` 属性设置输入框最小值。`min` 是原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['min.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'maxlength',
|
||||
name: {
|
||||
'zh-CN': '最大输入长度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `maxlength` 属性设置输入框最大输入长度。`maxlength` 是原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['maxlength.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-word-limit',
|
||||
name: {
|
||||
'zh-CN': '输入字数统计',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `show-word-limit` 属性设置是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-word-limit.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'counter',
|
||||
name: {
|
||||
'zh-CN': '计数器',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `counter` 属性设置显示输入框字符计数器。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['counter.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'step',
|
||||
name: {
|
||||
'zh-CN': '输入字段的合法数字间隔',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `step` 属性设置输入字段的合法数字间隔。`step` 是原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['step.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'validate-event',
|
||||
name: {
|
||||
'zh-CN': '输入时触发表单校验',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `validate-event` 属性设置输入时触发表单校验。通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['validate-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'autofocus',
|
||||
name: {
|
||||
'zh-CN': '自动获取焦点',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `autofocus` 属性设置自动获取焦点。`autofocus` 是原生属性。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['autofocus.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'autocomplete',
|
||||
name: {
|
||||
'zh-CN': '自动补全',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `autocomplete` 属性设置自动补全，默认值为 off ，可选 on 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['autocomplete.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-blur',
|
||||
name: {
|
||||
'zh-CN': '失焦事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框失去焦点时触发 `blur` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-blur.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-change',
|
||||
name: {
|
||||
'zh-CN': '值改变事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框值改变时触发 `change` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-change.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-clear',
|
||||
name: {
|
||||
'zh-CN': '清除事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击输入框清除按钮时触发 `clear` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-clear.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-focus',
|
||||
name: {
|
||||
'zh-CN': '聚焦事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框获取焦点时触发 `focus` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-focus.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'method-addMemory',
|
||||
name: {
|
||||
'zh-CN': '记忆历史输入',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['method-addMemory.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'method-blur',
|
||||
name: {
|
||||
'zh-CN': '失去焦点',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['method-blur.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'method-focus',
|
||||
name: {
|
||||
'zh-CN': '获取焦点',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['method-focus.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'method-select',
|
||||
name: {
|
||||
'zh-CN': '选中输入框文本',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['method-select.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Loading 加载
|
||||
---
|
||||
|
||||
# Loading 加载
|
||||
|
||||
<div>
|
||||
加载数据时显示的动画效果。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Loading 加载
|
||||
---
|
||||
|
||||
# Loading 加载
|
||||
|
||||
<div>
|
||||
加载数据时显示的动画效果。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过静态方法 `Loading.service` 在指定 `target` 上设置加载。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'loading-tip-text',
|
||||
name: {
|
||||
'zh-CN': '自定义加载提示文本',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `text` 自定义加载文字的提示文本。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['loading-tip-text.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'background',
|
||||
name: {
|
||||
'zh-CN': '自定义遮罩背景色',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `background` 自定义背景颜色和透明度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['background.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `customClass` 指定类名进行样式修改。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'body',
|
||||
name: {
|
||||
'zh-CN': '修饰符',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['body.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'fullscreen',
|
||||
name: {
|
||||
'zh-CN': '全局加载',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `v-loading.lock.fullscreen` 指令方式或者服务方式进行全局加载，如需使用指令方式全局加载需要如下操作：<br>在 `Vue 2` 版本环境中添加 `Vue.use(Loading)`<br>在 `Vue 3` 版本环境中添加 `app.use(Loading)`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['fullscreen.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'spinner',
|
||||
name: {
|
||||
'zh-CN': '自定义加载图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `spinner` 自定义加载图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['spinner.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'target',
|
||||
name: {
|
||||
'zh-CN': '区域加载',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `target` 指定 Loading 需要覆盖的 DOM 节点。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['target.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'loading-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过在 `Loading.service` 中设置 `size` 属性加载不同的大小尺寸，包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['loading-size.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Message 提示框
|
||||
---
|
||||
|
||||
# Message 提示框
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Message 提示框
|
||||
---
|
||||
|
||||
# Message 提示框
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'base',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `this.$message` 弹出信息提示框。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'duration',
|
||||
name: {
|
||||
'zh-CN': '自动关闭延时',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['duration.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'status',
|
||||
name: {
|
||||
'zh-CN': '消息状态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `status` 属性设置消息状态，可选值有 `info | success | warning | error `。<br>可通过 `showClose` 属性控制弹窗是否显示关闭图标，可选值有 `ture | false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'id',
|
||||
name: {
|
||||
'zh-CN': '防止重复提示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>如果不想窗口重复点击，可以设置唯一的 `id` 防止重复提示，只对 type=message 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['id.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Modal 模态框
|
||||
---
|
||||
|
||||
# Modal 模态框
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Modal 模态框
|
||||
---
|
||||
|
||||
# Modal 模态框
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'base',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `Modal.alert` 方法设置弹出框，通过 `Modal.confirm` 方法设置确认弹出框。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'div-button-content',
|
||||
name: {
|
||||
'zh-CN': '按钮内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可在 `Modal.alert` 方法里通过添加 `confirmContent` 属性设置确定按钮内容，通过 `cancelContent` 属性设置取消按钮内容。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['div-button-content.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'fullscreen',
|
||||
name: {
|
||||
'zh-CN': '最大化显示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `fullscreen` 属性设置是否最大化显示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['fullscreen.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'esc-closable',
|
||||
name: {
|
||||
'zh-CN': '按 Esc 键关闭弹出框',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口，默认为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['esc-closable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'duration',
|
||||
name: {
|
||||
'zh-CN': '自动关闭延时',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['duration.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'id',
|
||||
name: {
|
||||
'zh-CN': '防止重复提示',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>如果不想窗口重复点击，可以设置唯一的 `id` 防止重复提示，只对 type=message 有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['id.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'lock-scroll',
|
||||
name: {
|
||||
'zh-CN': '锁住滚动条',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `lock-scroll` 属性设置是否锁住滚动条，不允许页面滚动。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['lock-scroll.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'lock-view',
|
||||
name: {
|
||||
'zh-CN': '锁住页面',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `lock-view` 属性设置是否锁住页面，不允许窗口之外的任何操作。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['lock-view.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask-closable',
|
||||
name: {
|
||||
'zh-CN': '点击遮罩层关闭窗口',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['mask-closable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'message',
|
||||
name: {
|
||||
'zh-CN': '自定义内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `message` 属性设置窗口的内容。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['message.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'showFooter',
|
||||
name: {
|
||||
'zh-CN': '不显示底部',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `showFooter` 属性设置是否显示底部，默认为 `true`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['showFooter.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'showHeader',
|
||||
name: {
|
||||
'zh-CN': '不显示头部',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `showHeader` 属性设置是否显示头部，默认为 `true`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['showHeader.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'status',
|
||||
name: {
|
||||
'zh-CN': '消息状态',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `status` 属性设置消息状态，可选值有 `info | success | warning | error | loading | 自定义组件`，`status` 可以是自定义组件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'title',
|
||||
name: {
|
||||
'zh-CN': '标题',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `title` 属性设置窗口的标题。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': '窗口类型',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `type` 属性设置窗口类型，可选值 `alert | confirm | message`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'value',
|
||||
name: {
|
||||
'zh-CN': '绑定值',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `v-model` 属性绑定值。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['value.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'zIndex',
|
||||
name: {
|
||||
'zh-CN': '自定义堆叠顺序',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `zIndex` 属性设置自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['zIndex.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'cancel-event',
|
||||
name: {
|
||||
'zh-CN': '取消按钮事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击取消按钮时触发 `cancel` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['cancel-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'close-event',
|
||||
name: {
|
||||
'zh-CN': '关闭按钮事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击关闭按钮时会触发 `close` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['close-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'confirm-event',
|
||||
name: {
|
||||
'zh-CN': '确定按钮事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击确定按钮时会触发 `confirm` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['confirm-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'hide-event',
|
||||
name: {
|
||||
'zh-CN': '窗口关闭事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>窗口关闭时会触发 `hide` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['hide-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-event',
|
||||
name: {
|
||||
'zh-CN': '窗口显示事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在窗口显示时会触发 `show` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'zoom-event',
|
||||
name: {
|
||||
'zh-CN': '窗口缩放事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>窗口缩放时会触发 `zoom` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['zoom-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'value',
|
||||
name: {
|
||||
'zh-CN': '默认插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `templete` 设置默认插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['value.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'footer-slot',
|
||||
name: {
|
||||
'zh-CN': '底部插槽',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `slot="footer"` 设置底部插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['footer-slot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'grid',
|
||||
name: {
|
||||
'zh-CN': '嵌套 grid',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过插槽嵌套 grid<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['grid.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'before-close',
|
||||
name: {
|
||||
'zh-CN': '拦截弹窗关闭',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `before-close` 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值，则拦截弹窗关闭；否则不拦截<br> 可以通过该拦截方法传入的参数获取关闭的操作类型<br>confirm 弹窗有以下关闭类型：<br> - confirm：点击确认时关闭<br>- cancel：点击取消时关闭<br> - close：点击关闭按钮时关闭<br>- mask: 点击遮罩时关闭<br>- esc：通过按钮 esc 时关闭<br>alert 弹窗比 confirm 弹窗少了 `confirm` 类型<br> message 弹窗只有 `show` 一种关闭类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['before-close.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Numeric 计数器
|
||||
---
|
||||
|
||||
# Numeric 计数器
|
||||
|
||||
<div>
|
||||
Numeric 计数器可用于输入数字,可自定义数值范围，步进大小。支持鼠标键盘增减。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Numeric 计数器
|
||||
---
|
||||
|
||||
# Numeric 计数器
|
||||
|
||||
<div>
|
||||
Numeric 计数器可用于输入数字,可自定义数值范围，步进大小。支持鼠标键盘增减。
|
||||
</div>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'numeric-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `size` 属性设置计数器尺寸。可取值 `medium`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['numeric-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'dynamic-disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置 disabled 控制是否禁用计数器<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'max-min',
|
||||
name: {
|
||||
'zh-CN': '数值循环',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过设置 `max` 属性设置计数器允许的最大值，通过设置 `min` 属性设置计数器允许的最小值通过设置 `circulate` 属性设置是否循环，即数组首尾相连<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['max-min.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'about-step',
|
||||
name: {
|
||||
'zh-CN': '步长',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `step` 属性设置计数器的步长。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['about-step.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'unit',
|
||||
name: {
|
||||
'zh-CN': '数值单位',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `unit` 属性设置计数器的单位<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['unit.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'focus-event',
|
||||
name: {
|
||||
'zh-CN': '聚焦事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框获得焦点时触发 `focus` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['focus-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'blur-event',
|
||||
name: {
|
||||
'zh-CN': '失焦事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框失去焦点时触发 `blur` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['blur-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'change-event',
|
||||
name: {
|
||||
'zh-CN': '值改变事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框值被改变时触发 `change` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['change-event.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Filter 过滤器
|
||||
---
|
||||
|
||||
# Filter 过滤器
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue