SanshuiLiu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: optimize mobile-first components

This commit is contained in:
Kagol 2024-02-04 11:54:30 +08:00
parent 47c6f176c2
commit e848314b4b
No known key found for this signature in database
GPG Key ID: 48BBA0ECCB3EB997
2737 changed files with 111051 additions and 52550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js
View File

@ -10,6 +10,8 @@ module.exports = {
order: [['script', 'template'], 'style']
}
],
'vue/attribute-hyphenation': 'off',
'vue/v-on-event-hyphenation': 'off',
'vue/order-in-components': 'off',
'vue/component-name-in-template-casing': 'off',
'vue/custom-event-name-casing': 'off',
@ -21,6 +23,7 @@ module.exports = {
'vue/comma-dangle': 'off',
'vue/prefer-template': 'off',
'vue/no-unused-refs': 'off',
'vue/require-component-is': 'off',
'vue/singleline-html-element-content-newline': 'off',
'curly': 'off',
'sort-imports': 'off',

6
.gitignore vendored
View File

@ -61,3 +61,9 @@ packages/theme/src/theme/*-theme/component.js
pnpm-lock.yaml
gulp/bundle.json
# 本地构建的saas相关资源文件
examples/sites/public/tiny-vue*.js
examples/sites/public/tiny-vue*.mjs
examples/sites/public/tailwind.css
examples/sites/public/index.css

37
examples/docs/newsrc/App.vue
View File

@ -4,17 +4,23 @@
<div style="float: right">
组件库模式： <tiny-button-group :data="state.groupData" v-model="modeState.mode"></tiny-button-group>
</div>
<div>
VCA版本：
<tiny-link type="primary" :underline="false" class="mr20">
{{ state.vueVersion }}
</tiny-link>
<div class="f-r f-box-center">
<div class="f22 sm-show mr16 cur-hand d-none" @click="toggleFixedMenu">
<icon-editor-menu-left v-if="state.showFixedMenu" />
<icon-editor-menu-right v-else />
</div>
<div>
VCA版本：
<tiny-link type="primary" :underline="false" class="mr20">
{{ state.vueVersion }}
</tiny-link>
</div>
</div>
</div>
<div class="fi-1 of-auto">
<tiny-pc v-if="modeState.mode === 'pc'"></tiny-pc>
<tiny-mobile v-else-if="modeState.mode === 'mobile'"></tiny-mobile>
<tiny-mobile-first v-else></tiny-mobile-first>
<tiny-pc v-if="modeState.mode === 'pc'" :show-fixed-menu="state.showFixedMenu"></tiny-pc>
<tiny-mobile v-else-if="modeState.mode === 'mobile'" :show-fixed-menu="state.showFixedMenu"></tiny-mobile>
<tiny-mobile-first v-else :show-fixed-menu="state.showFixedMenu"></tiny-mobile-first>
</div>
</div>
</template>
@ -22,6 +28,7 @@
<script>
import './style.css'
import { ButtonGroup, Link } from '@opentiny/vue'
import { iconEditorMenuRight, iconEditorMenuLeft } from '@opentiny/vue-icon'
import TinyPc from './pc.vue'
import TinyMobile from './mobile.vue'
import TinyMobileFirst from './mobile-first.vue'
@ -34,7 +41,9 @@ export default {
TinyMobile,
TinyMobileFirst,
TinyButtonGroup: ButtonGroup,
TinyLink: Link
TinyLink: Link,
IconEditorMenuRight: iconEditorMenuRight(),
IconEditorMenuLeft: iconEditorMenuLeft()
},
setup() {
const { state: modeState, fn: modeFn } = useModeCtx()
@ -44,7 +53,8 @@ export default {
{ text: 'Mobile', value: 'mobile' },
{ text: 'Mobile-first', value: 'mobile-first' }
],
vueVersion: hooks.version
vueVersion: hooks.version,
showFixedMenu: false
})
hooks.onMounted(() => {
@ -64,11 +74,16 @@ export default {
)
})
const toggleFixedMenu = () => {
state.showFixedMenu = !state.showFixedMenu
}
// 解析url, 生成modeState
modeFn.loadPage()
return {
state,
modeState
modeState,
toggleFixedMenu
}
}
}

48
examples/docs/newsrc/mobile-first.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="wp100 hp100 f-r of-hidden">
<div class="w230 pt20 of-auto">
<div class="w230 pt20 of-auto sm-hidden b-r bg-white" :class="{ 'fixed-menu': showFixedMenu }">
<tiny-tree-menu
class="!w213"
:data="menuData"
@ -23,8 +23,14 @@
<div v-html="state.currDemo?.desc['zh-CN']"></div>
</div>
<!-- 预览 -->
<div class="rel px20 minh200" style="transform: translateX(0)">
<component :is="state.comp"></component>
<!-- modeState.demoId === 'preview-in-dialog' 修复preview-in-dialog demo弹窗内容被遮罩层遮挡 -->
<div
class="rel px20 minh200"
:style="{ transform: modeState.demoId === 'preview-in-dialog' ? '' : 'translateX(0)' }"
>
<config-provider :design="design">
<component :is="state.comp"></component>
</config-provider>
</div>
</div>
<!-- API表格 -->
@ -72,8 +78,8 @@
</div>
</div>
<!-- 右边浮动所有的demos -->
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
<div class="f12 ofy-auto">
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25 sm-hidden">
<div class="f12 ofy-auto h700">
<div
v-for="demo in state.demos"
:key="demo.demoId"
@ -94,19 +100,27 @@
<script>
import { hooks } from '@opentiny/vue-common'
import { Floatbar, TreeMenu, Button, Tooltip } from '@opentiny/vue'
import { Floatbar, TreeMenu, Button, Tooltip, ConfigProvider } from '@opentiny/vue'
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
import { menuData, apis, demoStr, demoVue, mds } from './resourceMobileFirst.js'
import { useModeCtx } from './uses'
import designAuroraConfig from '@opentiny/vue-design-aurora'
import designSaasConfig from '@opentiny/vue-design-saas'
const isSaasMode = process.env.VITE_TINY_THEME === 'saas'
export default {
props: {
showFixedMenu: Boolean
},
components: {
TinyFloatbar: Floatbar,
TinyTreeMenu: TreeMenu,
TinyButton: Button,
TinyTooltip: Tooltip,
IconStarIcon: iconStarActive(),
IconOpeninVscode: iconSelect()
IconOpeninVscode: iconSelect(),
ConfigProvider
},
setup() {
import('./tailwind.css')
@ -178,21 +192,37 @@ export default {
modeFn.pushToUrl()
}
// mobile-first都是aui组件，限定使用它的规范。saas 模式下，只使用designSaasConfig，否则 designAuroraConfig
const design = isSaasMode ? designSaasConfig : designAuroraConfig
return {
menuData,
state,
fn,
modeState,
modeFn
modeFn,
design
}
}
}
</script>
<style>
<style lang="less">
.component-md h1,
.component-md h2 {
font-size: 1.5em;
font-weight: bold;
}
.demo-date-picker-mobile-container {
min-height: 500px;
.tiny-recycle-scroller {
height: 220px !important;
}
div[data-tag='tiny-drawer-main'] {
min-height: auto;
}
}
</style>

25
examples/docs/newsrc/mobile.vue
View File

@ -1,8 +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>
<div class="w230 pt20 of-auto sm-hidden b-r bg-white" :class="{ 'fixed-menu': showFixedMenu }">
<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">
<!-- 标题 -->
@ -12,7 +16,8 @@
<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'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span>):
{{ state.currDemo?.name['zh-CN'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
>):
</div>
<div v-html="state.currDemo?.desc['zh-CN']"></div>
</div>
@ -73,8 +78,13 @@
<!-- 右边浮动所有的demos -->
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
<div class="f12 ofy-auto">
<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.name['zh-CN'] }}
<Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
@ -94,6 +104,9 @@ import { menuData, apis, demoStr, demoVue, mds } from './resourceMobile.js'
import { useModeCtx } from './uses'
export default {
props: {
showFixedMenu: Boolean
},
components: {
TinyFloatbar: Floatbar,
TinyTreeMenu: TreeMenu,

18
examples/docs/newsrc/pc.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="wp100 hp100 f-r of-hidden">
<div class="w230 pt20 of-auto">
<div class="w230 pt20 of-auto sm-hidden b-r bg-white" :class="{ 'fixed-menu': showFixedMenu }">
<tiny-tree-menu
class="!w213"
:data="menuData"
@ -97,7 +97,7 @@
</div>
</tiny-floatbar>
<!-- 切换主题 -->
<tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme">
<tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme" :disabled="isSaasMode">
<span title="切换主题">
<SvgTheme></SvgTheme>
</span>
@ -153,10 +153,13 @@ import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
import Loading from '@opentiny/vue-loading'
import designSmbConfig from '@opentiny/vue-design-smb'
import designAuroraConfig from '@opentiny/vue-design-aurora'
import designSaasConfig from '@opentiny/vue-design-saas'
import { menuData, apis, demoStr, demoVue, mds } from './resourcePc.js'
import { useTheme, useModeCtx } from './uses'
import SvgTheme from './assets/theme.svg'
const isSaasMode = process.env.VITE_TINY_THEME === 'saas'
const getPath = (path) => {
if (path.startsWith('grid-')) {
return 'grid'
@ -167,6 +170,9 @@ const getPath = (path) => {
}
export default {
props: {
showFixedMenu: Boolean
},
components: {
TinyFloatbar: Floatbar,
TinyTreeMenu: TreeMenu,
@ -185,7 +191,7 @@ export default {
},
setup() {
const { state: modeState, fn: modeFn } = useModeCtx()
const { changeTheme, currThemeLabel } = useTheme()
const { changeTheme, currThemeLabel } = useTheme({ readCacheImmediate: !isSaasMode })
const rightRef = hooks.ref('')
const state = hooks.reactive({
demos: [], // 组件的所有示例 {component,content,demoId,findIntroStr,link,title}[]
@ -266,6 +272,9 @@ export default {
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
// saas 模式下，只使用designSaasConfig，并且禁用主题切换
const design = isSaasMode ? designSaasConfig : designConfigMap[lastThemeKey] || {}
return {
menuData,
state,
@ -275,7 +284,8 @@ export default {
modeState,
modeFn,
rightRef,
design: designConfigMap[lastThemeKey] || {}
design,
isSaasMode
}
}
}

17
examples/docs/newsrc/style.css
View File

@ -90,3 +90,20 @@ body,
transform: translateX(0);
overflow: hidden;
}
@media screen and (max-width: 1023px) {
.sm-show {
display: block;
}
.sm-hidden {
display: none;
}
.fixed-menu {
display: block;
position: fixed;
height: 100%;
z-index: 99;
}
}

4
examples/docs/newsrc/uses/useTheme.js
View File

@ -15,7 +15,7 @@ function showTip() {
isShowTip = true
}
export function useTheme() {
export function useTheme({ readCacheImmediate = true } = {}) {
const theme = new TinyThemeTool()
const currThemeLabel = hooks.ref('tiny-default-theme')
const lastThemeKey = localStorage.getItem('tinyThemeToolkey')
@ -37,7 +37,7 @@ export function useTheme() {
}
// 切换上次缓存的主题
if (THEME_MAP[lastThemeKey]) {
if (readCacheImmediate && THEME_MAP[lastThemeKey]) {
theme.changeTheme(THEME_MAP[lastThemeKey])
currThemeLabel.value = lastThemeKey
}

1
examples/docs/package.json
View File

@ -14,6 +14,7 @@
"@opentiny/vue-theme-saas": "workspace:~",
"@opentiny/vue-design-aurora": "workspace:~",
"@opentiny/vue-design-smb": "workspace:~",
"@opentiny/vue-design-saas": "workspace:~",
"sortablejs": "1.15.0"
},
"devDependencies": {

4
examples/react-site/package.json
View File

@ -51,7 +51,7 @@
"markdown-it-sup": "^1.0.0",
"markdown-it-table-of-contents": "^0.6.0",
"markdown-it-toc-done-right": "^4.2.0",
"naive-ui": "^2.30.6",
"naive-ui": "~2.30.6",
"prettier": "^2.7.1",
"stylelint": "^14.9.1",
"stylelint-config-standard": "^26.0.0",
@ -64,4 +64,4 @@
"vite-plugin-inspect": "^0.5.0",
"vite-plugin-md": "0.13.1"
}
}
}

8
examples/sites/demos/.eslintrc.js Normal file
View File

@ -0,0 +1,8 @@
/* eslint-env node */
/** @type {import('eslint').Linter.Config} */
module.exports = {
rules: {
'no-console': 'off'
}
}

181
examples/sites/demos/apis/action-menu.js Normal file
View File

@ -0,0 +1,181 @@
export default {
mode: ['pc'],
apis: [
{
name: 'action-menu',
type: 'component',
props: [
{
name: 'max-show-num',
type: 'number',
defaultValue: '2',
desc: {
'zh-CN': '最多显示菜单按钮的个数，其他菜单在下拉弹框显示',
'en-US':
'The maximum number of displayed menu buttons, and other menus are displayed in the drop-down pop-up box'
},
mode: ['pc'],
pcDemo: 'max-show-num'
},
{
name: 'more-text',
type: 'string',
defaultValue: "'更多'",
desc: {
'zh-CN': '下拉按钮文本',
'en-US': 'Dropdown button text'
},
mode: ['pc'],
pcDemo: 'more-text'
},
{
name: 'options',
typeAnchorName: 'IItemData',
type: 'IItemData[]',
defaultValue: '[]',
desc: {
'zh-CN': '菜单项列表的数据',
'en-US': 'Data for menu item list'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '下拉弹框的类名，用于自定义样式',
'en-US': 'The class name of the dropdown pop-up box, used for customizing styles'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'show-icon',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示下拉触发源图标',
'en-US': 'Is the dropdown trigger source icon displayed'
},
mode: ['pc'],
pcDemo: 'icon'
},
{
name: 'spacing',
type: 'string | number',
defaultValue: "'5px'",
desc: {
'zh-CN': '菜单按钮之间的间距',
'en-US': 'Spacing between menu buttons'
},
mode: ['pc'],
pcDemo: 'spacing'
},
{
name: 'suffix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '下拉触发源图标',
'en-US': 'Dropdown trigger source icon'
},
mode: ['pc'],
pcDemo: 'icon'
},
{
name: 'text-field',
type: 'string',
defaultValue: "'label'",
desc: {
'zh-CN': '菜单按钮文本的键值',
'en-US': 'Key values for menu button text'
},
mode: ['pc'],
pcDemo: 'text-field'
}
],
events: [
{
name: 'item-click',
typeAnchorName: 'IItemClickParams',
type: '(data:IItemClickParams) => void',
defaultValue: '',
desc: {
'zh-CN': '监听菜单项的点击事件',
'en-US': 'Listen for click events on menu items'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'more-click',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '监听下拉按钮的点击事件。trigger 为 click 时生效',
'en-US': 'Listen for the click event of the drop-down button. Effective when trigger is click'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'visible-change',
type: '(status: boolean) => void',
defaultValue: '',
desc: {
'zh-CN': '监听下拉弹框的显示或隐藏状态变化',
'en-US': 'Monitor the display or hidden state changes of the dropdown pop-up box'
},
mode: ['pc'],
pcDemo: 'events'
}
],
methods: [],
slots: [
{
name: 'item',
type: '插槽',
defaultValue: '',
desc: {
'zh-CN': '菜单选项插槽',
'en-US': 'Menu option slot'
},
mode: ['pc'],
pcDemo: 'slot-item'
}
]
}
],
types: [
{
name: 'IItemData',
type: 'interface',
code: `
interface IItemData {
label: string // 菜单项文本
disabled: boolean // 是否禁用
divided: boolean // 是否显示分割线
children: IItemData[] // 菜单项子集
icon: Component // 菜单项图标
}
`
},
{
name: 'IItemClickParams',
type: 'interface',
code: `
interface IItemClickParams {
itemData: IItemData // 菜单项配置
vm: { // 菜单项实例
selected: boolean
textField: string
tipPosition: string
$el: HTMLElement
}
}
`
}
]
}

329
examples/sites/demos/apis/action-sheet.js Normal file
View File

@ -0,0 +1,329 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'ActionSheet',
type: 'component',
props: [
{
name: 'before-close',
type: "(type: 'confirm' | 'close' | 'hide') => void",
defaultValue: '',
desc: {
'zh-CN': '关闭前执行的事件',
'en-US': 'Event executed before a action sheet is closed'
},
mode: ['mobile-first'],
mfDemo: 'before-close'
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '自定义 class 样式',
'en-US': 'Customize the class style'
},
mode: ['mobile-first']
},
{
name: 'flex',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '弹性布局',
'en-US': 'Sets the elastic layout'
},
mode: ['mobile-first']
},
{
name: 'fullscreen',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否全屏',
'en-US': 'Full screen display'
},
mode: ['mobile-first'],
mfDemo: 'fullscreen'
},
{
name: 'lock-scroll',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '弹出时是否禁用滚动条',
'en-US': 'Full screen display'
},
mode: ['mobile-first']
},
{
name: 'mask',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示遮罩层',
'en-US': 'Indicates whether to display the mask layer'
},
mode: ['mobile-first'],
mfDemo: 'mask'
},
{
name: 'mask-closable',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '单击遮罩层是否关闭弹窗',
'en-US': 'Indicates whether to close the pop-up window when you click the mask layer'
},
mode: ['mobile-first'],
mfDemo: 'mask-event'
},
{
name: 'menus',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '操作列表，设置 type 为 action 启用操作列表模式时有效。',
'en-US': 'Operation list. This parameter is valid only when type is set to action.'
},
mode: ['mobile-first'],
mfDemo: 'action'
},
{
name: 'show-close',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示关闭按钮',
'en-US': 'Indicates whether to display the close icon'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-footer',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示底部',
'en-US': 'Indicates whether to display the bottom'
},
mode: ['mobile-first'],
mfDemo: 'show'
},
{
name: 'show-header',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示头部',
'en-US': 'Indicates whether to display the header'
},
mode: ['mobile-first'],
mfDemo: 'show'
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': 'Panel Title'
},
mode: ['mobile-first'],
mfDemo: 'actoin'
},
{
name: 'type',
type: 'Array[string]',
defaultValue: '',
desc: {
'zh-CN': '设置 type 为 action 启用操作列表模式',
'en-US': 'Set type to action to enable the operation list mode.'
},
mode: ['mobile-first'],
mfDemo: 'action'
},
{
name: 'v-model',
type: 'Number | String | Array',
defaultValue: '',
desc: {
'zh-CN': '双向数据绑定',
'en-US': 'bidirectional data binding'
},
mode: ['mobile-first']
},
{
name: 'visible',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否弹出面板',
'en-US': 'Indicates whether to display the panel.'
},
mode: ['mobile-first']
}
],
events: [
{
name: 'click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '点击列表选项时触发，设置 type 为 action 启用操作列表模式时有效。',
'en-US':
'This event is triggered when a list option is clicked. This event is valid only when type is set to action and the operation list mode is enabled.'
},
mode: ['mobile-first'],
mfDemo: 'action'
},
{
name: 'close',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '关闭面板时触发的事件。',
'en-US': 'Event triggered when a panel is closed.'
},
mode: ['mobile-first'],
mfDemo: 'action'
},
{
name: 'confirm',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '点击底部按钮时触发，设置 show-footer 为 true 时有效。',
'en-US':
'This event is triggered when the bottom button is clicked. It is valid only when show-footer is set to true.'
},
mode: ['mobile-first']
},
{
name: 'update:modelValue',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '数据更新时触发的事件',
'en-US': 'The event triggered when data is updated'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'update:visible',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '面板显示或隐藏时触发',
'en-US': 'Triggered when the panel is displayed or hidden'
},
mode: ['mobile-first'],
mfDemo: 'slot'
}
],
methods: [
{
name: 'actionSelectOption',
type: '(item, index) => void',
defaultValue: '',
desc: {
'zh-CN': '选择列表项，设置 type 为 action 启用操作列表模式时有效',
'en-US':
'Select a list item and set type to action. This parameter is valid only when the operation list mode is enabled.'
},
mode: ['mobile-first']
},
{
name: 'actionSelectOption(item, index)',
type: '',
defaultValue: '',
desc: {
'zh-CN': '选择列表项，设置 type 为 action 启用操作列表模式时有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板',
'en-US': 'Close the panel.'
},
mode: ['mobile-first'],
mfDemo: 'action'
}
],
slots: [
{
name: 'body-bottom',
desc: {
'zh-CN': '内容底部插槽',
'en-US': 'slot at the bottom of content'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'body-top',
desc: {
'zh-CN': '内容顶部插槽',
'en-US': 'slot at the top of content'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件默认插槽，设置 type 为 action 启用操作列表模式会提供参数 data 列表项和 index 列表索引。',
'en-US':
'Component default slot. Set type to action to enable the operation list mode. The parameter data list item and index list index are provided.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'footer',
type: '',
defaultValue: '',
desc: {
'zh-CN': '底部插槽，设置 show-footer 为 true 时有效',
'en-US': 'Bottom slot. This parameter is valid only when show-footer is set to true.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'header-left',
type: '',
defaultValue: '',
desc: {
'zh-CN': '头部左侧插槽，设置 show-header 为 true 时有效',
'en-US': 'Slot on the left of the header. This parameter is valid only when show-header is set to true.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'header-right',
type: '',
defaultValue: '',
desc: {
'zh-CN': '头部右侧插槽，设置 show-header 为 true 时有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
]
}
]
}

85
examples/sites/demos/apis/actionsheet.js Normal file
View File

@ -0,0 +1,85 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'actionsheet ',
type: 'component',
props: [
{
name: 'ellipsis',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否省略显示，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'ellipsis'
},
{
name: 'menus',
type: 'Array',
defaultValue: '50',
desc: {
'zh-CN': '<p>列表数组</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'ellipsis'
},
{
name: 'visible',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>上划列表显示隐藏,该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'ellipsis'
}
],
events: [
{
name: 'click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>设置组件点击列表项时触发的回调函数</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'clickfn'
}
],
methods: [
{
name: 'visibleHandle',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '<p>菜单列表隐藏方法</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-item'
}
],
slots: [
{
name: 'action',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义操作项内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-action'
},
{
mode: []
}
]
}
]
}

295
examples/sites/demos/apis/alert.js Normal file
View File

@ -0,0 +1,295 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'alert',
type: 'component',
props: [
{
name: 'center',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '文字是否居中',
'en-US': 'Whether the text is centered'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'center',
mobileDemo: 'center',
mfDemo: ''
},
{
name: 'closable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '警告是否可以关闭',
'en-US': 'Set whether alarms can be disabled.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'custom-close',
mobileDemo: 'custom-close',
mfDemo: ''
},
{
name: 'close-text',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '关闭按钮自定义文本',
'en-US': 'Customized text of the close button'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'custom-close',
mobileDemo: 'custom-close',
mfDemo: ''
},
{
name: 'custom-class',
type: 'string',
defaultValue: "'customClass'",
desc: {
'zh-CN': '自定义类名',
'en-US': 'Customization class name'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-class',
mfDemo: ''
},
{
name: 'description',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '警告的提示内容',
'en-US': 'Set the warning prompt content'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'custom-close',
mfDemo: ''
},
{
name: 'icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '传入图标组件自定义警告的图标，默认会根据 type 值自动使用对应图标',
'en-US':
'The icon for the custom warning of the incoming icon component will be automatically used based on the type value by default'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'icon',
mobileDemo: 'icon',
mfDemo: ''
},
{
name: 'scrolling',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '是否开启描述文字在鼠标 hover 时滚动显示的动画。',
'en-US':
'Indicates whether to enable the animation of the description text scrolling when the mouse hovers.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-foldable',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '展示带标题可折叠样式。',
'en-US': 'Shows collapsible styles with titles.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-icon',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示图标',
'en-US': 'Display icon'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'show-icon',
mfDemo: ''
},
{
name: 'single-line',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '描述内容是否一行显示，超出显示...，默认值为 false。',
'en-US': 'Indicates whether the description is displayed in one line. The default value is false.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'size',
type: "'normal' | 'large'",
defaultValue: "'normal'",
desc: {
'zh-CN': '警告的尺寸大小',
'en-US': 'Set the size of the warning'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'size',
mobileDemo: 'size',
mfDemo: ''
},
{
name: 'target',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
'en-US':
'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
},
mode: ['mobile'],
mobileDemo: 'target'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '警告的标题，在 size 为 large 时有效，默认会根据 type 自动设置',
'en-US':
'Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'title',
mfDemo: ''
},
{
name: 'type',
typeAnchorName: 'IType',
type: 'IType',
defaultValue: "'info'",
desc: {
'zh-CN': '警告的类型',
'en-US': 'Set the alarm type'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'size',
mfDemo: ''
}
],
events: [
{
name: 'close',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '关闭 alert 时触发的事件',
'en-US': 'Event triggered when the alert function is disabled'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'custom-close',
mobileDemo: 'custom-close',
mfDemo: ''
},
{
name: 'handleHeaderClick',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效。',
'en-US': 'Title click event. This parameter is valid only when show-foldable is set to true.'
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '隐藏组件',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'handleHeaderClick',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'close',
defaultValue: '',
desc: {
'zh-CN': '自定义关闭内容，当 closable 属性为 false 时有效',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'custom-close'
},
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
'en-US': 'The default slot for the component is valid when size is set to large'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot-default',
mobileDemo: 'slot-default',
mfDemo: ''
},
{
name: 'description',
type: '',
defaultValue: '',
desc: {
'zh-CN': '提示内容',
'en-US': 'Prompt Content'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'title',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标题的内容，当 size 设置为 large 后有效',
'en-US': 'The content of the title is valid when size is set to large'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'title',
mfDemo: ''
}
]
}
],
types: [
{
name: 'IType',
type: 'type',
code: `
type IType = 'success' | 'warning' | 'info' | 'error' | 'simple'
`
}
]
}

226
examples/sites/demos/apis/amount.js Normal file
View File

@ -0,0 +1,226 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'amount',
type: 'component',
props: [
{
name: 'currency',
type: 'string',
defaultValue: '该属性的默认值为 CNY',
desc: {
'zh-CN': '',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-currency',
mfDemo: 'custom-currency'
},
{
name: 'date',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置弹出框内显示日期框。值可设置为 string 或者 Date() 类型。',
'en-US':
'Set the date box to be displayed in the pop-up box. The value can be of the string or Date() type.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'set-date',
mfDemo: 'set-date'
},
{
name: 'digits',
type: 'number',
defaultValue: '该属性的默认值为 2',
desc: {
'zh-CN': '设置小数点位数，默认为 2 位。',
'en-US': 'Set the number of decimal places. The default value is two.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'digits-maxlen',
mfDemo: 'digits-maxlen'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '设置是否禁用，默认为 false。',
'en-US': 'Whether to disable the function. The default value is false.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'amount-disable',
mfDemo: 'amount-disable'
},
{
name: 'fetchCurrency',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义金额组件的请求服务接口，fetchCurrency返回一个Promise对象 ',
'en-US':
'Request service interface of the customized amount component. fetchCurrency returns a Promise object.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: 'custom-service'
},
{
name: 'fields',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义金额组件数据映射，在没有使用框架服务时必填',
'en-US':
'Customized amount component data mapping. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: 'custom-service'
},
{
name: 'format',
type: 'object',
defaultValue: '',
desc: {
'zh-CN':
"数字格式化置项，可配置如下字段：;{\n fraction: 4, // 保留小数位数\n rounding: 0, // 舍入点，0-9之间的数字，如配置为7时则为6舍7入，默认为5（四舍五入）;配置为0或>9将会进行截取\n prefix: '$', // 前置标识\n groupSize: 3, // 整数部分分组间隔，即第一个分组位数\n secondaryGroupSize: 2, // 整数部分第二级分组间隔，不设置或为0时 自动取groupSize\n groupSeparator: ',', // 整数部分分组分隔符\n decimalSeparator: '.', // 小数点符号\n fractionGroupSize: 0, // 小数部分分组间隔\n fractionGroupSeparator: ' ', // 小数分组分隔符\n suffix: '@' // 后置标识\n }",
'en-US':
"Number formatting configuration item. The following fields can be configured:; {\n fraction: 4, //Retain the number of decimal places. \n rounding: 0, //Round the number between 0 and 9. For example, if the value is set to 7, the value is rounded off to 6. The default value is 5 (rounded off). If this parameter is set to 0 or greater than 9, truncation is performed. \n prefix: '$', //Front identifier. \n groupSize: 3, //Integer part grouping interval, that is, the number of bits of the first grouping. \n secondaryGroupSize: 2, //Integer part second-level grouping interval. If this parameter is not set or is set to 0, the value of groupSize is automatically used. \n groupSeparator: ',', //Integer part grouping separator. \n decimalSeparator:' ', / / Decimal point symbol \n fractionGroupSize: 0, // Decimal part grouping interval \n fractionGroupSeparator: '', / / Decimal grouping separator \n suffix: '@' / / Post identifier \n}"
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'max-len',
type: 'number',
defaultValue: '该属性的默认值为 15',
desc: {
'zh-CN': '整数位最大长度，默认为 15 位。',
'en-US': 'Maximum integer length. The default value is 15 characters.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'digits-maxlen',
mfDemo: 'digits-maxlen'
},
{
name: 'negative',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否可为负数，默认为 true ，可设为负数。',
'en-US':
'Indicates whether the value can be a negative number. The default value is true. The value can be a negative number.'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'num-allow-empty',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '设置数值允许为空',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '当数据为空时的占位符',
'en-US': 'Placeholder when data is empty'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: 'custom-service'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. When a fault occurs in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'rounding',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '控制输入金额四舍五入。',
'en-US': 'Controls the rounding of the input amount.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'digits-maxlen',
mfDemo: 'digits-maxlen'
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置组件大小',
'en-US': 'Set the component size'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: 'size'
},
{
name: 'value',
type: 'string , number',
defaultValue: '',
desc: {
'zh-CN': '设置金额组件的值。',
'en-US': 'Set the value of the amount component.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'digits-maxlen',
mfDemo: 'digits-maxlen'
}
],
events: [
{
name: 'change',
type: '',
defaultValue: '',
desc: {
'zh-CN': '当组件的值发生变化时会触发该事件。',
'en-US': 'This event is triggered when the value of a component changes.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'set-date',
mfDemo: 'set-date'
}
],
methods: [],
slots: []
}
]
}

120
examples/sites/demos/apis/anchor.js Normal file
View File

@ -0,0 +1,120 @@
export default {
mode: ['pc'],
apis: [
{
name: 'anchor',
type: 'component',
props: [
{
name: 'container-id',
type: 'string',
defaultValue: '',
desc: {
'zh-CN':
'用于单页面 hash 路由模式时指定滚动容器的 id 值，id 为空时则滚动容器默认为 HTML 文档的根节点 body 元素',
'en-US':
'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
},
mode: ['pc'],
pcDemo: 'set-container'
},
{
name: 'is-affix',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '固定模式',
'en-US': 'Fixed mode'
},
mode: ['pc'],
pcDemo: 'is-affix'
},
{
name: 'links',
typeAnchorName: 'ILink',
type: 'ILink[]',
defaultValue: '',
desc: {
'zh-CN': '导航数据配置项，可通过 children 嵌套',
'en-US': 'Navigation data configuration items can be nested through children'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'mark-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义滚动的目标元素类名',
'en-US': 'Class name of the customized scrolling target element'
},
mode: ['pc'],
pcDemo: 'set-container'
},
{
name: 'type',
type: "'line' | 'dot'",
defaultValue: "'line'",
desc: {
'zh-CN': '锚点类型',
'en-US': 'Anchor type'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [
{
name: 'change',
type: '(hash: string) => void',
defaultValue: '',
desc: {
'zh-CN': '锚点链接改变事件',
'en-US': 'Anchor link change event'
},
mode: ['pc'],
pcDemo: 'change'
},
{
name: 'link-click',
type: '(event: Event, currentLink: {link: string, title: string}) => void',
defaultValue: '',
desc: {
'zh-CN': '锚点点击事件',
'en-US': 'Anchor click event'
},
mode: ['pc'],
pcDemo: 'set-container'
},
{
name: 'on-change',
type: '(hash: string) => void',
defaultValue: '',
desc: {
'zh-CN': '使用 change 代替；[deprecated v3.12.0 废弃，v3.17.0 移除；移除原因：命名规范]',
'en-US':
'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
},
mode: ['pc'],
pcDemo: 'change'
}
],
methods: [],
slots: []
}
],
types: [
{
name: 'ILink',
type: 'interface',
code: `
interface ILink {
key: string // 锚点的key值
link: string // 导航的hash值
title: string // 锚点标题
children: ILink[] // 子锚点
}`
}
]
}

176
examples/sites/demos/apis/area.js Normal file
View File

@ -0,0 +1,176 @@
export default {
mode: ['pc'],
apis: [
{
name: 'area',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '禁用输入框;默认为 false',
'en-US': 'Disable the text box. The default value is false'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'fetch-jcr',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取片区 JCR 的服务',
'en-US': 'User-defined service for obtaining regional JCRs'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetch-office',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取办事处 Office 的服务',
'en-US': 'User-defined Office service'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetch-region',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取地区部 Region 的服务',
'en-US': 'Obtain the service of a region.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetch-rep',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取代表处 Rep 的服务',
'en-US': 'Obtain services of rep offices and rep offices.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'modelValue / v-model',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置片区默认值',
'en-US': 'Set the default value of a region.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '当数据为空时的占位符',
'en-US': 'Placeholder when data is empty'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, set this parameter to false (for details, see the select component)'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'props',
type: 'object',
defaultValue: '',
desc: {
'zh-CN':
"自定义服务时，设置数据的映射字段;默认为 {label: 'name_cn',// 显示文本对应的字段 value: 'org_id'// 值对应的字段}",
'en-US':
"Set the data mapping field when customizing a service. The default value is {label:'name_cn', //Display the field corresponding to the text value:'org_id' //Display the field corresponding to the value}"
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置组件大小，可设置值为：medium，small，mini',
'en-US': 'Set the component size. The options are medium, small, and mini.'
},
mode: ['pc'],
pcDemo: 'size'
}
],
events: [
{
name: 'change-office',
type: 'Function(value, vm)',
defaultValue: '',
desc: {
'zh-CN': 'Office 的值发生变化时会触发该事件;回调参数为 改变的值;value: 改变后的值, vm: Area组件实例',
'en-US':
'This event is triggered when the value of Office changes. The callback parameter is the changed value. value: new value, vm: Area component instance'
},
mode: ['pc'],
pcDemo: 'area-events'
},
{
name: 'change-region',
type: 'Function(value, vm)',
defaultValue: '',
desc: {
'zh-CN': 'Region 的值发生变化时会触发该事件;回调参数为 改变的值;value: 改变后的值, vm: Area组件实例',
'en-US':
'This event is triggered when the value of a region changes. The callback parameter is the changed value. value: new value, vm: Area component instance'
},
mode: ['pc'],
pcDemo: 'area-events'
},
{
name: 'change-rep',
type: 'Function(value, vm)',
defaultValue: '',
desc: {
'zh-CN': 'Rep 的值发生变化时会触发该事件;回调参数为 改变的值;value: 改变后的值, vm: Area组件实例',
'en-US':
'This event is triggered when the value of Rep changes. The callback parameter is the changed value. value: new value, vm: Area component instance'
},
mode: ['pc'],
pcDemo: 'area-events'
}
],
methods: [],
slots: []
}
]
}

325
examples/sites/demos/apis/autocomplete.js Normal file
View File

@ -0,0 +1,325 @@
export default {
mode: ['pc'],
apis: [
{
name: 'autocomplete',
type: 'component',
props: [
{
name: 'clearable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否可清空',
'en-US': 'Whether to clear data'
},
mode: ['pc'],
pcDemo: 'clearable'
},
{
name: 'debounce',
type: 'number',
defaultValue: '300',
desc: {
'zh-CN': '获取输入建议的去抖延时',
'en-US': 'Obtain the recommended input dejitter delay.'
},
mode: ['pc'],
pcDemo: 'debounce'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Whether to disabled'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'display-only',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置只读',
'en-US': 'Set read-only'
},
mode: ['pc'],
pcDemo: 'display-only'
},
{
name: 'fetch-suggestions',
typeAnchorName: 'IAutocompleteFetchSuggestions',
type: 'IAutocompleteFetchSuggestions',
defaultValue: '',
desc: {
'zh-CN': '返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback 来返回它',
'en-US':
'This method is used to return input suggestions. It is returned by calling callback only when your input suggestions are resolved.'
},
mode: ['pc'],
pcDemo: 'remote-search'
},
{
name: 'hide-loading',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否隐藏远程加载时的加载图标',
'en-US': 'Whether to hide the loading icon during remote loading'
},
mode: ['pc'],
pcDemo: 'hide-loading'
},
{
name: 'highlight-first-item',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认突出显示远程搜索建议中的第一项',
'en-US': 'Whether to highlight the first item in remote search suggestions by default'
},
mode: ['pc'],
pcDemo: 'highlight-first-item'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '等价于原生 input aria-label 属性',
'en-US': 'Equiphorus input aria-label attribute'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': 'input 元素的原生属性',
'en-US': 'Native attributes of the input element'
},
mode: ['pc']
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '输入框占位文本',
'en-US': 'Placeholder text in the text box'
},
mode: ['pc'],
pcDemo: 'hide-loading'
},
{
name: 'placement',
typeAnchorName: 'IAutocompletePlacement',
type: 'IAutocompletePlacement',
defaultValue: "'bottom-start'",
desc: {
'zh-CN': '菜单弹出位置',
'en-US': 'Menu pop-up position'
},
mode: ['pc'],
pcDemo: 'placement'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false',
'en-US':
'Indicates whether to insert the drop-down list into the body element. When a fault occurs in locating the drop-down list, you can set this attribute to false'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '下拉列表的类名',
'en-US': 'Class name of the Autocomplete drop-down list box'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'prefix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '输入框头部图标',
'en-US': 'Icon on the header of the text box'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'select-when-unmatched',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件',
'en-US':
'Indicates whether to trigger the select event when pressing Enter when the input does not have any matching suggestions.'
},
mode: ['pc'],
pcDemo: 'select-event'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '设置组件大小',
'en-US': 'Set the component size.'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'suffix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '输入框尾部图标',
'en-US': 'Icon at the end of the text box'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'trigger-on-focus',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否在输入框 focus 时显示建议列表',
'en-US': 'Whether to display the suggestion list when the text box is focused'
},
mode: ['pc'],
pcDemo: 'no-trigger-on-focus'
},
{
name: 'v-model',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '必填值，输入绑定值',
'en-US': 'This parameter is mandatory. Enter a bound value.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'value-key',
type: 'string',
defaultValue: "'value'",
desc: {
'zh-CN': '在输入建议对象中，用于显示和匹配输入的键名',
'en-US': 'In the Input Suggestion object, key names for displaying and matching inputs'
},
mode: ['pc'],
pcDemo: 'value-key'
}
],
events: [
{
name: 'select',
typeAnchorName: 'IAutocompleteSuggestionItem',
type: '(selection: IAutocompleteSuggestionItem) => void',
defaultValue: '',
desc: {
'zh-CN': '点击选中建议项时触发，回调参数为 fetch-suggestions 中传入的项',
'en-US':
'Triggered when you click to select a suggestion item. The callback parameter is the item passed in fetch-suggestions'
},
mode: ['pc'],
pcDemo: 'select-event'
}
],
methods: [],
slots: [
{
name: 'append',
defaultValue: '',
desc: {
'zh-CN': '输入框后置内容',
'en-US': 'Content after the text box'
},
mode: ['pc'],
pcDemo: 'slot'
},
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN':
'下拉列表项插槽，插槽参数: arg: { slotScope: IAutocompleteSuggestionItem }, 其中 slotScope 是 fetch-suggestions 中传入的项',
'en-US':
'Drop-down list item slot, slot parameter: arg: { slotScope: IAutocompleteSuggestionItem }, where slotScope is the item passed in fetch-suggestions'
},
mode: ['pc'],
pcDemo: 'slot'
},
{
name: 'prefix',
defaultValue: '',
desc: {
'zh-CN': '输入框头部内容',
'en-US': 'Content in the text box header'
},
mode: ['pc'],
pcDemo: 'slot'
},
{
name: 'prepend',
defaultValue: '',
desc: {
'zh-CN': '输入框前置内容',
'en-US': 'Pre-content in the text box'
},
mode: ['pc'],
pcDemo: 'slot'
},
{
name: 'suffix',
defaultValue: '',
desc: {
'zh-CN': '输入框尾部内容',
'en-US': 'Content at the end of the text box'
},
mode: ['pc'],
pcDemo: 'slot'
}
]
}
],
types: [
{
name: 'IAutocompleteSuggestionItem',
type: 'type',
code: `interface IAutocompleteSuggestionItem {
[key: string]: string | undefined
value?: string
}`
},
{
name: 'IAutocompletePlacement',
type: 'type',
code: `type IAutocompletePlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"`
},
{
name: 'IAutocompleteFetchSuggestions',
type: 'type',
code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
}
]
}

