forked from opentiny/tiny-vue
docs(nav-menu): [nav-menu] docs optimization (#816)
This commit is contained in:
chenxi-20
GitHub
parent
c0ed137b54
commit
5dd49298d4
|
|
@ -16,7 +16,7 @@ export default {
|
|||
'name': { 'zh-CN': '固定模式', 'en-US': 'Fixed mode' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>is-affix</code>设置固定定位，不随页面滚动。',
|
||||
'en-US': 'Set fixed positioning through<code>is affix</code>, without scrolling with the page.'
|
||||
'en-US': 'Set fixed positioning through<code>is-affix</code>, without scrolling with the page.'
|
||||
},
|
||||
'codeFiles': ['is-affix.vue']
|
||||
},
|
||||
|
|
@ -26,8 +26,8 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': `通过<code>container-id</code>设置滚动容器，<code>link-click</code>监听锚点点击事件，阻止浏览器默认行为，实现单页面<code>hash</code>路由模式的页内跳转，在指定容器内滚动。<br/>
|
||||
<code>mask-class</code>设置自定义类名，高亮显示导航的目标元素。`,
|
||||
'en-US': `By setting the scrolling container through<code>container id</code>,<code>link click</code>listens for anchor click events, prevents browser default behavior, and implements single page<code>hash</code>routing mode for page hopping, scrolling within the specified container< Br/>
|
||||
<code>mask class</code>Set a custom class name to highlight the target element for navigation.`
|
||||
'en-US': `By setting the scrolling container through<code>container-id</code>,<code>link-click</code>listens for anchor click events, prevents browser default behavior, and implements single page<code>hash</code>routing mode for page hopping, scrolling within the specified container<br/>
|
||||
<code>mask-class</code>Set a custom class name to highlight the target element for navigation.`
|
||||
},
|
||||
'codeFiles': ['set-container.vue']
|
||||
},
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>auto-upload</code>取消自动上传，配合<code>submit</code>实例方法手动上传。',
|
||||
'en-US':
|
||||
'Cancel automatic upload through<code>auto upload</code>and manually upload in conjunction with the<code>submit</code>instance method.'
|
||||
'Cancel automatic upload through<code>auto-upload</code>and manually upload in conjunction with the<code>submit</code>instance method.'
|
||||
},
|
||||
'codeFiles': ['manual-upload.vue']
|
||||
},
|
||||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>file-list</code>设置上传的文件列表，也可通过<code>:show-file-list="false"</code>关闭列表的显示；<code>open-download-file</code>设置文件是否可下载。',
|
||||
'en-US':
|
||||
'Set the list of uploaded files through<code>file list</code>, or turn off the display of the list through<code>: show file list="false"</code>< Code>open download file</code>Set whether the file is downloadable.'
|
||||
'Set the list of uploaded files through<code>file-list</code>, or turn off the display of the list through<code>: show-file-list="false"</code>;<code>open-download-file</code>Set whether the file is downloadable.'
|
||||
},
|
||||
'codeFiles': ['upload-file-list.vue']
|
||||
},
|
||||
|
|
@ -87,7 +87,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>before-remove</code>执行移除文件前的操作，返回<code>false</code>或<code>reject</code>则阻止删除。',
|
||||
'en-US':
|
||||
'Perform the operation before removing the file by<code>before remove</code>, and return<code>false</code>or<code>reject</code>to prevent deletion.'
|
||||
'Perform the operation before removing the file by<code>before-remove</code>, and return<code>false</code>or<code>reject</code>to prevent deletion.'
|
||||
},
|
||||
'codeFiles': ['prevent-delete-file.vue']
|
||||
},
|
||||
|
|
@ -98,7 +98,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>before-upload</code>执行上传文件前的操作，返回<code>false</code>或<code>reject</code>则阻止上传。',
|
||||
'en-US':
|
||||
'Perform the operation before uploading the file by<code>before upload</code>, and return<code>false</code>or<code>reject</code>to block the upload.'
|
||||
'Perform the operation before uploading the file by<code>before-upload</code>, and return<code>false</code>or<code>reject</code>to block the upload.'
|
||||
},
|
||||
'codeFiles': ['prevent-upload-file.vue']
|
||||
},
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>headers</code>配置上传请求头部信息，<code>with-credentials</code>设置允许发送 cookie 凭证信息。',
|
||||
'en-US':
|
||||
'Configure the upload request header information through<code>headers</code>, and set the permission to send cookie credential information through<code>with credentials</code>settings.'
|
||||
'Configure the upload request header information through<code>headers</code>, and set the permission to send cookie credential information through<code>with-credentials</code>settings.'
|
||||
},
|
||||
'codeFiles': ['upload-request.vue']
|
||||
},
|
||||
|
|
@ -120,7 +120,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>drag</code>设置能否拖拽文件上传，若配置了<code>accept</code>属性，则通过监听<code>drop-error</code>事件来操作不合规的拖拽文件信息。',
|
||||
'en-US':
|
||||
'By setting whether files can be dragged and uploaded through<code>drag</code>, if the<code>accept</code>attribute is configured, non compliant drag file information can be operated by listening for<code>drop error</code>events.'
|
||||
'By setting whether files can be dragged and uploaded through<code>drag</code>, if the<code>accept</code>attribute is configured, non compliant drag file information can be operated by listening for<code>drop-error</code>events.'
|
||||
},
|
||||
'codeFiles': ['drag-upload.vue']
|
||||
},
|
||||
|
|
@ -131,7 +131,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>paste-upload</code>设置能否粘贴文件上传，<code>max-name-length</code>限制文件名显示的字符数。',
|
||||
'en-US':
|
||||
'Set whether to paste and upload files through<code>paste upload</code>, and limit the number of characters displayed in file names<code>max name length</code>.'
|
||||
'Set whether to paste and upload files through<code>paste-upload</code>, and limit the number of characters displayed in file names<code>max-name-length</code>.'
|
||||
},
|
||||
'codeFiles': ['paste-upload.vue']
|
||||
},
|
||||
|
|
@ -140,7 +140,8 @@ export default {
|
|||
'name': { 'zh-CN': '列表弹窗显示', 'en-US': 'List pop-up display' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>list-type="thumb"</code>开启文件列表弹窗显示，<code>thumb-option</code>设置弹窗相关数据。',
|
||||
'en-US': 'Open the file list pop-up display by<code>list type="thumb"</code>, and set the pop-up related data.'
|
||||
'en-US':
|
||||
'Open the file list pop-up display by<code>list-type="thumb"</code>, and<code>thumb-option</code>set the pop-up related data.'
|
||||
},
|
||||
'codeFiles': ['upload-file-list-thumb.vue']
|
||||
},
|
||||
|
|
@ -150,7 +151,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>http-request</code>配置覆盖默认的上传行为，自定义上传的实现。',
|
||||
'en-US':
|
||||
'Configure to override the default upload behavior and customize the upload implementation through<code>HTTP request</code>configuration.'
|
||||
'Configure to override the default upload behavior and customize the upload implementation through<code>http-request</code>configuration.'
|
||||
},
|
||||
'codeFiles': ['http-request.vue']
|
||||
},
|
||||
|
|
@ -159,7 +160,7 @@ export default {
|
|||
'name': { 'zh-CN': '上传前限制', 'en-US': 'Custom upload restrictions' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>before-upload</code>设置上传前事件回调，对文件类型和大小做限制。',
|
||||
'en-US': 'Set pre upload event callbacks through<code>before upload</code>to limit file types and sizes.'
|
||||
'en-US': 'Set pre upload event callbacks through<code>before-upload</code>to limit file types and sizes.'
|
||||
},
|
||||
'codeFiles': ['upload-limit.vue']
|
||||
},
|
||||
|
|
@ -170,7 +171,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>limit</code>设置限制上传文件的个数，<code>is-hidden</code>设置达到最大上传数时是否隐藏上传按钮。',
|
||||
'en-US':
|
||||
'Set a limit on the number of uploaded files by<code>limit</code>, and whether to hide the upload button when the maximum number of uploads is reached.'
|
||||
'Set a limit on the number of uploaded files by<code>limit</code>, and <code>is-hidden</code> whether to hide the upload button when the maximum number of uploads is reached.'
|
||||
},
|
||||
'codeFiles': ['max-file-count.vue']
|
||||
},
|
||||
|
|
@ -181,7 +182,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过设置<code>list-type="picture-card"</code>开启照片墙模式，<code>preview</code>监听此模式下的图片预览按钮的点击事件。',
|
||||
'en-US':
|
||||
'By setting<code>list type="picture card"</code>to enable photo wall mode,<code>preview</code>listens to the click event of the picture preview button in this mode.'
|
||||
'By setting<code>list-type="picture-card"</code>to enable photo wall mode,<code>preview</code>listens to the click event of the picture preview button in this mode.'
|
||||
},
|
||||
'codeFiles': ['picture-card.vue']
|
||||
},
|
||||
|
|
@ -200,7 +201,7 @@ export default {
|
|||
'name': { 'zh-CN': '图片列表缩略图', 'en-US': 'Image List Thumbnail' },
|
||||
'desc': {
|
||||
'zh-CN': '通过设置<code>list-type="picture"</code>实现图片列表缩略图显示。',
|
||||
'en-US': 'By setting<code>list type="picture"</code>, the thumbnail display of the image list can be achieved.'
|
||||
'en-US': 'By setting<code>list-type="picture"</code>, the thumbnail display of the image list can be achieved.'
|
||||
},
|
||||
'codeFiles': ['picture-list.vue']
|
||||
},
|
||||
|
|
@ -211,9 +212,9 @@ export default {
|
|||
'zh-CN': `通过<code>preview</code>监听文件点击事件；<br/> <code>remove</code>监听文件移除事件；<br/> <code>error</code>监听文件上传失败事件；<br/>
|
||||
<code>exceed</code>监听文件超出个数限制事件；<br/> <code>progress</code>监听文件上传过程事件；<br/> <code>change</code>监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
|
||||
<code>success</code>监听文件上传成功事件；<br/> <code>hash-progress</code>监听文件上传生成hash值事件。`,
|
||||
'en-US': `Listen for file click events through<code>preview</code>< Br/><code>remove</code>Listen for file removal events< Br/><code>error</code>Listen for file upload failure events< Br/>
|
||||
<code>exceeded</code>Listen for events where the number of files exceeds the limit< <code>progress</code>Listen for file upload process events< <code>change</code>Listen for file change events (file changes include file addition, successful upload, and failed upload)< Br/>
|
||||
<code>success</code>Listen for file upload success events< <code>hash progress</code>Listen for file upload to generate hash value events.`
|
||||
'en-US': `Listen for file click events through<code>preview</code>; <br /><code>remove</code>Listen for file removal events; <br /><code>error</code>Listen for file upload failure events;<br />
|
||||
<code>exceeded</code>Listen for events where the number of files exceeds the limit; <br/><code>progress</code>Listen for file upload process events;<br/> <code>change</code>Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
|
||||
<code>success</code>Listen for file upload success events;<br/> <code>hash-progress</code>Listen for file upload to generate hash value events.`
|
||||
},
|
||||
'codeFiles': ['upload-events.vue']
|
||||
},
|
||||
|
|
@ -224,7 +225,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>clearFiles</code>实例方法实现清空已上传的文件列表（注意：该方法不支持在<code>before-upload</code> 中调用）。',
|
||||
'en-US':
|
||||
'Clear the list of uploaded files through the<code>clearFiles</code>instance method (note: this method does not support calling in<code>before upload</code>).'
|
||||
'Clear the list of uploaded files through the<code>clearFiles</code>instance method (note: this method does not support calling in<code>before-upload</code>).'
|
||||
},
|
||||
'codeFiles': ['clear-files.vue']
|
||||
},
|
||||
|
|
@ -244,7 +245,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>tip</code>插槽自定义上传提示，<code>re-uploadable</code>启用重新上传功能，<code>re-upload-tip</code>自定义重新上传提示的左侧文字。',
|
||||
'en-US':
|
||||
'Customize the upload prompt through the<code>tip</code>slot, enable the re upload function, and customize the left text of the re upload prompt.'
|
||||
'Customize the upload prompt through the<code>tip</code>slot, <code>re-uploadable</code>enable the re upload function, and <code>re-upload-tip</code>customize the left text of the re upload prompt.'
|
||||
},
|
||||
'codeFiles': ['custom-upload-tip.vue']
|
||||
},
|
||||
|
|
@ -262,7 +263,7 @@ export default {
|
|||
'name': { 'zh-CN': '用户头像上传', 'en-US': 'User avatar upload' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>URL.createobjectURL</code>创建出文件的URL对象，用来展示头像。',
|
||||
'en-US': 'Create a URL object for the file through<code>URL. createobject URL</code>to display the avatar.'
|
||||
'en-US': 'Create a URL object for the file through<code>URL.createobjectURL</code>to display the avatar.'
|
||||
},
|
||||
'codeFiles': ['upload-user-head.vue']
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '从<code>@opentiny/vue-icon</code>图标库种引入图标函数，并执行，生成相应的图标。',
|
||||
'en-US':
|
||||
'Introduce icon functions from the<code>@ opentiny/vue icon</code>icon library, execute them, and generate corresponding icons.'
|
||||
'Introduce icon functions from the<code>@opentiny/vue-icon</code>icon library, execute them, and generate corresponding icons.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过其父元素的<code>title</code>属性，实现给图标增加<code>Title</code>的功能。',
|
||||
'en-US':
|
||||
'By using the<code>title</code>attribute of its parent element, the function of adding<code>title</code>to the icon is implemented.'
|
||||
'By using the<code>title</code>attribute of its parent element, the function of adding<code>Title</code>to the icon is implemented.'
|
||||
},
|
||||
'codeFiles': ['show-title.vue']
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>data</code>设置每个节点的标题、日期、和状态；<code>milestones-status</code>设置每种状态对应的颜色值；前者的<code>status</code>字段对应后者的键值。',
|
||||
'en-US':
|
||||
'Set the title, date, and status of each node through<code>data</code>< Code>Milestones status</code>Set the color values corresponding to each state; The<code>status</code>field of the former corresponds to the key value of the latter.'
|
||||
'Set the title, date, and status of each node through<code>data</code>; <code>Milestones status</code>Set the color values corresponding to each state; The<code>status</code>field of the former corresponds to the key value of the latter.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>flag-before</code>设置旗子的数据来源，是来自前面还是后面的节点，默认为<code>false</code>取后面节点上的数据。',
|
||||
'en-US':
|
||||
'Set the data source of the flag through<code>flag before</code>, whether it comes from the preceding or following nodes. The default value is<code>false</code>to retrieve the data from the following nodes.'
|
||||
'Set the data source of the flag through<code>flag-before</code>, whether it comes from the preceding or following nodes. The default value is<code>false</code>to retrieve the data from the following nodes.'
|
||||
},
|
||||
'codeFiles': ['flag-before.vue']
|
||||
},
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
'name': { 'zh-CN': '线条颜色和间距', 'en-US': 'Line color and Space' },
|
||||
'desc': {
|
||||
'zh-CN': '通过<code>line-style</code>设置线条颜色，<code>space</code>设置节点间距。',
|
||||
'en-US': 'Set the line color and node spacing through<code>line style</code>.'
|
||||
'en-US': 'Set the line color and node spacing through<code>line-style</code>.'
|
||||
},
|
||||
'codeFiles': ['line-style.vue']
|
||||
},
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>show-number</code>设置未完成状态的节点是否显示序号；默认为<code>true</code>显示；<code>start</code>设置节点的序号起始值，默认为<code>-1</code>。',
|
||||
'en-US':
|
||||
'Set whether nodes in incomplete status display serial numbers through<code>show number</code>; Default to display as<code>true</code>< Code>start</code>Set the starting value of the nodes sequence number, which defaults to<code>-1</code>.'
|
||||
'Set whether nodes in incomplete status display serial numbers through<code>show-number</code>; Default to display as<code>true</code>;<code>start</code>Set the starting value of the nodes sequence number, which defaults to<code>-1</code>.'
|
||||
},
|
||||
'codeFiles': ['show-number.vue']
|
||||
},
|
||||
|
|
@ -127,7 +127,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>click</code>监听单击节点事件，<code>flag-click</code>监听单击旗子事件。',
|
||||
'en-US':
|
||||
'Listen for click node events through<code>click</code>, and<code>flag click</code>listen for click flag sub events.'
|
||||
'Listen for click node events through<code>click</code>, and<code>flag-click</code>listen for click flag sub events.'
|
||||
},
|
||||
'codeFiles': ['milestone-events.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,313 +0,0 @@
|
|||
<template>
|
||||
<div class="preview">
|
||||
<tiny-nav-menu :data="menuData"></tiny-nav-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { NavMenu as TinyNavMenu } from '@opentiny/vue'
|
||||
|
||||
const menuData = ref([
|
||||
{
|
||||
title: '首页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '指南',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '引入组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '按需引入',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '完整引入',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '后端适配器',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Gateway 适配器',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'Jalor 适配器',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'Standalone 适配器',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '服务代理',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '本地代理',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '远程代理',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '构建部署',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '本地构建',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '查看构建报告',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '静态资源构建',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '多环境部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '静态资源部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'CI 部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '引入静态资源',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '表单组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Button 按钮',
|
||||
url: 'button'
|
||||
},
|
||||
{
|
||||
title: 'Datepicker 日期',
|
||||
url: 'datepicker'
|
||||
},
|
||||
{
|
||||
title: 'Dropdown 下拉框',
|
||||
url: 'dropdown'
|
||||
},
|
||||
{
|
||||
title: 'DropTimes 下拉时间',
|
||||
url: 'droptimes'
|
||||
},
|
||||
{
|
||||
title: 'Input 输入框',
|
||||
url: 'input'
|
||||
},
|
||||
{
|
||||
title: 'Textarea 文本域',
|
||||
url: 'textarea'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Chart 图表',
|
||||
url: 'chart'
|
||||
},
|
||||
{
|
||||
title: 'Grid 数据表格',
|
||||
url: 'grid'
|
||||
},
|
||||
{
|
||||
title: 'Pager 分页',
|
||||
url: 'pager'
|
||||
},
|
||||
{
|
||||
title: 'Tree 树形控件',
|
||||
url: 'tree'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '导航组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'ToggleMenu 收缩菜单',
|
||||
url: 'toggleMenu'
|
||||
},
|
||||
{
|
||||
title: 'TreeMenu 树型菜单',
|
||||
url: 'treemenu'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Amount 金额',
|
||||
url: 'amount'
|
||||
},
|
||||
{
|
||||
title: 'Area 片区',
|
||||
url: 'area'
|
||||
},
|
||||
{
|
||||
title: 'Company 公司',
|
||||
url: 'company'
|
||||
},
|
||||
{
|
||||
title: 'Dept 部门',
|
||||
url: 'dept'
|
||||
},
|
||||
{
|
||||
title: 'eDoc 企业文档',
|
||||
url: 'Edoc'
|
||||
},
|
||||
{
|
||||
title: 'User 用户',
|
||||
url: 'user'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '教程',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '页面布局',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '添加标签页',
|
||||
url: '#/zh-CN/tutorial/addtabs'
|
||||
},
|
||||
{
|
||||
title: '标签页配置',
|
||||
url: '#/zh-CN/tutorial/tabsattr'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '查询功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '添加查询页面',
|
||||
url: '#/zh-CN/tutorial/addlist'
|
||||
},
|
||||
{
|
||||
title: '列表属性配置',
|
||||
url: '#/zh-CN/tutorial/listattr'
|
||||
},
|
||||
{
|
||||
title: '通讯录查询',
|
||||
url: '#/zh-CN/tutorial/searchfunc'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新增功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '表单新增功能',
|
||||
url: '#/zh-CN/tutorial/addservice'
|
||||
},
|
||||
{
|
||||
title: '表单数据验证',
|
||||
url: '#/zh-CN/tutorial/valid'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '编辑功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '开启编辑功能',
|
||||
url: '#/zh-CN/tutorial/editattr'
|
||||
},
|
||||
{
|
||||
title: '保存表格数据',
|
||||
url: '#/zh-CN/tutorial/savefunc'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '规范',
|
||||
url: '#/zh-CN/regular/rulelevel'
|
||||
},
|
||||
{
|
||||
title: '性能',
|
||||
url: '#/zh-CN/speed'
|
||||
},
|
||||
{
|
||||
title: '案例',
|
||||
url: '#/zh-CN/example'
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
url: '#/zh-CN/guide/changelog'
|
||||
},
|
||||
{
|
||||
title: '测试',
|
||||
url: '#/zh-CN/guide/aaa'
|
||||
},
|
||||
{
|
||||
title: '资源',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'SDK',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'TINY 学院',
|
||||
url: ''
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview {
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.preview .tiny-nav-menu a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('数据源', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('nav-menu#data-resource')
|
||||
const preview = page.locator('#preview')
|
||||
const popMenu = preview.locator('.popmenu')
|
||||
const homePage = preview.getByText('首页')
|
||||
await homePage.click()
|
||||
await expect(homePage).toHaveCSS('border-bottom', /3px solid/)
|
||||
const components = preview.getByText('组件')
|
||||
await components.hover()
|
||||
await expect(popMenu).toBeVisible()
|
||||
const showMore = preview.getByText('更多')
|
||||
await showMore.hover()
|
||||
await expect(popMenu).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,321 +0,0 @@
|
|||
<template>
|
||||
<div class="preview">
|
||||
<tiny-nav-menu :data="menuData"></tiny-nav-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { NavMenu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyNavMenu: NavMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuData: [
|
||||
{
|
||||
title: '首页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '指南',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '引入组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '按需引入',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '完整引入',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '后端适配器',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Gateway 适配器',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'Jalor 适配器',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'Standalone 适配器',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '服务代理',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '本地代理',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '远程代理',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '构建部署',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '本地构建',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '查看构建报告',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '静态资源构建',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '多环境部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '静态资源部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'CI 部署',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: '引入静态资源',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '表单组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Button 按钮',
|
||||
url: 'button'
|
||||
},
|
||||
{
|
||||
title: 'Datepicker 日期',
|
||||
url: 'datepicker'
|
||||
},
|
||||
{
|
||||
title: 'Dropdown 下拉框',
|
||||
url: 'dropdown'
|
||||
},
|
||||
{
|
||||
title: 'DropTimes 下拉时间',
|
||||
url: 'droptimes'
|
||||
},
|
||||
{
|
||||
title: 'Input 输入框',
|
||||
url: 'input'
|
||||
},
|
||||
{
|
||||
title: 'Textarea 文本域',
|
||||
url: 'textarea'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Chart 图表',
|
||||
url: 'chart'
|
||||
},
|
||||
{
|
||||
title: 'Grid 数据表格',
|
||||
url: 'grid'
|
||||
},
|
||||
{
|
||||
title: 'Pager 分页',
|
||||
url: 'pager'
|
||||
},
|
||||
{
|
||||
title: 'Tree 树形控件',
|
||||
url: 'tree'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '导航组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'ToggleMenu 收缩菜单',
|
||||
url: 'toggleMenu'
|
||||
},
|
||||
{
|
||||
title: 'TreeMenu 树型菜单',
|
||||
url: 'treemenu'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: 'Amount 金额',
|
||||
url: 'amount'
|
||||
},
|
||||
{
|
||||
title: 'Area 片区',
|
||||
url: 'area'
|
||||
},
|
||||
{
|
||||
title: 'Company 公司',
|
||||
url: 'company'
|
||||
},
|
||||
{
|
||||
title: 'Dept 部门',
|
||||
url: 'dept'
|
||||
},
|
||||
{
|
||||
title: 'eDoc 企业文档',
|
||||
url: 'Edoc'
|
||||
},
|
||||
{
|
||||
title: 'User 用户',
|
||||
url: 'user'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '教程',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '页面布局',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '添加标签页',
|
||||
url: '#/zh-CN/tutorial/addtabs'
|
||||
},
|
||||
{
|
||||
title: '标签页配置',
|
||||
url: '#/zh-CN/tutorial/tabsattr'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '查询功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '添加查询页面',
|
||||
url: '#/zh-CN/tutorial/addlist'
|
||||
},
|
||||
{
|
||||
title: '列表属性配置',
|
||||
url: '#/zh-CN/tutorial/listattr'
|
||||
},
|
||||
{
|
||||
title: '通讯录查询',
|
||||
url: '#/zh-CN/tutorial/searchfunc'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新增功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '表单新增功能',
|
||||
url: '#/zh-CN/tutorial/addservice'
|
||||
},
|
||||
{
|
||||
title: '表单数据验证',
|
||||
url: '#/zh-CN/tutorial/valid'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '编辑功能',
|
||||
url: '',
|
||||
children: [
|
||||
{
|
||||
title: '开启编辑功能',
|
||||
url: '#/zh-CN/tutorial/editattr'
|
||||
},
|
||||
{
|
||||
title: '保存表格数据',
|
||||
url: '#/zh-CN/tutorial/savefunc'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '规范',
|
||||
url: '#/zh-CN/regular/rulelevel'
|
||||
},
|
||||
{
|
||||
title: '性能',
|
||||
url: '#/zh-CN/speed'
|
||||
},
|
||||
{
|
||||
title: '案例',
|
||||
url: '#/zh-CN/example'
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
url: '#/zh-CN/guide/changelog'
|
||||
},
|
||||
{
|
||||
title: '测试',
|
||||
url: '#/zh-CN/guide/aaa'
|
||||
},
|
||||
{
|
||||
title: '资源',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'SDK',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
title: 'TINY 学院',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview {
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.preview .tiny-nav-menu a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,4 +4,4 @@ title: NavMenu 导航菜单
|
|||
|
||||
# NavMenu 导航菜单
|
||||
|
||||
<div>NavMenu 导航菜单，主要用于定义页面顶部导航的菜单。</div>
|
||||
<div>主要用于定义页面顶部导航的菜单。</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: NavMenu navigation menu
|
|||
|
||||
# NavMenu navigation menu
|
||||
|
||||
<div>NavMenu navigation menu, which is used to define the navigation menu on the top of a page.</div>
|
||||
<div>which is used to define the navigation menu on the top of a page.</div>
|
||||
|
|
|
|||
|
|
@ -6,72 +6,70 @@ export default {
|
|||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>data</code> 属性配置菜单数据，若不配置默认读取后台服务。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>data</code> attribute is used to configure menu data. If the <code>data</code> attribute is not configured, the background service is read by default. For example, Jalor 6 reads the leftMenuNode data of the services/jalor/web/support/workspace/current service. </p>\n'
|
||||
'zh-CN': '通过 <code>data</code> 配置菜单数据。',
|
||||
'en-US': 'The <code>data</code> is used to configure menu data.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'data-resource',
|
||||
'name': { 'zh-CN': '数据源', 'en-US': 'Data Source' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>data</code> 属性配置菜单数据。</p>\n',
|
||||
'en-US': '<p>Configure menu data through the <code>data</code> attribute. </p>\n'
|
||||
},
|
||||
'codeFiles': ['data-resource.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'overflow',
|
||||
'name': { 'zh-CN': '显示策略', 'en-US': 'Display Policy' },
|
||||
'name': { 'zh-CN': '超出显示', 'en-US': 'Exceeding display' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>当一级菜单无法在当前菜单容器里显示完全时，可以通过 <code>overflow</code> 属性配置显示策略，共有 <code>auto</code>、<code>retract</code>、<code>fixed</code>、<code>hidden</code> 4个选项，默认为 <code>auto</code>。</p>\n<div class="tip custom-block"><p class="custom-block-title">overflow 选项说明</p>\n<p>auto：菜单栏右侧显示 <code>更多</code> 菜单，鼠标悬停该菜单时，将显示剩余未展示的菜单。\nfixed：菜单栏左侧显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单。\nretract：菜单栏不显示任何菜单，只显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单。\nhidden：剩余未展示的菜单隐藏不显示。</p>\n</div>\n',
|
||||
'en-US':
|
||||
'<p>When the level-1 menu cannot be completely displayed in the current menu container, you can configure the display policy through the <code>overflow</code> attribute. There are four options: <code>auto</code>, <code>retract</code>, <code>fixed</code>, and <code>hidden</code>. The default value is <code>auto</code>. </p>\n<div class="tip custom-block"><p class="custom-block-title">overflow Option Description</p>\n<p>auto: The <code>More</code> menu is displayed on the right of the menu bar. When you hover over the menu, the remaining menus are displayed. \nfixed: The <code>Sandwich Collapse/Expand</code> icon is displayed on the left of the menu bar. When you hover over the icon, all menus are displayed. \nretract: No menu is displayed on the menu bar. Only the <code>Sandwich Collapse/Expand</code> icon is displayed. When you hover over the icon, all menus are displayed. \nhidden: hides the remaining menus. </p>\n</div>\n'
|
||||
'zh-CN': `当一级菜单内容过多溢出时，通过 <code>overflow</code> 配置显示方式，共有 <code>auto</code>、<code>retract</code>、<code>fixed</code>、<code>hidden</code> 4种方式，默认为 <code>auto</code>。
|
||||
<div class="tip custom-block"><p class="custom-block-title">overflow 选项说明</p>\n<p>
|
||||
auto：菜单栏右侧显示 <code>更多</code> 菜单，鼠标悬停该菜单时，将显示剩余未展示的菜单；<br/>
|
||||
fixed：菜单栏左侧显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>
|
||||
retract：菜单栏不显示任何菜单，只显示 <code>三明治折叠/展开</code> 图标，鼠标悬停该图标时，将显示所有菜单；<br/>
|
||||
hidden：剩余未展示的菜单隐藏不显示。</p></div>`,
|
||||
'en-US': `When there is too much content in the first level menu that overflows, configure the display mode through<code>overflow</code>. There are four modes:<code>auto</code>,<code>retract</code>,<code>fixed</code>, and<code>hidden</code>. The default is<code>auto</code>.
|
||||
<div class="tip custom-block"><p class="custom-block-title">Overview Options Description</p>\n<p>
|
||||
auto: The<code>More</code>menu is displayed on the right side of the menu bar. When the mouse hovers over this menu, the remaining undisclosed menus will be displayed< br/>
|
||||
fixed: The<code>sandwich fold/expand</code>icon is displayed on the left side of the menu bar. When the mouse hovers over this icon, all menus will be displayed< br/>
|
||||
retract: The menu bar does not display any menus, only displays the<code>sandwich fold/expand</code>icon. When the mouse hovers over this icon, all menus will be displayed< br/>
|
||||
hidden: The remaining undisclosed menus are hidden and not displayed.</p> </div>`
|
||||
},
|
||||
'codeFiles': ['overflow.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-toolbar',
|
||||
'name': { 'zh-CN': 'Toolbar 插槽', 'en-US': 'Toolbar slot' },
|
||||
'name': { 'zh-CN': '定义工具栏', 'en-US': 'Custom Toolbar' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>提供 <code>toolbar</code> 插槽用于自定义 Toolbar 。</p>\n',
|
||||
'en-US': '<p>Provides a <code>toolbar</code> slot for customizing the Toolbar. </p>\n'
|
||||
'zh-CN': '通过 <code>toolbar</code> 插槽自定义工具栏。',
|
||||
'en-US': 'Customize the toolbar through the<code>toolbar</code>slot.'
|
||||
},
|
||||
'codeFiles': ['slot-toolbar.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'slot-logo',
|
||||
'name': { 'zh-CN': 'Logo 插槽', 'en-US': 'Logo slot' },
|
||||
'name': { 'zh-CN': '定义Logo', 'en-US': 'Custom Logo' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>提供 <code>logo</code> 插槽用于自定义 Logo 。</p>\n',
|
||||
'en-US': '<p>Provides a <code>logo</code> slot for customizing the logo. </p>\n'
|
||||
'zh-CN': '通过 <code>logo</code> 插槽自定义 Logo 。',
|
||||
'en-US': 'Customize the logo through the<code>logo</code>slot.'
|
||||
},
|
||||
'codeFiles': ['slot-logo.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'before-skip',
|
||||
'name': { 'zh-CN': '菜单跳转处理', 'en-US': 'Menu redirection processing' },
|
||||
'name': { 'zh-CN': '跳转前处理', 'en-US': 'Pre jump processing' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>提供 <code>before-skip</code> 钩子函数，用于菜单点击跳转前处理相关逻辑，返回 <code>false</code> 将无法跳转。</p>\n',
|
||||
'通过 <code>before-skip</code> 钩子函数处理菜单点击跳转前的相关逻辑，返回 <code>false</code> 则无法跳转。',
|
||||
'en-US':
|
||||
'<p>Provides the <code>before-skip</code> hook function for processing logic before a menu is clicked. If <code>false</code> is returned, the menu cannot be redirected. </p>\n'
|
||||
'By using the<code>before-skip</code>hook function to handle the relevant logic before clicking and jumping to the menu, if<code>false</code>is returned, the jump cannot be made.'
|
||||
},
|
||||
'codeFiles': ['before-skip.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'before-skip-prevent',
|
||||
'name': {
|
||||
'zh-CN': '使用组件默认服务时，菜单跳转处理',
|
||||
'en-US': 'Menu redirection processing when the default service of the component is used'
|
||||
'zh-CN': '默认服务的跳转前处理',
|
||||
'en-US': 'Pre jump processing for default services'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>如果使用组件的默认服务 <code>/workspace/current</code> 获取菜单数据 <code>response.data.leftMenuNode.children</code>，那么在使用 <code>before-skip</code> 时，需配置属性 <code>prevent</code>，用来阻止默认的跳转行为。属性 <code>prevent</code> 默认值为 <code>false</code>。</p>\n',
|
||||
'若使用默认服务 <code>/workspace/current</code> 获取菜单数据 <code>response.data.leftMenuNode.children</code>，则在使用 <code>before-skip</code> 时，需配合 <code>prevent</code> 为 <code>true</code> 来阻止默认的跳转行为。',
|
||||
'en-US':
|
||||
'<p>If the default service <code>/workspace/current</code> of the component is used to obtain the menu data <code>response.data.leftMenuNode.children</code>, when <code>before-skip</code> is used: The <code>prevent</code> attribute needs to be configured to prevent the default redirection behavior. The default value of the <code>prevent</code> attribute is <code>false</code>. </p>\n'
|
||||
'If the default service<code>/workspace/current</code>is used to obtain menu data<code>response. data. leftMenuNode. children</code>, then when using<code>before-skip</code>, it is necessary to cooperate with<code>prevent</code>to prevent default jump behavior.'
|
||||
},
|
||||
'codeFiles': ['before-skip-prevent.vue']
|
||||
},
|
||||
|
|
@ -80,9 +78,9 @@ export default {
|
|||
'name': { 'zh-CN': '自定义服务', 'en-US': 'Custom Service' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>fetch-menu-data</code> 可以自定义菜单服务，若数据中字段不是默认的 <code>title</code>、<code>url</code>，则可以通过 <code>fields</code> 对数据中的字段进行映射。</p>\n',
|
||||
'通过 <code>fetch-menu-data</code> 自定义菜单服务，若数据中字段并非默认的 <code>title</code> 和 <code>url</code>，则通过 <code>fields</code> 对数据中的字段进行映射。',
|
||||
'en-US':
|
||||
'<p>You can use the <code>fetch-menu-data</code> to customize the menu service. If the fields in the data are not the default <code>title</code> and <code>url</code>, You can use <code>fields</code> to map the fields in the data. </p>\n'
|
||||
'By customizing the menu service through<code>fetch-menu-data</code>, if the fields in the data are not the default<code>title</code> and <code>URL</code>, the fields in the data can be mapped through<code>fields</code>.'
|
||||
},
|
||||
'codeFiles': ['custom-service.vue']
|
||||
},
|
||||
|
|
@ -90,10 +88,8 @@ export default {
|
|||
'demoId': 'crm-demo',
|
||||
'name': { 'zh-CN': '自定义样式', 'en-US': 'Custom Style' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过修改css变量名自定义导航菜单样式。</p>\n',
|
||||
'en-US':
|
||||
'<p>Customizing the NavMenu style by changing the CSS variable name. </p>\n'
|
||||
'zh-CN': '通过修改 <code>css</code> 变量名自定义导航菜单样式。',
|
||||
'en-US': 'Customizing the NavMenu style by changing the <code>CSS</code> variable name. '
|
||||
},
|
||||
'codeFiles': ['crm-demo.vue']
|
||||
}
|
||||
|
|
@ -102,53 +98,67 @@ export default {
|
|||
{
|
||||
'name': 'nav-menu',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置导航菜单的数据。', 'en-US': 'Set the navigation menu data.' },
|
||||
'demoId': 'data-resource'
|
||||
},
|
||||
{
|
||||
'name': 'overflow',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置一级菜单无法在当前菜单容器里显示完全时的处理策略。;可选项有 auto / retract / fixed / hidden;默认值为 auto',
|
||||
'en-US':
|
||||
'Sets the processing policy when the level-1 menu cannot be completely displayed in the current menu container. ; The options are auto, retract, fixed, and hidden. The default value is auto'
|
||||
},
|
||||
'demoId': 'overflow'
|
||||
},
|
||||
'props': [
|
||||
{
|
||||
'name': 'before-skip',
|
||||
'type': 'Function',
|
||||
'type': '(item: IMenuItem) => boolean',
|
||||
'typeAnchorName': 'IMenuItem',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '点击菜单跳转前的钩子函数，返回 false 将无法跳转。',
|
||||
'zh-CN': '点击菜单跳转前的钩子函数，返回 false 将无法跳转',
|
||||
'en-US':
|
||||
'Click the hook function before menu redirection. If false is returned, menu redirection cannot be performed.'
|
||||
'Click the hook function before menu redirection. If false is returned, menu redirection cannot be performed'
|
||||
},
|
||||
'demoId': 'before-skip'
|
||||
},
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'IDataItem[]',
|
||||
'typeAnchorName': 'IDataItem',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置导航菜单的数据', 'en-US': 'Set the navigation menu data' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'fetch-menu-data',
|
||||
'type': 'Function',
|
||||
'type': '() => IDataItem[]',
|
||||
'typeAnchorName': 'IMenuItem',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义菜单数据加载服务，返回一个Promise对象。',
|
||||
'en-US': 'Customize the menu data loading service. A Promise object is returned.'
|
||||
'zh-CN': '自定义菜单数据加载服务，返回一个Promise对象',
|
||||
'en-US': 'Customize the menu data loading service. A Promise object is returned'
|
||||
},
|
||||
'demoId': 'custom-service'
|
||||
},
|
||||
{
|
||||
'name': 'fields',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '自定义菜单数据的映射。', 'en-US': 'User-defined menu data mapping.' },
|
||||
'type': 'IFields',
|
||||
'typeAnchorName': 'IFields',
|
||||
'defaultValue': '{ textField: "title", urlField: "url", key: "id" }',
|
||||
'desc': { 'zh-CN': '自定义菜单数据的映射', 'en-US': 'User-defined menu data mapping' },
|
||||
'demoId': 'custom-service'
|
||||
},
|
||||
{
|
||||
'name': 'overflow',
|
||||
'type': 'string',
|
||||
'defaultValue': 'auto',
|
||||
'desc': {
|
||||
'zh-CN': '设置一级菜单无法在当前菜单容器里显示完全时的展示方式;可选项有 auto / retract / fixed / hidden',
|
||||
'en-US':
|
||||
'Set the display method when the first level menu cannot be fully displayed in the current menu container; Options include auto/retract/fixed/hidden'
|
||||
},
|
||||
'demoId': 'overflow'
|
||||
},
|
||||
{
|
||||
'name': 'prevent',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '若使用组件的默认服务获取菜单数据，并且要阻止默认的跳转行为，需要 before-skip 和此属性一起使用',
|
||||
'en-US':
|
||||
'If you use the default service of the component to obtain menu data and want to prevent default jump behavior, you need to use before-skip in conjunction with this attribute'
|
||||
},
|
||||
'demoId': 'before-skip-prevent'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
|
|
@ -166,11 +176,47 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义右上角部分 toolbar 插槽',
|
||||
'en-US': 'Customize the toolbar slot in the upper right corner. '
|
||||
'en-US': 'Customize the toolbar slot in the upper right corner'
|
||||
},
|
||||
'demoId': 'slot-toolbar'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IMenuItem',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IMenuItem {
|
||||
id: string
|
||||
isFullUrl: boolean
|
||||
pid: string
|
||||
route: string
|
||||
target: string
|
||||
title: string
|
||||
url: string
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'IDataItem',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IDataItem {
|
||||
title: string
|
||||
url: string
|
||||
children?: IDataItem[]
|
||||
}`
|
||||
},
|
||||
{
|
||||
name: 'IFields',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IFields {
|
||||
textField: string
|
||||
urlField: string
|
||||
key?: string
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>percentage</code>设置进度值，<code>stroke-width</code>设置进度条的宽度，单位 px。',
|
||||
'en-US':
|
||||
'Set the progress value through<code>percentage</code>, and<code>stroke width</code>to set the width of the progress bar in px.'
|
||||
'Set the progress value through<code>percentage</code>, and<code>stroke-width</code>to set the width of the progress bar in px.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>show-text</code>设置文字显隐；<code>text-inside</code>设置文字内置在进度条内显示（只在 type=line 时可用），<code>format</code>自定义进度条的文字。',
|
||||
'en-US':
|
||||
'Set text display and hiding through<code>show text</code>< Code>text insert</code>Set the text to be displayed within the progress bar (only available when type=line), and customize the text for the progress bar.<code>format</code>.'
|
||||
'Set text display and hiding through<code>show-text</code>; <code>text-inside</code>Set the text to be displayed within the progress bar (only available when type=line), and<code>format</code>customize the text for the progress bar.'
|
||||
},
|
||||
'codeFiles': ['format-text.vue']
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>search-types</code>设置可选的搜索类型，<code>type-value</code>设置搜索类型的默认值。',
|
||||
'en-US':
|
||||
'Set optional search types by<code>search types</code>, and set default values for search types by<code>type value</code>.'
|
||||
'Set optional search types by<code>search-types</code>, and set default values for search types by<code>type-value</code>.'
|
||||
},
|
||||
'codeFiles': ['search-types.vue']
|
||||
},
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': '通过<code>is-enter-search</code>设置回车触发搜索事件，<code>search</code>监听搜索事件。',
|
||||
'en-US':
|
||||
'Set a carriage return to trigger a search event by<code>is enter search</code>, and listen for search events by<code>search</code>.'
|
||||
'Set a carriage return to trigger a search event by<code>is-enter-search</code>, and listen for search events by<code>search</code>.'
|
||||
},
|
||||
'codeFiles': ['search-events.vue']
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过<code>effect</code>设置主题，可选值：<code>(dark / light / plain)</code>；<code>type</code>设置类型，可选值：<code>(success / info / warning / danger)</code>。',
|
||||
'en-US':
|
||||
'Set the theme through<code>effect</code>, with optional values:<code>(dark/light/plain)</code>< Code>type</code>Set the type, optional values:<code>(success/info/warning/danger)</code>.'
|
||||
'Set the theme through<code>effect</code>, with optional values:<code>(dark/light/plain)</code>;<code>type</code>Set the type, optional values:<code>(success/info/warning/danger)</code>.'
|
||||
},
|
||||
'codeFiles': ['effect.vue']
|
||||
},
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
'desc': {
|
||||
'zh-CN': `添加新标签：监听<code>+ New Tag</code>元素点击事件，打开<code>input</code>输入框，监听输入框事件做添加操作；<br />
|
||||
修改旧标签：监听旧标签的双击事件，打开<code>input</code>输入框，监听输入框事件做修改操作。`,
|
||||
'en-US': `Add a new tag: listen for<code>+New Tag</code>element click events, open the<code>input</code>input box, and listen for input box events to add< Br/>
|
||||
'en-US': `Add a new tag: listen for<code>+New Tag</code>element click events, open the<code>input</code>input box, and listen for input box events to add<br/>
|
||||
Modify old tags: listen for double click events on old tags, open the<code>input</code>input box, and listen for input box events to make modifications.`
|
||||
},
|
||||
'codeFiles': ['create.vue']
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过 <code>page-guide</code> 设置页向导模式，包含流程图区域、页面展示区域、功能按钮区域，用于导航当前页面与上一页面、下一页面的前后关系。',
|
||||
'en-US':
|
||||
'Set the page wizard mode through<code>page guide</code>, including the flowchart area, page display area, and function button area, to navigate the relationship between the current page and the previous or next page.'
|
||||
'Set the page wizard mode through<code>page-guide</code>, including the flowchart area, page display area, and function button area, to navigate the relationship between the current page and the previous or next page.'
|
||||
},
|
||||
'codeFiles': ['page-guide.vue']
|
||||
},
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
'zh-CN':
|
||||
'通过 <code>time-line-flow</code> 设置时间线，以时间点的方式竖向显示流程节点处理信息，包含节点名称、状态、完成时间、用户信息。',
|
||||
'en-US':
|
||||
'Set a timeline through<code>time line flow</code>to vertically display process node processing information in a time point manner, including node name, status, completion time, and user information.'
|
||||
'Set a timeline through<code>time-line-flow</code>to vertically display process node processing information in a time point manner, including node name, status, completion time, and user information.'
|
||||
},
|
||||
'codeFiles': ['time-line-flow.vue']
|
||||
},
|
||||
|
|
@ -73,10 +73,10 @@ export default {
|
|||
<code>btn-next</code> 监听“下一步”按钮点击事件；<br />
|
||||
<code>btn-save</code> 监听“保存”按钮点击事件；<br />
|
||||
<code>btn-submit</code> 监听“提交”按钮点击事件，流程需要走到最后一步才会显示此按钮。<br />`,
|
||||
'en-US': `In page wizard mode: listen for the "Previous" button click event through<code>btn prev</code>< Br/>
|
||||
<code>btn next</code>Listen for the "Next" button click event< Br/>
|
||||
<code>btn save</code>Listen for the "save" button click event< Br/>
|
||||
<code>btn submit</code>Listen for the "submit" button click event, and the process needs to go to the last step to display this button< Br/>.`
|
||||
'en-US': `In page wizard mode: listen for the "Previous" button click event through<code>btn-prev</code><br/>
|
||||
<code>btn-next</code>Listen for the "Next" button click event<br/>
|
||||
<code>btn-save</code>Listen for the "save" button click event<br/>
|
||||
<code>btn-submit</code>Listen for the "submit" button click event, and the process needs to go to the last step to display this button<br/>.`
|
||||
},
|
||||
'codeFiles': ['btn-events.vue']
|
||||
}
|
||||
|
|
@ -121,7 +121,7 @@ export default {
|
|||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'btnNext',
|
||||
'name': 'btn-next',
|
||||
'type': '(datas: IDataItem[]) => void',
|
||||
'typeAnchorName': 'IDataItem',
|
||||
'desc': {
|
||||
|
|
@ -131,7 +131,7 @@ export default {
|
|||
'demoId': 'btn-events'
|
||||
},
|
||||
{
|
||||
'name': 'btnPrev',
|
||||
'name': 'btn-prev',
|
||||
'type': '(datas: IDataItem[]) => void',
|
||||
'typeAnchorName': 'IDataItem',
|
||||
'desc': {
|
||||
|
|
@ -141,7 +141,7 @@ export default {
|
|||
'demoId': 'btn-events'
|
||||
},
|
||||
{
|
||||
'name': 'btnSave',
|
||||
'name': 'btn-save',
|
||||
'type': '(datas: IDataItem[]) => void',
|
||||
'typeAnchorName': 'IDataItem',
|
||||
'desc': {
|
||||
|
|
@ -151,7 +151,7 @@ export default {
|
|||
'demoId': 'btn-events'
|
||||
},
|
||||
{
|
||||
'name': 'btnSubmit',
|
||||
'name': 'btn-submit',
|
||||
'type': '(datas: IDataItem[]) => void',
|
||||
'typeAnchorName': 'IDataItem',
|
||||
'desc': {
|
||||
|
|
|
|||
Loading…
Reference in New Issue