113
examples/sites/demos/apis/avatar.js Normal file
View File

@ -0,0 +1,113 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'avatar',
type: 'component',
props: [
{
name: 'alt',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '<p>设置图片的备用文字描述</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'error',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>设置img 标签的 onerror 函数</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'fit',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置图片的 object-fit</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'icon',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '<p>设置显示内容为icon</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'shape',
type: 'String',
defaultValue: 'circle',
desc: {
'zh-CN': '<p>该属性的可选值为 circle | square</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'size',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>该属性的可选值为 large|medium|small</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-size'
},
{
name: 'src',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置图片链接地址</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
},
{
name: 'src-set',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置源图容器</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>组件默认插槽</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'avatar-src-set'
}
]
}
]
}

209
examples/sites/demos/apis/badge.js Normal file
View File

@ -0,0 +1,209 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'badge',
type: 'component',
props: [
{
name: 'badge-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义标记的类名',
'en-US': 'Class name for custom tags'
},
mode: ['pc'],
pcDemo: 'badge-class'
},
{
name: 'data',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '文本内容',
'en-US': 'Set Text Content'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'hidden',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否隐藏标记',
'en-US': 'Whether to hide badge'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'dynamic-hidden',
mobileDemo: 'hidden',
mfDemo: ''
},
{
name: 'href',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '指定跳转的目标页面地址',
'en-US': 'Specify the URL of the target page.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'link',
mobileDemo: 'href-target',
mfDemo: ''
},
{
name: 'is-dot',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否以小圆点的形式来显示标记',
'en-US': 'Set whether to display the badge in the form of small dots'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'is-dot',
mobileDemo: 'is-dot',
mfDemo: ''
},
{
name: 'is-mini',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>设置小尺寸，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'is-mini'
},
{
name: 'max',
type: 'number',
defaultValue: '',
desc: {
'zh-CN':
"指定徽章显示的最大值，如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
'en-US':
'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'max',
mobileDemo: 'is-mini',
mfDemo: ''
},
{
name: 'offset',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置标记位置的偏移量',
'en-US': 'Set the offset of the marker position, see demo for details'
},
mode: ['pc'],
pcDemo: 'offset'
},
{
name: 'show-Left',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '设置是否向左展示，仅对圆点生效。',
'en-US': 'Indicates whether to display the dots to the left. This parameter is valid only for dots.'
},
mode: ['mobile-first'],
mfDemo: 'type-left'
},
{
name: 'target',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
'en-US':
'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'link',
mobileDemo: 'href-target',
mfDemo: ''
},
{
name: 'type',
typeAnchorName: 'IPtype',
type: 'IPtype',
defaultValue: "'danger'",
desc: {
'zh-CN': '标记的类型',
'en-US': 'Set the type of badge'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'type',
mfDemo: ''
},
{
name: 'v-model',
type: 'String / Number',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value',
type: 'number | string',
defaultValue: '',
desc: {
'zh-CN': '相关数据条目数',
'en-US': 'Set the number of related data entries'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'content',
mfDemo: ''
}
],
events: [],
methods: [],
slots: [
{
name: 'content',
type: '',
defaultValue: '',
desc: {
'zh-CN': '消息提示内容',
'en-US': 'Message Content'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot-content',
mobileDemo: 'content',
mfDemo: ''
},
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot-default',
mobileDemo: 'content',
mfDemo: ''
}
]
}
],
types: [
{
name: 'IPtype',
type: 'type',
code: `type IPtype = 'primary' | 'success' | 'warning' | 'danger' | 'info'`
}
]
}

194
examples/sites/demos/apis/breadcrumb.js Normal file
View File

@ -0,0 +1,194 @@
export default {
mode: ['pc'],
apis: [
{
name: 'breadcrumb',
type: 'component',
props: [
{
name: 'options',
typeAnchorName: 'IOptionsItem',
type: 'IOptionsItem[]',
defaultValue: '',
desc: {
'zh-CN': '单独使用 Breadcrumb，通过 option 配置生成面包屑',
'en-US': 'Use Breadcrumb alone to generate bread crumbs through option configuration'
},
mode: ['pc'],
pcDemo: 'options'
},
{
name: 'separator',
type: 'string',
defaultValue: '>',
desc: {
'zh-CN': '分隔符',
'en-US': 'Separator'
},
mode: ['pc'],
pcDemo: 'separator'
},
{
name: 'separator-icon',
type: 'vueComponent',
defaultValue: '',
desc: {
'zh-CN': '图标分隔符',
'en-US': 'Icon separator'
},
mode: ['pc'],
pcDemo: 'separator'
},
{
name: 'size',
type: 'string',
defaultValue: "'medium'",
desc: {
'zh-CN': '设置面包屑尺寸大小',
'en-US': 'Set breadcrumb size'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'text-field',
type: 'string',
defaultValue: 'label',
desc: {
'zh-CN': '指定面包屑的显示键值，结合 options 使用',
'en-US': 'Specify the display key value for bread crumbs, used in conjunction with options'
},
mode: ['pc'],
pcDemo: 'options'
}
],
events: [
{
name: 'select',
typeAnchorName: 'ISelectValue',
type: '(value: ISelectValue) => void',
defaultValue: '',
desc: {
'zh-CN': '点击 BreadcrumbItem 时触发',
'en-US': 'This event is triggered when BreadcrumbItem is clicked.'
},
mode: ['pc'],
pcDemo: 'options'
}
],
methods: [],
slots: []
},
{
name: 'breadcrumb-item',
type: 'component',
props: [
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '定义面包屑的显示文本',
'en-US': 'Define the breadcrumb display text'
},
mode: ['pc'],
pcDemo: 'base'
},
{
name: 'replace',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '在使用 to 进行路由跳转时，启用 replace 将不会向 浏览器历史记录 history 里添加新记录',
'en-US': 'When using to for routing jump, enabling replace will not add new records to the browser history'
},
mode: ['pc'],
pcDemo: 'slot-default'
},
{
name: 'size',
type: 'string',
defaultValue: "'medium'",
desc: {
'zh-CN': '设置面包屑尺寸大小',
'en-US': 'Set breadcrumb size'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'to',
typeAnchorName: 'IOptionsItemTo',
type: 'string | IOptionsItemTo',
defaultValue: '',
desc: {
'zh-CN': '路由跳转对象，同 vue-router 的 to',
'en-US': 'Route redirection object, which is the same as to of vue-router'
},
mode: ['pc'],
pcDemo: 'slot-default'
}
],
events: [
{
name: 'select',
typeAnchorName: 'ISelectValue',
type: '(value: ISelectValue) => void',
defaultValue: '',
desc: {
'zh-CN': '点击 BreadcrumbItem 时触发',
'en-US': 'This event is triggered when BreadcrumbItem is clicked.'
},
mode: ['pc'],
pcDemo: 'base'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'slot-default'
}
]
}
],
types: [
{
name: 'IOptionsItemTo',
type: 'interface',
code: `
interface IOptionsItemTo {
path: string
}`
},
{
name: 'IOptionsItem',
type: 'interface',
code: `
interface IOptionsItem {
label?: string
to?: IOptionsItemTo
replace?: boolean
[customProp: string]: string
}`
},
{
name: 'ISelectValue',
type: 'interface',
code: `
interface ISelectValue {
event: Event
link: HTMLElement
option: IOptionsItem
replace: boolean
to?: IOptionsItemTo
}`
}
]
}

95
examples/sites/demos/apis/bulletin-board.js Normal file
View File

@ -0,0 +1,95 @@
export default {
mode: ['pc'],
apis: [
{
name: 'bulletin-board',
type: 'component',
props: [
{
name: 'active-name',
type: 'string',
defaultValue: '1',
desc: {
'zh-CN': "默认显示第1栏，可选'1' '2' '3'等",
'en-US': 'By default, column 1 is displayed. You can select 1, 2, or 3.'
},
mode: ['pc'],
pcDemo: 'active-name'
},
{
name: 'data',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': 'tab-item 数据;tab-item 数据',
'en-US': 'tab-item data; tab-item data'
},
mode: ['pc'],
pcDemo: 'base'
},
{
name: 'icon',
type: 'object , string',
defaultValue: '',
desc: {
'zh-CN': 'tab-item中第一条信息的字体图标;tab-item中第一条信息的字体图标',
'en-US':
'Font icon of the first information in tab-item; Font icon of the first piece of information in tab-item'
},
mode: ['pc'],
pcDemo: 'icon'
},
{
name: 'more-link',
type: 'object',
defaultValue: '',
desc: {
'zh-CN':
"更多按钮跳转地址，show-more 为true 的时候生效;moreLink: { url: 'localhost:3000/', // 跳转地址，url 和 route 属性二选一，url优先级高 route: 'Alert', // 跳转路由，url 和 route 属性二选一，url优先级高 target: '_blank', // 跳转方式 text: '更多' // 链接文本 }",
'en-US':
"More button redirection URL. This parameter is valid only when show-more is set to true. moreLink: {url:'localhost:3000/', //Redirection address. Either the URL or route attribute must be selected. The URL has a higher priority. route:'Alert', //Redirection route. Either the URL or route attribute must be selected. URL has a high priority target: '_blank', //Redirection mode text: 'More' //Link text}"
},
mode: ['pc'],
pcDemo: 'more-link'
},
{
name: 'show-more',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示更多按钮，默认显示,需要与 more-link 同时使用',
'en-US':
'Indicates whether to display the More button. The More button is displayed by default and must be used together with more-link.'
},
mode: ['pc'],
pcDemo: 'more-link'
},
{
name: 'tab-title',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': 'tab栏数据',
'en-US': 'Data in the tab column'
},
mode: ['pc'],
pcDemo: 'tab-title'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '公告牌的标题',
'en-US': 'Billboard title'
},
mode: ['pc'],
pcDemo: 'title'
}
],
events: [],
methods: [],
slots: []
}
]
}

199
examples/sites/demos/apis/button-group.js Normal file
View File

@ -0,0 +1,199 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'button-group',
type: 'component',
props: [
{
name: 'border',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示边框线',
'en-US': 'Remove button border.'
},
mode: ['pc'],
pcDemo: 'border'
},
{
name: 'data',
typeAnchorName: 'IButtonGroupData',
type: 'IButtonGroupData[]',
defaultValue: '',
desc: {
'zh-CN': '按钮组数据',
'en-US': 'button group data'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否被禁用按钮组',
'en-US': 'Sets whether the button group is disabled'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'disabled',
mfDemo: ''
},
{
name: 'modelValue / v-model',
type: 'number | string',
defaultValue: '',
desc: {
'zh-CN': '默认选中按钮的值',
'en-US': 'Default value of the selected button'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'plain',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否朴素按钮',
'en-US': 'Indicates whether the button is a simple button'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'plain',
mfDemo: ''
},
{
name: 'show-edit',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示编辑按钮，只有在显示更多的情况下生效',
'en-US':
'Whether to display the edit button. This parameter takes effect only when more buttons are displayed'
},
mode: ['pc'],
pcDemo: 'show-edit'
},
{
name: 'show-more',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '当超过给定的按钮数量时显示更多按钮',
'en-US': 'Show more buttons when the given number of buttons is exceeded'
},
mode: ['pc'],
pcDemo: 'show-more'
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '按钮组尺寸大小',
'en-US': 'Set the component size'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: ''
},
{
name: 'text-field',
type: 'string',
defaultValue: "'text'",
desc: {
'zh-CN': '按钮显示文字的字段值',
'en-US': 'Field value of the button displayed text'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'text-value-field',
mfDemo: ''
},
{
name: 'v-model',
type: 'Number / String',
defaultValue: '',
desc: {
'zh-CN': '默认选中按钮的值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value-field',
type: 'string',
defaultValue: "'value'",
desc: {
'zh-CN': '按钮选中值的字段值',
'en-US': 'Field value of the button value'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'text-value-field',
mfDemo: ''
}
],
events: [
{
name: 'change',
type: '(value: string | number) => void',
defaultValue: '',
desc: {
'zh-CN': '当选中按钮发生改变时触发',
'en-US': 'Set the callback function triggered when the selected button is changed'
},
mode: ['pc'],
pcDemo: 'change-event'
},
{
name: 'edit',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '当编辑按钮被点击时触发',
'en-US': 'Set the callback function triggered when the edit button is clicked'
},
mode: ['pc'],
pcDemo: 'show-edit'
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽，自定义按钮组内容',
'en-US': 'button group content'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'slot-default',
mfDemo: ''
}
]
}
],
types: [
{
name: 'IButtonGroupData',
type: 'interface',
code: `
interface IButtonGroupData {
text: string // 显示文本
value: number | number // 选中的值
disabled?: boolean // 是否禁用
// 配置选块角标
sup?: {
text: string // 角标文本
class?: string // 角标的自定义class
slot?: string // 自定义插槽名称，提供后可在button-group内使用对应的插槽自定义角标内容
icon?: Component // 传入图标组件
}
}
`
}
]
}

245
examples/sites/demos/apis/button.js Normal file
View File

@ -0,0 +1,245 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'button',
type: 'component',
props: [
{
name: 'autofocus',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认聚焦',
'en-US': 'Whether to focus by default'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'autofocus',
mfDemo: ''
},
{
name: 'banner',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '设置通栏按钮',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'circle',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否圆形按钮',
'en-US': 'Round button'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置 custom-class 属性定制按钮样式',
'en-US': 'Set the custom-class attribute to customize the button style'
},
mode: ['mobile-first'],
mfDemo: 'button-class'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否被禁用按钮',
'en-US': 'Sets whether the button is disabled'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'dynamic-disabled',
mobileDemo: 'disabled',
mfDemo: ''
},
{
name: 'ghost',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否幽灵按钮',
'en-US': 'Is ghost button'
},
mode: ['pc'],
pcDemo: 'ghost'
},
{
name: 'href',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '通过设置 href 属性可跳转到指定页面',
'en-US': 'Set the href attribute to jump to a specified page'
},
mode: ['mobile-first'],
mfDemo: 'link'
},
{
name: 'icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
'en-US': 'The icon displayed by the button is received as an Icon component'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'icon',
mobileDemo: 'icon',
mfDemo: ''
},
{
name: 'loading',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否加载中状态',
'en-US': 'Loading status'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'loading',
mobileDemo: 'loading',
mfDemo: ''
},
{
name: 'native-type',
type: "'button' | 'submit' | 'reset'",
defaultValue: "'button'",
desc: {
'zh-CN': '对应按钮原生 type 属性',
'en-US': 'Set the button native type attribute'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'plain',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否朴素按钮',
'en-US': 'Simple button'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'reset-time',
type: 'number',
defaultValue: '1000',
desc: {
'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'reset-time',
mobileDemo: 'reset-time',
mfDemo: ''
},
{
name: 'round',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否圆角按钮',
'en-US': 'Whether to round the corner button'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'size',
type: "'large' | 'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '定义按钮尺寸',
'en-US': 'Define the button size'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'size',
mobileDemo: 'size',
mfDemo: ''
},
{
name: 'text',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '按钮显示的文本',
'en-US': 'Set the text displayed by the button'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'text',
mobileDemo: 'base',
mfDemo: ''
},
{
name: 'type',
typeAnchorName: 'IButtonType',
type: 'IButtonType',
defaultValue: '',
desc: {
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
'en-US': 'Display different states of buttons, set to text to display as text buttons'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'base',
mfDemo: ''
}
],
events: [
{
name: 'click',
type: '(event: PointEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '当按钮被点击时触发的回调函数',
'en-US': 'Sets the callback function triggered when a button is clicked'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'click',
mobileDemo: 'event',
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽，自定义按钮展示内容',
'en-US': 'Default slot'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'image',
mobileDemo: '',
mfDemo: ''
}
]
}
],
types: [
{
name: 'IButtonType',
type: 'interface',
code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
}
]
}

59
examples/sites/demos/apis/calendar-bar.js Normal file
View File

@ -0,0 +1,59 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'calendarBar',
type: 'component',
props: [
{
name: 'cascaderPosition',
type: 'Object',
defaultValue: '{}',
desc: {
'zh-CN': '改变年月选择的位置',
'en-US': 'Change the location of the year and month selection'
},
mode: ['mobile-first'],
mfDemo: 'cascader-position'
},
{
name: 'config',
type: 'Object',
defaultValue: '{}',
desc: {
'zh-CN': '传入用户日期配置信息',
'en-US': 'Transfer the user date configuration information.'
},
mode: ['mobile-first'],
mfDemo: 'marked'
},
{
name: 'v-model',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '数据绑定',
'en-US': 'Data Binding'
},
mode: ['mobile-first'],
mfDemo: 'marked'
}
],
events: [],
methods: [
{
name: 'expand',
type: '',
defaultValue: '',
desc: {
'zh-CN': '日历栏展开或收起时触发的事件',
'en-US': 'Event triggered when the calendar bar expands or collapses'
},
mode: ['mobile-first'],
mfDemo: 'expand'
}
],
slots: []
}
]
}

293
examples/sites/demos/apis/calendar-view.js Normal file
View File

@ -0,0 +1,293 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'calendar-view',
type: 'component',
props: [
{
name: 'day-times',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-timeline-range',
mfDemo: 'calendar-timeline-range'
},
{
name: 'disabled',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '日期禁用',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-disabled-day',
mfDemo: 'calendar-disabled-day'
},
{
name: 'events',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '日程事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
},
{
name: 'height',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '日历高度',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'mark-color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '点标记的颜色',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-day-mark',
mfDemo: 'calendar-day-mark'
},
{
name: 'mode',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '显示模式，可选值有 timeline-时间线模式、schedule-日程模式、month-月模式，默认为月模式。',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-mode',
mfDemo: 'calendar-mode'
},
{
name: 'modes',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '模式组，显示模式任意组合',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-mode',
mfDemo: 'calendar-mode'
},
{
name: 'month',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '日历当前显示月份',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: 'basic-usage'
},
{
name: 'multi-select',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '日期多选',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'multi-select',
mfDemo: 'multi-select'
},
{
name: 'set-day-bg-color',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '设置日期背景色',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-day-bg-color',
mfDemo: 'custom-day-bg-color'
},
{
name: 'show-mark',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '显示点标记',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-day-mark',
mfDemo: 'calendar-day-mark'
},
{
name: 'show-new-schedule',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '显示新增日程按钮',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: 'basic-usage'
},
{
name: 'v-model',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '绑定值，默认为空',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'year',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '日历当前显示年份',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: 'basic-usage'
}
],
events: [
{
name: 'month-change',
desc: {
'zh-CN': '月改变事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
},
{
name: 'new-schedule',
desc: {
'zh-CN': '新增日程按钮点击事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-schedule-slot',
mfDemo: 'calendar-schedule-slot'
},
{
name: 'next-week-click',
desc: {
'zh-CN': '下一周按钮点击事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
},
{
name: 'prev-week-click',
desc: {
'zh-CN': '上一周按钮点击事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
},
{
name: 'selected-date-change',
desc: {
'zh-CN': '选中日期改变事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'multi-select',
mfDemo: 'multi-select'
},
{
name: 'week-change',
desc: {
'zh-CN': '周改变事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
},
{
name: 'year-change',
desc: {
'zh-CN': '年改变事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-event',
mfDemo: 'calendar-event'
}
],
methods: [],
slots: [
{
name: 'header',
desc: {
'zh-CN': '头部插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-schedule-slot',
mfDemo: 'calendar-schedule-slot'
},
{
name: 'timeline',
desc: {
'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-schedule-slot',
mfDemo: 'calendar-schedule-slot'
},
{
name: 'tool',
desc: {
'zh-CN': '工具栏插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-schedule-slot',
mfDemo: 'calendar-schedule-slot'
},
{
name: 'weekday',
desc: {
'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'calendar-schedule-slot',
mfDemo: 'calendar-schedule-slot'
}
]
}
]
}

104
examples/sites/demos/apis/calendar.js Normal file
View File

@ -0,0 +1,104 @@
export default {
mode: ['pc'],
apis: [
{
name: 'calendar',
type: 'component',
props: [
{
name: 'events',
typeAnchorName: 'eventLists',
type: 'eventLists[]',
defaultValue: '',
desc: {
'zh-CN': '事件列表',
'en-US': 'Event List'
},
mode: ['pc'],
pcDemo: 'dynamic-add-schedule'
},
{
name: 'mode',
type: "'month' | 'year'",
defaultValue: "'month'",
desc: {
'zh-CN': '日历显示模式',
'en-US': 'Display mode. The value can be month or year. The default value is month.'
},
mode: ['pc'],
pcDemo: 'calendar-mode'
},
{
name: 'month',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '指定月份，默认当前月份',
'en-US': 'Specified month. The default value is the current month.'
},
mode: ['pc'],
pcDemo: 'custom-day-cell'
},
{
name: 'show-selected',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示选中的日期',
'en-US': 'Display the selected date.'
},
mode: ['pc'],
pcDemo: 'show-selected-date'
},
{
name: 'year',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '指定年份，默认当前年份',
'en-US': 'Specified year. The default year is this year.'
},
mode: ['pc'],
pcDemo: 'custom-day-cell'
}
],
events: [],
methods: [],
slots: [
{
name: 'day',
defaultValue: '',
desc: {
'zh-CN': '日期单元格插槽',
'en-US': 'Date Cell Slot'
},
mode: ['pc'],
pcDemo: 'custom-day-cell'
},
{
name: 'tool',
defaultValue: '',
desc: {
'zh-CN': '日历工具栏插槽',
'en-US': 'Calendar Toolbar Slot'
},
mode: ['pc'],
pcDemo: 'custom-calendar-toolbar'
}
]
}
],
types: [
{
name: 'eventLists',
type: 'interface',
code: `
interface eventLists [{
time: 1534297845236, // 指定需要展示事件的日期
title: '消息', // 指定事件标题
content: '这是一条消息', // 指定事件的具体内容
type: 'info' // 事件主题类型，包括 warning、error、info、success。
}]`
}
]
}

249
examples/sites/demos/apis/card.js Normal file
View File

@ -0,0 +1,249 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'Card',
type: 'component',
props: [
{
name: 'auto-width',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '卡片的宽度是否自动撑开，设置后将不再给卡片设置固定宽度',
'en-US':
'Indicates whether the card width is automatically expanded. After the setting, the card width is not fixed.'
},
mode: ['mobile-first'],
mfDemo: 'card-auto-width'
},
{
name: 'check-type',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置卡片单选、多选，单选/radio；多选/checkbox，需同时设置 label。',
'en-US':
'Set single-choice, multiple-choice, single-choice, and radio. Multi-choice/checkbox. You need to set the label at the same time.'
},
mode: ['mobile-first'],
mfDemo: 'check-type-checkbox'
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '卡片的class',
'en-US': 'Class of the card'
},
mode: ['mobile-first'],
mfDemo: 'card-custom-class'
},
{
name: 'disabled',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '卡片禁用',
'en-US': 'Card disabled'
},
mode: ['mobile-first'],
mfDemo: 'card-disabled'
},
{
name: 'height',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '卡片内容区域的高度',
'en-US': 'Height of the card content area'
},
mode: ['mobile-first'],
mfDemo: 'card-height'
},
{
name: 'icon-more',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
'en-US': 'More button icons can be replaced by a svg icon object.'
},
mode: ['mobile-first'],
mfDemo: 'card-icon-more'
},
{
name: 'label',
type: 'String / Number',
defaultValue: '',
desc: {
'zh-CN': 'checkbox或radio的label',
'en-US': 'Checkbox or radio label.'
},
mode: ['mobile-first'],
mfDemo: 'card-label'
},
{
name: 'options',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '操作按钮配置',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'size',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
},
mode: ['mobile-first'],
mfDemo: 'card-size'
},
{
name: 'src',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '图片或者视频的地址',
'en-US': 'Address of a picture or video.'
},
mode: ['mobile-first'],
mfDemo: 'card-src'
},
{
name: 'status',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
},
mode: ['mobile-first'],
mfDemo: 'card-status'
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '卡片的标题',
'en-US': 'The title of the card.'
},
mode: ['mobile-first'],
mfDemo: 'card-title'
},
{
name: 'type',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型。',
'en-US': 'Set the card type. The options are text, image, video, and logo.'
},
mode: ['mobile-first'],
mfDemo: 'card-type'
},
{
name: 'v-model',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '绑定值，默认为空',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '组件选中/取消选中事件',
'en-US': 'Component check/uncheck event'
},
mode: ['mobile-first'],
mfDemo: 'card-events'
},
{
name: 'icon-click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '操作栏按钮点击事件',
'en-US': 'Operation bar button click event'
},
mode: ['mobile-first'],
mfDemo: 'card-events'
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件默认插槽',
'en-US': 'Component Default Slot'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'footer',
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件默认插槽',
'en-US': 'Component Default Slot'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'title',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标题插槽',
'en-US': 'Header Slot'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'title-left',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标题左侧插槽',
'en-US': 'Header Left Slot'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'title-right',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标题右侧插槽',
'en-US': 'Header right slot'
},
mode: ['mobile-first'],
mfDemo: 'slot'
}
]
}
]
}

262
examples/sites/demos/apis/carousel.js Normal file
View File

@ -0,0 +1,262 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'carousel',
type: 'component',
props: [
{
name: 'arrow',
type: 'string',
defaultValue: "该属性的默认值为 'hover'",
desc: {
'zh-CN': '切换箭头的显示效果，该属性的可选值为 always / hover / never',
'en-US': 'Switch the display effect of arrows,The optional values for this attribute are always/hover/never'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'up-down-carousel',
mfDemo: ''
},
{
name: 'aspect-ratio',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '宽高比，默认为16:2。',
'en-US': 'Aspect ratio. The default value is 16:2.'
},
mode: ['mobile-first'],
mfDemo: 'aspect-ratio'
},
{
name: 'autoplay',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '是否自动切换',
'en-US': 'Whether to automatically switch'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'autoplay',
mfDemo: ''
},
{
name: 'height',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '走马灯的高度',
'en-US': 'The height of the lantern'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'indicator-trigger',
mfDemo: ''
},
{
name: 'indicator-position',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '指示器的位置。该属性的可选值为 outside / none',
'en-US': 'The position of the indicator. The optional values for this attribute are outside/none'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'indicator-trigger',
mfDemo: ''
},
{
name: 'indicator-style',
type: 'String',
defaultValue: '该属性的可选值为 light/dark ，默认为light。',
desc: {
'zh-CN': '指示器的样式。',
'en-US': 'The style of the indicator.'
},
mode: ['mobile-first'],
mfDemo: 'indicator-style'
},
{
name: 'initial-index',
type: 'number',
defaultValue: '该属性的默认值为 0',
desc: {
'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始',
'en-US': 'Index of slides activated in initial state, starting from 0'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',
mfDemo: ''
},
{
name: 'interval',
type: 'number',
defaultValue: '该属性的默认值为 3000',
desc: {
'zh-CN': '自动切换的时间间隔，单位为毫秒',
'en-US': 'The time interval for automatic switching, in milliseconds'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'play-interval',
mfDemo: ''
},
{
name: 'loop',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN': '是否循环显示',
'en-US': 'Whether to display in a loop'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'close-loop',
mfDemo: ''
},
{
name: 'show-title',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '是否显示标题',
'en-US': 'Is the title displayed'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'show-title',
mfDemo: ''
},
{
name: 'trigger',
type: 'string',
defaultValue: "该属性的默认值为 'hover'",
desc: {
'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click',
'en-US':
'The triggering method of the indicator is hover by default. The optional value for this attribute is click'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'indicator-trigger',
mfDemo: ''
},
{
name: 'type',
type: 'string',
defaultValue: "该属性的默认值为 'horizontal'",
desc: {
'zh-CN': '走马灯的类型，该属性的可选值为 horizontal / vertical / card',
'en-US': 'The type of horse lantern,The optional values for this attribute are horizontal/vertical/card'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'card-mode',
mfDemo: ''
}
],
events: [
{
name: 'change',
type: '',
defaultValue: '',
desc: {
'zh-CN': '幻灯片切换时触发',
'en-US': 'Trigger during slide transition'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'carousel-events',
mfDemo: ''
}
],
methods: [
{
name: 'next',
type: '',
defaultValue: '',
desc: {
'zh-CN': '切换至下一张幻灯片',
'en-US': 'Switch to the next slide'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',
mfDemo: ''
},
{
name: 'prev',
type: '',
defaultValue: '',
desc: {
'zh-CN': '切换至上一张幻灯片',
'en-US': 'Switch to the previous slide'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',
mfDemo: ''
},
{
name: 'setActiveItem',
type: '',
defaultValue: '',
desc: {
'zh-CN': '手动切换幻灯片',
'en-US': 'Manually switch slides'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'manual-play',
mfDemo: ''
}
]
},
{
name: 'carousel-item',
type: 'component',
props: [
{
name: 'name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '幻灯片名称',
'en-US': 'Slide Name'
},
mode: ['pc'],
pcDemo: 'manual-play'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '幻灯片标题',
'en-US': 'Slide Title'
},
mode: ['pc'],
pcDemo: 'show-title'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'manual-play'
}
]
}
]
}

305
examples/sites/demos/apis/cascader-mobile.js Normal file
View File

@ -0,0 +1,305 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'cascader-mobile',
type: 'component',
props: [
{
name: 'children-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '子集字段，默认值为 children ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '列表数据',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'ellipsis',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否超出一行隐藏并显示省略号，默认值为 false ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'mask',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示遮罩层，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'node-config',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN':
"节点配置，默认值为 { lazy: false, load: null, isLeaf: 'leaf', afterLoad: null, checkStrictly: false } ",
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'placeholder',
type: 'String / Array',
defaultValue: '',
desc: {
'zh-CN':
'导航占位文本信息，设置为字符串类型表示每个导航节点的占位文本信息，设置为数组类型时，每个数组下标索引对应导航节点的顺序设置占位文本信息',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-config',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '搜索配置，默认值为 { options: [], searchMethod: null, openSearchSlot: false }',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-header',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示头部，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'text 文本字段，默认值为 label',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field2',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '第二个 text 文本字段，一般用于附属文本',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field3',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '第三个 text 文本字段，一般用于描述文本',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-split',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '文本信息分隔符，默认值为 ”; “ ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model',
type: 'Number / String / Array',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'value 唯一键字段，默认值为 id ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'visible',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否弹出面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击选项时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '确认时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'node-expand',
type: '',
defaultValue: '',
desc: {
'zh-CN': '展开子节点时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '搜索列表选中项时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'update:text',
type: '',
defaultValue: '',
desc: {
'zh-CN': '绑定值改变时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'update:visible',
type: '',
defaultValue: '',
desc: {
'zh-CN': '面板显隐时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '选项插槽',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-item',
type: '',
defaultValue: '',
desc: {
'zh-CN': '搜索选项插槽，设置 :search-config="{ openSearchSlot: true, ... }" 时有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
]
}
]
}

328
examples/sites/demos/apis/cascader-panel.js Normal file
View File

@ -0,0 +1,328 @@
export default {
mode: ['pc'],
apis: [
{
name: 'cascader-panel',
type: 'component',
props: [
{
name: 'modelValue / v-model',
typeAnchorName: 'ICascaderPanelNodePropValue',
type: 'ICascaderPanelNodePropValue',
defaultValue: '',
desc: {
'zh-CN': '选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定',
'en-US': 'Select an item binding value whose type is determined by both props.multiple and props.emitPath'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'options',
typeAnchorName: 'ICascaderPanelData',
type: 'ICascaderPanelData[]',
defaultValue: '',
desc: {
'zh-CN': '可选项数据源，键名可通过 Props 属性配置',
'en-US': 'Optional data source. The key name can be configured through the Props attribute.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'props',
typeAnchorName: 'ICascaderPanelConfig',
type: 'ICascaderPanelConfig',
defaultValue: '',
desc: {
'zh-CN': '配置选项，具体见 ICascaderPanelConfig 表 ',
'en-US': 'Configuration options. For details, see the ICascaderPanelConfig table.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
}
],
events: [
{
name: 'change',
typeAnchorName: 'ICascaderPanelNodePropValue',
type: '(value: ICascaderPanelNodePropValue) => void',
defaultValue: '',
desc: {
'zh-CN': '当选中节点变化时触发; 回调参数为 选中节点的值',
'en-US':
'This event is triggered when the selected node changes. arg: The callback parameter is the value of the selected node (array type).'
},
mode: ['pc'],
pcDemo: 'change'
},
{
name: 'expand-change',
typeAnchorName: 'ICascaderPanelNodeValue',
type: '(value: ICascaderPanelNodeValue[]) => void',
defaultValue: '',
desc: {
'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array 类型)',
'en-US':
'This event is triggered when the expanded node changes. arg: The callback parameter is an array (Array type) consisting of parent option values.'
},
mode: ['pc'],
pcDemo: 'change'
}
],
methods: [
{
name: 'clearCheckedNodes',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '清空选中的节点',
'en-US': 'Clear selected nodes.'
},
mode: ['pc'],
pcDemo: 'change'
},
{
name: 'getCheckedNodes',
typeAnchorName: 'ICascaderPanelNode',
type: '(leafOnly: boolean = false) => ICascaderPanelNode[]',
defaultValue: '',
desc: {
'zh-CN': '获取选中的节点;参数为 (leafOnly) 是否只是获取子节点，默认值为 false',
'en-US':
'Obtain the selected node. The parameter (leafOnly) indicates whether to obtain only subnodes. The default value is false'
},
mode: ['pc'],
pcDemo: 'change'
}
],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN':
'自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
'en-US':
'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
},
mode: ['pc'],
pcDemo: 'custom-option-content'
}
]
},
{
name: 'ICascaderPanelConfig ',
type: 'component',
props: [
{
name: 'checkStrictly',
type: 'boolean',
defaultValue: ' false',
desc: {
'zh-CN': '是否严格的遵守父子节点不互相关联',
'en-US':
'Whether to strictly comply with the principle that parent and child nodes are not associated with each other'
},
mode: ['pc']
},
{
name: 'children',
type: 'string',
defaultValue: "'children'",
desc: {
'zh-CN': '指定选项的子选项为选项对象的某个属性值',
'en-US': 'Specifies that the sub-option of an option is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
},
{
name: 'disabled',
type: 'string',
defaultValue: "'disabled'",
desc: {
'zh-CN': '指定选项的禁用为选项对象的某个属性值',
'en-US': 'Specify that an option is disabled as an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
},
{
name: 'emitPath',
type: 'boolean',
defaultValue: ' true',
desc: {
'zh-CN':
'在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值',
'en-US':
'Indicates whether to return an array consisting of the values of menus at different levels of the selected node when the selected node is changed. If this parameter is set to false, only the value of the selected node is returned.'
},
mode: ['pc']
},
{
name: 'expandTrigger',
type: "'click' | 'hover'",
defaultValue: "'click'",
desc: {
'zh-CN': '次级菜单的展开方式',
'en-US': 'The expansion mode of the secondary menu'
},
mode: ['pc']
},
{
name: 'label',
type: 'string',
defaultValue: "'label'",
desc: {
'zh-CN': '指定选项标签为选项对象的某个属性值',
'en-US': 'Specify that the option label is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
},
{
name: 'lazy',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否动态加载子节点，需与 lazyLoad 方法结合使用',
'en-US':
'Whether to dynamically load subnodes. This parameter must be used together with the lazyLoad method.'
},
mode: ['pc']
},
{
name: 'lazyLoad',
typeAnchorName: 'ICascaderPanelLazyLoad',
type: 'ICascaderPanelLazyLoad',
defaultValue: '',
desc: {
'zh-CN':
'加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用)',
'en-US':
'Method for loading dynamic data. This parameter is valid only when lazy is set to true. Parameter description: node indicates the currently clicked node. resolve indicates the callback after data loading is complete (mandatory).'
},
mode: ['pc']
},
{
name: 'leaf',
type: 'string',
defaultValue: "'leaf'",
desc: {
'zh-CN': '指定选项的叶子节点的标志位为选项对象的某个属性值',
'en-US': 'The flag bit of the leaf node of the specified option is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
},
{
name: 'multiple',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否多选',
'en-US': 'Whether to select multiple options'
},
mode: ['pc']
},
{
name: 'value',
type: 'string',
defaultValue: "'value'",
desc: {
'zh-CN': '指定选项的值为选项对象的某个属性值',
'en-US': 'The value of an option is the value of an attribute of the option object.'
},
mode: ['pc'],
pcDemo: 'cascader-panel-props'
}
],
events: [],
methods: [],
slots: []
}
],
types: [
{
name: 'ICascaderPanelNodeValue',
type: 'type',
code: `type ICascaderPanelNodeValue = string | number`
},
{
name: 'ICascaderPanelNodePropValue',
type: 'type',
code: `
type ICascaderPanelNodePropValue =
| ICascaderPanelNodeValue
| ICascaderPanelNodeValue[]
| ICascaderPanelNodeValue[][]`
},
{
name: 'ICascaderPanelData',
type: 'type',
code: `
type ICascaderPanelData = {
value?: ICascaderPanelNodeValue
label?: string
children?: ICascaderPanelData[]
disabled?: boolean
leaf?: boolean
[key: string]: ICascaderPanelNodeValue | ICascaderPanelData[] | string | boolean | undefined
}`
},
{
name: 'ICascaderPanelConfig',
type: 'interface',
code: `
interface ICascaderPanelConfig {
emitPath: boolean
expandTrigger: 'click' | 'hover'
hoverThreshold: number
checkStrictly?: boolean
multiple?: boolean
lazy: boolean
lazyLoad: (
node: ICascaderPanelNode,
resolve: (dataList: ICascaderPanelData[]) => void
) => void
value: string
label: string
children: string
disabled: string
leaf: string
}`
},
{
name: 'ICascaderPanelNode',
type: 'type',
code: `
type ICascaderPanelNode = {
parent: ICascaderPanelNode | null
level: number
data: ICascaderPanelData
config: ICascaderPanelConfig
uid: number
value: ICascaderPanelNodeValue
label: string
pathNodes: Node[]
path: ICascaderPanelNodeValue[]
pathLabels: string[]
loaded: boolean
loading: boolean
hasChildren: boolean
children: Node[]
checked?: boolean
indeterminate?: boolean
root?: boolean
}`
},
{
name: 'ICascaderPanelLazyLoad',
type: 'type',
code: `
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
`
}
]
}

115
examples/sites/demos/apis/cascader-select.js Normal file
View File

@ -0,0 +1,115 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'cascader-select',
type: 'component',
props: [
{
name: 'cycle-roll',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '打开选项循环滚动功能，默认值为 false',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'disabled',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN':
'数组选项禁用，此方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，返回 true 则禁用选项',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'options',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '传入组件的数据',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-color',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '文字颜色',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'options选项中label的替代名称',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'options选项中value的替代名称',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value-type',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'options选项中id的类型',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'visible',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '显示级联选择面板，默认值为false',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'update:visible',
type: '',
defaultValue: '',
desc: {
'zh-CN': 'visible改变事件',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [],
slots: []
}
]
}

595
examples/sites/demos/apis/cascader-view.js Normal file
View File

@ -0,0 +1,595 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'CalendarView',
type: 'component',
props: [
{
name: 'children-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '子集字段，默认值为 children ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'custom-class',
type: 'String / Object / Array',
defaultValue: '',
desc: {
'zh-CN': '自定义 class 样式',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '列表数据',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'day-times',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
'en-US':
'Time range displayed in timeline mode. The default value range is [8, 18]. The value range is [0, 23].'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
mode: []
},
{
name: 'ellipsis',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否超出一行隐藏并显示省略号，默认值为 false ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'emit-path',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '通过设置 `emit-path` 属性值为 `false` 不显示值路径，默认值为 `true` 显示值路径',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'events',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '日程事件',
'en-US': 'Scheduled Events'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'height',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '日历高度',
'en-US': 'Calendar height'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'lock-scroll',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'mark-color',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '点标记的颜色',
'en-US': 'Color of the dot marker'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'mask',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示遮罩层，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'mode',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '显示模式，可选值有 timeline-时间线模式、schedule-日程模式、month-月模式，默认为月模式。',
'en-US':
'Display mode. The options are timeline-timeline, schedule-schedule, and month-month. The default value is month.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'modes',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '模式组，显示模式任意组合',
'en-US': 'Pattern group, any combination of display patterns'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'month',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '日历当前显示月份',
'en-US': 'The calendar currently displays the month'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'multi-select',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '日期多选',
'en-US': 'Multiple Dates'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'node-config',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN':
"节点配置，默认值为 { lazy: false, load: null, isLeaf: 'leaf', afterLoad: null, checkStrictly: false } ",
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-config',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '搜索配置，默认值为 { options: [], searchMethod: null, openSearchSlot: false }',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'set-day-bg-color',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '设置日期背景色',
'en-US': 'Set Date Background Color'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-header',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示头部，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-mark',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '显示点标记',
'en-US': 'Show Point Markers'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-new-schedule',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '显示新增日程按钮',
'en-US': 'Show the button for adding a schedule'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'text 文本字段，默认值为 label',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field2',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '第二个 text 文本字段，一般用于附属文本',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-field3',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '第三个 text 文本字段，一般用于描述文本',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'text-split',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '文本信息分隔符，默认值为 ”; “ ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model',
type: 'Number / String / Array',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'value-field',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': 'value 唯一键字段，默认值为 id ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'visible',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否弹出面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'year',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '日历当前显示年份',
'en-US': 'Calendar Current Display Year'
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击选项时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '确认时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'month-change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '月改变事件',
'en-US': 'Month Change Event'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'new-schedule',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '新增日程按钮点击事件',
'en-US': 'Event for adding a schedule button.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'next-week-click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '下一周按钮点击事件',
'en-US': 'Next week button click event'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'node-expand',
type: '',
defaultValue: '',
desc: {
'zh-CN': '展开子节点时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'prev-week-click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '上一周按钮点击事件',
'en-US': 'Button click event of the previous week'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '搜索列表选中项时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'selected-date-change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '选中日期改变事件',
'en-US': 'Select Date Change Event'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'update:text',
type: '',
defaultValue: '',
desc: {
'zh-CN': '绑定值改变时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'update:visible',
type: '',
defaultValue: '',
desc: {
'zh-CN': '面板显隐时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'week-change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '周改变事件',
'en-US': 'Week Change Event'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'year-change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '年改变事件',
'en-US': 'Year Change Event'
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [
{
name: 'clean',
type: '',
defaultValue: '',
desc: {
'zh-CN': '清空除所有选中项，requiredSelectedList 必选项不会被清空',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '选项插槽',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'header',
type: '',
defaultValue: '',
desc: {
'zh-CN': '头部插槽',
'en-US': 'Head slot'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-item',
type: '',
defaultValue: '',
desc: {
'zh-CN': '搜索选项插槽，设置 :search-config="{ openSearchSlot: true, ... }" 时有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'timeline',
type: '',
defaultValue: '',
desc: {
'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽',
'en-US': 'Timeline slots, with 7 slots timeline1-timeline7'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'tool',
type: '',
defaultValue: '',
desc: {
'zh-CN': '工具栏插槽',
'en-US': 'Toolbar Slot'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'weekday',
type: '',
defaultValue: '',
desc: {
'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽',
'en-US': 'Schedule slots, with 7 slots weekday1-weekday7'
},
mode: ['mobile-first'],
mfDemo: ''
}
]
}
]
}

602
examples/sites/demos/apis/cascader.js Normal file
View File

@ -0,0 +1,602 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'cascader',
type: 'component',
props: [
{
mode: []
},
{
name: 'before-filter',
type: '(value: string) => boolean | Promise',
defaultValue: '',
desc: {
'zh-CN': '筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选',
'en-US':
'Hook before filtering. The parameter is the input value. If false is returned or Promise is returned and rejected, the filtering stops.'
},
mode: ['pc'],
pcDemo: 'filter-method'
},
{
name: 'blank',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': "shape='filter' 时生效，设置过滤器模式背景为透明",
'en-US': "Takes effect when shape='filter' and sets the filter mode background to transparent"
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'clearable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否支持清空选项',
'en-US': 'Whether to support the clear option'
},
mode: ['pc'],
pcDemo: 'clearable'
},
{
name: 'collapse-tags',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '多选模式下是否折叠 Tag',
'en-US': 'Whether to collapse tags in multi-choice mode'
},
mode: ['pc'],
pcDemo: 'collapse-tags'
},
{
name: 'debounce',
type: 'number',
defaultValue: '300',
desc: {
'zh-CN': '搜索关键词输入的去抖延迟，单位毫秒',
'en-US': 'Dejitter delay of the search keyword, in milliseconds.'
},
mode: ['pc'],
pcDemo: 'filterable'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Disable'
},
mode: ['pc'],
pcDemo: 'disabled-items'
},
{
name: 'filter-method',
typeAnchorName: 'ICascaderPanelNode',
type: '(node: ICascaderPanelNode, keyword: string) => boolean',
defaultValue: '',
desc: {
'zh-CN':
'自定义搜索逻辑，第一个参数是节点 node，第二个参数是搜索关键词 keyword，通过返回布尔值表示是否命中',
'en-US':
'Customize the search logic. The first parameter is node, and the second parameter is keyword. A boolean value is returned to indicate whether the search is hit.'
},
mode: ['pc'],
pcDemo: 'filter-method'
},
{
name: 'filterable',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否可搜索选项',
'en-US': 'Whether to search for options'
},
mode: ['pc'],
pcDemo: 'filterable'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "shape='filter' 时生效，可传入 label 显示标题",
'en-US': "Take effect when shape='filter', and label can be passed to display the title"
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'level-title',
type: 'string[]',
defaultValue: '[]',
desc: {
'zh-CN': '小屏时，为组件每一级数据指定级联标题',
'en-US': 'On a small screen, specify a cascade title for each level of data of the component'
},
mode: ['mobile-first']
},
{
name: 'modelValue / v-model',
typeAnchorName: 'ICascaderPanelNodeValue',
type: 'ICascaderPanelNodePropValue',
defaultValue: '',
desc: {
'zh-CN': '选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定',
'en-US':
'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.'
},
mode: ['pc'],
pcDemo: 'clearable'
},
{
name: 'options',
typeAnchorName: 'ICascaderPanelData',
type: 'ICascaderPanelData[]',
defaultValue: '',
desc: {
'zh-CN': '可选项数据源，键名可通过 Props 属性配置',
'en-US': 'Optional data source. The key name can be configured through the Props attribute.'
},
mode: ['pc'],
pcDemo: 'disabled-items'
},
{
name: 'placeholder',
type: 'string',
defaultValue: "'请选择'",
desc: {
'zh-CN': '输入框占位文本',
'en-US': 'Placeholder text in the text box'
},
mode: ['pc'],
pcDemo: 'filterable'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert a pop-up box to the body element. If an error occurs in locating a fault in the dialog box that is displayed, set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'props',
typeAnchorName: 'ICascaderPanelConfig',
type: 'ICascaderPanelConfig',
defaultValue: '',
desc: {
'zh-CN': '配置选项，具体见 ICascaderPanelConfig 表',
'en-US': 'Configuration options. For details, see the ICascaderPanelConfig table.'
},
mode: ['pc'],
pcDemo: 'props-children'
},
{
name: 'separator',
type: 'string',
defaultValue: "'/'",
desc: {
'zh-CN': '选项分隔符',
'en-US': 'Option separator'
},
mode: ['pc'],
pcDemo: 'clearable1'
},
{
name: 'shape',
type: "'filter'",
defaultValue: '',
desc: {
'zh-CN': "通过 shape='filter' 属性切换至过滤器模式",
'en-US': "Use the shape='filter' attribute to switch to filter mode"
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'show-all-levels',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '输入框中是否显示选中值的完整路径',
'en-US': 'Whether to display the full path of the selected value in the text box'
},
mode: ['pc'],
pcDemo: 'show-all-levels'
},
{
name: 'show-header',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '小屏时，是否显示标题',
'en-US': 'Whether to display the title on a small screen'
},
mode: ['mobile-first']
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '尺寸',
'en-US': 'Dimension;'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'tip',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "shape='filter' 时生效，可传入 tip 显示提示信息",
'en-US': "This parameter is valid when shape='filter'. You can enter tip to display prompt information"
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'title',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN': '小屏时，弹窗顶部的标题名字',
'en-US': 'On a small screen, pop up the title name at the top of the window'
},
mode: ['mobile-first']
}
],
events: [
{
name: 'blur',
type: '(event: FocusEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '当失去焦点时触发',
'en-US': 'This event is triggered when the focus is lost.'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'change',
typeAnchorName: 'ICascaderPanelNodePropValue',
type: '(value: ICascaderPanelNodePropValue) => void',
defaultValue: '',
desc: {
'zh-CN': '当选中节点变化时触发',
'en-US': 'This event is triggered when the selected node changes.'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'expand-change',
typeAnchorName: 'ICascaderPanelNodeValue',
type: '(value: ICascaderPanelNodeValue[]) => void',
defaultValue: '',
desc: {
'zh-CN': '当展开节点发生变化时触发',
'en-US':
'This event is triggered when the expanded node changes. arg: The callback parameter is an array (Array type) consisting of parent option values.'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'focus',
type: '(event: FocusEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '当获得焦点时触发',
'en-US': 'This event is triggered when the focus is obtained.'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'remove-tag',
typeAnchorName: 'ICascaderPanelNodeValue',
type: '(removeValue: ICascaderPanelNodeValue[]) => void',
defaultValue: '',
desc: {
'zh-CN': '在多选模式下，移除Tag时触发',
'en-US': 'In multi-choice mode, this event is triggered when a tag is removed.'
},
mode: ['pc'],
pcDemo: 'default-multiple'
},
{
name: 'visible-change',
type: '(visible: boolean) => void',
defaultValue: '',
desc: {
'zh-CN': '下拉框出现/隐藏时触发',
'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
},
mode: ['pc'],
pcDemo: 'events'
}
],
methods: [
{
name: 'getCheckedNodes',
typeAnchorName: 'ICascaderPanelNode',
type: '(leafOnly: boolean = false) => ICascaderPanelNode[]',
defaultValue: '',
desc: {
'zh-CN': '获取选中的节点',
'en-US': 'Obtain the selected node'
},
mode: ['pc'],
pcDemo: 'events'
}
],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN':
'自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
'en-US':
'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
},
mode: ['pc']
},
{
name: 'empty',
defaultValue: '',
desc: {
'zh-CN': '无匹配选项时的内容',
'en-US': 'Content when no matching option is found'
},
mode: ['pc'],
pcDemo: 'filterable'
}
]
},
{
name: 'ICascaderPanelConfig ',
type: 'component',
props: [
{
name: 'checkStrictly',
type: 'boolean',
defaultValue: ' false',
desc: {
'zh-CN': '是否严格的遵守父子节点不互相关联',
'en-US':
'Whether to strictly comply with the principle that parent and child nodes are not associated with each other'
},
mode: ['pc'],
pcDemo: 'check-strictly'
},
{
name: 'children',
type: 'string',
defaultValue: "'children'",
desc: {
'zh-CN': '指定选项的子选项为选项对象的某个属性值',
'en-US': 'Specifies that the sub-option of an option is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'props-children'
},
{
name: 'disabled',
type: 'string',
defaultValue: "'disabled'",
desc: {
'zh-CN': '指定选项的禁用为选项对象的某个属性值',
'en-US': 'Specify that an option is disabled as an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'disabled-items'
},
{
name: 'emitPath',
type: 'boolean',
defaultValue: ' true',
desc: {
'zh-CN':
'在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值',
'en-US':
'Indicates whether to return an array consisting of the values of menus at different levels of the selected node when the selected node is changed. If this parameter is set to false, only the value of the selected node is returned.'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'expandTrigger',
type: "'click' | 'hover'",
defaultValue: "'click'",
desc: {
'zh-CN': '次级菜单的展开方式',
'en-US': 'The expansion mode of the secondary menu'
},
mode: ['pc'],
pcDemo: 'expand-trigger'
},
{
name: 'label',
type: 'string',
defaultValue: "'label'",
desc: {
'zh-CN': '指定选项标签为选项对象的某个属性值',
'en-US': 'Specify that the option label is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'props-children'
},
{
name: 'lazy',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否动态加载子节点，需与 lazyLoad 方法结合使用',
'en-US':
'Whether to dynamically load subnodes. This parameter must be used together with the lazyLoad method.'
},
mode: ['pc'],
pcDemo: 'auto-load'
},
{
name: 'lazyLoad',
typeAnchorName: 'ICascaderPanelLazyLoad',
type: 'ICascaderPanelLazyLoad',
defaultValue: '',
desc: {
'zh-CN':
'加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用)',
'en-US':
'Method for loading dynamic data. This parameter is valid only when lazy is set to true. Parameter description: node indicates the currently clicked node. resolve indicates the callback after data loading is complete (mandatory).'
},
mode: ['pc'],
pcDemo: 'auto-load'
},
{
name: 'leaf',
type: 'string',
defaultValue: "'leaf'",
desc: {
'zh-CN': '指定选项的叶子节点的标志位为选项对象的某个属性值',
'en-US': 'The flag bit of the leaf node of the specified option is an attribute value of the option object.'
},
mode: ['pc'],
pcDemo: 'props-children'
},
{
name: 'multiple',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否多选',
'en-US': 'Whether to select multiple options'
},
mode: ['pc'],
pcDemo: 'default-multiple'
},
{
name: 'value',
type: 'string',
defaultValue: "'value'",
desc: {
'zh-CN': '指定选项的值为选项对象的某个属性值',
'en-US': 'The value of an option is the value of an attribute of the option object.'
},
mode: ['pc'],
pcDemo: 'props-children'
}
],
events: [],
methods: [],
slots: []
}
],
types: [
{
name: 'ICascaderPanelNodeValue',
type: 'type',
code: `type ICascaderPanelNodeValue = string | number`
},
{
name: 'ICascaderPanelNodePropValue',
type: 'type',
code: `
type ICascaderPanelNodePropValue =
| ICascaderPanelNodeValue
| ICascaderPanelNodeValue[]
| ICascaderPanelNodeValue[][]`
},
{
name: 'ICascaderPanelData',
type: 'type',
code: `
type ICascaderPanelData = {
value?: ICascaderPanelNodeValue
label?: string
children?: ICascaderPanelData[]
disabled?: boolean
leaf?: boolean
[key: string]: ICascaderPanelNodeValue | ICascaderPanelData[] | string | boolean | undefined
}`
},
{
name: 'ICascaderPanelConfig',
type: 'interface',
code: `
interface ICascaderPanelConfig {
emitPath: boolean
expandTrigger: 'click' | 'hover'
hoverThreshold: number
checkStrictly?: boolean
multiple?: boolean
lazy: boolean
lazyLoad: (
node: ICascaderPanelNode,
resolve: (dataList: ICascaderPanelData[]) => void
) => void
value: string
label: string
children: string
disabled: string
leaf: string
}`
},
{
name: 'ICascaderPanelNode',
type: 'type',
code: `
type ICascaderPanelNode = {
parent: ICascaderPanelNode | null
level: number
data: ICascaderPanelData
config: ICascaderPanelConfig
uid: number
value: ICascaderPanelNodeValue
label: string
pathNodes: Node[]
path: ICascaderPanelNodeValue[]
pathLabels: string[]
loaded: boolean
loading: boolean
hasChildren: boolean
children: Node[]
checked?: boolean
indeterminate?: boolean
root?: boolean
}`
},
{
name: 'ICascaderPanelLazyLoad',
type: 'type',
code: `
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
`
}
]
}

58
examples/sites/demos/apis/cell.js Normal file
View File

@ -0,0 +1,58 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'Cell',
type: 'component',
props: [
{
name: 'data',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '数据',
'en-US': 'data'
},
mode: ['mobile-first'],
mfDemo: 'basic-usage'
},
{
name: 'disabled',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '禁用',
'en-US': 'disabled'
},
mode: ['mobile-first'],
mfDemo: 'disabled'
},
{
name: 'icon',
type: 'Object',
defaultValue: '{}',
desc: {
'zh-CN': '设置图标',
'en-US': 'Set icon'
},
mode: ['mobile-first'],
mfDemo: 'icon'
},
{
name: 'placeholder',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '占位文本',
'en-US': 'Placeholder Text'
},
mode: ['mobile-first'],
mfDemo: 'placeholder'
}
],
events: [],
methods: [],
slots: []
}
]
}

285
examples/sites/demos/apis/chart.js Normal file
View File

@ -0,0 +1,285 @@
export default {
mode: ['pc'],
apis: [
{
name: 'chart',
type: 'component',
props: [
{
name: 'cancel-resize-check',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用 resize 时的容器检测',
'en-US': 'Whether to disable container detection during resize'
},
mode: ['pc'],
pcDemo: 'chart/question#question-base'
},
{
name: 'change-delay',
type: 'number',
defaultValue: "'0'",
desc: {
'zh-CN': '属性修改触发图表重绘回调的延迟',
'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
},
mode: ['pc'],
pcDemo: 'chart/question#question-base'
},
{
name: 'data',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
'en-US':
'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
},
mode: ['pc'],
pcDemo: 'chart'
},
{
name: 'events',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '事件绑定',
'en-US': 'Event binding'
},
mode: ['pc'],
pcDemo: 'chart-events'
},
{
name: 'extend',
typeAnchorName: 'chart#IChartProps',
type: 'IChartProps',
defaultValue: '',
desc: {
'zh-CN': 'echarts 的配置项',
'en-US': 'Configuration items of echarts'
},
mode: ['pc'],
pcDemo: 'chart'
},
{
name: 'height',
type: 'string',
defaultValue: "'400px'",
desc: {
'zh-CN': '设置图表容器的高度。',
'en-US': 'Set the height of the chart container.'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'init-options',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': 'init 附加参数',
'en-US': 'Init Additional Parameters'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'judge-width',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否处理生成图表时的宽度问题',
'en-US': 'Do you want to process the width issue when generating charts?'
},
mode: ['pc'],
pcDemo: 'chart-events'
},
{
name: 'legend-visible',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示图例',
'en-US': 'Display legend'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'not-set-unchange',
type: 'array',
defaultValue: '',
desc: {
'zh-CN': '未发生变化时不参加 setOption 的属性',
'en-US': 'The setOption attribute does not change.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'resize-delay',
type: 'number',
defaultValue: "'200'",
desc: {
'zh-CN': '窗口 resize 事件回调的延迟',
'en-US': 'Delay of the window resize event callback'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'resizeable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否处理窗口 resize 事件',
'en-US': 'Whether to process the window resize event'
},
mode: ['pc'],
pcDemo: 'chart/question#question-base'
},
{
name: 'set-option-opts',
type: 'boolean | object',
defaultValue: 'true',
desc: {
'zh-CN': 'echarts setOption 的第二个参数',
'en-US': 'Echarts setOption second parameter'
},
mode: ['pc'],
pcDemo: ''
},
{
mode: []
},
{
name: 'theme',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义主题名称。;自定义主题对象。',
'en-US': 'User-defined theme name. ;User-defined theme object.'
},
mode: ['pc'],
pcDemo: 'chart#base'
},
{
name: 'theme-name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
},
mode: ['pc'],
pcDemo: 'chart#base'
},
{
name: 'tooltip-visible',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示提示框',
'en-US': 'Display dialog box'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'width',
type: 'string',
defaultValue: "'auto'",
desc: {
'zh-CN': '设置图表容器的宽度。',
'en-US': 'Set the width of the chart container.'
},
mode: ['pc'],
pcDemo: 'chart/attributes-demo#props-demo10'
},
{
name: 'width-change-delay',
type: 'number',
defaultValue: "'300'",
desc: {
'zh-CN': '容器宽度变化的延迟',
'en-US': 'Container width change delay'
},
mode: ['pc'],
pcDemo: 'chart/question#question-base'
}
],
events: [],
methods: [],
slots: []
}
],
types: [
{
name: 'IChartProps',
type: 'interface',
code: `
interface IChartProps {
afterConfig: () => void
afterSetOption: () => void
afterSetOptionOnce: () => void
animation: object
axisPointer: object | array
backgroundColor: object | string
beforeConfig: () => void
brush: object | array
cancelResizeCheck: boolean
changeDelay: number // 默认值 0
colorMode: string
colors: array
data: object | array
dataEmpty: boolean
dataZoom: object | array
events: object
extend: object
geo: object | array
graphic: object | array
grid: object | array
height: string // 默认值 '400px'
initOptions: object
judgeWidth: boolean // 默认值 false
legend: object | array
legendPosition: string
legendVisible: boolean // 默认值 true
loading: boolean
markArea: object
markLine: object
markPoint: object
notSetUnchange: array
radar: object
resizeDelay: number // 默认值 200
resizeable: boolean // 默认值 true
series: object | array
setOptionOpts: boolean | object // 默认值 true
settings: object
textStyle: object | array
theme: object
themeName: object | string
timeline: object | array
title: object | array
toolbox: object | array
tooltip: object
tooltipFormatter: () => void
tooltipVisible: boolean // 默认值 true
visualMap: object | array
width: string // 默认值 'auto'
widthChangeDelay: number // 默认值 300
xAxis: object | array
yAxis: object | array
}`
},
{
name: 'IChartSettings',
type: 'interface',
code: `
interface IChartSettings {
type: string // 图表类型，可选值' bar '，' histogram '，' line ',' pie '，' ring '，' funnel '，' radar '，' waterfall '
}`
}
]
}

529
examples/sites/demos/apis/checkbox.js Normal file
View File

@ -0,0 +1,529 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'checkbox',
type: 'component',
props: [
{
name: 'border',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示边框',
'en-US': 'Display border'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'border',
mfDemo: ''
},
{
name: 'checked',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认勾选',
'en-US': 'Currently selected'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'checked',
mobileDemo: '',
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Disable'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'indeterminate',
mobileDemo: 'disabled',
mfDemo: ''
},
{
name: 'display-only',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '是否开启组件 display-only 只显示模式，默认值为 false',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'false-label',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '没有选中时的值',
'en-US': 'Value when no option is selected'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'text',
mobileDemo: 'custom-value',
mfDemo: ''
},
{
name: 'icon-position',
type: 'String',
defaultValue: 'center',
desc: {
'zh-CN': "<p>图标与文本的对齐方式，可选值：'center' | 'top'</p>",
'en-US': "<p>Alignment of icon and text, optional value: 'center' | 'top'</p>"
},
mode: ['mobile'],
mobileDemo: 'icon-position'
},
{
name: 'indeterminate',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置 indeterminate 状态，只负责样式控制',
'en-US': 'Sets the indeterminate state and controls only the style.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'indeterminate',
mobileDemo: 'indeterminate',
mfDemo: ''
},
{
name: 'label',
type: 'string | number | boolean',
defaultValue: '',
desc: {
'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为 array 时有效）',
'en-US':
'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'checkbox-group',
mobileDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'modelValue / v-model',
type: 'string | number | boolean',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生 name 属性',
'en-US': 'Native name attribute'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: '',
mfDemo: ''
},
{
name: 'shape',
type: "'filter'",
defaultValue: '',
desc: {
'zh-CN': '过滤器模式',
'en-US': 'Filter mode'
},
mode: ['pc'],
pcDemo: 'shape'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: ''
},
{
name: 'text',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '复选框显示的文本',
'en-US': 'Text displayed in the check box'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'description',
mfDemo: ''
},
{
name: 'true-label',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '选中时的值',
'en-US': 'Value when selected'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'text',
mobileDemo: 'custom-value',
mfDemo: ''
},
{
name: 'v-model',
type: 'String / Number / Boolean',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model / modelValue',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>绑定值</p>',
'en-US': '<p>value</p>'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
}
],
events: [
{
name: 'change',
type: '(value: string | number | boolean) => void',
defaultValue: '',
desc: {
'zh-CN': '当绑定值变化时触发的事件',
'en-US': 'This event is triggered when the binding value changes'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'checkbox-events',
mobileDemo: 'event-change',
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': 'checkbox的内容',
'en-US': 'Checkbox content'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'checkbox-slot',
mobileDemo: '',
mfDemo: ''
}
]
},
{
name: 'checkbox-group',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Disable'
},
mode: ['pc'],
pcDemo: 'indeterminate'
},
{
name: 'fill',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
'en-US': 'Fill color and border color when the checkbox in button mode is activated'
},
mode: ['pc'],
pcDemo: 'custom-color'
},
{
name: 'max',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '可被勾选的 checkbox 的最大数量',
'en-US': 'Maximum number of checkboxes that can be selected'
},
mode: ['pc'],
pcDemo: 'min-max'
},
{
name: 'min',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '可被勾选的 checkbox 的最小数量',
'en-US': 'Minimum number of checkboxes that can be selected'
},
mode: ['pc'],
pcDemo: 'min-max'
},
{
name: 'modelValue / v-model',
type: 'string[] | number[]',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
},
mode: ['pc'],
pcDemo: 'checkbox-group'
},
{
name: 'options',
typeAnchorName: 'ICheckboxGroupOptions',
type: 'ICheckboxGroupOptions[]',
defaultValue: '',
desc: {
'zh-CN': 'checkbox-group 子项配置列表',
'en-US': 'Checkbox component list'
},
mode: ['pc'],
pcDemo: 'group-options'
},
{
name: 'shape',
type: "'filter'",
defaultValue: '',
desc: {
'zh-CN': '过滤器模式',
'en-US': 'Filter mode'
},
mode: ['pc'],
pcDemo: 'shape'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '多选框组尺寸，仅对按钮形式的 checkbox 或带有边框的 checkbox 有效',
'en-US':
'Size of the check box group. This parameter is valid only for the check box with buttons or borders'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'text-color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '按钮形式的 checkbox 激活时的文本颜色',
'en-US': 'Text color when the checkbox in button mode is activated'
},
mode: ['pc'],
pcDemo: 'custom-color'
},
{
name: 'type',
type: "'button' | 'checkbox'",
defaultValue: "'checkbox'",
desc: {
'zh-CN': ' 复选框组子项组件类型，需配合 options 属性使用',
'en-US': 'Checkbox component type'
},
mode: ['pc'],
pcDemo: 'group-options'
},
{
name: 'vertical',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置组件排列方式，设置复选框是否垂直排列',
'en-US': 'Set the component arrangement mode. Sets whether the check boxes are arranged vertically'
},
mode: ['pc'],
pcDemo: 'vertical-checkbox'
}
],
events: [
{
name: 'change',
type: '(value: string[] |number[]) => void',
defaultValue: '',
desc: {
'zh-CN': '当绑定值变化时触发的事件',
'en-US': 'This event is triggered when the binding value changes.'
},
mode: ['pc'],
pcDemo: 'checkbox-events'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': 'checkbox-group 选项组',
'en-US': 'Checkbox Option Group'
},
mode: ['pc'],
pcDemo: 'checkbox-group'
}
]
},
{
name: 'checkbox-button',
type: 'component',
props: [
{
name: 'checked',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认勾选',
'en-US': 'Currently selected'
},
mode: ['pc'],
pcDemo: 'checked'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Is disabled'
},
mode: ['pc'],
pcDemo: 'indeterminate'
},
{
name: 'events',
typeAnchorName: 'ICheckboxGroupOptions',
type: 'ICheckboxGroupOptions.events',
defaultValue: '',
desc: {
'zh-CN': '原生事件',
'en-US': 'Native event'
},
mode: ['pc'],
pcDemo: 'group-options'
},
{
name: 'false-label',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '没有选中时的值',
'en-US': 'Value when no option is selected'
},
mode: ['pc'],
pcDemo: 'text'
},
{
name: 'label',
type: 'string | number | boolean',
defaultValue: '',
desc: {
'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为array时有效）',
'en-US':
'Value in the selected state (This parameter is valid only when checkbox-group or the bound object type is array.) The optional value of this attribute is medium-'
},
mode: ['pc'],
pcDemo: 'checkbox-group'
},
{
name: 'modelValue / v-model',
type: 'string | number | boolean',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
},
mode: ['pc'],
pcDemo: 'checkbox-button'
},
{
name: 'name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生 name 属性',
'en-US': 'Native name attribute'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'text',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '复选框文本',
'en-US': 'Text'
},
mode: ['pc'],
pcDemo: 'description'
},
{
name: 'true-label',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '选中时的值',
'en-US': 'Value when selected'
},
mode: ['pc'],
pcDemo: 'text'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': 'checkbox-button 的内容',
'en-US': 'Checkbox-button content'
},
mode: ['pc'],
pcDemo: 'description'
}
]
}
],
types: [
{
name: 'ICheckboxGroupOptions',
type: 'interface',
code: `
interface ICheckboxGroupOptions {
label: string // 选中时对应的值
text?: number // 描述文本
disabled?: boolean // 是否禁用
checked?: boolean // 是否默认选中
events?: {
click?: (e: Event) => void // 点击事件
change?: (e: Event) => void // change事件
}
}`
}
]
}

80
examples/sites/demos/apis/checkboxgroup.js Normal file
View File

@ -0,0 +1,80 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'CheckboxGroup',
type: 'component',
props: [
{
name: 'disabled',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否禁用，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'disabled'
},
{
name: 'max',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>可被勾选的 checkbox 的最大数量</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'min-max'
},
{
name: 'min',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>可被勾选的 checkbox 的最小数量</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'min-max'
},
{
name: 'value / v-model',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>绑定值</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'dedisabled'
},
{
name: 'vertical',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否竖向模式</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'vertical'
}
],
events: [
{
name: 'change',
defaultValue: '',
desc: {
'zh-CN': '<p>当绑定值变化时触发的事件,该事件可获取更新后的值</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'event-change'
}
],
methods: [],
slots: []
}
]
}

193
examples/sites/demos/apis/collapse.js Normal file
View File

@ -0,0 +1,193 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'collapse',
type: 'component',
props: [
{
name: 'accordion',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否手风琴模式',
'en-US': 'In accordion mode'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'accordion',
mfDemo: ''
},
{
name: 'before-close',
type: '(item: Component, activeNames: string | number | Array) => boolean',
defaultValue: '',
desc: {
'zh-CN': '阻止折叠面板切换',
'en-US': 'Do not close the folding panel.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'before-close',
mfDemo: ''
},
{
name: 'modelValue / v-model',
type: 'string | number | Array',
defaultValue: '',
desc: {
'zh-CN': '当前激活的面板。如果是手风琴模式，绑定值类型需要为 string | number，否则为 Array',
'en-US':
'Currently activated panel (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.)'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'v-model',
type: 'String / Array /Number',
defaultValue: '',
desc: {
'zh-CN': '当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'change',
type: '(activeNames: string | number | Array) => void',
defaultValue: '',
desc: {
'zh-CN': '当前激活面板改变时触发。如果是手风琴模式，参数 activeNames 类型为 string | number，否则为 Array',
'en-US':
'Triggered when the current active panel changes. (In accordion mode, the type of activeNames is string. Otherwise, the type of activeNames is array.)'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'disable',
mfDemo: ''
},
{
name: 'icon',
type: '',
defaultValue: '',
desc: {
'zh-CN': '展开收起icon插槽',
'en-US': 'Expand and collapse icon slot'
},
mode: ['mobile-first'],
mfDemo: 'slot-icon'
}
]
},
{
name: 'collapse-item',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Disable'
},
mode: ['pc'],
pcDemo: 'disable'
},
{
name: 'name',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '唯一标志符',
'en-US': 'Unique identifier'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': 'Panel Title'
},
mode: ['pc'],
pcDemo: 'title'
},
{
name: 'title-right',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义面板标题右侧内容',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'title'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'icon',
defaultValue: '',
desc: {
'zh-CN': '展开折叠 icon 图标',
'en-US': 'Expand and collapse the icon.'
},
mode: ['pc'],
pcDemo: 'icon'
},
{
name: 'title',
defaultValue: '',
desc: {
'zh-CN': '标题',
'en-US': 'Title'
},
mode: ['pc'],
pcDemo: 'title'
},
{
name: 'title-right',
defaultValue: '',
desc: {
'zh-CN': '自定义面板标题右侧内容',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'title'
}
]
}
]
}

93
examples/sites/demos/apis/color-picker.js Normal file
View File

@ -0,0 +1,93 @@
export default {
mode: ['pc'],
apis: [
{
name: 'color-picker',
type: 'component',
props: [
{
name: 'alpha',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否启用alpha选择',
'en-US': 'enable alpha select or not'
},
mode: ['pc'],
pcDemo: 'enable-alpha'
},
{
name: 'history',
type: 'string[] | undefined',
defaultValue: 'undefined',
desc: {
'zh-CN': '启用历史记录',
'en-US': 'enable history or not'
},
mode: ['pc'],
pcDemo: 'history'
},
{
name: 'predefine',
type: 'string[] | undefined',
defaultValue: 'undefined',
desc: {
'zh-CN': '启用预定义颜色',
'en-US': 'enable predefine or not'
},
mode: ['pc'],
pcDemo: 'predefine'
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '定义color-picker尺寸;该属性的可选值为 large / medium / small / mini',
'en-US':
'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'visible',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认显示color-select',
'en-US': 'Is color select displayed by default'
},
mode: ['pc'],
pcDemo: 'default-visible'
}
],
events: [
{
name: 'cancel',
type: '()=>void',
defaultValue: '',
desc: {
'zh-CN': '按下取消或点击外部的时触发该事件',
'en-US': 'When click cancel or click out-side will trigger cancel event'
},
mode: ['pc'],
pcDemo: 'event'
},
{
name: 'confirm',
type: '(hex:string) => void',
defaultValue: '',
desc: {
'zh-CN': '按下确认时触发该事件',
'en-US': 'When click confirm will trigger confirm event'
},
mode: ['pc'],
pcDemo: 'event'
}
],
methods: [],
slots: []
}
]
}

90
examples/sites/demos/apis/color-select-panel.js Normal file
View File

@ -0,0 +1,90 @@
export default {
mode: ['pc'],
apis: [
{
name: 'color select panel',
type: 'component',
props: [
{
name: 'alpha',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否启用alpha选择',
'en-US': 'enable alpha select or not'
},
mode: ['pc'],
pcDemo: 'alpha'
},
{
name: 'history',
type: 'string[] | undefined',
defaultValue: 'undefined',
desc: {
'zh-CN': '时候启用历史记录',
'en-US': 'enable history or not'
},
mode: ['pc'],
pcDemo: 'history'
},
{
name: 'predefine',
type: 'string[] | undefined',
defaultValue: 'undefined',
desc: {
'zh-CN': '时候启用历史记录',
'en-US': 'enable predefine or not'
},
mode: ['pc'],
pcDemo: 'predefine'
},
{
name: 'visible',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否默认显示color select panel',
'en-US': 'Is color select panel displayed by default'
},
mode: ['pc']
}
],
events: [
{
name: 'cancel',
type: '()=>void',
defaultValue: '',
desc: {
'zh-CN': '按下取消或点击外部的时触发该事件',
'en-US': 'When click cancel or click out-side will trigger cancel event'
},
mode: ['pc'],
pcDemo: 'event'
},
{
name: 'color-update',
type: '(color:Color) => void',
defaultValue: '',
desc: {
'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
'en-US': 'when click predefine color or history, will trigger color-update event'
},
mode: ['pc']
},
{
name: 'confirm',
type: '(hex:string) => void',
defaultValue: '',
desc: {
'zh-CN': '按下确认时触发该事件',
'en-US': 'When click confirm will trigger confirm event'
},
mode: ['pc'],
pcDemo: 'event'
}
],
methods: [],
slots: []
}
]
}

13
examples/sites/demos/apis/color.js Normal file
View File

@ -0,0 +1,13 @@
export default {
mode: ['pc'],
apis: [
{
name: 'color',
type: 'component',
props: [],
events: [],
methods: [],
slots: []
}
]
}

272
examples/sites/demos/apis/column-list-item.js Normal file
View File

@ -0,0 +1,272 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'ColumnListItem',
type: 'component',
props: [
{
name: 'auto-width',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '卡片的宽度是否自动撑开，设置后将不再给卡片设置固定宽度',
'en-US':
'Indicates whether the card width is automatically expanded. After the setting, the card width is not fixed.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '用户自定义class，可覆盖组件默认class',
'en-US': 'User-defined class, which can overwrite the default class of the component.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'disabled',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '卡片禁用勾选',
'en-US': 'Card Disable Check'
},
mode: ['mobile-first'],
mfDemo: 'icon-disabled'
},
{
name: 'flex-basis',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '设置内容插槽的宽度，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto。',
'en-US':
'Set the width of the content slot. A maximum of four values can be transferred. The percentage, fixed width, and inherent size keywords are supported. The default value is auto.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'flex-grow',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 [1, 1, 1, 1]。',
'en-US':
'Indicates the relative proportion of the remaining space allocated to each item in the flex container. The default value is [1, 1, 1, 1].'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'icon-more',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
'en-US': 'More button icons can be replaced by a svg icon object.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'image',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '图片地址',
'en-US': 'Picture Address'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'label',
type: 'String / Number',
defaultValue: '',
desc: {
'zh-CN': 'checkbox或radio的label',
'en-US': 'Checkbox or radio label'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'options',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '操作按钮配置',
'en-US': 'Operation Button Configuration'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'round',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '通过 round 设置是否展示圆形',
'en-US': 'Use round to set whether to display a circle.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-checkbox',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '显示checkbox按钮',
'en-US': 'Show the checkbox button'
},
mode: ['mobile-first'],
mfDemo: 'show-checkbox'
},
{
name: 'show-radio',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '显示radio按钮',
'en-US': 'Show radio button'
},
mode: ['mobile-first'],
mfDemo: 'show-radio'
},
{
name: 'size',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '尺寸，支持medium、small 2个尺寸，默认值为medium',
'en-US': 'Indicates the size. The options are medium and small. The default value is medium.'
},
mode: ['mobile-first'],
mfDemo: 'size'
},
{
name: 'type',
type: 'String',
defaultValue: 'card',
desc: {
'zh-CN': '组件类型，可选值有list | card，默认为 card',
'en-US': 'Component type. The options are list and card. The default value is card.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model',
type: '',
defaultValue: '',
desc: {
'zh-CN': '双向数据绑定',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'change',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '组件选中/取消选中事件',
'en-US': 'Component check/uncheck event'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'icon-click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '操作栏按钮点击事件',
'en-US': 'Operation bar button click event'
},
mode: ['mobile-first'],
mfDemo: 'icon-click-event'
}
],
methods: [],
slots: [
{
name: 'column1',
type: '',
defaultValue: '',
desc: {
'zh-CN': '内容插槽1',
'en-US': 'Content Slot 1'
},
mode: ['mobile-first'],
mfDemo: 'content-slot'
},
{
name: 'column2',
type: '',
defaultValue: '',
desc: {
'zh-CN': '内容插槽2',
'en-US': 'Content Slot 2'
},
mode: ['mobile-first'],
mfDemo: 'content-slot'
},
{
name: 'column3',
type: '',
defaultValue: '',
desc: {
'zh-CN': '内容插槽3',
'en-US': 'Content Slot 3'
},
mode: ['mobile-first'],
mfDemo: 'content-slot'
},
{
name: 'column4',
type: '',
defaultValue: '',
desc: {
'zh-CN': '内容插槽4',
'en-US': 'Content Slot 4'
},
mode: ['mobile-first'],
mfDemo: 'content-slot'
},
{
name: 'image',
type: '',
defaultValue: '',
desc: {
'zh-CN': '图片插槽',
'en-US': 'Picture Slot'
},
mode: ['mobile-first'],
mfDemo: 'image-operate-slot'
},
{
name: 'operate',
type: '',
defaultValue: '',
desc: {
'zh-CN': '操作栏插槽',
'en-US': 'Action Bar Slots'
},
mode: ['mobile-first'],
mfDemo: 'image-operate-slot'
}
]
}
]
}

116
examples/sites/demos/apis/company.js Normal file
View File

@ -0,0 +1,116 @@
export default {
mode: ['pc'],
apis: [
{
name: 'company',
type: 'component',
props: [
{
name: 'clearable',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN': '是否显示清除按钮;是否可清空',
'en-US': 'Whether to display the Clear button; Clearable'
},
mode: ['pc'],
pcDemo: 'custom-show-num'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'fetchCompany',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义公司查询接口，fetchCompany返回一个Promise对象',
'en-US': 'The fetchCompany interface returns a Promise object.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fields',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义公司数据映射，未使用框架服务时必填',
'en-US':
'Customized company data mapping. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'max',
type: 'number',
defaultValue: '该属性的默认值为 1000',
desc: {
'zh-CN': '原生属性，设置最大值',
'en-US': 'Native attribute. Set the maximum value.'
},
mode: ['pc'],
pcDemo: 'custom-show-num'
},
{
name: 'modelValue / v-model',
type: 'string , number',
defaultValue: '',
desc: {
'zh-CN': '设置下拉框的值。',
'en-US': 'Set the value of the drop-down list box.'
},
mode: ['pc'],
pcDemo: 'custom-show-num'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置输入框内的提示占位文本。',
'en-US': 'Set the placeholder text in the text box.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
}
],
events: [],
methods: [],
slots: []
}
]
}

48
examples/sites/demos/apis/config-provider.js Normal file
View File

@ -0,0 +1,48 @@
export default {
mode: ['pc'],
apis: [
{
name: 'config-provider',
type: 'component',
props: [
{
name: 'design',
type: 'ConfigProviderProps',
defaultValue: '',
desc: {
'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范',
'en-US': 'Standardization can be achieved by customizing some custom interaction specifications'
},
mode: ['pc'],
pcDemo: 'base'
},
{
name: 'direction',
type: "'ltr' | 'rtl'",
defaultValue: 'ltr',
desc: {
'zh-CN': '文字排版方向',
'en-US': 'Text layout direction'
},
mode: ['pc'],
pcDemo: 'text-direct'
},
{
name: 'tag',
type: 'object',
defaultValue: "{enable: true,name: 'div'}",
desc: {
'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div',
'en-US':
'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
},
mode: ['pc'],
pcDemo: 'tag'
}
],
events: [],
methods: [],
slots: []
}
]
}

160
examples/sites/demos/apis/container.js Normal file
View File

@ -0,0 +1,160 @@
export default {
mode: ['pc', 'mobile'],
apis: [
{
name: 'container',
type: 'component',
props: [
{
name: 'aside-width',
type: 'number | string',
defaultValue: '200',
desc: {
'zh-CN': '左侧宽度',
'en-US': 'Left width'
},
mode: ['pc'],
pcDemo: 'custom-with-height'
},
{
name: 'footer-height',
type: 'number | string',
defaultValue: '60',
desc: {
'zh-CN': '底部高度',
'en-US': 'Height at the bottom'
},
mode: ['pc'],
pcDemo: 'custom-with-height'
},
{
name: 'header-height',
type: 'number | string',
defaultValue: '60',
desc: {
'zh-CN': '头部高度',
'en-US': 'Head height'
},
mode: ['pc'],
pcDemo: 'custom-with-height'
},
{
name: 'left-width',
type: 'number | string',
defaultValue: '60',
desc: {
'zh-CN': '左侧宽度',
'en-US': 'Left width'
},
mode: ['mobile'],
mobileDemo: 'custom-width'
},
{
name: 'pattern',
typeAnchorName: 'IContainerPattern',
type: 'IContainerPattern',
defaultValue: '"default"',
desc: {
'zh-CN': '版型类型',
'en-US': 'Measurement type'
},
mode: ['pc', 'mobile'],
pcDemo: 'basic-usage',
mobileDemo: 'basic-usaage'
},
{
name: 'right-width',
type: 'number | string',
defaultValue: '44',
desc: {
'zh-CN': '右侧宽度',
'en-US': 'right width'
},
mode: ['mobile'],
mobileDemo: 'custom-width'
}
],
events: [],
methods: [],
slots: [
{
name: 'aside',
defaultValue: '',
desc: {
'zh-CN': '侧边内容插槽',
'en-US': 'Side Content Slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'center',
defaultValue: '',
desc: {
'zh-CN': '中部内容插槽',
'en-US': 'Renter Slot'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
},
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '主要内容插槽',
'en-US': 'Main Content Slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'footer',
defaultValue: '',
desc: {
'zh-CN': '底部内容插槽',
'en-US': 'Bottom Content Slot'
},
mode: ['pc'],
pcDemo: 'classic'
},
{
name: 'header',
defaultValue: '',
desc: {
'zh-CN': '头部内容插槽',
'en-US': 'Header Content Slot'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'left',
defaultValue: '',
desc: {
'zh-CN': '左侧内容插槽',
'en-US': 'Title Slot'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
},
{
name: 'right',
defaultValue: '',
desc: {
'zh-CN': '右侧内容插槽',
'en-US': 'Right Slot'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
}
]
}
],
types: [
{
name: 'IContainerPattern',
type: 'interface',
code: `type IContainerPattern = 'default' | 'simple' | 'legend' | 'classic' | 'fashion'`
}
]
}

105
examples/sites/demos/apis/country.js Normal file
View File

@ -0,0 +1,105 @@
export default {
mode: ['pc'],
apis: [
{
name: 'country',
type: 'component',
props: [
{
name: 'clearable',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN': '是否显示清除按钮;是否可清空',
'en-US': 'Whether to display the Clear button; Clearable'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'fetchCountry',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义国家查询接口，返回一个Promise对象，未使用框架服务时必填',
'en-US':
'The user-defined country query interface returns a Promise object. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fields',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义数据映射，未使用框架服务时必填',
'en-US': 'Customized data mapping. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'modelValue / v-model',
type: 'string , number',
defaultValue: '',
desc: {
'zh-CN': '设置下拉框的值。',
'en-US': 'Set the value of the drop-down list box.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置输入框内的提示占位文本。',
'en-US': 'Set the placeholder text in the text box.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
}
],
events: [],
methods: [],
slots: []
}
]
}

98
examples/sites/demos/apis/credit-card-form.js Normal file
View File

@ -0,0 +1,98 @@
export default {
mode: ['pc'],
apis: [
{
name: 'credit-card-form',
type: 'component',
props: [
{
name: 'background-image',
type: 'string , object',
defaultValue: '',
desc: {
'zh-CN': '设置卡片的背景图片;',
'en-US': 'Set the background image of the card.'
},
mode: ['pc'],
pcDemo: 'background-image'
},
{
name: 'form-data',
type: 'object',
defaultValue:
"// 该属性的默认值为 \n{cardCvv: '', cardName: '', cardYear: '', cardMonth: '', cardNumber: ''}",
desc: {
'zh-CN': '设置信用卡显示数据',
'en-US': 'Setting Credit Card Display Data'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [
{
name: 'input-card-cvv',
defaultValue: '',
desc: {
'zh-CN': '输入 cvv 时触发的事件',
'en-US': 'CVV input event triggered'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
},
{
name: 'input-card-month',
defaultValue: '',
desc: {
'zh-CN': '选择月时触发的事件',
'en-US': 'Event triggered when a month is selected'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
},
{
name: 'input-card-name',
defaultValue: '',
desc: {
'zh-CN': '输入卡持有者时触发的事件',
'en-US': 'Event triggered when a card holder is entered'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
},
{
name: 'input-card-number',
defaultValue: '',
desc: {
'zh-CN': '输入卡号时触发的事件',
'en-US': 'Event triggered when a card number is entered'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
},
{
name: 'input-card-year',
defaultValue: '',
desc: {
'zh-CN': '选择年时触发的事件',
'en-US': 'Event triggered when the year is selected'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
},
{
name: 'submit',
defaultValue: '',
desc: {
'zh-CN': '提交时触发的事件',
'en-US': 'Event triggered upon submission'
},
mode: ['pc'],
pcDemo: 'credit-card-form-events'
}
],
methods: [],
slots: []
}
]
}

483
examples/sites/demos/apis/crop.js Normal file
View File

@ -0,0 +1,483 @@
export default {
mode: ['pc'],
apis: [
{
name: 'crop',
type: 'component',
props: [
{
name: 'aspect-ratio',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '裁剪框的宽高比;默认为 16 / 9',
'en-US': 'Aspect-to-height ratio of the crop box; The default value is 16 / 9'
},
mode: ['pc'],
pcDemo: 'aspect-ratio'
},
{
name: 'auto-crop',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '初始化时，是否自动显示裁剪框;默认为 true',
'en-US':
'Indicates whether to automatically display the crop box during initialization. The default value is true'
},
mode: ['pc'],
pcDemo: 'auto-crop-area'
},
{
name: 'auto-crop-area',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '定义自动裁剪面积大小（百分比）;默认为 0.8',
'en-US': 'Defines the automatic cropping area size (percentage). The default value is 0.8'
},
mode: ['pc'],
pcDemo: 'auto-crop-area'
},
{
name: 'background',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示容器的网格背景;默认为 true',
'en-US': 'Whether to display the grid background of the container; The default value is true'
},
mode: ['pc'],
pcDemo: 'no-background'
},
{
name: 'center',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '裁剪框是否在图片正中心;默认为 true',
'en-US': 'Whether the cropping frame is in the center of the image; The default value is true'
},
mode: ['pc'],
pcDemo: 'aspect-ratio'
},
{
name: 'crop-type',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64',
'en-US':
'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64'
},
mode: ['pc'],
pcDemo: 'get-cropped-canvas'
},
{
name: 'cropvisible',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '设置裁剪弹框是否可见;默认为 false',
'en-US': 'Set whether the cropping dialog box is visible. The default value is false'
},
mode: ['pc'],
pcDemo: 'min-crop-box-width-height'
},
{
name: 'drag-mode',
type: 'string',
defaultValue: '',
desc: {
'zh-CN':
"定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
'en-US':
"Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
},
mode: ['pc'],
pcDemo: 'drag-mode'
},
{
name: 'guides',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否在裁剪框上方显示虚线;默认为 true',
'en-US': 'Whether to display dotted lines above the crop box; The default value is true'
},
mode: ['pc'],
pcDemo: 'no-guides'
},
{
name: 'max-size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置待裁剪图片的最大大小，默认为 1M ;默认为 1M',
'en-US':
'Set the maximum size of the image to be cropped. The default value is 1 MB. The default value is 1M'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'min-container-height',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '容器的最小高度;默认为 300',
'en-US': 'Minimum height of a container; The default value is 300'
},
mode: ['pc'],
pcDemo: 'min-crop-box-width-height'
},
{
name: 'min-container-width',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '容器的最小宽度;默认为 652',
'en-US': 'Minimum width of a container; The default value is 652'
},
mode: ['pc'],
pcDemo: 'min-crop-box-width-height'
},
{
name: 'min-crop-box-height',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '裁剪层的最小高度;默认为 0',
'en-US': 'Minimum height of the crop layer; The default value is 0'
},
mode: ['pc'],
pcDemo: 'min-crop-box-width-height'
},
{
name: 'min-crop-box-width',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '裁剪层的最小宽度;默认为 0',
'en-US': 'Minimum width of the cropping layer; The default value is 0'
},
mode: ['pc'],
pcDemo: 'min-crop-box-width-height'
},
{
name: 'modal',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态;默认为 true',
'en-US':
'Whether to display the black mode below the cropping box above the image; The default value is true'
},
mode: ['pc'],
pcDemo: 'no-modal'
},
{
name: 'movable',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否允许可以移动后面的图片;默认为 true',
'en-US': 'Indicates whether the image can be moved. The default value is true'
},
mode: ['pc'],
pcDemo: 'drag-mode'
},
{
name: 'preview',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '设置裁剪区域图片是否可预览，默认为 false',
'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'quality',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92',
'en-US':
'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'rotatable',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否允许旋转图像;默认为 true',
'en-US': 'Indicates whether images can be rotated. The default value is true'
},
mode: ['pc'],
pcDemo: 'replace-image'
},
{
name: 'src',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '默认裁剪的源图片',
'en-US': 'Default cropped source image'
},
mode: ['pc'],
pcDemo: 'no-background'
},
{
name: 'view-mode',
type: 'number',
defaultValue: '',
desc: {
'zh-CN':
'定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
'en-US':
'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
},
mode: ['pc'],
pcDemo: 'view-mode'
},
{
name: 'wheel-zoom-ratio',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '用鼠标移动图像时，定义缩放比例;默认为 0.1',
'en-US': 'Define the scaling ratio when moving the image with the mouse. The default value is 0.1'
},
mode: ['pc'],
pcDemo: 'wheel-zoom-ratio'
},
{
name: 'zoom-on-wheel',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像;默认为 true',
'en-US':
'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true'
},
mode: ['pc'],
pcDemo: 'zoom-on-wheel'
},
{
name: 'zoomable',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否允许放大图像;默认为 true',
'en-US': 'Whether to allow image zooming in; The default value is true'
},
mode: ['pc'],
pcDemo: 'replace-image'
}
],
events: [
{
name: 'crop',
type: 'Function(value)',
defaultValue: '',
desc: {
'zh-CN': '当画布（图像包装器）或裁剪框发生改变时触发;回调参数为 (event: Event)，原生事件',
'en-US':
'Triggered when the canvas (image wrapper) or crop box changes; The callback parameter is (event: Event), native event'
},
mode: ['pc'],
pcDemo: 'event-about-crop'
},
{
name: 'cropdata',
type: 'Function(data)',
defaultValue: '',
desc: {
'zh-CN': 'cropdata 事件回调函数中可以拿到裁剪后的数据，默认为 base64 数据',
'en-US':
'The tailored data can be obtained from the cropdata event callback function. The default value is Base64 data'
},
mode: ['pc'],
pcDemo: 'event-about-crop'
},
{
name: 'cropend',
defaultValue: '',
desc: {
'zh-CN': '当画布（图像包装器）或剪切框发生变化结束时触发;回调参数为 (event: Event)',
'en-US':
'Triggered when the canvas (image wrapper) or clipping box changes. The callback parameter is (event: Event)'
},
mode: ['pc'],
pcDemo: 'event-about-crop'
},
{
name: 'cropmove',
defaultValue: '',
desc: {
'zh-CN': '当画布（图像包装器）或剪切框正在发生变化时触发;回调参数为 (event: Event)',
'en-US':
'Triggered when the canvas (image wrapper) or clipping box is changing; The callback parameter is (event: Event)'
},
mode: ['pc'],
pcDemo: 'event-about-crop'
},
{
name: 'cropstart',
defaultValue: '',
desc: {
'zh-CN': '当画布（图像包装器）或剪切框开始发生变化时触发;回调参数为 (event: Event)',
'en-US':
'Triggered when the canvas (image wrapper) or clipping box starts to change; The callback parameter is (event: Event)'
},
mode: ['pc'],
pcDemo: 'event-about-crop'
},
{
name: 'ready',
defaultValue: '',
desc: {
'zh-CN': '当一个 cropper 实例完全构建时触发',
'en-US': 'This event is triggered when a cropper instance is completely built'
},
mode: ['pc'],
pcDemo: 'event-ready'
}
],
methods: [
{
name: 'clear',
defaultValue: '',
desc: {
'zh-CN': '清除裁切框',
'en-US': 'Clear the cropping box'
},
mode: ['pc'],
pcDemo: 'get-data'
},
{
name: 'destroy',
defaultValue: '',
desc: {
'zh-CN': '销毁 cropper 并从图像中删除整个 cropper',
'en-US': 'Destroy the cropper and delete the entire cropper from the image'
},
mode: ['pc'],
pcDemo: 'event-ready'
},
{
name: 'disable',
defaultValue: '',
desc: {
'zh-CN': '禁用裁切框（裁切框不可移动）',
'en-US': 'Disable the cropping box (the cropping box cannot be moved)'
},
mode: ['pc'],
pcDemo: 'crop-meth'
},
{
name: 'enable',
defaultValue: '',
desc: {
'zh-CN': '启用裁切框',
'en-US': 'Enable the cropping box'
},
mode: ['pc'],
pcDemo: 'event-ready'
},
{
name: 'getCanvasData',
defaultValue: '',
desc: {
'zh-CN': '获取画布 Canvas（图像包装器）位置和大小数据;返回的数据类型为 object',
'en-US':
'Obtain the position and size of the canvas Canvas (image wrapper). The returned data type is object'
},
mode: ['pc'],
pcDemo: 'get-image-data'
},
{
name: 'getContainerData',
defaultValue: '',
desc: {
'zh-CN': '获取 container 容器大小数据;返回的数据类型为 object',
'en-US': 'Obtain the container size data. The returned data type is object'
},
mode: ['pc'],
pcDemo: 'get-container-data'
},
{
name: 'getCropBoxData',
defaultValue: '',
desc: {
'zh-CN': '获取剪切框的位置和大小数据;返回的数据类型为 object',
'en-US': 'Obtain the position and size of the clip box. The returned data type is object'
},
mode: ['pc'],
pcDemo: 'get-crop-box-data'
},
{
name: 'getCroppedCanvas',
defaultValue: '',
desc: {
'zh-CN':
'获取裁剪后的图片数据;.getCroppedCanvas().toDataURL()：转成 base64 图片;.getCroppedCanvas().toBlob()：生成 Blob 图片数据',
'en-US':
'Obtain the cropped image data. .getCroppedCanvas().toDataURL(): Convert the image to a Base64 image. .getCroppedCanvas().toBlob(): Generate Blob image data'
},
mode: ['pc'],
pcDemo: 'get-cropped-canvas'
},
{
name: 'getData',
defaultValue: '',
desc: {
'zh-CN':
'获取最终裁剪的区域位置和大小数据（根据原始图像的自然大小）;参数为 (rounded) ，默认 false，设置 true 可以获取其所有数据;返回的数据类型为 object',
'en-US':
'Obtain the position and size of the final cropped region (based on the natural size of the original image). The parameter is rounded. The default value is false. If this parameter is set to true, all data can be obtained. The returned data type is object'
},
mode: ['pc'],
pcDemo: 'get-data'
},
{
name: 'getImageData',
defaultValue: '',
desc: {
'zh-CN': '获取图像 image 位置、大小和其他相关数据;返回的数据类型为 object',
'en-US': 'Obtain the image position, size, and other related data. The returned data type is object'
},
mode: ['pc'],
pcDemo: 'get-image-data'
},
{
name: 'replace',
defaultValue: '',
desc: {
'zh-CN': '替换图像的 src 并重新构建 cropper;参数为 图片 URL',
'en-US': 'Replace the image src and rebuild the cropper. The parameter is the image URL'
},
mode: ['pc'],
pcDemo: 'replace-image'
},
{
name: 'setAspectRatio',
defaultValue: '',
desc: {
'zh-CN': '改变裁切框的宽高比;参数为(aspectRatio)，类型 number，是一个正数',
'en-US':
'Change the aspect ratio of the cutting frame; The parameter is (aspectRatio) and the type is number. The value is a positive number'
},
mode: ['pc'],
pcDemo: 'aspect-ratio'
}
],
slots: []
}
]
}

148
examples/sites/demos/apis/currency.js Normal file
View File

@ -0,0 +1,148 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'currency',
type: 'component',
props: [
{
name: 'clearable',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN': '是否显示清除按钮;是否可清空',
'en-US': 'Whether to display the Clear button; Clearable'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: ''
},
{
name: 'disabled',
type: 'Boolen',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'disable-currency',
mfDemo: ''
},
{
name: 'fetch-currency',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义金额查询接口，返回一个Promise对象',
'en-US': 'The user-defined amount query interface returns a Promise object.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: ''
},
{
name: 'fields',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义数据映射，在没有使用框架服务时必填',
'en-US': 'User-defined data mapping. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-service',
mfDemo: ''
},
{
name: 'modelValue / v-model',
type: 'string , number',
defaultValue: '',
desc: {
'zh-CN': '设置下拉框的值。',
'en-US': 'Set the value of the drop-down list box.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置输入框内的提示占位文本。',
'en-US': 'Set the prompt placeholder text in the text box.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'disable-currency',
mfDemo: ''
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If an error occurs in locating a fault in the dialog box that is displayed, set this attribute to false (for details, see the select component).'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '输入框尺寸，只在 type!="textarea" 时有效;该属性的可选值为 medium / small / mini',
'en-US':
'Size of the text box. This parameter is valid only when type!="textarea". The optional values of this attribute are medium / small / mini'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: ''
},
{
name: 'v-model',
type: 'String / Number',
defaultValue: '',
desc: {
'zh-CN': '设置下拉框的值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'change',
type: '',
defaultValue: '',
desc: {
'zh-CN':
'arg1:{Any|Array 单选并且未指定渲染类型时，是选中项的值字段，此时没有arg2参数；多选并且未指定渲染类型时，是选中项值字段组成的数组，此时没有arg2参数；单选并且渲染类型为树或者表格时，是选中项对象，此时没有arg2参数；多选并且渲染类型为树或者表格时，是选中项对象值字段组成的数组，此时有arg2参数；}，arg2:{Array 多选并且渲染类型为树或者表格时，是选中项对象组成的数组}',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [],
slots: []
}
]
}

161
examples/sites/demos/apis/date-picker-mobile.js Normal file
View File

@ -0,0 +1,161 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'date-picker-mobile',
type: 'component',
props: [
{
name: 'lock-scroll',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'picker-options',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN':
'日期选择器特有的选项，该属性的默认值为 { disabledDate: null }，其中 disabledDate 可以设置日期范围限制',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'type',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '组件类型，默认值为 date',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model',
type: 'Number, String, Array, Date',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'visible',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否弹出面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '选择日期时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '面板确认时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'time-confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '时间面板确认时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'update:visible',
type: '',
defaultValue: '',
desc: {
'zh-CN': '显示或隐藏面板时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [
{
name: 'confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '确认并关闭面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'formatDate(date, dateFormat)',
type: '',
defaultValue: '',
desc: {
'zh-CN': "日期格式化方法，例如：formatDate('2022/11/30', 'yyyy年MM月dd日')",
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '日期单元格插槽，参数：data 当前日期数据',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
]
}
]
}

631
examples/sites/demos/apis/date-picker.js Normal file
View File

@ -0,0 +1,631 @@
export default {
mode: ['pc'],
apis: [
{
name: 'date-picker',
type: 'component',
props: [
{
name: 'align',
type: "'left' | 'center' | 'right'",
defaultValue: "'left'",
desc: {
'zh-CN': '日期选择面板和输入框的对齐方式',
'en-US': 'Alignment of the date selection panel and the input box'
},
mode: ['pc'],
pcDemo: 'align'
},
{
name: 'clear-icon',
type: 'Component',
defaultValue: 'IconOperationfaild',
desc: {
'zh-CN': '自定义清空图标',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'clear'
},
{
name: 'clearable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示清除按钮',
'en-US': 'Display Clear Button'
},
mode: ['pc'],
pcDemo: 'clear'
},
{
name: 'default-time',
type: 'string | string[]',
defaultValue: "'00:00:00' | ['00:00:00', '00:00:00']",
desc: {
'zh-CN':
'type="datetime" 时，default-time 是一个字符串，用于设置选择一个日期后，时间输入框中的默认值；<br>type="datetimerange" 时，default-time 是一个字符串数组，用于设置选择一个日期范围后，开始和结束时间输入框中的默认值',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'default-value'
},
{
name: 'default-value',
type: 'string | Date',
defaultValue: 'new Date()',
desc: {
'zh-CN':
'当选中的日期值为空时，选择器面板打开时默认显示的时间，可以是日期格式或者能被 new Date() 解析的字符串',
'en-US':
'Use the arrow button to select the time. This parameter is used when type is set to datetime or datetimerange. By default, the time is selected by scrolling the mouse wheel'
},
mode: ['pc'],
pcDemo: 'default-value'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'editable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '文本框可输入',
'en-US': 'The text box can be entered.'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'end-placeholder',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN': '范围选择时结束日期的占位内容',
'en-US': 'Placeholder of the end date when the range is selected'
},
mode: ['pc'],
pcDemo: 'date-range'
},
{
name: 'format',
type: 'string',
defaultValue: "'yyyy-MM-dd'",
desc: {
'zh-CN': '显示在输入框中的格式',
'en-US': 'Display format in the text box'
},
mode: ['pc'],
pcDemo: 'format'
},
{
name: 'format-weeks',
type: '(customWeeks: number, weekFirstDays: string[]) => string',
defaultValue: '',
desc: {
'zh-CN':
'格式化周次序号，该回调函数有两个参数，customWeeks 用来获取自定义周次的序号，weekFirstDays 用来获取每周次中的首个日期',
'en-US': 'The following table lists the options of the current time and date selector.'
},
mode: ['pc'],
pcDemo: 'custom-weeks'
},
{
name: 'isutc8',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN':
'默认值为 false，设置为 true 时切换系统默认时区，时间依然显示为东八区时间，适用场景为海外地区显示东八区时间',
'en-US':
'The default value is false. If this parameter is set to true, the time in GMT+8 is still displayed when the default time zone is switched. Applicable scenario: The GMT+8 time is displayed in regions outside China'
},
mode: ['pc'],
pcDemo: 'isutc8'
},
{
name: 'label',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN':
'设置 shape="filter" 属性之后，代表过滤器模式下显示的标题，单独设置 label 属性可以使 label 放置在组件的开始位置',
'en-US':
'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'modelValue / v-model',
type: 'Date | string | number | Array',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'Set the initial value of the calendar component. ;Bound Value'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'name',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN': '原生属性',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'picker-options',
typeAnchorName: 'IPickerOptions',
type: 'IPickerOptions',
defaultValue: '',
desc: {
'zh-CN':
'配置部分禁用、快捷选项等，包含 firstDayOfWeek / disabledDate / onPick / shortcuts 属性，详细用法可参考 IPickerOptions 类型声明',
'en-US': "Custom selector's rear icon"
},
mode: ['pc'],
pcDemo: 'shortcuts'
},
{
name: 'placeholder',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN': '非范围选择时的占位内容',
'en-US': 'Placeholder content for non-range selection'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素，在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert a pop-up box to the body element. When a fault occurs in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 DatePicker 下拉弹框添加的 class 类名',
'en-US': 'Cancel the linkage between two date panels in the range selector.'
},
mode: ['pc'],
pcDemo: 'custom-suffix-icon'
},
{
name: 'range-separator',
type: 'string',
defaultValue: "'-'",
desc: {
'zh-CN': '选择范围时的分隔符',
'en-US': 'Custom Clear Icon'
},
mode: ['pc'],
pcDemo: 'date-range'
},
{
name: 'readonly',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置日历组件是否只读',
'en-US': 'Set whether the calendar component is read-only.'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'shape',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '通过 shape="filter" 属性切换至过滤器模式',
'en-US': 'Separator for selecting a range'
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'show-timezone',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否开启设置日期选择面板时区选择',
'en-US': 'Whether to enable the time zone selection function on the date selection panel'
},
mode: ['pc'],
pcDemo: 'timezone'
},
{
name: 'show-week-number',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否展示周次序号',
'en-US': 'Class name added to the DatePicker drop-down list box'
},
mode: ['pc'],
pcDemo: 'custom-weeks'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '输入框尺寸',
'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'start-placeholder',
type: 'string',
defaultValue: "''",
desc: {
'zh-CN': '范围选择时开始日期的占位内容',
'en-US': 'Placeholder of the start date when the range is selected'
},
mode: ['pc'],
pcDemo: 'date-range'
},
{
name: 'step',
typeAnchorName: 'time-picker#IStep',
type: 'IStep',
defaultValue: '',
desc: {
'zh-CN':
'设置 type="datetime" 或者 type="datetimerange" 属性之后，可以通过 step 配置时间的步长，step 是一个对象，包含三个属性：hour、minute、second，分别用来配置时、分、秒的步长',
'en-US': 'Native attribute'
},
mode: ['pc'],
pcDemo: 'step'
},
{
name: 'suffix-icon',
type: 'Component',
defaultValue: 'IconCalendar',
desc: {
'zh-CN': '自定义选择器的后置图标',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'custom-suffix-icon'
},
{
name: 'time-arrow-control',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN':
'通过箭头按钮控制时间选择，当 type 为 datetime、datetimerange 时使用，默认为 通过鼠标滚轮滚动选择时间',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'step'
},
{
name: 'time-format',
type: 'string',
defaultValue: "'HH:mm:ss'",
desc: {
'zh-CN': '当自定义的 format 格式无法自动区分时间与日期时，可配置该选项用来辅助确定格式',
'en-US':
'If the user-defined format cannot automatically distinguish the time and date, you can set this parameter to assist in determining the format.'
},
mode: ['pc'],
pcDemo: 'format'
},
{
name: 'tip',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '过滤器模式下显示的提示信息',
'en-US':
'The specific time of the current day used by the selected date during range selection; The optional value of this attribute is see date format'
},
mode: ['pc'],
pcDemo: 'filter-mode'
},
{
name: 'type',
typeAnchorName: 'IType',
type: 'IType',
defaultValue: "'date'",
desc: {
'zh-CN': '显示类型，该属性的可选值可参考 IType 类型声明',
'en-US':
'Display type; The optional value of this attribute is year / month / dates / week / daterange / date / datetime / datetimerange / monthrange'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'unlink-panels',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'unlink-panels'
},
{
name: 'validate-event',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '设置日期选择器在输入时是否会触发表单校验',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'validate-event'
},
{
name: 'value-format',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '指定绑定值的格式，不指定则绑定值为 Date 对象',
'en-US':
'Specifies the format of the binding value. If this parameter is not specified, the binding value is Date'
},
mode: ['pc'],
pcDemo: 'format'
}
],
events: [
{
name: 'blur',
type: '() => void',
desc: {
'zh-CN': '当 input 失去焦点时触发',
'en-US': 'This event is triggered when the input loses focus; blur() {\n//do something you want...\n}'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'change',
type: '(value: Date) => void',
desc: {
'zh-CN': '用户确认选定的值时触发',
'en-US':
'This event is triggered when the user confirms the selected value. change (arg1) {//arg1 is the changed date or date set of datepicker}'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'focus',
type: '() => void',
desc: {
'zh-CN': '当 input 获得焦点时触发',
'en-US':
'This event is triggered when the input is focused. focus(arg1}{\n// arg1 = to component vue instance\n//do something you want...\n}'
},
mode: ['pc'],
pcDemo: 'events'
}
],
methods: [
{
name: 'focus',
type: '() => void',
desc: {
'zh-CN': '使 input 获取焦点',
'en-US': 'Enable input to focus.'
},
mode: ['pc'],
pcDemo: ''
}
],
slots: [],
format: [
{
name: 'a',
desc: {
'zh-CN': 'am/pm',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'A',
desc: {
'zh-CN': 'AM/PM',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'd',
desc: {
'zh-CN': '日，不补0',
'en-US': ''
},
mode: ['pc']
},
{
name: 'dd',
desc: {
'zh-CN': '日',
'en-US': ''
},
mode: ['pc']
},
{
name: 'h',
desc: {
'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用，不补0',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'H',
desc: {
'zh-CN': '小时，24小时制，不补0',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'hh',
desc: {
'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'HH',
desc: {
'zh-CN': '小时，24小时制',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'm',
desc: {
'zh-CN': '分钟，不补0',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'M',
desc: {
'zh-CN': '月，不补0',
'en-US': ''
},
mode: ['pc']
},
{
name: 'mm',
desc: {
'zh-CN': '分钟',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'MM',
desc: {
'zh-CN': '月',
'en-US': ''
},
mode: ['pc']
},
{
name: 's',
desc: {
'zh-CN': '秒，不补0',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'ss',
desc: {
'zh-CN': '秒',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'W',
desc: {
'zh-CN': '周，不补0',
'en-US': ''
},
mode: ['pc']
},
{
name: 'WW',
desc: {
'zh-CN': '周',
'en-US': ''
},
mode: ['pc']
},
{
name: 'yyyy',
desc: {
'zh-CN': '年',
'en-US': ''
},
mode: ['pc']
}
]
}
],
types: [
{
name: 'IPickerOptions',
type: 'interface',
code: `
interface IPickerOptions {
// 每周的第一天是星期几，默认值是7，也就是星期天
firstDayOfWeek: number
// 实现部分禁用，此时只能选择一部分日期
disabledDate: (time: Date) => boolean
// 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
onPick: (range: { minDate: Date, maxDate: Date }) => void
// 快捷选项
shortcuts: {
text: string
onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
type: 'startFrom' | 'EndAt'
startDate: Date
endDate: Date
}[]
}
`
},
{
name: 'IType',
type: 'type',
code: `
type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'year' | 'years' | 'yearrange'
`
}
]
}

197
examples/sites/demos/apis/dept.js Normal file
View File

@ -0,0 +1,197 @@
export default {
mode: ['pc'],
apis: [
{
name: 'dept',
type: 'component',
props: [
{
name: 'autoSelect',
type: 'Boolen',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN': '设置当部门信息仅一条数据时时自动补全选中',
'en-US':
'Specify that when there is only one piece of department information, the system automatically completes the information.'
},
mode: ['pc'],
pcDemo: 'auto-select'
},
{
name: 'beforeConfirm',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '确认之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止弹框关闭',
'en-US': 'If false is returned or Promise is returned and rejected, the dialog box is not closed.'
},
mode: ['pc'],
pcDemo: 'before-confirm'
},
{
name: 'disabled',
type: 'Boolen',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '禁用',
'en-US': 'Disabled'
},
mode: ['pc'],
pcDemo: 'dynamic-disable'
},
{
name: 'fetchDept',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义部门搜索查询接口，返回一个Promise对象，未使用框架服务时必填',
'en-US':
'The interface for querying customized departments returns a Promise object. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetchDeptByValue',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义部门详情查询接口，返回一个Promise对象，未使用框架服务时必填',
'en-US':
'The interface for querying customized department details returns a Promise object. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetchDeptList',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义部门列表查询接口，返回一个Promise对象，未使用框架服务时必填',
'en-US':
'The interface for querying the customized department list returns a Promise object. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'size',
type: 'string ',
defaultValue: '',
desc: {
'zh-CN': '设置组件大小',
'en-US': 'Set the component size'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'title',
type: 'string ',
defaultValue: '',
desc: {
'zh-CN': '设置弹窗标题',
'en-US': 'Set the pop-up window title.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'value',
type: 'string ',
defaultValue: '',
desc: {
'zh-CN': '设置部门组件的初始化时的显示值。',
'en-US': 'Set the display value of the department component during initialization.'
},
mode: ['pc'],
pcDemo: 'size'
}
],
events: [
{
name: 'cancel',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '点击取消按钮触发的事件。',
'en-US': 'This event is triggered when the Cancel button is clicked.'
},
mode: ['pc'],
pcDemo: 'dept-cancel'
},
{
name: 'change',
type: 'Function(value)',
defaultValue: '',
desc: {
'zh-CN': '选择的部门值改变时触发，回调参数为改变后的部门编码。;value: 改变后的值',
'en-US':
'This event is triggered when the selected department value changes. The callback parameter is the new department code. ; value: changed value'
},
mode: ['pc'],
pcDemo: 'dept-events'
},
{
name: 'close',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '关闭部门弹出框时触发该事件。',
'en-US': 'This event is triggered when a department dialog box is closed.'
},
mode: ['pc'],
pcDemo: 'dept-close'
},
{
name: 'confirm',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '点击确认按钮触发的事件。',
'en-US': 'This event is triggered when the OK button is clicked.'
},
mode: ['pc'],
pcDemo: 'dept-confirm'
},
{
name: 'open',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '点击弹出弹框触发的事件。',
'en-US': 'This event is triggered when a user clicks a dialog box that is displayed.'
},
mode: ['pc'],
pcDemo: 'dept-events'
},
{
name: 'selected',
type: 'Function(value)',
defaultValue: '',
desc: {
'zh-CN': '点击选中部门触发的事件，回调参数为选中的部门编码。',
'en-US':
'This event is triggered when you click a selected department. The callback parameter is the selected department code.'
},
mode: ['pc'],
pcDemo: 'dept-selected'
}
],
methods: [],
slots: [
{
name: 'hrapprover',
defaultValue: '',
desc: {
'zh-CN': '权签人',
'en-US': 'Approval'
},
mode: ['pc'],
pcDemo: 'slot-hrapprover'
}
]
}
]
}

126
examples/sites/demos/apis/detail-page.js Normal file
View File

@ -0,0 +1,126 @@
export default {
mode: ['pc'],
apis: [
{
name: 'detail-page',
type: 'component',
props: [
{
name: 'cancel-button',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'dialog-title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
'en-US': "Personalize pop-up title, default is'Personalized title'"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'label-title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'modelValue / v-model',
typeAnchorName: 'IDetailPageItem',
type: 'IDetailPageItem[]',
defaultValue: '',
desc: {
'zh-CN': '设置表头详情栏的数据',
'en-US': 'Set the data in the table header details column'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'save-button',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'text-split',
type: 'string',
defaultValue: "'---'",
desc: {
'zh-CN': '详情栏标题分隔符',
'en-US': 'Details column title separator'
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'tips',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "详情栏标, 默认为 '数据'",
'en-US': "Details field, default value is' Data '"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
},
{
name: 'value-title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
'en-US':
"Personalized pop-up window header text operation column field, The default value is'Click to hide'"
},
mode: ['pc'],
pcDemo: 'custom-show-text'
}
],
events: [],
methods: [],
slots: []
}
],
types: [
{
name: 'IDetailPageItem',
type: 'interface',
code: `interface IDetailPageItem {
label: string
value: string
hidden?: boolean
}`
}
]
}

368
examples/sites/demos/apis/dialog-box.js Normal file
View File

@ -0,0 +1,368 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'dialog-box',
type: 'component',
props: [
{
name: 'append-to-body',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': 'DialogBox 本身是否插入到 body 上，嵌套的 Dialog 必须指定该属性并赋值为 true',
'en-US': 'Indicates whether to enable the pop-up slide-out function. The default value is false'
},
mode: ['pc'],
pcDemo: 'secondary-dialog'
},
{
name: 'center',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置为 true 时 弹出框的头部与底部内容会自动居中',
'en-US': 'When set to true, the head and bottom content of the pop-up box will automatically center'
},
mode: ['pc'],
pcDemo: 'center'
},
{
name: 'close-on-click-modal',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否可以通过点击遮罩层关闭弹窗',
'en-US': 'Close the pop-up window by clicking on the mask layer'
},
mode: ['pc'],
pcDemo: 'close-on-click-modal'
},
{
name: 'close-on-press-escape',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否可以通过 ESC 键关闭遮罩层',
'en-US':
'Indicates whether the mask layer is applied to the body. If the value is false, the mask layer is applied to the parent element of DialogBox'
},
mode: ['pc'],
pcDemo: 'close-on-press-escape'
},
{
name: 'destroy-on-close',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '关闭时销毁对话框内的元素，而非隐藏',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'destroy-on-close'
},
{
name: 'dialog-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义配置弹窗类名',
'en-US': 'Customized configuration pop-up window class name'
},
mode: ['pc'],
pcDemo: 'dialog-width'
},
{
name: 'draggable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否开启弹窗的拖拽功能',
'en-US': 'Whether to enable the drag and drop function of pop ups, with a default value of false'
},
mode: ['pc'],
pcDemo: 'draggable'
},
{
name: 'fullscreen',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '弹出框是否全屏',
'en-US': 'Is the pop-up full screen'
},
mode: ['pc'],
pcDemo: 'fullscreen'
},
{
name: 'is-form-reset',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '关闭弹窗，默认重置表单数据',
'en-US': 'Close the pop-up window and reset the form data by default'
},
mode: ['pc'],
pcDemo: 'form-in-dialog'
},
{
name: 'lock-scroll',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': 'Dialog 弹出时是否禁用滚动条',
'en-US': 'Indicates whether to display the pop-up header. The default value is true'
},
mode: ['pc'],
pcDemo: 'lock-scroll'
},
{
name: 'max-height',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '实现窗口最大高度',
'en-US': 'Achieve the maximum height of the window'
},
mode: ['pc'],
pcDemo: 'form-in-dialog'
},
{
name: 'modal',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否启用遮罩层',
'en-US': 'Is the mask layer enabled'
},
mode: ['pc'],
pcDemo: 'no-modal'
},
{
name: 'modal-append-to-body',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '遮罩层是否应用到 body 上，为 false 时遮罩层会应用到 DialogBox 的父元素上',
'en-US':
'Indicates whether the DialogBox itself is inserted into the body. This attribute must be specified and set to true for nested Dialogs'
},
mode: ['pc'],
pcDemo: 'right-dialog'
},
{
name: 'resize',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '实现窗口最大化',
'en-US': 'Maximize windows'
},
mode: ['pc'],
pcDemo: 'form-in-dialog'
},
{
name: 'right-slide',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否开启弹出右侧滑出功能',
'en-US': 'Whether to disable the scroll bar when a log is displayed'
},
mode: ['pc'],
pcDemo: 'right-dialog'
},
{
name: 'show-close',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示关闭按钮',
'en-US': 'Is the close button displayed'
},
mode: ['pc'],
pcDemo: 'hidden-close-buttons'
},
{
name: 'show-header',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示弹窗头部 header',
'en-US': 'Pop-up dialog box title'
},
mode: ['pc'],
pcDemo: 'hidden-header'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '弹出框标题',
'en-US':
'Height between the pop-up box and the top of the window. The default value is 15% of the screen height'
},
mode: ['pc'],
pcDemo: 'custom-dialog-title'
},
{
name: 'top',
type: 'string',
defaultValue: '15vh',
desc: {
'zh-CN': '设置弹出框距离窗口顶部的高度',
'en-US': 'Display and close pop-up boxes'
},
mode: ['pc'],
pcDemo: 'dialog-top-height'
},
{
name: 'visible',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '控制弹出框显示与关闭',
'en-US': 'Control pop-up display and closing'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'width',
type: 'string',
defaultValue: '500px',
desc: {
'zh-CN': '弹出框的宽度',
'en-US': 'Wideness of the dialog box that is displayed'
},
mode: ['pc'],
pcDemo: 'dialog-width'
}
],
events: [
{
name: 'before-close',
type: '(arg:() => void) => void',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 关闭弹窗前，执行的事件',
'en-US': 'Event executed before a dialog window is closed.'
},
mode: ['pc'],
pcDemo: 'draggable'
},
{
name: 'close',
type: '() => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 关闭的回调',
'en-US': 'Dialog disabled callback; Dialog closing callback; No arguments'
},
mode: ['pc'],
pcDemo: 'open-close-events'
},
{
name: 'closed',
type: '() => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 关闭动画结束时的回调',
'en-US': 'Dialog closes the callback when the animation ends. No arguments'
},
mode: ['pc'],
pcDemo: 'open-close-events'
},
{
name: 'drag-end',
type: '(arg) => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 拖拽结束事件;arg包含弹窗的位置等信息',
'en-US': 'Dialog drag end event; arg:event (including the location of the pop-up window)'
},
mode: ['pc'],
pcDemo: 'draggable'
},
{
name: 'drag-move',
type: '(arg) => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 拖拽移动事件;arg包含弹窗的位置等信息',
'en-US': 'Dialog dragging and moving event; arg:event (including the location of the pop-up window)'
},
mode: ['pc'],
pcDemo: 'draggable'
},
{
name: 'drag-start',
type: '(arg) => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 拖拽开始事件;arg包含弹窗的位置等信息',
'en-US': 'Dialog drag start event; arg:event (including the location of the pop-up window)'
},
mode: ['pc'],
pcDemo: 'draggable'
},
{
name: 'open',
type: '() => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 打开的回调',
'en-US': 'Dialog open callback; Dialog open callback; No arguments'
},
mode: ['pc'],
pcDemo: 'open-close-events'
},
{
name: 'opened',
type: '() => {}',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 打开动画结束时的回调',
'en-US': 'Dialog: callback when the animation ends; No arguments'
},
mode: ['pc'],
pcDemo: 'open-close-events'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 的内容',
'en-US': 'Dialog content'
},
mode: ['pc'],
pcDemo: 'custom-dialog-content'
},
{
name: 'footer',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 按钮操作区的内容',
'en-US': 'Dialog button operation area content'
},
mode: ['pc'],
pcDemo: 'custom-dialog-footer'
},
{
name: 'title',
defaultValue: '',
desc: {
'zh-CN': 'Dialog 标题区的内容',
'en-US': 'Dialog content in the title area'
},
mode: ['pc'],
pcDemo: 'custom-dialog-title'
}
]
}
]
}

642
examples/sites/demos/apis/dialog-select.js Normal file
View File

@ -0,0 +1,642 @@
export default {
mode: ['pc'],
apis: [
{
name: 'dialog-select',
type: 'component',
props: [
{
mode: []
},
{
name: 'before-close',
type: '() => boolean',
defaultValue: '',
desc: {
'zh-CN': '弹窗关闭前的回调，返回 false 会阻止弹窗关闭',
'en-US': 'Close the pop-up window. The form data is reset by default.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'dialog-op',
typeAnchorName: 'IDialogOption',
type: 'IDialogOption',
defaultValue: '{}',
desc: {
'zh-CN': '用于配置 DialogBox 对话框组件的属性，对话框事件和插槽已透传',
'en-US': 'Whether to display the close button'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'grid-op',
typeAnchorName: 'IGridOption',
type: 'IGridOption',
defaultValue: '{}',
desc: {
'zh-CN': '表格场景时，配置 Grid 组件的属性',
'en-US': 'Indicates whether to enable the drag function for pop-up windows. The default value is false.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'lookup-method',
type: '() => Promise',
defaultValue: '',
desc: {
'zh-CN': '初始化选中数据的加载方法',
'en-US':
'Indicates whether pop-up windows can be closed by clicking the mask layer. The default value is true. You can set modal-closable="false" on the tag. The pop-up windows cannot be closed by clicking the mask layer.'
},
mode: ['pc'],
pcDemo: 'nest-grid-mult'
},
{
name: 'main-height',
type: 'number',
defaultValue: '290',
desc: {
'zh-CN': '配置表格或树区域的高度',
'en-US': 'Specifies whether the mask layer can be disabled by pressing ESC.'
},
mode: ['pc'],
pcDemo: 'nest-grid-mult'
},
{
name: 'multi',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否多选',
'en-US':
'Indicates whether the mask layer is applied to the body. If the value is false, the mask layer is applied to the parent element of DialogBox.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'pager-op',
typeAnchorName: 'IPagerOption',
type: 'IPagerOption',
defaultValue:
"<pre>{\n currentPage: 1,\n pageSize: 10,\n pageSizes: [10, 20, 30, 40, 50, 100],\n total: 0,\n layout: 'total, prev, pager, next, jumper'\n}</pre>",
desc: {
'zh-CN': '使用表格展示数据时，属性 pagerOp 用于配置 Pager 分页组件的属性，分页事件已透传',
'en-US':
'Indicates whether the DialogBox itself is inserted into the body. This attribute must be specified and set to true for nested Dialogs.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'popseletor',
type: 'string',
defaultValue: "'grid'",
desc: {
'zh-CN': "弹窗内展示数据的组件类型，目前支持：'grid' / 'tree'",
'en-US': 'Indicates whether to enable the pop-up slide-out function. The default value is false.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'remote-search',
type: '() => Promise',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，配置表格分页查询操作函数；使用树展示数据时，配置通过pid查询所有子数据的方法',
'en-US': 'Whether to disable the scroll bar when a log is displayed.'
},
mode: ['pc'],
pcDemo: 'nest-grid-mult'
},
{
name: 'selected-box-op',
typeAnchorName: 'ISelectedBoxOption',
type: 'ISelectedBoxOption',
defaultValue: '{}',
desc: {
'zh-CN': '使用表格展示数据时，属性 selectedBoxOp 用于配置 SelectedBox 已选栏组件的属性，已选栏插槽已透传',
'en-US': 'Indicates whether to display the pop-up header. The default value is true.'
},
mode: ['pc'],
pcDemo: 'nest-grid-mult'
},
{
name: 'show-pager',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '使用表格展示数据时，是否显示分页组件',
'en-US': 'Pop-up dialog box title.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'show-selected-box',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '使用表格展示数据时，是否显示已选栏组件',
'en-US':
'Height between the pop-up box and the top of the window. The default value is 15% of the screen height.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'text-field',
type: 'string',
defaultValue: "'label'",
desc: {
'zh-CN': '数据项的显示值字段',
'en-US': 'Wideness of the dialog box that is displayed.'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'text-split',
type: 'string',
defaultValue: "'/'",
desc: {
'zh-CN': '多选时用于拼接数据项的 label 字段 ',
'en-US': 'Customized configuration pop-up window class name'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'tree-op',
typeAnchorName: 'ITreeOption',
type: 'ITreeOption',
defaultValue: '{}',
desc: {
'zh-CN': '使用树展示数据时，树组件的配置对象',
'en-US': 'When using a tree to display data, the configuration object of the tree component'
},
mode: ['pc'],
pcDemo: 'nest-tree-multi'
},
{
name: 'value-field',
type: 'string',
defaultValue: "'id'",
desc: {
'zh-CN': '数据项的选中值字段',
'en-US': 'Selected value fields for data items'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'value-split',
type: 'string',
defaultValue: "';'",
desc: {
'zh-CN': '多选时用于拼接数据项的选中值',
'en-US': 'The selected value used for concatenating data items during multiple selection'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'visible',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '控制弹出框显示与关闭',
'en-US': 'Control pop-up display and closing'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
}
],
events: [
{
name: 'before-page-change',
typeAnchorName: 'IBeforeChangeParam',
type: '(beforeChangeParam:IBeforeChangeParam) => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 Pager 的 before-page-change 事件',
'en-US': 'Before page change event of the transparent sub component Pager'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'change',
typeAnchorName: 'IChangeParam',
type: '(changeParam:IChangeParam) => void',
defaultValue: '',
desc: {
'zh-CN': '监听弹窗选择的值发生变化的事件',
'en-US': 'Event where the value selected in the monitoring pop-up changes'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'close',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 close 事件',
'en-US': 'Close event for transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'closed',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 closed 事件',
'en-US': 'The closed event of the transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'current-change',
type: '(currentPage: number) => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 Pager 的 current-change 事件',
'en-US': 'The current change event of the transparent sub component Pager'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'drag-end',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 drag-end 事件',
'en-US': 'The drag end event of the transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'drag-move',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 drag-move 事件',
'en-US': 'The drag move event of the transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'drag-start',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 drag-start 事件',
'en-US': 'The drag start event of the transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'next-click',
type: '(currentPage: number) => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 Pager 的 next-click 事件',
'en-US': 'Next click event for transparent sub component Pager'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'open',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 open 事件',
'en-US': 'Open event for transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'opened',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 DialogBox 的 opened 事件',
'en-US': 'The opened event of the transparent sub component DialogBox'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'prev-click',
type: '(currentPage: number) => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 Pager 的 prev-click 事件',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'The pre click event of the transparent sub component Pager'
},
{
name: 'size-change',
type: '(pageSize: number) => void',
defaultValue: '',
desc: {
'zh-CN': '透传子组件 Pager 的 size-change 事件',
'en-US': 'The size change event of the transparent sub component Pager'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
}
],
methods: [
{
name: 'queryGridData',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，加载表格数据的方法',
'en-US': 'The method of loading table data when using tables to display data'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
}
],
slots: [
{
name: 'button',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义已选栏的自定义按钮区域',
'en-US': 'When displaying data in a table, customize the custom button area of the selected column'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'clear',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义已选栏的清空按钮区域',
'en-US': 'When displaying data in a table, customize the clear button area of the selected column'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'close',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义已选栏的选项的删除按钮',
'en-US': 'Customize the delete button for the selected column options when displaying data in a table'
},
mode: ['pc'],
pcDemo: 'nest-tree-multi'
},
{
name: 'footer',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '自定义弹窗底部',
'en-US': 'Custom Pop Up Bottom'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'option',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义已选栏的选项',
'en-US': 'Customize options for selected columns when displaying data in a table'
},
mode: ['pc'],
pcDemo: 'nest-tree-multi'
},
{
name: 'search',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义搜索区域',
'en-US': 'Customize the search area when displaying data in a table'
},
mode: ['pc'],
pcDemo: 'nest-grid-multi'
},
{
name: 'select',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '使用表格展示数据时，自定义已选栏的已选提示区域',
'en-US': 'When displaying data in a table, customize the selected prompt area for the selected column'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'title',
type: 'Slot',
defaultValue: '',
desc: {
'zh-CN': '自定义弹窗标题',
'en-US': 'Custom pop-up title'
},
mode: ['pc'],
pcDemo: ''
}
]
}
],
types: [
{
name: 'IDialogOption',
type: 'interface',
code: `
interface IDialogOption {
// 设置弹出框距离窗口顶部的高度，默认为 15vh
top: string,
// 弹出框的宽度,默认 500px
width: string
// 弹出框标题
title: string
beforeClose: () => boolean
// 自定义配置弹窗类名
dialogClass: string
}
`
},
{
name: 'IGridOption',
type: 'interface',
code: `
interface IGridOption {
// 表格列配置
columns: IColumnConfig[]
// 表格列数据
data: []
// 表格多选配置
selectConfig: {
// 翻页操作是否保留历史选择数据
reserve: boolean
// 嵌套表格多选时，设置默认表格选中的数据
checkRowKeys: Array<string|number>
}
// 表格单选配置
radioConfig: {
//嵌套表格单选时，设置默认表格选中的数据
checkRowKey: string|number
}
}
`
},
{
name: 'IColumnConfig ',
type: 'interface',
code: `
interface IColumnConfig {
type: 'index' | 'radio' | 'checkbox'
id: string
title: string
label: string
width: string | number
}
`
},
{
name: 'IPagerOption',
type: 'interface',
code: `
interface IPagerOption {
// 当前页，默认 1
currentPage: number
// 每页显示条目个数，默认 10
pageSize: number
// 每页显示个数选择器的选项设置，默认 [10, 20, 30, 40, 50, 100]
pageSizes: Array<number>
// 总条目数
total:number
// 分页布局，默认 'total, prev, pager, next, jumper'
layout: string
}
`
},
{
name: 'ISelectedBoxOption',
type: 'interface',
code: `
interface ISelectedBoxOption {
config: {
pkField: string
pkFieldType: string,
showField: Array<string>,
// 传 sortablejs 插件
plugin: () => void
}
}
`
},
{
name: 'ITreeOption',
type: 'interface',
code: `
interface ITreeOption {
// 树节点的唯一标识
nodeKey: string
pathSplit: string
props: {
// 默认为 children
children:string
// 默认为 label
label: string
// 默认为 isLeaf'
isLeaf: string
},
// 是否为父子严格模式
checkStrictly: boolean
// 相邻级节点间的水平缩进，单位为像素
baseIndent: number
// 加载子树数据的方法
load: (node, resolve)=> void
// 使用树展示数据时，用于配置搜索过滤接口
queryPidsBySearch: () => ITreeNodeData
// 使用树展示数据时，用于配置初始化过滤接口
queryPidsByIds: () => ITreeNodeData
// 默认勾选的节点的keys
defaultCheckedKeys: Array<string|number>
}
`
},
{
name: 'ITreeNodeData',
type: 'interface',
code: `
interface ITreeNodeData {
// node-key='id' 设置节点的唯一标识
"id": number|string
// 节点显示文本
"label": string
// 子节点
"children"?: ITreeNodeData[]
}
`
},
{
name: 'IChangeParam',
type: 'interface',
code: `
// 树组件的节点数据信息
interface ItreeData = {
id: number|string
label: string
pid: number|string
}
// 用户自定义的表格行数据
interface IGridData = {
id: number|string
[otherKeys] :any
}
interface IChangeParam = {
values: Array<number|string>|number|string
texts: string|Array<string>
selectedDatas: ItreeData[]|IGridData[]
}
`
},
{
name: 'IBeforeChangeParam',
type: 'interface',
code: `interface IBeforeChangeParam {
callback: () => void // 回调函数，调用则继续本次变更
rollback: () => void // 回滚函数，调用则阻止本次变更
newPage: number // 变更后所在页
newPageSize: number // 变更后分页大小
currentPage: number // 当前所在页
currentPageSize: number // 当前分页大小
}`
}
]
}

145
examples/sites/demos/apis/dialogbox.js Normal file
View File

@ -0,0 +1,145 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'Dialogbox',
type: 'component',
props: [
{
mode: []
},
{
name: 'close-on-click-modal',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN':
'<p>是否可以通过点击遮罩层关闭弹窗，默认为 true ,可以在标签上设置:close-on-click-modal="false"不能通过点击遮罩层关闭弹窗。</p>',
'en-US': 'Is show left arrow'
},
mode: ['mobile'],
mobileDemo: 'close-on-click-modal'
},
{
name: 'lock-scroll',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog弹出时是否禁用滚动条,该属性默认为true</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: 'lock-scroll'
},
{
name: 'modal-append-to-body',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN':
'<p>遮罩层是否应用到 body 上，为 false 时遮罩层会应用到 DialogBox 的父元素上，该属性默认为true</p>',
'en-US': 'Is show right text'
},
mode: ['mobile'],
mobileDemo: 'slot-title'
},
{
name: 'show-header',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '<p>是否显示弹窗头部 header，默认值为 true 。</p>',
'en-US': 'Is show left text'
},
mode: ['mobile'],
mobileDemo: 'show-header'
},
{
mode: []
},
{
name: 'visible',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>控制弹出框显示与关闭</p>',
'en-US': 'set main-title'
},
mode: ['mobile'],
mobileDemo: 'with-input'
}
],
events: [
{
mode: []
},
{
name: 'close',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 关闭的回调</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'events-open-close'
},
{
name: 'confirm',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 确定按钮的的回调</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'cancel-confirm'
},
{
name: 'open',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 打开的回调</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'events-open-close'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 的内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-title'
},
{
name: 'footer',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 按钮操作区的内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-footer'
},
{
name: 'title',
defaultValue: '',
desc: {
'zh-CN': '<p>Dialog 标题区的内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-title'
}
]
}
]
}

93
examples/sites/demos/apis/divider.js Normal file
View File

@ -0,0 +1,93 @@
export default {
mode: ['pc'],
apis: [
{
name: 'divider',
type: 'component',
props: [
{
name: 'border-style',
type: 'string',
defaultValue: "'solid'",
desc: {
'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
},
mode: ['pc'],
pcDemo: 'custom-style'
},
{
name: 'color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置分隔线的颜色',
'en-US': 'Set the color of the divider.'
},
mode: ['pc'],
pcDemo: 'custom-style'
},
{
name: 'content-background-color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置分割线文案的背景颜色',
'en-US': 'Set the background color of the divider content'
},
mode: ['pc'],
pcDemo: 'custom-style'
},
{
name: 'content-color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置分隔线文案的颜色',
'en-US': 'Set the color of the divider content'
},
mode: ['pc'],
pcDemo: 'custom-style'
},
{
name: 'content-position',
type: 'string',
defaultValue: "'center'",
desc: {
'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right',
'en-US':
'Set the position of the separator text, with optional values of left/center/right for this attribute'
},
mode: ['pc'],
pcDemo: 'content-position'
},
{
name: 'direction',
type: 'string',
defaultValue: "'horizontal'",
desc: {
'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical',
'en-US':
'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"'
},
mode: ['pc'],
pcDemo: 'direction'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'content-position'
}
]
}
]
}

295
examples/sites/demos/apis/drawer.js Normal file
View File

@ -0,0 +1,295 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'drawer',
type: 'component',
props: [
{
name: 'before-close',
type: '(type) => boolean',
defaultValue: '',
desc: {
'zh-CN': '弹窗关闭前的回调，返回 false 会阻止弹窗关闭',
'en-US': 'hook before close the drawer, and block close when return false'
},
mode: ['pc'],
pcDemo: 'before-close'
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '自定义 class 样式',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'dragable',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'dragable',
mfDemo: ''
},
{
name: 'flex',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '是否开启 flex 盒子布局，开启后内容区域元素自适应撑开高度，默认值为 false',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'lock-scroll',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'mask',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '控制遮罩层显示隐藏 ',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'mask',
mfDemo: ''
},
{
name: 'mask-closable',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'mask-closable',
mfDemo: ''
},
{
name: 'placement',
type: "'left' | 'right' | 'top' | 'bottom' ",
defaultValue: "'right'",
desc: {
'zh-CN': '添加 placement 属性设置抽屉的方向',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'placement',
mfDemo: ''
},
{
name: 'show-close',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '控制关闭图标显示',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'show-close'
},
{
name: 'show-footer',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '控制底部显示',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'show-footer',
mfDemo: ''
},
{
name: 'show-header',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '控制头部显示',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'show-header',
mfDemo: ''
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '面板标题',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'visible',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '控制抽屉显示与关闭',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'width',
type: 'string',
defaultValue: "'500px'",
desc: {
'zh-CN': '设置抽屉的宽度',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'width',
mfDemo: ''
},
{
name: 'z-index',
type: 'number',
defaultValue: '2000',
desc: {
'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'z-index'
}
],
events: [
{
name: 'close',
type: '()=> void',
defaultValue: '',
desc: {
'zh-CN': '关闭抽屉事件',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'close-event',
mfDemo: ''
},
{
name: 'confirm',
type: '()=> void',
defaultValue: '',
desc: {
'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'confirm-event',
mfDemo: ''
},
{
name: 'update:visible',
type: '',
defaultValue: '',
desc: {
'zh-CN': '面板显隐时触发',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [
{
name: 'close',
type: '',
defaultValue: '',
desc: {
'zh-CN': '关闭面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'confirm',
type: '',
defaultValue: '',
desc: {
'zh-CN': '确认并关闭面板',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '--',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'default-slot',
mfDemo: ''
},
{
name: 'footer',
type: '--',
defaultValue: '',
desc: {
'zh-CN': '底部插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'footer-slot',
mfDemo: ''
},
{
name: 'header',
type: '--',
defaultValue: '',
desc: {
'zh-CN': '头部插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'header-slot',
mfDemo: ''
},
{
name: 'header-right',
type: '--',
defaultValue: '',
desc: {
'zh-CN': '头部右侧插槽',
'en-US': ''
},
mode: ['pc', 'mobile-first'],
pcDemo: 'header-right-slot',
mfDemo: ''
}
]
}
]
}

117
examples/sites/demos/apis/drop-roles.js Normal file
View File

@ -0,0 +1,117 @@
export default {
mode: ['pc'],
apis: [
{
name: 'drop-roles',
type: 'component',
props: [
{
name: 'fetchCurrentRole',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义获取当前用户角色接口，未使用框架服务时必填',
'en-US':
'User-defined interface for obtaining the role of the current user. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fetchRole',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义获取角色列表接口，未使用框架服务时必填',
'en-US':
'User-defined API for obtaining the role list. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'fields',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义数据映射，未使用框架服务时必填',
'en-US': 'Customized data mapping. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'modelValue / v-model',
type: 'string , number',
defaultValue: '',
desc: {
'zh-CN': '设置文本显示的值。;绑定值',
'en-US': 'Sets the text display value. ;Bound Value'
},
mode: ['pc'],
pcDemo: 'change-role-event'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置输入框内的提示占位文本。',
'en-US': 'Set the placeholder text in the text box.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置组件大小',
'en-US': 'Set the component size'
},
mode: ['pc'],
pcDemo: 'size'
}
],
events: [
{
name: 'change',
defaultValue: '',
desc: {
'zh-CN': '当前角色切换后触发',
'en-US': 'This event is triggered after the current role is switched.'
},
mode: ['pc'],
pcDemo: 'change-role-event'
}
],
methods: [],
slots: []
}
]
}

127
examples/sites/demos/apis/drop-times.js Normal file
View File

@ -0,0 +1,127 @@
export default {
mode: ['pc'],
apis: [
{
name: 'drop-times',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: ' false',
desc: {
'zh-CN': '禁用状态',
'en-US': 'Disabled state'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'end',
type: 'number',
defaultValue: ' 1440',
desc: {
'zh-CN': '结束时间，以分钟计算',
'en-US': 'End time, in minutes. The default value is 1440.'
},
mode: ['pc'],
pcDemo: 'start-end-step'
},
{
name: 'modelValue / v-model',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'Set the component size. The value can be medium, small, or mini.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置输入框内的提示占位文本',
'en-US': 'Set the prompt placeholder text in the text box.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: ' true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US': 'Bound Value'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 DropTimes 下拉弹框添加的 class 类名',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'size',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '输入框尺寸',
'en-US': 'Class name added to the DropTimes drop-down list box'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'start',
type: 'number',
defaultValue: ' 0',
desc: {
'zh-CN': '开始时间，以分钟计算',
'en-US': 'Start time, in minutes. The default value is 0.'
},
mode: ['pc'],
pcDemo: 'start-end-step'
},
{
name: 'step',
type: 'number',
defaultValue: ' 15',
desc: {
'zh-CN': '间隔时间，以分钟计算',
'en-US': 'Interval, in minutes. The default value is 15.'
},
mode: ['pc'],
pcDemo: 'start-end-step'
}
],
events: [
{
name: 'change',
type: '(value: string) => void',
defaultValue: '',
desc: {
'zh-CN': '下拉切换当前时间后触发该事件',
'en-US': 'This event is triggered after the current time is switched by the pull-down button.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
methods: [],
slots: []
}
]
}

540
examples/sites/demos/apis/dropdown.js Normal file
View File

@ -0,0 +1,540 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'dropdown',
type: 'component',
props: [
{
name: 'border',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否展示边框。默认为 false。在 split-button 属性为 false 时生效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Is it disabled'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'disabled',
mfDemo: ''
},
{
name: 'hide-on-click',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '点击菜单项后是否收起菜单。默认点击后收起',
'en-US': 'Whether to collapse the menu after clicking on the menu item. Collapse after clicking by default'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'hide-on-click',
mfDemo: ''
},
{
name: 'hide-timeout',
type: 'number',
defaultValue: '150',
desc: {
'zh-CN': '延时多久收起下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
'en-US':
'How long is the delay in retracting the pull-down menu, in milliseconds. Note: Only valid when trigger is hover'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'trigger',
mfDemo: ''
},
{
name: 'inherit-width',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '下拉弹框的最小宽度是否继承触发源的宽度，默认不继承',
'en-US':
'Whether the minimum width of the dropdown pop-up inherit the width of the trigger source.It is not inherited by default'
},
mode: ['pc'],
pcDemo: 'inherit-width'
},
{
name: 'menu-options',
typeAnchorName: 'IMenuOption',
type: 'IMenuOption',
defaultValue:
'<pre>\n{\n options:[],\n textField:"label",\n popperClass:"",\n placement:"bottom-end"\n}\n</pre>',
desc: {
'zh-CN': '配置式且只使用 tiny-dropdown 组件时使用',
'en-US': 'Used when configuring and only using the tiny dropdown component'
},
mode: ['pc'],
pcDemo: 'options'
},
{
name: 'round',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '是否展示圆角。默认为 false。在 border 属性为 true 时生效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-icon',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示下拉触发源图标',
'en-US': 'Is the dropdown trigger source icon displayed'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'show-icon',
mfDemo: ''
},
{
name: 'show-self-icon',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '更多图标下拉菜单。默认值：false',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-timeout',
type: 'number',
defaultValue: '250',
desc: {
'zh-CN': '延时多久展开下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
'en-US':
'How long is the delay to expand the drop-down menu, in milliseconds. Note: Only valid when trigger is hover'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'trigger',
mfDemo: ''
},
{
name: 'single-button',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '下拉触发元素呈现为按钮组。',
'en-US': 'The drop-down trigger element is rendered as a button group.'
},
mode: ['mobile-first'],
mfDemo: 'button-dropdown'
},
{
name: 'size',
type: '"medium" | "small" | "mini"',
defaultValue: '',
desc: {
'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
'en-US': 'Menu size. Note: Only takes effect when split-button is true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: ''
},
{
name: 'split-button',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '下拉触发元素呈现为按钮',
'en-US': 'Dropdown trigger elements are presented as button groups'
},
mode: ['pc'],
pcDemo: 'split-button'
},
{
name: 'suffix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '下拉触发源图标',
'en-US': 'Dropdown trigger source icon'
},
mode: ['pc'],
pcDemo: 'show-icon'
},
{
name: 'tabindex',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '初始化触发元素的原生属性 tabindex',
'en-US': 'Initialize the native attribute tabindex of the triggering element'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'title',
type: 'string',
defaultValue: "'下拉菜单'",
desc: {
'zh-CN': '自定义触发源的文本',
'en-US': 'Text for custom trigger source'
},
mode: ['pc'],
pcDemo: 'options'
},
{
name: 'trigger',
type: "'hover' | 'click'",
defaultValue: "'hover'",
desc: {
'zh-CN': '触发下拉的方式',
'en-US': 'Trigger the dropdown method'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'trigger',
mfDemo: ''
},
{
name: 'type',
typeAnchorName: 'IButtonType',
type: 'IButtonType',
defaultValue: '',
desc: {
'zh-CN': '按钮类型。注意：只在 split-button 为 true 的情况下有效',
'en-US': 'Button type. Note: Only valid if split button is true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'split-button',
mfDemo: ''
},
{
name: 'visible-arrow',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '下拉弹框是否显示箭头，默认不显示',
'en-US': 'Indicates whether to display arrows. The default value is not displayed'
},
mode: ['pc'],
pcDemo: 'visible-arrow'
}
],
events: [
{
name: 'button-click',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '监听左侧按钮点击事件，仅 split-button 为 true 时生效',
'en-US': 'Listen for the left button click event, only effective when split-button is true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
},
{
name: 'item-click',
typeAnchorName: 'IItemClickParam',
type: '(data:IItemClickParam) => void',
defaultValue: '',
desc: {
'zh-CN': '监听点击菜单项事件',
'en-US': 'Listen for menu item click events'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
},
{
name: 'visible-change',
type: '(status:boolean) => void',
defaultValue: '',
desc: {
'zh-CN': '监听下拉框的显示或隐藏状态',
'en-US': 'Monitor the display or hidden status of the dropdown box'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '自定义触发源文本区域。 注意： 必须是一个元素或者或者组件',
'en-US': 'Customize the trigger source text area. Note: must be an element or component'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'dropdown',
type: '',
defaultValue: '',
desc: {
'zh-CN': '自定义下拉列表区域，通常使用 tiny-dropdown-menu 组件',
'en-US': 'Customize the dropdown list area, usually using the tiny dropdown menu component'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
}
]
},
{
name: 'dropdown-menu',
type: 'component',
props: [
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置弹出下拉自定义样式。',
'en-US': 'Set the custom style of the pop-up drop-down list.'
},
mode: ['mobile-first']
},
{
name: 'max-height',
type: 'Number | String',
defaultValue: '400',
desc: {
'zh-CN': '设置下拉最大高度。',
'en-US': 'Sets the maximum pull-down height. '
},
mode: ['mobile-first'],
mfDemo: 'max-height'
},
{
name: 'multi-stage',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置二级下拉菜单。',
'en-US': 'Sets the level-2 drop-down list. '
},
mode: ['mobile-first'],
mfDemo: 'multi-stage'
},
{
name: 'options',
typeAnchorName: 'IItemData',
type: 'IItemData []',
defaultValue: '[]',
desc: {
'zh-CN': '通过配置式设置菜单项的属性',
'en-US': 'Setting menu item properties through configuration'
},
mode: ['pc'],
pcDemo: 'options'
},
{
name: 'placement',
typeAnchorName: 'IPlacementType',
type: 'IPlacementType',
defaultValue: "'bottom-end'",
desc: {
'zh-CN': '菜单弹出位置',
'en-US': 'Menu pop-up location '
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '下拉弹框的类名，用于自定义样式',
'en-US': 'The class name of the dropdown pop-up box, used for customizing styles'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'text-field',
type: 'string',
defaultValue: "'label'",
desc: {
'zh-CN': '菜单项文本的字段,结合 options 属性使用',
'en-US': 'The field of menu item text, used in conjunction with the options attribute'
},
mode: ['pc'],
pcDemo: 'options'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '下拉弹框区域，通常使用 tiny-dropdown-item 组件',
'en-US': 'Dropdown the pop-up area, usually using the tiny-dropdown item component'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
]
},
{
name: 'dropdown-item',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Is it disabled'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'divided',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示分割线',
'en-US': 'Show split lines'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '内嵌图标',
'en-US': 'Embedded icon'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'item-data',
typeAnchorName: 'IItemData',
type: 'IItemData',
defaultValue: '',
desc: {
'zh-CN': '菜单项的配置信息',
'en-US': 'Configuration information for menu items'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '菜单项的文本',
'en-US': 'Text for menu items'
},
mode: ['pc'],
pcDemo: 'events'
},
{
name: 'level',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置二级下拉菜单标志',
'en-US': 'Sets the level-2 drop-down menu flag.'
},
mode: ['mobile-first']
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '菜单项文本区域',
'en-US': 'Menu item text area'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
]
}
],
types: [
{
name: 'IMenuOption',
type: 'interface',
code: `
interface IMenuOption {
options: IItemData[]
textField?: string
popperClass?: string
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
}
`
},
{
name: 'IItemClickParam',
type: 'interface',
code: `
interface IItemClickParam {
itemData: IItemData
// dropdownItem 组件的实例
vm: {
selected: boolean
textField: string
tipPosition: string
$el: HTMLElement
}
}
`
},
{
name: 'IItemData',
type: 'interface',
code: `
interface IItemData {
label?: string
disabled?: boolean
divided?: boolean
}
`
},
{
name: 'IButtonType',
type: 'type',
code: `
type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
`
},
{
name: 'IPlacementType',
type: 'type',
code: `
type IPlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
`
}
]
}

239
examples/sites/demos/apis/dropdownmenu.js Normal file
View File

@ -0,0 +1,239 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'DropdownMenu',
type: 'component',
props: [
{
name: 'active-color',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>标题和选项的选中态颜色</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'activeColor'
},
{
name: 'close-on-click-outside',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '<p>设置点击外部元素后关闭菜单,默认问true</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'closeOnClickOutside'
},
{
name: 'close-on-click-overlay',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '<p>设置点击遮罩层后关闭菜单，默认为true设置点击遮罩层后关闭菜单，默认为true</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'closeOnClickOverlay'
},
{
name: 'direction',
type: 'String',
defaultValue: 'down',
desc: {
'zh-CN': '<p>设置弹出框弹出框展开方向，默认为down</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'direction'
},
{
name: 'duration',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>设置弹出框的动画时长</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'duration'
},
{
name: 'overlay',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '<p>设置是否显示遮罩层，默认为true</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'overlay'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>定义菜单内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot'
}
]
},
{
name: 'DropdownItem',
type: 'component',
props: [
{
name: 'disabled',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>设置是否禁用，默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'disabled'
},
{
name: 'icon',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置菜单选项项左侧icon</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'icon'
},
{
name: 'options',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '<p>设置选项数据</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'screen-funnel'
},
{
name: 'title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>菜单项标题</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'screen-funnel'
},
{
name: 'title-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>标题类名</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'title-class'
},
{
name: 'type',
type: 'String',
defaultValue: 'selection',
desc: {
'zh-CN': '<p>设置菜单项类型，可选值为 filter | sort | selection,默认值为 selection</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'title-class'
},
{
name: 'value',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>当前选中项对应的 value，可以通过v-model双向绑定</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'activeColor'
}
],
events: [
{
name: 'change',
defaultValue: '',
desc: {
'zh-CN': '<p>点击选项时触发，type为 selection 时启用</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'event'
},
{
name: 'close',
defaultValue: '',
desc: {
'zh-CN': '<p>关闭菜单时触发</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'event'
},
{
name: 'open',
defaultValue: '',
desc: {
'zh-CN': '<p>打开菜单时触发</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'event'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>定义菜单内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot'
},
{
name: 'icon',
defaultValue: '',
desc: {
'zh-CN': '<p>当type为selection时选项左侧内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot'
},
{
name: 'title',
defaultValue: '',
desc: {
'zh-CN': '<p>当type为selection时选项内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot'
}
]
}
]
}

26
examples/sites/demos/apis/espace.js Normal file
View File

@ -0,0 +1,26 @@
export default {
mode: ['pc'],
apis: [
{
name: 'espace',
type: 'component',
props: [
{
name: 'data',
type: 'Array , object',
defaultValue: '',
desc: {
'zh-CN': '设置组件数据，数组对象中包含选项有 type、value、icon。type 的可选择值有：im、sip、mailto',
'en-US':
'Sets component data. The array object contains the options type, value, and icon. The value of type can be im, sip, or mailto'
},
mode: ['pc'],
pcDemo: 'support-open-espace'
}
],
events: [],
methods: [],
slots: []
}
]
}

172
examples/sites/demos/apis/exception.js Normal file
View File

@ -0,0 +1,172 @@
export default {
mode: ['mobile', 'mobile-first'],
apis: [
{
name: 'Exception',
type: 'component',
props: [
{
name: 'buttonText',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>按钮文字/p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'buttonText'
},
{
name: 'component-page',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '设置组件级空态',
'en-US': 'Set component-level empty state'
},
mode: ['mobile-first'],
mfDemo: 'component-empty'
},
{
name: 'exception-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置自定义类',
'en-US': 'Setting Custom Classes'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'exceptionClass',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义缺省页类名</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'exceptionClass'
},
{
name: 'imageUrl',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义图片</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'buttonText'
},
{
name: 'message',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>主图片文字，在图片下方</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'message'
},
{
name: 'page-empty',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '设置页面级空态',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'sub-message',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置二级标题',
'en-US': 'Set Level-2 Title'
},
mode: ['mobile-first'],
mfDemo: 'sub-message'
},
{
name: 'subMessage',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>副文本内容,在描述文字的下方</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'subMessage'
},
{
name: 'type',
type: 'String',
defaultValue: 'nodata',
desc: {
'zh-CN':
'<p>设置缺省页类型，默认为nodata,可选值有 weaknet || noperm || busy || build || weaknet || pcview</p>',
'en-US': 'display different button'
},
mode: ['mobile', 'mobile-first'],
mobileDemo: 'type',
mfDemo: 'page-empty'
}
],
events: [
{
name: 'click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '<p>点击按钮时触发，type 为 nodata 时启用</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'message'
}
],
methods: [],
slots: [
{
name: 'content',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>设置内容</p>',
'en-US': 'Click'
},
mode: ['mobile', 'mobile-first'],
mobileDemo: 'mobileexception',
mfDemo: 'content-slot'
},
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default Slot'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'footer',
defaultValue: '',
desc: {
'zh-CN': '<p>设置底部内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'mobileexception'
}
]
}
]
}

76
examples/sites/demos/apis/fall-menu.js Normal file
View File

@ -0,0 +1,76 @@
export default {
mode: ['pc'],
apis: [
{
name: 'fall-menu',
type: 'component',
props: [
{
name: 'data',
type: 'object | object[]',
defaultValue: '',
desc: {
'zh-CN': '设置瀑布菜单的数据。',
'en-US': 'Set the waterfall menu data. ;Set the data of the waterfall menu.'
},
mode: ['pc'],
pcDemo: 'data-resource'
}
],
events: [],
methods: [],
slots: [
{
name: 'left',
defaultValue: '',
desc: {
'zh-CN': '自定义左侧切换图标',
'en-US': 'Customize the switch icon on the left.'
},
mode: ['pc'],
pcDemo: 'custom-slider-icon'
},
{
name: 'level1',
defaultValue: '',
desc: {
'zh-CN': '自定义一级菜单',
'en-US': 'User-defined level-1 menu'
},
mode: ['pc'],
pcDemo: 'custom-menuitem'
},
{
name: 'level2',
defaultValue: '',
desc: {
'zh-CN': '自定义二级菜单',
'en-US': 'Customized level-2 menu'
},
mode: ['pc'],
pcDemo: 'custom-menuitem'
},
{
name: 'level3',
defaultValue: '',
desc: {
'zh-CN': '自定义三级菜单',
'en-US': 'Customized Level-3 Menu'
},
mode: ['pc'],
pcDemo: 'custom-menuitem'
},
{
name: 'right',
defaultValue: '',
desc: {
'zh-CN': '自定义右侧切换图标',
'en-US': 'Customize the switch icon on the right.'
},
mode: ['pc'],
pcDemo: 'custom-slider-icon'
}
]
}
]
}

1088
examples/sites/demos/apis/file-upload.js Normal file
View File

File diff suppressed because it is too large Load Diff

83
examples/sites/demos/apis/filter-bar.js Normal file
View File

@ -0,0 +1,83 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'FilterBar',
type: 'component',
props: [
{
name: 'data',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '过滤栏列表数据。',
'en-US': 'Filter bar list data.'
},
mode: ['mobile-first'],
mfDemo: 'basic-usage'
},
{
name: 'v-model',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '绑定值',
'en-US': 'Bind Value'
},
mode: ['mobile-first'],
mfDemo: 'basic-usage'
}
],
events: [
{
name: 'click',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '过滤项点击事件。',
'en-US': 'Indicates the click event of a filtering item.'
},
mode: ['mobile-first'],
mfDemo: 'readonly'
}
],
methods: [
{
name: 'click(index)',
type: '',
defaultValue: '',
desc: {
'zh-CN': '过滤项点击方法，index 是当前项索引',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '过滤项插槽。',
'en-US': 'Filter item slot.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'icon',
type: '',
defaultValue: '',
desc: {
'zh-CN': '组件右侧图标插槽。',
'en-US': 'Icon slot on the right of the component.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
}
]
}
]
}

151
examples/sites/demos/apis/filter-panel.js Normal file
View File

@ -0,0 +1,151 @@
export default {
mode: ['pc'],
apis: [
{
name: 'filter-panel',
type: 'component',
props: [
{
name: 'blank',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '将过滤器背景设置为透明',
'en-US': 'Set Filter Background to Transparent'
},
mode: ['pc'],
pcDemo: 'tip'
},
{
mode: []
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Whether to disable'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '标题',
'en-US': 'The title'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'placement',
typeAnchorName: 'popover#IPopperPlacement',
type: 'IPopperPlacement',
defaultValue: "'bottom-start'",
desc: {
'zh-CN': '下拉面板位置，可选值请参考popover组件的同属性',
'en-US':
'Drop down panel position, optional values please refer to the same properties of the popover component'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '下拉面板是否添加到body元素中',
'en-US': 'Indicates whether to add the drop-down panel to the body element'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '下拉面板的class',
'en-US': 'Class in the drop-down panel'
},
mode: ['pc'],
pcDemo: 'popper-class'
},
{
name: 'tip',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '标题右侧的提示信息',
'en-US': 'Message on the right of the title'
},
mode: ['pc'],
pcDemo: 'tip'
},
{
name: 'value',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '显示的值',
'en-US': 'Displayed Values'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [
{
name: 'handle-clear',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '清除按钮点击事件',
'en-US': 'Clear button click event'
},
mode: ['pc'],
pcDemo: 'event'
},
{
name: 'visible-change',
type: '(visible: boolean) => void',
defaultValue: '',
desc: {
'zh-CN': '下拉面板显示隐藏事件',
'en-US': 'The drop-down panel displays hidden events'
},
mode: ['pc'],
pcDemo: 'event'
}
],
methods: [
{
name: 'hide',
type: '() => void',
desc: {
'zh-CN': '隐藏下拉面板的方法',
'en-US': 'How to hide the drop-down panel'
},
mode: ['pc'],
pcDemo: 'manual-hide'
}
],
slots: [
{
name: 'default',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default Slot'
},
mode: ['pc'],
pcDemo: 'code'
}
]
}
]
}

158
examples/sites/demos/apis/filter.js Normal file
View File

@ -0,0 +1,158 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'Filter',
type: 'component',
props: [
{
name: 'column-num',
type: 'Number',
defaultValue: '3',
desc: {
'zh-CN': '面板每行的列数，默认值为 3。',
'en-US': 'Number of columns in each row of the panel. The default value is 3.'
},
mode: ['mobile-first'],
mfDemo: 'column-num'
},
{
name: 'custom-class',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '自定义组件 class 样式。',
'en-US': 'Customize the class style of the component.'
},
mode: ['mobile-first']
},
{
name: 'data',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '过滤列表数据。',
'en-US': 'Customized text of the close button'
},
mode: ['mobile-first'],
mfDemo: 'basic-usage'
},
{
name: 'filter-group',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '过滤组列表',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'filter-value',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '过滤组绑定的值。',
'en-US': 'Indicates the value bound to the filtering group.'
},
mode: ['mobile-first'],
mfDemo: 'filter-group'
},
{
name: 'manual',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '过滤选项自定义对接外部组件，一般和 panel 面板事件一起使用。',
'en-US':
'Filtering options are customized to connect to external components. Generally, the filtering options are used together with panel events.'
},
mode: ['mobile-first'],
mfDemo: 'manual'
},
{
name: 'panel-class',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '自定义组件面板 class 样式。',
'en-US': 'Customize the Palette class style.'
},
mode: ['mobile-first']
},
{
name: 'v-model',
type: 'Array',
defaultValue: '[]',
desc: {
'zh-CN': '绑定值',
'en-US': 'Bind Value'
},
mode: ['mobile-first'],
mfDemo: 'basic-usage'
}
],
events: [
{
name: 'cancel',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '关闭面板时触发的事件。',
'en-US': 'Event triggered when a panel is closed.'
},
mode: ['mobile-first']
},
{
name: 'panel',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '打开面板时触发的事件。',
'en-US': 'Event triggered when a panel is opened.'
},
mode: ['mobile-first'],
mfDemo: 'manual'
}
],
methods: [],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '过滤项插槽。',
'en-US': 'Filter item slot.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'footer',
type: '',
defaultValue: '',
desc: {
'zh-CN': '面板底部按钮组插槽，提供了 cancel、reset、confirm 方法。',
'en-US':
'Button group slot at the bottom of the panel, which provides the cancel, reset, and confirm methods.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
},
{
name: 'icon',
type: '',
defaultValue: '',
desc: {
'zh-CN': '过滤图标插槽，提供了参数 active，index。',
'en-US': 'Filter icon slot. The active and index parameters are provided.'
},
mode: ['mobile-first'],
mfDemo: 'slot'
}
]
}
]
}

24
examples/sites/demos/apis/floatbar.js Normal file
View File

@ -0,0 +1,24 @@
export default {
mode: ['pc'],
apis: [
{
name: 'floatbar',
type: 'component',
props: [],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '浮动块内容。',
'en-US': 'Floating block content.'
},
mode: ['pc'],
pcDemo: 'custom-style'
}
]
}
]
}

136
examples/sites/demos/apis/floating-button.js Normal file
View File

@ -0,0 +1,136 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'FloatingButton',
type: 'component',
props: [
{
name: 'animated',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '悬浮按钮开启动画',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'animated'
},
{
name: 'background-color',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '悬浮按钮背景颜色',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'button-bgcolor'
},
{
name: 'element-selector',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '悬浮按钮设置可传入的元素类名或者id',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'animated'
},
{
name: 'expand-list',
type: 'IFloatingButtonExpandItem[]',
defaultValue: '[]',
desc: {
'zh-CN': '拓展按钮接收数据的数组，接收项分为图标 icon 和标题 title ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'expand'
},
{
name: 'icon',
type: 'Component',
defaultValue: 'IconPlus',
desc: {
'zh-CN': '自定义悬浮按钮图标',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'custom-icon'
},
{
name: 'is-expand',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否展开拓展按钮',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'expand'
},
{
name: 'mask',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '悬浮按钮遮罩层',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'mask'
},
{
name: 'position',
type: "'left' | 'center' | 'right'",
defaultValue: "'right'",
desc: {
'zh-CN': '悬浮按钮展示位置',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'button-position'
},
{
name: 'reset-time',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '悬浮按钮防重点击重置时间',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'reclick'
},
{
name: 'vague',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '悬浮按钮模糊层',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'mask'
}
],
events: [
{
name: 'click',
type: '(event: Event, index: number) => void',
defaultValue: '',
desc: {
'zh-CN': '悬浮按钮点击触发事件',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: 'event'
}
],
methods: [],
slots: []
}
]
}

635
examples/sites/demos/apis/flowchart.js Normal file
View File

@ -0,0 +1,635 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'flowchart',
type: 'component',
props: [
{
name: 'config',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '流程图的配置。',
'en-US': 'The config of flowchart.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'config.align',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在卡片模式下，节点内部文字的对齐方式，包括居左 left、居中 center',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.colors',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '节点状态颜色映射对象',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.extraWidth',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '在多端 dot 模式下，图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.gap',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '图形节点在垂直方向上的最小间距',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.height',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '图形的高度。在多端 dot 模式下，如果高度小于图形计算高度，则使用图形计算高度',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.linkEndMinus',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，连线末端在连线方向上的偏移量，可以用来调整连线末端位置',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.nodeLayout',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，节点内部布局，Label在节点下部居中 up-down、在节点右侧 left-right',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.nodeSize',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，节点图标尺寸，mini/small/medium',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.ongoingBackgroundColor',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在卡片模式下，状态为进行中的节点的背景色',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.padding',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '图形的内边距。在 dot 模式自适应宽度时或者自定义布局时失效，只参与图形高度的计算',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.popoverPlacement',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在卡片模式下，节点 tooltip 的位置',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.prior',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在内置连线逻辑中使用，图形连线的优先方向，包括水平 horizontal、垂直 vertical',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.showArrow',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，全局设置连线是否显示箭头',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.showOnly',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，节点只显示图标、只显示标题，icon/title',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.status',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '节点状态名称映射对象',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.type',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置为 dot 开启点模式',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'config.width',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '图形的宽度。在多端 dot 模式下失效，因为宽度要自适应容器宽度',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '流程图数据。',
'en-US': 'The data of flowchart.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'data.groups',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '多端 dot 模式下，流程图的分组列表',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].fillStyle',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '分组的填充颜色',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].lineDash',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '分组的边框虚线样式',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].nodes',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '分组中的节点名称列表',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].padding',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '分组的上下、左右内边距',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].strokeStyle',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '分组的边框颜色',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].title',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '分组的名称',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].titleClass',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '分组的名称样式 token',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.groups[i].titlePosition',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '分组的名称位置，支持 top、top-left（顶部中间、顶部居左）',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '流程图的连线列表',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].from',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '连线起始节点的名称',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].fromJoint',
type: 'String',
defaultValue: '',
desc: {
'zh-CN':
'连线在起始节点的连接点。值可以为 bottom、top、left、right，表示从底部中间、顶部中间、左侧中间、右侧中间；值也可以为变体 bottom-1/2、bottom-2/2，表示从底部左半部分中间、底部右半部分中间；值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].info',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '连线的详细信息，包括连线的状态、样式等',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].linkOffset',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，连线起点在连线方向的偏移量，可以用来调整连线起点位置',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].showArrow',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '在 dot 点模式下，单独设置连线是否显示箭头',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].to',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '连线结束节点的名称',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.links[i].toJoint',
type: 'String',
defaultValue: '',
desc: {
'zh-CN':
'连线在结束节点的连接点。值可以为 bottom、top、left、right，表示从底部中间、顶部中间、左侧中间、右侧中间；值也可以为变体 bottom-1/2、bottom-2/2，表示从底部左半部分中间、底部右半部分中间；值也可以为变体 bottom-1/3、bottom-2/3、bottom-3/3 等',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.nodes',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '流程图的节点列表',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.nodes[i].hidden',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '节点是否隐藏',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.nodes[i].info',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '节点的详细信息，包括节点所在的行列、宽高、形状和其它信息',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data.nodes[i].name',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '节点的名称，用于保证节点的唯一性',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'fetch',
type: 'function',
defaultValue: '',
desc: {
'zh-CN': '多端 dot 异步流程图 AsyncFlowchart 数据和配置的加载方法。',
'en-US': 'Multi-terminal dot asynchronous flow chart AsyncFlowchart data and configuration loading method.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
}
],
events: [
{
name: 'click-blank',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击空白区域时触发。',
'en-US': 'Triggered when a blank area is clicked.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'click-group',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击分组时触发。',
'en-US': 'Triggered when group is clicked.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'click-link',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击连线时触发。',
'en-US': 'Triggered when a connection is clicked.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'click-node',
type: '',
defaultValue: '',
desc: {
'zh-CN': '点击节点时触发。',
'en-US': 'Triggered when a node is clicked.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
}
],
methods: [
{
name: 'createConfig',
type: '',
defaultValue: '',
desc: {
'zh-CN': '流程图组件 Flowchart 的静态方法，用于创建图形基础配置。',
'en-US': 'Static method of flowchart component Flowchart, used to create basic graphics configuration.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'layout',
type: '',
defaultValue: '',
desc: {
'zh-CN':
'多端 dot 点模式下用于处理图形的自定义布局，设置在全局配置上，参数为图形宽、高和节点列表，期望获取每个节点的位置。',
'en-US':
'Custom layout for processing graphs in multi-end dot point mode, set in the global configuration, the parameters are graph width, height and node list, and it is expected to obtain the position of each node..'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'linkPath',
type: '',
defaultValue: '',
desc: {
'zh-CN':
'多端 dot 点模式下用于处理图形连线的自定义布局，设置在全局配置上，参数为连线和节点列表，期望获取连线的路径、中点和渐变。连线路径通过水平垂直折线的拐点表示。',
'en-US':
'A custom layout used to handle graphics connections in multi-terminal dot point mode. It is set in the global configuration. The parameters are the connection line and node list. It is expected to obtain the path, midpoint and gradient of the connection line. The connection path is represented by the inflection points of horizontal and vertical polylines.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'linkPath[i].method({ afterLink, afterNodes, from, to, api })',
type: '',
defaultValue: '',
desc: {
'zh-CN': 'afterLink当前连线，afterNodes节点列表，from起点矩形，to终点矩形，api处理矩形的方法集',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'Node',
type: '',
defaultValue: '',
desc: {
'zh-CN': '多端 dot 点模式下内置的节点组件。',
'en-US': 'Built-in node component in multi-terminal dot mode.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'refresh',
type: '',
defaultValue: '',
desc: {
'zh-CN': '在修改配置或数据之后，用于刷新多端异步流程图 AsyncFlowchart 实例的图形。',
'en-US':
'Graphics used to refresh a multi-end asynchronous flowchart AsyncFlowchart instance after modifying configuration or data.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'renderInner',
type: '',
defaultValue: '',
desc: {
'zh-CN': '多端流卡片模式下节点的自定义渲染方法，渲染的内容为卡片内部内容，不包括卡片容器。',
'en-US':
'Custom rendering method for nodes in multi-stream card mode. The rendered content is the internal content of the card, excluding the card container.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'renderOuter',
type: '',
defaultValue: '',
desc: {
'zh-CN': '多端卡片模式下节点的自定义渲染方法，渲染的内容包括卡片容器。',
'en-US':
'Custom rendering method for nodes in multi-terminal card mode. The rendered content includes card containers.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'resizeMixin',
type: '',
defaultValue: '',
desc: {
'zh-CN': '多端 dot 点模式下用于处理图形的水平自适应宽度，后续在点模式的异步流程图中被内置。',
'en-US':
'Horizontal adaptive width for processing graphics in multi-terminal dot point mode, which will be built into the asynchronous flow chart in dot mode later.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
}
],
slots: []
}
]
}

13
examples/sites/demos/apis/font.js Normal file
View File

@ -0,0 +1,13 @@
export default {
mode: ['pc'],
apis: [
{
name: 'font',
type: 'component',
props: [],
events: [],
methods: [],
slots: []
}
]
}

666
examples/sites/demos/apis/form.js Normal file
View File

@ -0,0 +1,666 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'form',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用该表单内的所有表单组件，若设置为 true，则表单内组件上的 disabled 属性不再生效',
'en-US':
'Whether to disable all components in the form. If this parameter is set to true, the disabled attribute of components in the form does not take effect.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'form-disabled',
mfDemo: ''
},
{
name: 'display-only',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否开启仅展示模式',
'en-US': 'Enable read-only mode through the display only attribute'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'display-only',
mfDemo: ''
},
{
name: 'form-item',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': 'Form 下的 FormItem 组件,请参看 FormItem 的属性配置 Aurora.Widget.Form.FormItem ',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'hide-required-asterisk',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否隐藏必填字段的标签旁边的红色星号，SMB 主题下默认值为true',
'en-US':
'Whether to hide the red asterisk next to the label of mandatory fields, The default value for SMB theme is true'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'smb-required',
mfDemo: ''
},
{
name: 'inline',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '行内布局模式',
'en-US': 'In-line layout mode'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-in-row',
mobileDemo: 'hide-required-asterisk',
mfDemo: ''
},
{
name: 'inline-message',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '当 validate-type 设置为 text 时，是否以行内形式展示校验信息(推荐使用 message-type 设置)',
'en-US':
' Whether to display the verification information inline form when validate-type is set to text,(It is recommended to use message-type setting)'
},
mode: ['pc', 'mobile'],
pcDemo: '',
mobileDemo: 'validate'
},
{
name: 'label-align',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': "当出现必填星号时，标签文本是否对齐，当 label-position 为 'right' 时有效",
'en-US': 'When a mandatory asterisk appears, is it aligned with the text'
},
mode: ['pc'],
pcDemo: 'label-align'
},
{
name: 'label-position',
type: "'right' | 'left' | 'top'",
defaultValue: "'right'",
desc: {
'zh-CN': '表单中标签的布局位置',
'en-US': 'Layout position of the label in the form'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'label-position',
mobileDemo: 'label-width',
mfDemo: ''
},
{
name: 'label-suffix',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '表单中标签后缀',
'en-US': 'Label suffix in the form'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-in-row',
mobileDemo: 'form-label-suffix',
mfDemo: ''
},
{
name: 'label-width',
type: 'string',
defaultValue: "'80px'",
desc: {
'zh-CN': '表单中标签占位宽度',
'en-US': 'Label placeholder width in the form'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'label-position',
mobileDemo: 'label-width',
mfDemo: ''
},
{
name: 'message-type',
type: "'inline' | 'block'",
defaultValue: '',
desc: {
'zh-CN':
'当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level when validate-type is set to text. The default is absolute positioning'
},
mode: ['pc'],
pcDemo: 'message-type'
},
{
name: 'model',
type: '{ [prop: string]: any }',
defaultValue: '',
desc: {
'zh-CN': '表单数据对象',
'en-US': 'Form data object'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validation',
mobileDemo: '',
mfDemo: ''
},
{
name: 'overflow-title',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '标签超长是否显示提示',
'en-US': 'Does the label display a prompt if it is too long'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'overflow-title',
mfDemo: ''
},
{
name: 'popper-options',
typeAnchorName: 'popover#IPopperOption',
type: 'Popover.IPopperOption',
defaultValue: '',
desc: {
'zh-CN': '校验错误提示配置，透传至 Popover 组件',
'en-US': 'Verify error prompt configuration and transparently transmit it to Popover component'
},
mode: ['pc'],
pcDemo: 'popper-options'
},
{
name: 'rules',
typeAnchorName: 'IFormRules',
type: '{ [prop: string]: IFormRules | IFormRules[] }',
defaultValue: '',
desc: {
'zh-CN': '表单验证规则',
'en-US': 'Form validation rule'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validation',
mobileDemo: 'validate',
mfDemo: ''
},
{
name: 'show-message',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示校验错误信息',
'en-US': 'Display verification error information.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'novalid-tip',
mobileDemo: '',
mfDemo: ''
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '表单内组件的尺寸，不设置则为默认尺寸',
'en-US': 'Controls the size of components in the form'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'validate-on-rule-change',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否在 rules 属性改变后立即触发一次验证',
'en-US': 'Whether to trigger a verification immediately after the rules attribute is changed'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'custom-validation-rule',
mobileDemo: '',
mfDemo: ''
},
{
name: 'validate-position',
typeAnchorName: 'IFormPosition',
type: 'IFormPosition',
defaultValue: "'right'",
desc: {
'zh-CN': '指定校验提示框显示的位置',
'en-US': 'Specify the position where the verification dialog box is displayed'
},
mode: ['pc'],
pcDemo: 'validation-position'
},
{
name: 'validate-tag',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': 'vue2下面原生html标签支持显示tooltip校验提示信息',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'validate-type',
type: "'tip' | 'text'",
defaultValue: "'tip'",
desc: {
'zh-CN': '校验类型',
'en-US': 'Verification type'
},
mode: ['pc'],
pcDemo: 'validate-type'
}
],
events: [
{
name: 'validate',
type: '(prop: string, isValid: boolean, message: string) => void',
defaultValue: '',
desc: {
'zh-CN': '任一表单项被校验后触发',
'en-US': 'Triggered after any form item is verified'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'events',
mobileDemo: '',
mfDemo: ''
}
],
methods: [
{
name: 'clearValidate',
type: '(prop: string | string[]) => void',
defaultValue: '',
desc: {
'zh-CN':
'移除表单项的校验结果，可传入待移除的表单项的 prop ，或者 prop 组成的数组，如不传则移除整个表单的校验结果',
'en-US':
'The verification result of removing a form item is transferred to the prop attribute of the form item to be removed or an array consisting of prop. If this parameter is not transferred, the verification result of the entire form is removed.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validate-field',
mobileDemo: 'validate',
mfDemo: ''
},
{
name: 'resetFields',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
'en-US': 'Reset all field values to the initial values and remove the verification result.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validation',
mobileDemo: 'validate',
mfDemo: ''
},
{
name: 'validate',
typeAnchorName: 'IFormValidateMethod',
type: 'IFormValidateMethod',
defaultValue: '',
desc: {
'zh-CN':
'对整个表单进行校验的方法，参数为一个回调函数（该回调函数会在校验结束后被调用，并传入两个参数：1、是否校验成功 2、未通过校验的字段）返回一个 promise',
'en-US':
'Method for verifying the entire form. The parameter is a callback function. The callback function will be invoked after the verification is complete and two parameters are transferred: whether the verification is successful and whether the verification fails. If the callback function is not transferred, a promise is returned.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validation',
mobileDemo: 'validate',
mfDemo: ''
},
{
name: 'validateField',
typeAnchorName: 'IFormValidateFieldMethod',
type: 'IFormValidateFieldMethod',
defaultValue: '',
desc: {
'zh-CN':
'对部分表单字段进行校验的方法, 第一个参数为单个 prop 或者 prop 数组，第二个参数是回调函数，每个表单项检验完后会依次调用该回调',
'en-US':
'A method for verifying some form fields. The first parameter is a single prop or a prop array, and the second parameter is a callback function. After each form item is verified, the callback will be called in sequence'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'form-validate-field',
mobileDemo: '',
mfDemo: ''
}
],
slots: [
{
name: 'default',
type: '',
defaultValue: '',
desc: {
'zh-CN': '默认插槽，自定义表单内容',
'en-US': 'Default slot'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: '',
mfDemo: ''
},
{
name: 'label',
type: '',
defaultValue: '',
desc: {
'zh-CN': '标签文本插槽',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
]
},
{
name: 'form-item',
type: 'component',
props: [
{
name: 'error',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '表单项错误文本，设置该值会使表单验证状态变为 error',
'en-US': 'Form item error text,Setting this value will change the form validation status to error'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'inline-message',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否以行内形式展示校验信息(推荐使用 message-type 设置)',
'en-US':
'Whether to display the verification information inline form(It is recommended to use message-type setting) '
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '标签文本',
'en-US': 'Label text'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'label-width',
type: 'string',
defaultValue: "'80px'",
desc: {
'zh-CN': '表单域标签的的宽度',
'en-US': 'Width of the form field label'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'message-type',
type: "'inline' | 'block'",
defaultValue: '',
desc: {
'zh-CN': '配置文本类型错误类型，可配置行内或者块级，不配置则为 absolute 定位',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level. The default is absolute positioning'
},
mode: ['pc'],
pcDemo: 'message-type'
},
{
name: 'prop',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '对应表单域 model 字段，如需使用表单校验，该属性是必填的',
'en-US':
'Is it mandatory? If not set, it will be automatically generated according to the verification rules'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'required',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否必填，如不设置，则会根据校验规则自动生成',
'en-US':
'Is it mandatory? If not set, it will be automatically generated according to the verification rules'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'rules',
typeAnchorName: 'IFormRules',
type: 'IFormRules',
defaultValue: '',
desc: {
'zh-CN': '表单项验证规则',
'en-US': 'Form validation rule'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'show-message',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示校验错误信息',
'en-US': 'Whether to display verification error information'
},
mode: ['pc'],
pcDemo: 'novalid-tip'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '用于控制该表单域下组件的尺寸，不设置则为默认尺寸',
'en-US': 'Controls the size of the component in the form field'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'validate-debounce',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验',
'en-US':
'Enable verification anti shake. In the case of continuous input, verification will only begin at the end of the last input'
},
mode: ['pc'],
pcDemo: 'validate-debounce'
},
{
name: 'validate-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '校验提示框的图标，类型为组件',
'en-US': 'Icon for verification prompt box, type is component'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'validate-position',
typeAnchorName: 'IFormPosition',
type: 'IFormPosition',
defaultValue: "'top-end'",
desc: {
'zh-CN': '指定校验提示框显示的位置',
'en-US': 'Specify the position where the verification dialog box is displayed'
},
mode: ['pc'],
pcDemo: 'validation-position'
},
{
name: 'validate-type',
type: "'text' | 'tip'",
defaultValue: "'tip'",
desc: {
'zh-CN': '校验提示显示类型',
'en-US': 'Verification prompt display type'
},
mode: ['pc'],
pcDemo: 'validate-type'
}
],
events: [],
methods: [
{
name: 'clearValidate',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '移除该表单项的校验结果',
'en-US': 'Remove the verification result of the table item.'
},
mode: ['pc'],
pcDemo: 'form-validation'
},
{
name: 'resetField',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '对该表单项进行重置，将其值重置为初始值并移除校验结果',
'en-US': 'Reset the table item to the initial value and remove the verification result.'
},
mode: ['pc'],
pcDemo: 'form-validate-field'
}
],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'label',
defaultValue: '',
desc: {
'zh-CN': '标签文本的内容',
'en-US': 'Label text content'
},
mode: ['pc'],
pcDemo: 'slot-label'
}
]
}
],
types: [
{
name: 'IFormPosition',
type: 'type',
code: `
type IFormPosition = 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end'`
},
{
name: 'IFormRules',
type: 'interface',
code: `
// 表单项检验触发时机
type IFormTrigger = 'change' | 'blur'
interface IFormRules {
required?: boolean // 是否必填
message?: number // 校验错误的提示
// 内置的类型校验
type?: 'date' | 'dateTime' | 'float' | 'array' | 'string' | 'number' | 'url' | 'time' | 'email' | 'object' | 'boolean' | 'enum'
// 校验触发时机， 默认为 ['change', 'blur'] 两种场景都触发，如果仅在主动调用校验方式时触发，可设置为空数组 []。
trigger?: IFormTrigger | IFormTrigger[]
// 同步检验函数，调用回调传递错误信息。
validator?: (
rule: IFormInnerRule, // from内部处理后的rule
value: any, // 表单model对应的值，根据表单项prop获取
callback: (e: Error) => void
data: object, // prop和value构造的对象
options: object // 检验配置，一般不需要用到
) => void
// 异步校验函数，resolve则表示校验成功，reject表示校验失败。
asyncValidator?: (
rule: IFormInnerRule,
value: any,
callback: (e: Error) => void
data: object,
options: object
) => Promise<any>
}
interface IFormInnerRule {
field: string // 表单项prop
fullField: string // 表单项完整prop（嵌套检验时有用）
type: string // 内部使用
}
`
},
{
name: 'IFormError',
type: 'interface',
code: `
// 校验错误返回对象
interface IFormError {
[prop: string]: IFormErrorField[]
}
interface IFormErrorField {
message: string // 校验错误提示
field: string // 校验失败的prop
}
`
},
{
name: 'IFormValidateMethod',
type: 'function',
code: `
function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
`
},
{
name: 'IFormValidateFieldMethod',
type: 'function',
code: `
function IFormValidateFieldMethod(
prop: string | string[],
callback: (msg: string, field: IFormError) => void
): void
`
}
]
}

127
examples/sites/demos/apis/fullscreen.js Normal file
View File

@ -0,0 +1,127 @@
export default {
mode: ['pc'],
apis: [
{
name: 'fullscreen',
type: 'component',
props: [
{
name: 'exit-on-click-wrapper',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '组件式使用时，点击组件 wrapper 是否关闭全屏显示。默认为 true',
'en-US':
'When the component is used in component mode, click the component wrapper to determine whether to disable full-screen display. The default value is true.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'fullscreen',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '组件式使用时，控制组件是否全屏显示。默认为 false',
'en-US': 'Whether to display a component in full screen mode. The default value is false'
},
mode: ['pc'],
pcDemo: 'example-component'
},
{
name: 'fullscreen-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义组件 wrapper 的样式类名',
'en-US': 'Style class name of the custom component wrapper'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'page-only',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '显示模式。true 为网页全屏，false 为浏览器全屏。默认值为 false',
'en-US':
'Display mode. The value true indicates that the web page is displayed in full screen mode, and the value false indicates that the browser is displayed in full screen mode. The default value is false'
},
mode: ['pc'],
pcDemo: 'example-component'
},
{
name: 'teleport',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否将目标元素移动到 body 下。true 为移动，false 为不移动。默认值为 false',
'en-US':
'Indicates whether to move the target element to the body. true: move; false: do not move. The default value is false'
},
mode: ['pc'],
pcDemo: 'example-component'
},
{
name: 'z-index',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在全屏显示时，目标元素的 zIndex',
'en-US': 'ZIndex of the target element in full-screen display'
},
mode: ['pc'],
pcDemo: 'example-component'
}
],
events: [
{
name: 'before-change',
type: '(done: () => void) => void',
defaultValue: '',
desc: {
'zh-CN': '拦截事件',
'en-US': 'Intercept Events.'
},
mode: ['pc'],
pcDemo: 'before-change'
},
{
name: 'update:fullscreen',
defaultValue: '',
desc: {
'zh-CN': '组件式使用时，更新 fullscreen 属性',
'en-US': 'Update the fullscreen attribute in component mode.'
},
mode: ['pc'],
pcDemo: 'example-component'
}
],
methods: [
{
name: 'toggle',
defaultValue: '',
desc: {
'zh-CN': '函数式使用时，切换全屏模式',
'en-US': 'Switch the full-screen mode when the function mode is used.'
},
mode: ['pc'],
pcDemo: 'example-api'
}
],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '自定义内容，需要在 layout 中列出 slot',
'en-US': 'User-defined content. Slots must be listed in the layout.'
},
mode: ['pc'],
pcDemo: 'example-component'
}
]
}
]
}

4893
examples/sites/demos/apis/grid.js Normal file
View File

File diff suppressed because it is too large Load Diff

202
examples/sites/demos/apis/guide.js Normal file
View File

@ -0,0 +1,202 @@
export default {
mode: ['pc'],
apis: [
{
name: 'guide',
type: 'component',
props: [
{
name: 'alignment-axis',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '设置引导框对齐轴距离',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'offset'
},
{
name: 'arrow',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否显示工具提示的箭头',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'cross-axis',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '设置引导框横轴距离',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'offset'
},
{
name: 'dom-data',
typeAnchorName: 'IDomData',
type: 'IDomData[]',
defaultValue: '',
desc: {
'zh-CN': '用户引导参数',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'height',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '设置引导框高度',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'light-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '当元素突出显示时（即，当其步骤处于活动状态时）应用于元素的类名',
'en-US': ''
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'main-axis',
type: 'number',
defaultValue: '18',
desc: {
'zh-CN': '设置引导框主轴（纵轴）距离',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'offset'
},
{
name: 'modal-overlay-opening-padding',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '在模态叠加层开口周围添加的填充量',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'modal-overlay-opening'
},
{
name: 'modal-overlay-opening-radius',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '在模态叠加层开口周围添加的边界半径量',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'modal-overlay-opening'
},
{
name: 'pop-position',
typeAnchorName: 'IPosition',
type: 'IPosition',
defaultValue: "'bottom'",
desc: {
'zh-CN': '引导框箭头位置，该属性的可选值可参考 IPosition 类型',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'arrow-position'
},
{
name: 'width',
type: 'number',
defaultValue: '510',
desc: {
'zh-CN': '设置引导框宽度',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'size'
}
],
events: [],
methods: [],
slots: [
{
name: 'main',
defaultValue: '',
desc: {
'zh-CN': '设置引导框内容',
'en-US': ''
},
mode: ['pc'],
pcDemo: 'highlight-box'
}
]
}
],
types: [
{
name: 'IDomData',
type: 'interface',
code: `
interface IDomData {
// 指引的标题
title: string
// 指引的内容（可以是 html）
text: string
// 需要绑定指引的元素类名（只能是类名，若未传入则显示为上下左右居中且无指示箭头）
domElement: string
// 添加需要高亮的元素的类名
hightBox: string[]
// 要添加到步骤的内容元素的一串类名
classes: string
// 展示前的回调函数
beforeShow: () => void
// 隐藏前的回调函数
beforeHide: () => void
// 显示的回调函数
show: () => void
// 隐藏的回调函数
hide: () => void
// 关闭的回调函数
cancel: () => void
//销毁的回调函数
destroy: () => void
// 完成的回调函数
completey: () => void
// 需要设置的按钮组
button: {
// 按钮名
text: string
// 需要执行的步骤，包含 next(下一步)、back(返回)、complete(完成)
action: 'next' | 'back' | 'complete'
// 按钮的类名
classes: string
// 是否是次要按钮
secondary: boolean
}[]
}
`
},
{
name: 'IPosition',
type: 'type',
code: `
type IPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
`
}
]
}

81
examples/sites/demos/apis/hrapprover.js Normal file
View File

@ -0,0 +1,81 @@
export default {
mode: ['pc'],
apis: [
{
name: 'hrapprover',
type: 'component',
props: [
{
name: 'approval-person',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '权签人',
'en-US': 'Approval'
},
mode: ['pc'],
pcDemo: 'category-type'
},
{
name: 'category',
type: 'string',
defaultValue: '该属性的默认值为 0303',
desc: {
'zh-CN': '默认权签类别。',
'en-US': 'Default approval type.'
},
mode: ['pc'],
pcDemo: 'category-type'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '设置组件是否为禁用状态。',
'en-US': 'Sets whether the component is disabled.'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'fetchHrapprover',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取权签人信息接口，未使用框架服务时必填，自定义其它属性同dept部门组件',
'en-US':
'Customize the interface for obtaining approver information. This parameter is mandatory when the framework service is not used. Other customized attributes are the same as those of the dept component.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'title',
type: 'string ',
defaultValue: '',
desc: {
'zh-CN': '设置弹窗标题',
'en-US': 'Set the pop-up window title.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'value',
type: 'string ',
defaultValue: '',
desc: {
'zh-CN': '设置权签人的值。',
'en-US': 'Set the approver.'
},
mode: ['pc'],
pcDemo: 'disabled'
}
],
events: [],
methods: [],
slots: []
}
]
}

4
examples/sites/demos/apis/icon.js Normal file
View File

@ -0,0 +1,4 @@
export default {
mode: ['pc', 'mobile'],
apis: []
}

204
examples/sites/demos/apis/image.js Normal file
View File

@ -0,0 +1,204 @@
export default {
mode: ['pc', 'mobile-first'],
apis: [
{
name: 'image',
type: 'component',
props: [
{
name: 'fit',
type: "'fill' | 'contain' | 'cover' | 'none' | 'scale-down '",
defaultValue: '',
desc: {
'zh-CN': '确定图片如何适应容器大小',
'en-US': 'Determine how the image adapts to the container frame '
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'image-size',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置预览的图片的大小',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'lazy',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否懒加载',
'en-US': 'Whether to enable lazy loading'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'lazy',
mfDemo: ''
},
{
name: 'preview-src-list',
type: 'string[]',
defaultValue: '[]',
desc: {
'zh-CN': '指定预览大图时的图片列表',
'en-US': 'Specifies the list of images to use when previewing a large image'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'preview',
mfDemo: ''
},
{
name: 'preview-visible',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '开启移动端预览大图的功能',
'en-US': 'Enable the function of previewing large images on mobile devices.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'round',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '通过 round 设置是否展示圆形',
'en-US': 'Use round to set whether to display a circle.'
},
mode: ['mobile-first'],
mfDemo: 'round'
},
{
name: 'scroll-container',
type: 'string | HTMLElement',
defaultValue: '',
desc: {
'zh-CN':
'指定滚动容器。启用懒加载时，监听滚动容器的 scroll 事件来懒加载。\n 该属性用于设置图片的容器,当未设置容器时，默认会取最近一个 overflow 值为 auto 或 scroll 的父元素做为滚动容器\n ',
'en-US':
'Specifies the scroll container. When lazy loading is enabled, the scroll event of the image component container is monitored for lazy loading. \n This property is used to set the image container. When the container is not set, the default will take the parent element of the last overflow value as auto or scroll as the scroll container \n '
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'show-hover',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置预览的图片的悬浮效果',
'en-US': 'Sets the floating effect of the previewed image.'
},
mode: ['mobile-first'],
mfDemo: 'show-hover'
},
{
name: 'show-index',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '开启图片序列号展示',
'en-US': 'Enable the display of image serial numbers.'
},
mode: ['mobile-first'],
mfDemo: 'preview-src-list'
},
{
name: 'src',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置图片路径',
'en-US': 'Set the path of the preview image.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'z-index',
type: 'number',
defaultValue: '2000',
desc: {
'zh-CN': '图片预览功能时，设置最外层元素的 z-index',
'en-US': 'For the image preview function, set the z-index of the outermost element'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
}
],
events: [
{
name: 'delete',
type: 'Function()',
defaultValue: '',
desc: {
'zh-CN': '图片删除触发',
'en-US': 'Triggered by image deletion.'
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'error',
type: '(ev) => void',
defaultValue: '',
desc: {
'zh-CN': '图片加载失败后触发的事件，参数为原生的失败事件',
'en-US': 'When the Image loading failure triggered,the parameter is a native failure event'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
},
{
name: 'load',
type: '(ev) => void',
defaultValue: '',
desc: {
'zh-CN': '图片加载成功的触发的事件，参数为原生的成功事件',
'en-US': 'When the image loading success triggered,the parameter is a native success event.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'events',
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'error',
type: '',
defaultValue: '',
desc: {
'zh-CN': '图片加载失败的占位内容插槽',
'en-US': 'Error Slot that fails to be loaded'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'slot',
mfDemo: ''
},
{
name: 'placeholder',
type: '',
defaultValue: '',
desc: {
'zh-CN': '图片加载的占位内容插槽',
'en-US': 'Placeholder Slot that is not loaded to the image'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'slot',
mfDemo: ''
}
]
}
]
}

156
examples/sites/demos/apis/imageviewer.js Normal file
View File

@ -0,0 +1,156 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'ImageViewer',
type: 'component',
props: [
{
name: 'arrow-show',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示图片切换按钮,该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'image-full-current'
},
{
name: 'async-close',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否开启异步关闭，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: ''
},
{
name: 'close-show',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示关闭按钮，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'image-full-current'
},
{
name: 'image-full-current',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否全屏显示，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'image-full-current'
},
{
name: 'preview-visible',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '<p>设置图片预览显示隐藏</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'image-full-current'
},
{
name: 'show-index',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示当前图片下标，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'slot-index'
},
{
name: 'start-position',
type: 'Number',
defaultValue: '0',
desc: {
'zh-CN': '<p>图片预览起始位置索引,该属性默认为0</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'start-position'
},
{
name: 'tool-show',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示工具栏钮，该属性默认为false</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: ''
},
{
name: 'url-list',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '<p>配置图片路径</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'image-full-current'
},
{
name: 'z-index',
type: 'Number',
defaultValue: '2000',
desc: {
'zh-CN': '<p>设置图片预览的 z-index，该属性默认为2000</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'slot-index'
}
],
events: [
{
name: 'change',
defaultValue: '',
desc: {
'zh-CN': '<p>切换当前图片时触发，{ index:切换时图片索引, url: 切换时图片链接 }</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'events-change-close'
},
{
name: 'close',
defaultValue: '',
desc: {
'zh-CN': '<p>close，{ index: 关闭时图片索引, url: 关闭时图片链接 }</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'events-change-close'
}
],
methods: [],
slots: [
{
name: 'index',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义页码内容</p>',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'slot-index'
}
]
}
]
}

79
examples/sites/demos/apis/index-bar.js Normal file
View File

@ -0,0 +1,79 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'IndexBar',
type: 'component',
props: [
{
name: 'indexList',
type: '[]',
defaultValue: '',
desc: {
'zh-CN': '<p>索引文字列表</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'base'
}
],
events: [
{
name: 'change',
type: 'Function(arg1)',
defaultValue: '',
desc: {
'zh-CN': '<p>\t当前索引改变触发</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'event'
},
{
name: 'select',
type: 'Function(arg1)',
defaultValue: '',
desc: {
'zh-CN': '<p>选中新的索引触发</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'event'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>\t自定义内容</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'event'
}
]
},
{
name: 'IndexBarAnchor',
type: 'component',
props: [
{
name: 'index',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>索引文字</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'base'
}
],
events: [],
methods: [],
slots: []
}
]
}

70
examples/sites/demos/apis/infinite-scroll.js Normal file
View File

@ -0,0 +1,70 @@
export default {
mode: ['pc'],
apis: [
{
name: 'infinite-scroll',
type: 'component',
props: [
{
name: 'infinite-scroll-delay',
type: 'number',
defaultValue: '200',
desc: {
'zh-CN': '加载延时，单位为 ms',
'en-US': 'Loading delay, the unit is millisecond.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'infinite-scroll-disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用滚动',
'en-US': 'Whether to disable scrolling. '
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'infinite-scroll-distance',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '加载触发距离阈值，单位为 px',
'en-US': 'Threshold of the load triggering distance,the unit is px. '
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'infinite-scroll-immediate',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否立即加载，以防初始状态下内容无法撑满容器',
'en-US':
'Indicates whether to load the container immediately to prevent the container from being full in the initial state.'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'v-infinite-scroll',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '无限滚动加载指令，指定加载方法',
'en-US': 'Infinite roll load instruction, specifying the load method.'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [],
methods: [],
slots: []
}
]
}

727
examples/sites/demos/apis/input.js Normal file
View File

@ -0,0 +1,727 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'input',
type: 'component',
props: [
{
name: 'autocomplete',
type: 'string',
defaultValue: "'off'",
desc: {
'zh-CN': '原生 autocomplete 属性',
'en-US': 'Native autocomplete attribute'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'autofocus',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '原生属性，页面加载时，自动获取焦点',
'en-US': 'Native attribute. The focus is automatically obtained during page loading.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: '',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'autosize',
type: 'boolean | { minRows: number, maxRows: number }',
defaultValue: 'false',
desc: {
'zh-CN':
'自适应内容高度，只对 <code>type="textarea"</code> 有效。可传入对象，如，{ minRows: 2, maxRows: 6 }',
'en-US':
'Adaptive content height. This parameter is valid only for <code>type="textarea"</code>. Objects can be transferred, for example, {minRows: 2, maxRows: 6}'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'resize',
mobileDemo: 'textarea-scalable',
mfDemo: ''
},
{
name: 'clearable',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否显示清除按钮，该属性不适用于 <code>type="textarea"</code>',
'en-US':
'Whether to display the clear button. This attribute is not applicable to <code>type="textarea"</code>.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'clearable',
mobileDemo: 'clearable',
mfDemo: ''
},
{
name: 'cols',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置宽度，在 type ="textarea" 时有效',
'en-US':
'Native attribute, which is used to set the width. This parameter is valid only when type is "textarea"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'rows',
mobileDemo: 'textarea-rows-cols',
mfDemo: ''
},
{
name: 'counter',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示字数统计，只在 type = "text" 或 type = "textarea" 时有效',
'en-US':
'Whether to display the word count statistics. This parameter is valid only when type is "text" or type is "textarea"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'counter',
mobileDemo: 'counter',
mfDemo: ''
},
{
name: 'custom-class',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置自定义样式',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用',
'en-US': 'Disable'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'disabled',
mfDemo: ''
},
{
name: 'display-only',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '设置文本只读态',
'en-US': 'Set the text read-only state'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'display-only',
mfDemo: ''
},
{
name: 'display-only-content',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置只读态时的文本内容区，如果没有则会使用 modelVale 的值作为只读文本',
'en-US':
"Sets the text content area in the read-only state, if not, modelVale's value is used as the read-only text"
},
mode: ['pc', 'mobile-first'],
pcDemo: 'display-only',
mfDemo: ''
},
{
name: 'form',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生属性',
'en-US': 'Native attribute'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'height',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '设置文本域的最小高度',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'hover-expand',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '设置文本域鼠标悬浮展开/收起，只对 `type=textarea` 有效，最好搭配 autosize 一起使用',
'en-US':
"Set text field mouse hover expansion/collapse, only for 'type=textarea'. It is recommended that this parameter be used together with autosize."
},
mode: ['pc', 'mobile-first'],
pcDemo: 'resize',
mfDemo: ''
},
{
name: 'is-select',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否可下拉选择',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'type-select'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '等价于原生 input aria-label 属性',
'en-US': 'Equiphorus input aria-label attribute'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: '',
mobileDemo: '',
mfDemo: ''
},
{
name: 'mask',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '启用掩码功能，只在 disabled 和 display-only 状态下生效',
'en-US': 'The mask function takes effect only in the disabled and display-only states'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'mask',
mfDemo: ''
},
{
name: 'max',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置最大值',
'en-US': 'Native attribute, set the maximum value'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'maxlength',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，最大输入长度',
'en-US': 'Native attribute, maximum input length'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'counter',
mfDemo: ''
},
{
name: 'memory-space',
type: 'number',
defaultValue: '5',
desc: {
'zh-CN': '设置 addMemory 方法中，最大能保存条目的数量',
'en-US': 'Sets the maximum number of entries that can be saved in the addMemory method'
},
mode: ['pc'],
pcDemo: 'method-addMemory'
},
{
name: 'min',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置最小值',
'en-US': 'Native attribute, which sets the minimum value'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'minlength',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，最小输入长度',
'en-US': 'Native attribute, minimum input length'
},
mode: ['mobile'],
mobileDemo: 'counter'
},
{
name: 'modelValue / v-model',
type: 'string | number',
defaultValue: '',
desc: {
'zh-CN': '设置文本的绑定值',
'en-US': 'Sets the binding value of the text'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'name',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生 input name 属性',
'en-US': 'Native input name attribute'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: '',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'placeholder',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '输入框占位文本',
'en-US': 'Enter the place-holder text in the text box'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'prefix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '输入框头部图标',
'en-US': 'Icon at the head of the input box'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'input-icon',
mobileDemo: 'prefix-suffix-icon',
mfDemo: ''
},
{
name: 'readonly',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '原生属性，是否只读',
'en-US': 'Native attribute, read-only'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'resize',
type: "'both' | 'horizontal' | 'vertical' | 'none'",
defaultValue: '',
desc: {
'zh-CN': '控制是否能被用户缩放',
'en-US': 'Whether the user can zoom in or out'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'resize',
mfDemo: ''
},
{
name: 'rows',
type: 'number',
defaultValue: '2',
desc: {
'zh-CN': '输入框行数，只对 type="textarea" 有效',
'en-US': 'Number of lines in the input box. This parameter is valid only for type="textarea"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'rows',
mobileDemo: 'textarea-rows-cols',
mfDemo: ''
},
{
name: 'select-menu',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '下拉选择的选项',
'en-US': 'options of select'
},
mode: ['mobile'],
mobileDemo: 'type-select'
},
{
name: 'show-password',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示切换密码图标',
'en-US': 'Whether to display the switchover password icon'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'show-password',
mobileDemo: 'show-password',
mfDemo: ''
},
{
name: 'show-word-limit',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效',
'en-US':
'Whether to display the number of input words. This parameter is valid only when type is "text" or type is "textarea"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'show-word-limit',
mobileDemo: 'counter',
mfDemo: ''
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '输入框尺寸，只在 type!="textarea" 时有效',
'en-US': 'Size of the text box. This parameter is valid only when type!="textarea". '
},
mode: ['pc', 'mobile-first'],
pcDemo: 'size',
mfDemo: ''
},
{
name: 'step',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置输入字段的合法数字间隔',
'en-US': 'Native attribute, which is used to set the valid digit interval of the input field.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'native',
mobileDemo: 'native-attributes',
mfDemo: ''
},
{
name: 'suffix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '输入框尾部图标',
'en-US': 'Input box end icon'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'input-icon',
mobileDemo: 'prefix-suffix-icon',
mfDemo: ''
},
{
name: 'tabindex',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生属性，输入框的 tabindex',
'en-US': 'Native attribute, tabindex in the text box'
},
mode: ['pc', 'mobile-first'],
pcDemo: '',
mfDemo: ''
},
{
name: 'tips',
type: 'String | Slot',
defaultValue: '',
desc: {
'zh-CN': '提示信息',
'en-US': 'tips under input'
},
mode: ['mobile'],
mobileDemo: 'slots'
},
{
name: 'title',
type: 'String | Slot',
defaultValue: '',
desc: {
'zh-CN': '自定义标题',
'en-US': 'custom title'
},
mode: ['mobile'],
mobileDemo: ''
},
{
name: 'type',
type: "'text' | 'textarea' | 'password' | InputHTMLAttributes.type",
defaultValue: "'text'",
desc: {
'zh-CN': '设置 input 框的 type 属性，默认为 "text",可选值 "text"，"textarea" 和其他 原生 input 的 type 值',
'en-US':
'Set the type attribute of the input box. The default value is "text". The options are "text", "textarea", and type values of other native inputs.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'type',
mobileDemo: 'type',
mfDemo: ''
},
{
name: 'v-model',
type: 'String / Number',
defaultValue: '',
desc: {
'zh-CN': '设置文本显示的默认值',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'v-model / modelValue',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '绑定值',
'en-US': 'input value'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
},
{
name: 'validate-event',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '输入时是否触发表单的校验',
'en-US': 'Trigger form verification upon input'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'validate-event',
mobileDemo: 'validate-event',
mfDemo: ''
},
{
name: 'width',
type: 'Number | String',
defaultValue: '',
desc: {
'zh-CN': '宽度，取值为数字或元素 width 属性有效值，如果是数字则以 px 为单位',
'en-US':
'width, accepts a numerical value or a valid value for the width property, and if it is a number, it is measured in pixels.'
},
mode: ['mobile'],
mobileDemo: ''
}
],
events: [
{
name: 'blur',
type: '(event: FocusEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '在 Input 失去焦点时触发',
'en-US': 'Trigger when Input loses focus'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'event',
mobileDemo: 'events',
mfDemo: ''
},
{
name: 'change',
type: '(value: string | number) => void',
defaultValue: '',
desc: {
'zh-CN': '在 Input 值改变时触发',
'en-US': 'triggered when the input value changes.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'event',
mobileDemo: 'events',
mfDemo: ''
},
{
name: 'clear',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '在点击由 clearable 属性生成的清空按钮时触发',
'en-US': 'Trigger when the clear button generated by the clearable property is clicked'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'event',
mobileDemo: 'events',
mfDemo: ''
},
{
name: 'focus',
type: '(event: FocusEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '在 Input 获得焦点时触发',
'en-US': 'Trigger when Input obtains focus'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'event',
mobileDemo: 'events',
mfDemo: ''
},
{
name: 'input',
type: '(event: InputEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '输入值时触发事件',
'en-US': 'An event is triggered when a value is entered.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'event',
mobileDemo: 'events',
mfDemo: ''
}
],
methods: [
{
name: 'addMemory',
type: '(value: string) => void',
defaultValue: '',
desc: {
'zh-CN': '历史输入内容的记忆方法',
'en-US': 'Memorization method of historical input content'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'method-addMemory',
mfDemo: ''
},
{
name: 'blur',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '使 input 失去焦点',
'en-US': 'The input loses focus.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'methods',
mobileDemo: 'methods',
mfDemo: ''
},
{
name: 'focus',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '使 input 获取焦点',
'en-US': 'To enable the input to obtain the focus'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'methods',
mobileDemo: 'methods',
mfDemo: ''
},
{
name: 'select',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '选中 input 中的文字',
'en-US': 'Select the text in input.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'methods',
mobileDemo: 'methods',
mfDemo: ''
}
],
slots: [
{
name: 'append',
type: '',
defaultValue: '',
desc: {
'zh-CN': '输入框后置内容，只对 type="text" 有效',
'en-US': 'Content at the end of the text box. This field is valid only for type="text"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot',
mobileDemo: 'slots',
mfDemo: ''
},
{
name: 'prefix',
type: '',
defaultValue: '',
desc: {
'zh-CN': '输入框头部内容，只对 type="text" 有效',
'en-US': 'Content in the header of the text box, which is valid only for type="text"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot',
mobileDemo: 'slots',
mfDemo: ''
},
{
name: 'prepend',
type: '',
defaultValue: '',
desc: {
'zh-CN': '输入框前置内容，只对 type="text" 有效',
'en-US': 'Content before the text box, which is valid only for type="text"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot',
mobileDemo: 'slots',
mfDemo: ''
},
{
name: 'suffix',
type: '',
defaultValue: '',
desc: {
'zh-CN': '输入框尾部内容，只对 type="text" 有效',
'en-US': 'The content at the end of the text box is valid only for type="text"'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'slot',
mobileDemo: 'slots',
mfDemo: ''
},
{
name: 'tips',
desc: {
'zh-CN': '提示信息插槽',
'en-US': 'tips slot'
},
mode: ['mobile'],
mobileDemo: 'slots'
},
{
name: 'title',
desc: {
'zh-CN': '标题插槽',
'en-US': 'title slot'
},
mode: ['mobile'],
mobileDemo: 'slots'
}
]
}
]
}

147
examples/sites/demos/apis/ip-address.js Normal file
View File

@ -0,0 +1,147 @@
export default {
mode: ['pc'],
apis: [
{
name: 'ip-address',
type: 'component',
props: [
{
name: 'delimiter',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '设置IP段之间的分隔符，默认图标为IconDotIpv4',
'en-US': 'Set the separator between IP segments, default icon is icon-dot-ipv4'
},
mode: ['pc'],
pcDemo: 'delimiter'
},
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置文本的禁用属性',
'en-US': 'Set the disabled attribute of the text'
},
mode: ['pc'],
pcDemo: 'disabled'
},
{
name: 'readonly',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置文本的只读属性',
'en-US': 'Set the read-only attribute of the text'
},
mode: ['pc'],
pcDemo: 'readonly'
},
{
name: 'size',
type: "'medium' | 'small' | 'mini'",
defaultValue: '',
desc: {
'zh-CN': '地址输入框大小',
'en-US': 'Address Input Box Size'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'type',
type: "'IPv4' | 'IPv6'",
defaultValue: "'IPv4'",
desc: {
'zh-CN': '设置 ip 地址输入框的 类型',
'en-US': 'Sets the type attribute in the IpAddress box'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'v-model',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置地址输入框的绑定值',
'en-US': 'Set the binding value of the address input box'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [
{
name: 'blur',
type: '(value: string, index: number) => void',
defaultValue: '',
desc: {
'zh-CN': '文本框失去焦点时触发事件',
'en-US': 'The event is triggered when the text box loses the focus'
},
mode: ['pc'],
pcDemo: 'blur'
},
{
name: 'change',
type: '(value: string) => void',
defaultValue: '',
desc: {
'zh-CN': '文本框内容改变后事件',
'en-US': 'Event after changing the content of the text box'
},
mode: ['pc'],
pcDemo: 'change'
},
{
name: 'focus',
type: '(value: string, index: number) => void',
defaultValue: '',
desc: {
'zh-CN': '文本框获取焦点时触发事件',
'en-US': 'This event is triggered when a text box obtains the focus'
},
mode: ['pc'],
pcDemo: 'focus'
},
{
name: 'input',
type: '(event: InputEvent) => void',
defaultValue: '',
desc: {
'zh-CN': '文本框内容输入时触发事件',
'en-US': 'Trigger event when entering text box content'
},
mode: ['pc'],
pcDemo: 'input'
},
{
name: 'select',
type: '(value: string, index: number) => void',
defaultValue: '',
desc: {
'zh-CN': '文本框内容选中时触发事件',
'en-US': 'Trigger event when text box content is selected'
},
mode: ['pc'],
pcDemo: 'select'
}
],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽，自定义IP段之间的分隔符',
'en-US': 'Separator between IP address segments'
},
mode: ['pc'],
pcDemo: 'delimiter'
}
]
}
]
}

116
examples/sites/demos/apis/label.js Normal file
View File

@ -0,0 +1,116 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'Label',
type: 'component',
props: [
{
mode: []
},
{
name: 'decimal',
type: 'number',
defaultValue: '2',
desc: {
'zh-CN': '<p>小数点的位数</p>',
'en-US': 'decimal'
},
mode: ['mobile'],
mobileDemo: 'decimal'
},
{
name: 'ellipsis',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '<p>支持超出省略号显示的行数</p>',
'en-US': 'ellipsis'
},
mode: ['mobile'],
mobileDemo: 'ellipsis'
},
{
name: 'is-required',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否添加*号</p>',
'en-US': 'is required'
},
mode: ['mobile'],
mobileDemo: 'required'
},
{
name: 'label',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '<p>文本</p>',
'en-US': 'text'
},
mode: ['mobile'],
mobileDemo: 'base'
},
{
name: 'limit',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '<p>限制文本的字数</p>',
'en-US': 'text limit'
},
mode: ['mobile'],
mobileDemo: 'limit'
},
{
name: 'position',
type: 'string',
defaultValue: 'left',
desc: {
'zh-CN': '<p>整行显示时的位置:left,center,right</p>',
'en-US': 'position of whole line dispaly'
},
mode: ['mobile'],
mobileDemo: 'position'
},
{
name: 'size',
type: 'string',
defaultValue: 'normal',
desc: {
'zh-CN': '<p>文本大小:large,normal,small,mini</p>',
'en-US': 'text size'
},
mode: ['mobile'],
mobileDemo: 'size'
},
{
name: 'type',
type: 'string',
defaultValue: 'base',
desc: {
'zh-CN': '<p>类型 \n base, number</p>',
'en-US': 'type'
},
mode: ['mobile'],
mobileDemo: 'type'
},
{
name: 'wholeline',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否整行显示</p>',
'en-US': 'whole line display'
},
mode: ['mobile'],
mobileDemo: 'wholeline'
}
],
events: [],
methods: [],
slots: []
}
]
}

244
examples/sites/demos/apis/layout.js Normal file
View File

@ -0,0 +1,244 @@
export default {
mode: ['pc'],
apis: [
{
name: 'layout',
type: 'component',
props: [
{
name: 'cols',
type: 'number',
defaultValue: '12',
desc: {
'zh-CN': '总栅格数;该属性的可选值为 12 /24 ',
'en-US': 'Total number of grids; The optional value for this attribute is 12/24'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'tag',
type: 'string',
defaultValue: '"div"',
desc: {
'zh-CN': '定义 Layout 元素的渲染后的标签，默认为div',
'en-US': 'Defines the rendered tag of a Layout element, which defaults to div'
},
mode: ['pc'],
pcDemo: 'tag'
}
],
events: [],
methods: [],
slots: []
},
{
name: 'row',
type: 'component',
props: [
{
name: 'align',
type: 'string',
defaultValue: '"top"',
desc: {
'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'",
'en-US': "Alignment of minor axes for child items; values: 'top', 'middle', 'bottom'"
},
mode: ['pc'],
pcDemo: 'alignment'
},
{
name: 'flex',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否为flex容器',
'en-US': 'Whether it is a flex container'
},
mode: ['pc'],
pcDemo: 'alignment'
},
{
name: 'gutter',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '子项的间隔的像素',
'en-US': 'The spacing of the child items in pixels'
},
mode: ['pc'],
pcDemo: 'gutter'
},
{
name: 'justify',
type: 'string',
defaultValue: '"start"',
desc: {
'zh-CN': "子项的主轴对齐方向，可取值：'start', 'center', 'end', 'space-between', 'space-around'",
'en-US':
"Main axis alignment direction for child items; values: 'start', 'center', 'end', 'space-between', 'space-around'"
},
mode: ['pc'],
pcDemo: 'alignment'
},
{
name: 'noSpace',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '子项没有间隔，相当于强制gutter=0的情况',
'en-US': 'Child entries have no spacing, equivalent to forcing gutter=0'
},
mode: ['pc'],
pcDemo: 'gutter'
},
{
name: 'order',
type: 'string',
defaultValue: '"asc" | "des"',
desc: {
'zh-CN': '子项的排序方式。 不设置时，保留子项在模板中的顺序。',
'en-US':
"Ordering of the child items; values: 'asc', 'des'. When not set, the order of the child items in the template is preserved."
},
mode: ['pc'],
pcDemo: 'order'
},
{
name: 'tag',
type: 'string',
defaultValue: '"div"',
desc: {
'zh-CN': '定义 Row 元素的渲染后的标签，默认为div',
'en-US': 'Defines the rendered tag of a Row element, which defaults to div'
},
mode: ['pc'],
pcDemo: 'tag'
}
],
events: [],
methods: [],
slots: []
},
{
name: 'col',
type: 'component',
props: [
{
name: 'lg',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在响应式宽度 <code> < 1920px <code> 时，该列占用的栅格数',
'en-US': 'The number of grids occupied by the column at the response width <code> < 1920px <code>'
},
mode: ['pc'],
pcDemo: 'responsive-layout'
},
{
name: 'md',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在响应式宽度 <code> < 1200px <code> 时，该列占用的栅格数',
'en-US': 'The number of grids occupied by the column at the response width <code> < 1200px <code>'
},
mode: ['pc'],
pcDemo: 'responsive-layout'
},
{
name: 'move',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '子项的右偏移量,是通过 left 属性实现偏移,建议使用 offset 代替',
'en-US':
'The right offset of the child item is offset via the left property; it is recommended to use offset instead'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'no',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '子项排序编号',
'en-US': 'Subitems are sorted by number'
},
mode: ['pc'],
pcDemo: 'order'
},
{
name: 'offset',
type: 'number',
defaultValue: '0',
desc: {
'zh-CN': '子项的向右偏移量,是通过 margin-left 属性实现偏移',
'en-US': 'The offset to the right of the child item is achieved using the margin-left property'
},
mode: ['pc'],
pcDemo: 'offset'
},
{
name: 'sm',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在响应式宽度 <code> < 992px <code> 时，该列占用的栅格数',
'en-US': 'The number of grids occupied by the column at the response width <code> < 992px <code>'
},
mode: ['pc'],
pcDemo: 'responsive-layout'
},
{
name: 'span',
type: 'number',
defaultValue: '12',
desc: {
'zh-CN': '子项占据的列数',
'en-US': 'Number of columns occupied by the child'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'tag',
type: 'string',
defaultValue: '"div"',
desc: {
'zh-CN': '定义 Col 元素的渲染后的标签，默认为div',
'en-US': 'Defines the rendered tag of a Col element, which defaults to div'
},
mode: ['pc'],
pcDemo: 'tag'
},
{
name: 'xl',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在响应式宽度 <code> >= 1920px <code> 时，该列占用的栅格数',
'en-US': 'The number of grids occupied by the column at the response width <code> >= 1920px <code>'
},
mode: ['pc'],
pcDemo: 'responsive-layout'
},
{
name: 'xs',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '在响应式宽度 <code> < 768px <code> 时，该列占用的栅格数',
'en-US': 'The number of grids occupied by the column at the response width <code> < 768px <code>'
},
mode: ['pc'],
pcDemo: 'responsive-layout'
}
],
events: [],
methods: [],
slots: []
}
]
}

158
examples/sites/demos/apis/link-menu.js Normal file
View File

@ -0,0 +1,158 @@
export default {
mode: ['pc'],
apis: [
{
name: 'link-menu',
type: 'component',
props: [
{
name: 'data',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '设置收藏夹菜单的数据',
'en-US': 'Set the data of the favorites menu'
},
mode: ['pc'],
pcDemo: 'data-resource1'
},
{
name: 'default-expand-all',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true',
'en-US':
'Whether to expand all nodes by default when a menu pop-up window is opened. The default value is true'
},
mode: ['pc'],
pcDemo: 'menu-items'
},
{
name: 'ellipsis',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '菜单内容超长时省略显示，默认为 true',
'en-US': 'Omitted if the menu content is too long. The default value is true'
},
mode: ['pc'],
pcDemo: 'custom-icon1'
},
{
name: 'get-menu-data-sync',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义菜单数据服务，直接返回数据',
'en-US': 'User-defined menu data service. Data is directly returned'
},
mode: ['pc'],
pcDemo: 'get-menu-data-sync'
},
{
name: 'icon',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义节点展开折叠的图标',
'en-US': 'Customize the icon for expanding and collapsing a node'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'keep-selected-nodes',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '树节点勾选内容后，点击取消按钮，再次打开弹窗是否保留取消前勾选的内容的状态，默认为 true',
'en-US':
'Whether to retain the status of the selected content after selecting content in the tree node, clicking Cancel, and opening the dialog box again. The default value is true'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'max-item',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '设置可收藏的栏目的最大数量',
'en-US': 'Set the maximum number of columns that can be added to favorites'
},
mode: ['pc'],
pcDemo: 'menu-items'
},
{
name: 'search-icon',
type: 'object',
defaultValue: '',
desc: {
'zh-CN': '自定义搜索图标',
'en-US': 'Customize the search icon'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'title',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '设置收藏夹菜单的标题，默认为空',
'en-US': 'Set the title of the favorites menu. The default value is null'
},
mode: ['pc'],
pcDemo: 'data-resource'
},
{
name: 'wrap',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '菜单内容超长时换行显示，默认为 false',
'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
},
mode: ['pc'],
pcDemo: 'data-resource'
}
],
events: [],
methods: [
{
name: 'hideDialog',
defaultValue: '',
desc: {
'zh-CN': '关闭菜单弹窗',
'en-US': 'Close the menu pop-up window'
},
mode: ['pc'],
pcDemo: 'custom-foot'
},
{
name: 'sureNodevalue',
defaultValue: '',
desc: {
'zh-CN': '获取选中的菜单节点并关闭菜单弹窗，同时展示选中的菜单',
'en-US': 'Obtains the selected menu node, closes the menu pop-up window, and displays the selected menu'
},
mode: ['pc'],
pcDemo: 'custom-foot'
}
],
slots: [
{
name: 'foot',
defaultValue: '',
desc: {
'zh-CN': '菜单弹窗底部插槽',
'en-US': 'Slot at the bottom of the menu pop-up window'
},
mode: ['pc'],
pcDemo: 'custom-foot'
}
]
}
]
}

101
examples/sites/demos/apis/link.js Normal file
View File

@ -0,0 +1,101 @@
export default {
mode: ['pc'],
apis: [
{
name: 'link',
type: 'component',
props: [
{
name: 'disabled',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用状态',
'en-US': 'Is disabled'
},
mode: ['pc'],
pcDemo: 'dynamic-disable'
},
{
name: 'href',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '原生 href 属性',
'en-US': 'Native href attribute'
},
mode: ['pc'],
pcDemo: 'config-href'
},
{
name: 'icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '图标组件',
'en-US': 'Icon component'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'type',
type: "'primary' | 'success' | 'warning' | 'danger' | 'info'",
defaultValue: '',
desc: {
'zh-CN': '文本链接类型',
'en-US': 'Text link type'
},
mode: ['pc'],
pcDemo: 'link-style'
},
{
name: 'underline',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '是否下划线',
'en-US': 'Whether has Underline'
},
mode: ['pc'],
pcDemo: 'focus-no-underline'
},
{
name: 'value',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '显示内容',
'en-US': 'Display value'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['pc'],
pcDemo: 'custom-icon'
},
{
name: 'icon',
defaultValue: '',
desc: {
'zh-CN': '图标',
'en-US': 'Icon'
},
mode: ['pc'],
pcDemo: 'custom-icon'
}
]
}
]
}

80
examples/sites/demos/apis/list.js Normal file
View File

@ -0,0 +1,80 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'List',
type: 'component',
props: [
{
name: 'content',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置主文本</p>',
'en-US': 'Is fixed top'
},
mode: ['mobile'],
mobileDemo: 'double-line'
},
{
mode: []
},
{
name: 'sub-text',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>设置次文本</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: 'single-line'
}
],
events: [],
methods: [],
slots: [
{
name: 'default',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义主文本内容</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: ''
},
{
name: 'description',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义描述内容</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: 'slots'
},
{
name: 'prefix',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义头部内容</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: 'slots'
},
{
name: 'suffix',
defaultValue: '',
desc: {
'zh-CN': '<p>自定义尾部内容</p>',
'en-US': 'Is show right arrow'
},
mode: ['mobile'],
mobileDemo: 'slots'
}
]
}
]
}

157
examples/sites/demos/apis/loading.js Normal file
View File

@ -0,0 +1,157 @@
export default {
mode: ['pc', 'mobile', 'mobile-first'],
apis: [
{
name: 'loading',
type: 'component',
props: [
{
name: 'background',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '遮罩背景色',
'en-US': 'Mask background color'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'background',
mfDemo: ''
},
{
name: 'body',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '遮罩层是否在body上，同 v-loading 指令中的 body 修饰符',
'en-US': 'The same as the body modifier in the v-loading instruction'
},
mode: ['pc', 'mobile-first'],
mfDemo: ''
},
{
name: 'customClass',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': 'Loading 的自定义类名',
'en-US': 'User-defined loading class name'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'custom-class',
mfDemo: ''
},
{
name: 'fullscreen',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '属性为 true 显示全屏，同 v-loading 指令中的 fullscreen 修饰符',
'en-US': 'Set true to display the full screen. Same as the fullscreen modifier in the v-loading instruction'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'fullscreen',
mfDemo: ''
},
{
name: 'lock',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '全屏时是否锁定滚动，同 v-loading 指令中的 lock 修饰符',
'en-US': 'The same as the lock modifier in the v-loading instruction'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'fullscreen',
mfDemo: ''
},
{
name: 'size',
type: "'medium' | 'small' | 'large'",
defaultValue: "'small'",
desc: {
'zh-CN': '加载图标尺寸',
'en-US': 'Load icon size'
},
mode: ['pc'],
pcDemo: 'size'
},
{
name: 'spinner',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '自定义加载图标',
'en-US': 'Customized loading icon class name'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'spinner',
mfDemo: ''
},
{
name: 'target',
type: 'HTMLElement | string',
defaultValue: 'document.body',
desc: {
'zh-CN':
'Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点',
'en-US':
'Loading the DOM node to be overwritten. A DOM object or character string can be transferred. If a character string is transferred, it is transferred to document.querySelector as a parameter to obtain the corresponding DOM node.'
},
mode: ['pc', 'mobile', 'mobile-first'],
pcDemo: 'basic-usage',
mobileDemo: 'type',
mfDemo: ''
},
{
name: 'text',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '显示在加载图标下方的加载文案',
'en-US': 'Load copy displayed below the load icon'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'loading-tip-text',
mfDemo: ''
},
{
name: 'tiny_mode',
type: 'string',
defaultValue: 'pc',
desc: {
'zh-CN': '<p>通配置项pc,mobile表示不同设备</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'type'
},
{
name: 'type',
type: 'string',
defaultValue: 'primary',
desc: {
'zh-CN': '<p>通过type设置不同的加载样式</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'type'
}
],
events: [],
methods: [
{
name: 'closeLoading',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '<p>关闭Loading</p>',
'en-US': 'display different button'
},
mode: ['mobile'],
mobileDemo: 'type'
}
],
slots: []
}
]
}

96
examples/sites/demos/apis/locales.js Normal file
View File

@ -0,0 +1,96 @@
export default {
mode: ['pc'],
apis: [
{
name: 'locales',
type: 'component',
props: [
{
name: 'change-lang',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '切换语言',
'en-US': 'Switch Language'
},
mode: ['pc'],
pcDemo: 'change-lang'
},
{
name: 'getChangeLocaleUrl',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义更新语言服务接口，未使用框架服务并且未配置 change-lang 时必填',
'en-US':
'Customized language update service interface. This parameter is mandatory when the framework service is not used and change-lang is not configured.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'getCurrentLocale',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取当前语种接口，未使用框架服务时必填',
'en-US':
'Customized interface for obtaining the current language. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'getLocale',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '自定义获取系统语言列表接口，未使用框架服务时必填',
'en-US':
'User-defined interface for obtaining the system language list. This parameter is mandatory when the framework service is not used.'
},
mode: ['pc'],
pcDemo: 'custom-service'
},
{
name: 'local',
type: 'boolean',
defaultValue: '该属性的默认值为 false',
desc: {
'zh-CN': '是否本地',
'en-US': 'Local or not'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'popper-append-to-body',
type: 'boolean',
defaultValue: '该属性的默认值为 true',
desc: {
'zh-CN':
'是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
'en-US':
'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
},
mode: ['pc'],
pcDemo: ''
},
{
name: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'en-US': 'Add a class name for the popper. For details, see the popover component.'
},
mode: ['pc'],
pcDemo: ''
}
],
events: [],
methods: [],
slots: []
}
]
}

25
examples/sites/demos/apis/logon-user.js Normal file
View File

@ -0,0 +1,25 @@
export default {
mode: ['pc'],
apis: [
{
name: 'logon-user',
type: 'component',
props: [
{
name: 'getUserInfo',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '配置查询系统当前用户接口',
'en-US': 'Configure the interface for querying current system users.'
},
mode: ['pc'],
pcDemo: 'custom-service'
}
],
events: [],
methods: [],
slots: []
}
]
}

91
examples/sites/demos/apis/logout.js Normal file
View File

@ -0,0 +1,91 @@
export default {
mode: ['pc'],
apis: [
{
name: 'logout',
type: 'component',
props: [
{
name: 'before-logout',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '注销前的回调函数',
'en-US': 'Callback function before deregistration'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'get-logout-url',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '自定义获取注销服务接口',
'en-US': 'User-defined interface for obtaining the deregistration service'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'is-guest-user',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '自定义是否访客用户',
'en-US': 'Customizing whether a user is a guest user'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'is-local',
type: 'boolean',
defaultValue: 'service.setting.local',
desc: {
'zh-CN': '是否本地注销',
'en-US': 'Indicates whether to deregister locally. The default value is service.setting.local'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'is-mock',
type: 'boolean',
defaultValue: '',
desc: {
'zh-CN': '是否开启 mock 模拟服务，默认值为 false',
'en-US': 'Indicates whether to enable the mock service. The default value is false'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'redirect-url',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '自定义配置注销后跳转地址',
'en-US': 'User-defined redirection address after deregistration'
},
mode: ['pc'],
pcDemo: 'redirecturl'
},
{
name: 'show-login',
type: '() => void',
defaultValue: '',
desc: {
'zh-CN': '自定义登录方法',
'en-US': 'Custom Login Method'
},
mode: ['pc'],
pcDemo: 'basic-usage'
}
],
events: [],
methods: [],
slots: []
}
]
}

67
examples/sites/demos/apis/mask.js Normal file
View File

@ -0,0 +1,67 @@
export default {
mode: ['mobile'],
apis: [
{
name: 'Mask',
type: 'component',
props: [
{
name: 'cancelTouch',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用touch事件，设为 <code>true</code> 后点击遮罩层不会关闭',
'en-US': "whether to disable touch events, and mask wouldn't close when it was set <code>true</code>"
},
mode: ['mobile'],
mobileDemo: 'cancel-touch'
},
{
name: 'visible',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否展示遮罩层',
'en-US': 'whether to show mask layer'
},
mode: ['mobile'],
mobileDemo: 'base'
},
{
name: 'z-index',
type: 'number',
defaultValue: '99',
desc: {
'zh-CN': '层叠数值',
'en-US': 'z-index property'
},
mode: ['mobile'],
mobileDemo: 'z-index'
}
],
events: [
{
name: 'click',
desc: {
'zh-CN': '点击遮罩层触发',
'en-US': 'Click'
},
mode: ['mobile'],
mobileDemo: 'basic-usage'
}
],
methods: [],
slots: [
{
name: 'default',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
},
mode: ['mobile'],
mobileDemo: 'slot-default'
}
]
}
]
}

137
examples/sites/demos/apis/menu.js Normal file
View File

@ -0,0 +1,137 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'menu',
type: 'component',
props: [
{
name: 'actived-keys',
type: 'Number / String',
defaultValue: '',
desc: {
'zh-CN': '默认选中项',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'data',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '数据源',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'empty-text',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '自定义空文本',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'expand-all',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '默认全部展开',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'expanded-keys',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '默认展开项',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'only-check-children',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '只能选中子级，父子不关联',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'search-icon',
type: 'Object',
defaultValue: '',
desc: {
'zh-CN': '搜索图标',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-filter',
type: 'Boolean',
defaultValue: '',
desc: {
'zh-CN': '显示搜索框',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [
{
name: 'current-change',
type: '',
defaultValue: '',
desc: {
'zh-CN': '选中菜单改变事件',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'node-click',
type: '',
defaultValue: '',
desc: {
'zh-CN': '菜单点击事件',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
methods: [],
slots: [
{
name: 'empty',
type: '',
defaultValue: '',
desc: {
'zh-CN': '空数据插槽',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
]
}
]
}

69
examples/sites/demos/apis/message.js Normal file
View File

@ -0,0 +1,69 @@
export default {
mode: ['mobile-first'],
apis: [
{
name: 'message',
type: 'component',
props: [
{
name: 'duration',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置提示信息停留时间',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'id',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置唯一的 id 防止重复提示，只对 type=message 有效',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'message',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置提示信息',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'show-close',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '控制弹窗是否显示关闭图标',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
},
{
name: 'status',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '设置消息状态，可选值有 info | success | warning | error',
'en-US': ''
},
mode: ['mobile-first'],
mfDemo: ''
}
],
events: [],
methods: [],
slots: []
}
]
}

302
examples/sites/demos/apis/milestone.js Normal file
View File

@ -0,0 +1,302 @@
export default {
mode: ['pc'],
apis: [
{
name: 'milestone',
type: 'component',
props: [
{
name: 'completed-field',
type: 'string',
defaultValue: "'completed'",
desc: {
'zh-CN': '设置节点完成状态对应的键值',
'en-US': 'Set the key values corresponding to the node completion status'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'data',
typeAnchorName: 'ICustomData',
type: 'ICustomData | ICustomData[]',
defaultValue: '',
desc: {
'zh-CN': '设置步骤条的数据，可自定义键值映射',
'en-US': 'Set the step bar data, Customizable key value mapping'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'flag-before',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '设置旗子的数据是取自前面还是后面的节点，默认取后面节点上的数据',
'en-US':
'Set whether the flag data is taken from the preceding or following nodes, and default to taking data from the following nodes'
},
mode: ['pc'],
pcDemo: 'flag-before'
},
{
name: 'flag-content-field',
type: 'string',
defaultValue: "'content'",
desc: {
'zh-CN': '设置旗子内容描述部分对应的键名',
'en-US': 'Set the key name corresponding to the flag content description section'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'flag-field',
type: 'string',
defaultValue: "'flags'",
desc: {
'zh-CN': '设置旗子信息数组对应的键名',
'en-US': 'Set the key name corresponding to the flag information array'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'flag-name-field',
type: 'string',
defaultValue: "'name'",
desc: {
'zh-CN': '设置旗子标题对应的键名',
'en-US': 'Set the key name corresponding to the flag title'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'flag-status-field',
type: 'string',
defaultValue: "'status'",
desc: {
'zh-CN': '设置旗子状态对应的键名',
'en-US': 'Set the key name corresponding to the flag state'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'line-style',
type: "'number' | 'string'",
defaultValue: '1',
desc: {
'zh-CN':
'线条颜色取值模式为数字时，只有1和2可选；如果为字符串则需传入 16 进制颜色值<br />\n 设置为数字 1 时只有完成与未完成两种状态的线条颜色，完成状态的线条颜色与 milestones-status 定义的 completed 状态的颜色一致<br />\n 设置为数字 2 时线条颜色根随节点状态颜色<br />\n 当设置为字符串形式的 16 进制色值时，如：#1890FF 时，线条不区分状态，全部统一为所设置的颜色',
'en-US':
'When the line color value mode is numeric, only 1 and 2 can be selected; If it is a string, the hexadecimal color value needs to be passed in<br/>\n When set to the number 1, there are only two types of line colors: complete and incomplete. The color of the completed state line is consistent with the color of the completed state defined by milestone status<br/>\n When set to number 2, the root color of the line follows the node state color<br/>\n When set to a hexadecimal color value in string form, such as # 1890FF, the lines do not differentiate between states and are all unified to the set color'
},
mode: ['pc'],
pcDemo: 'line-style'
},
{
name: 'milestones-status',
typeAnchorName: 'IStatus',
type: 'IStatus',
defaultValue: '',
desc: {
'zh-CN': '定义状态与颜色对应关系，颜色取值须是 16 进制颜色值或组件库的主题变量',
'en-US':
'Define the correspondence between state and color, and the color value must be a hexadecimal color value or a theme variable from the component library'
},
mode: ['pc'],
pcDemo: 'basic-usage'
},
{
name: 'name-field',
type: 'string',
defaultValue: "'name'",
desc: {
'zh-CN': '设置节点名称对应的键名',
'en-US': 'Set the key name corresponding to the node name'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'show-number',
type: 'boolean',
defaultValue: 'true',
desc: {
'zh-CN': '设置未完成状态的节点是否显示序号',
'en-US': 'Set whether nodes in incomplete status display serial numbers'
},
mode: ['pc'],
pcDemo: 'show-number'
},
{
name: 'solid',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '在里程碑模式下，设置已经完成节点显示为实心，且光晕不透明',
'en-US': 'In milestone mode, set the completed node to be displayed as solid and the halo is opaque'
},
mode: ['pc'],
pcDemo: 'solid-style'
},
{
name: 'space',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '设置相邻节点的间距，即节点间线条的长度',
'en-US': 'Set the spacing between adjacent nodes, i.e. the length of lines between nodes'
},
mode: ['pc'],
pcDemo: 'line-style'
},
{
name: 'start',
type: 'number',
defaultValue: '-1',
desc: {
'zh-CN': '设置节点的序号起始值，从首个节点开始计算',
'en-US': 'Set the starting value of the nodes sequence number, starting from the first node'
},
mode: ['pc'],
pcDemo: 'show-number'
},
{
name: 'status-field',
type: 'string',
defaultValue: "'status'",
desc: {
'zh-CN': '设置节点状态对应的键名',
'en-US': 'Set the key name corresponding to the node state'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
},
{
name: 'time-field',
type: 'string',
defaultValue: "'time'",
desc: {
'zh-CN': '设置节点时间信息对应的键名',
'en-US': 'Set the key name corresponding to node time information'
},
mode: ['pc'],
pcDemo: 'data-field-mapping'
}
],
events: [
{
name: 'click',
typeAnchorName: 'ICustomData',
type: '(index: number, node: ICustomData) => void',
defaultValue: '',
desc: {
'zh-CN': '节点的点击事件，参数（index:节点索引, node：节点数据信息）',
'en-US': 'Node click event (parameter) (index: node index, node: node data information)'
},
mode: ['pc'],
pcDemo: 'milestone-events'
},
{
name: 'flag-click',
typeAnchorName: 'ICustomData',
type: '(index: number, node: ICustomData) => void',
defaultValue: '',
desc: {
'zh-CN': '旗子的点击事件，参数（index:旗子索引, node：旗子数据信息）',
'en-US': 'Flag click event, parameters (index: flag index, node: data information of flag)'
},
mode: ['pc'],
pcDemo: 'milestone-events'
},
{
name: 'flagclick',
typeAnchorName: 'ICustomData',
type: '(index: number, node: ICustomData) => void',
defaultValue: '',
desc: {
'zh-CN': '[使用flag-click代替， deprecated v3.5.0废弃，v3.17.0移除；移除原因：命名规范]',
'en-US':
'[It is recommended that flag-click be used instead of flag-click, deprecated in v3.5.0 and removed in v3.17.0; Reason for removal: ]'
},
mode: ['pc'],
pcDemo: 'milestone-events'
}
],
methods: [],
slots: [
{
name: 'bottom',
defaultValue: '',
desc: {
'zh-CN': '节点下方内容',
'en-US': 'Content under a node'
},
mode: ['pc'],
pcDemo: 'custom-bottom-top'
},
{
name: 'flag',
defaultValue: '',
desc: {
'zh-CN': '旗帜内容',
'en-US': 'Flag Content'
},
mode: ['pc'],
pcDemo: 'custom-flag'
},
{
name: 'icon',
defaultValue: '',
desc: {
'zh-CN': '节点图标',
'en-US': 'Node icon'
},
mode: ['pc'],
pcDemo: 'custom-icon-slot'
},
{
name: 'top',
defaultValue: '',
desc: {
'zh-CN': '节点上方内容',
'en-US': 'Content above the node'
},
mode: ['pc'],
pcDemo: 'custom-bottom-top'
}
]
}
],
types: [
{
name: 'IStatus',
type: 'interface',
code: `
interface IStatus {
completed?: string // 可通过completed-field自定义completed键名
doing: string
back: string
end: string
cancel: string
}`
},
{
name: 'ICustomData',
type: 'interface',
code: `
interface ICustomData {
name?: string
time?: string
status?: string
flags?: string
content?: string
[propName: string]: string // 可自定义以上的默认属性
}`
}
]
}

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