docs(sites): update docs
Match-id-555be0630d8af00f117863e2a2287357bf6dd1ca
This commit is contained in:
OpenTiny
parent
83941980aa
commit
1d1032ad08
|
|
@ -438,6 +438,15 @@
|
|||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "AcWrong02",
|
||||
"name": "AcWrong02",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/147061401?v=4",
|
||||
"profile": "https://github.com/AcWrong02",
|
||||
"contributions": [
|
||||
"bug"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ name: E2E Test PR
|
|||
run-name: E2E Test PR--${{ github.event.pull_request.title }}
|
||||
on:
|
||||
pull_request:
|
||||
branches: [dev, release, main]
|
||||
types: [opened, reopened, synchronize, edited]
|
||||
|
||||
concurrency:
|
||||
|
|
@ -10,26 +9,42 @@ concurrency:
|
|||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
pr-test:
|
||||
name: PR E2E Test
|
||||
parse-components:
|
||||
name: Parse Affected Components
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
TEST_COMPONENTS: ''
|
||||
outputs:
|
||||
testComponents: ${{ steps.parseTitle.outputs.testComponents }}
|
||||
steps:
|
||||
- name: Parse Title
|
||||
id: parseTitle
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
script: |
|
||||
const prTitle = '${{ github.event.pull_request.title }}'
|
||||
const prTitle = context.payload.pull_request.title
|
||||
const regex = /\[(.*?)\]/
|
||||
const matches = prTitle.match(regex)
|
||||
if (matches && matches.length > 1 && matches[1]) {
|
||||
let components = matches[1].split(',').map(c => `${c.trim()}/`).filter(c => c)
|
||||
let components = matches[1].split(',').map(c => c.trim()).filter(c => /^[a-z\-]+$/.test(c)).map(c => `${c}/`)
|
||||
components = [...new Set(components)].slice(0, 3).join(' ')
|
||||
core.exportVariable('TEST_COMPONENTS', components)
|
||||
core.setOutput('testComponents', components)
|
||||
} else {
|
||||
core.setFailed('Missing components to be tested. Title must be like "fix(components): [input, alert] fix xxx bug", component name comes from "examples/sites/demos/pc/app". Please read our contributing guide')
|
||||
const warningString =`
|
||||
The component to be tested is missing.
|
||||
|
||||
The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".
|
||||
|
||||
Please make sure you've read our [contributing guide](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
|
||||
`
|
||||
core.warning(warningString)
|
||||
}
|
||||
pr-test:
|
||||
if: ${{ needs.parse-components.outputs.testComponents }}
|
||||
name: PR E2E Test
|
||||
needs: parse-components
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
TEST_COMPONENTS: ${{ needs.parse-components.outputs.testComponents }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Setup pnpm
|
||||
uses: pnpm/action-setup@v2
|
||||
|
|
|
|||
|
|
@ -55,3 +55,5 @@ packages/theme/scripts/theme-result.txt
|
|||
packages/theme/scripts/themeExcel.xlsx
|
||||
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
|
||||
pnpm-lock.yaml
|
||||
|
|
|
|||
|
|
@ -38,6 +38,25 @@ The following information is required for the Issue of the new feature:
|
|||
|
||||
Before submitting pull request, please make sure that your submission is in line with the overall plan of TinyVue. Generally, issues that marked as [bug](https://github.com/opentiny/tiny-vue/labels/bug) are encouraged to submit pull requests. If you are not sure, you can create a [Discussion](https://github.com/opentiny/tiny-vue/discussions) for discussion.
|
||||
|
||||
### Pull Request specification
|
||||
|
||||
- The commit message should be in the form of a `type(scope): description of the message`, e.g. `fix(vue-renderless): [scrollbar, action-menu] fix xxx bug`.
|
||||
|
||||
1. type: must be one of build, chore, ci, docs, feat, fix, perf, refactor, revert, release, style, test, improvement.
|
||||
|
||||
2. scope.
|
||||
- Package names in the `packages` directory, e.g. `vue-design-aurora, vue-design-saas, react ......`
|
||||
- Component name under the package name in the `packages` directory, e.g., `vue-design-aurora/alert, vue-design-saas/alert, react/alert ......`
|
||||
- The name of the folder to use: e.g.: `gulp, internals/playwright-config, sites`
|
||||
- The name of the component (lowercase, center dot): e.g.: `action-menu, alert ......`
|
||||
|
||||
3. Run e2e tests: Using `[componentName1, componentName2]` in the commit message will execute the test case for componentName1, componentName2, which needs to be declared when changing code that affects the component.
|
||||
|
||||
4. Example.
|
||||
- Supplemental documentation for the alert component: `docs(alert): [alert] xxxxxxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
|
||||
- Add test case for the alert component: `test(alert): [alert] xxxxxxxxxxxxxxxxxx`.
|
||||
- Fix a bug in the alter component @opentiny/vue-renderless: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxxxx`
|
||||
|
||||
Local startup steps:
|
||||
|
||||
- Click the Fork button in the upper right corner of the [TinyVue](https://github.com/opentiny/tiny-vue) code repository to Fork the upstream repository to the personal repository.
|
||||
|
|
@ -85,7 +104,7 @@ The contribution process is over, thank you for your contribution!
|
|||
If you are interested in our open source project, you are welcome to join our open source community in the following ways.
|
||||
|
||||
- Add official assistant WeChat: opentiny-official to join our technical exchange group.
|
||||
- Add to the mailing list: opentiny@googlegroups.com
|
||||
- Add to the mailing list: <opentiny@googlegroups.com>
|
||||
|
||||
If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull Request, asking @all-contributors to add a contributor:
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,25 @@
|
|||
|
||||
提交 PR 之前，请先确保你提交的内容是符合 TinyVue 整体规划的，一般已经标记为 [bug](https://github.com/opentiny/tiny-vue/labels/bug) 的 Issue 是鼓励提交 PR 的，如果你不是很确定，可以创建一个 [Discussion](https://github.com/opentiny/tiny-vue/discussions) 进行讨论。
|
||||
|
||||
### Pull Request 规范
|
||||
|
||||
- commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(vue-renderless): [scrollbar, action-menu] fix xxx bug`。
|
||||
|
||||
1. type: 必须是 build, chore, ci, docs, feat, fix, perf, refactor, revert, release, style, test, improvement 其中的一个。
|
||||
|
||||
2. scope:
|
||||
- `packages`目录下的包名，比如：`vue-design-aurora, vue-design-saas, react ......`
|
||||
- `packages`目录下的包名下的组件名，比如：`vue-design-aurora/alert, vue-design-saas/alert, react/alert ......`
|
||||
- 用文件夹的名称: 比如: `gulp, internals/playwright-config, sites`
|
||||
- 组件的名称(小写，中划线): 比如: `action-menu, alert ......`
|
||||
|
||||
3. 运行e2e测试: 在提交信息里使用 `[componentName1, componentName2]`，将会执行componentName1，componentName2的测试用例，当改动的代码会影响组件时，需要声明这个结构。
|
||||
|
||||
4. 示例:
|
||||
- 补充alert组件文档： `docs(alert): [alert] xxxxxxxxxxxxxxx`, `docs(site): [alert] xxxxxxxxxxxxxxx`
|
||||
- 补充alet组件测试用例: `test(alert): [alert] xxxxxxxxxxxxxx`
|
||||
- 修复alet组件@opentiny/vue-renderless下的缺陷: `fix(vue-renderless/alert): [alert] xxxxxxxxxxxxxx`
|
||||
|
||||
本地启动步骤：
|
||||
|
||||
- 点击 [TinyVue](https://github.com/opentiny/tiny-vue) 代码仓库右上角的 Fork 按钮，将上游仓库 Fork 到个人仓库
|
||||
|
|
@ -85,7 +104,7 @@ pnpm dev:vue2
|
|||
如果你对我们的开源项目感兴趣，欢迎通过以下方式加入我们的开源社区。
|
||||
|
||||
- 添加官方小助手微信：opentiny-official，加入我们的技术交流群
|
||||
- 加入邮件列表：opentiny@googlegroups.com
|
||||
- 加入邮件列表：<opentiny@googlegroups.com>
|
||||
|
||||
如果你给 OpenTiny 提交过 Issue 或 PR，请通过以下方式添加自己到贡献者列表里。
|
||||
|
||||
|
|
|
|||
|
|
@ -144,6 +144,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/ianxinnew"><img src="https://avatars.githubusercontent.com/u/146069396?v=4?s=100" width="100px;" alt="tianxin"/><br /><sub><b>tianxin</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ianxinnew" title="Code">💻</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Xppp0217"><img src="https://avatars.githubusercontent.com/u/82315158?v=4?s=100" width="100px;" alt="Xppp0217"/><br /><sub><b>Xppp0217</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Xppp0217" title="Code">💻</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/AcWrong02"><img src="https://avatars.githubusercontent.com/u/147061401?v=4?s=100" width="100px;" alt="AcWrong02"/><br /><sub><b>AcWrong02</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/issues?q=author%3AAcWrong02" title="Bug reports">🐛</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<span v-else>{{ row.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.type }}</td>
|
||||
<td>{{ row.defaultValue }}</td>
|
||||
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Alert } from '@opentiny/react'
|
||||
import { Button, Alert, Switch, Badge } from '@opentiny/react'
|
||||
|
||||
// 在这里导入组件，进行 api 调试
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<div
|
||||
className='app'
|
||||
>
|
||||
<Alert
|
||||
description='吃饭了吗'
|
||||
></Alert>
|
||||
<Button>点击按钮</Button>
|
||||
<Alert description='默认提示组件'/>
|
||||
<Switch/>
|
||||
<Badge value={10}>待办</Badge>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@ import App from './App.tsx'
|
|||
import './main.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<App />
|
||||
<App />
|
||||
)
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ const getApiTableOptFn = oneApiArr => {
|
|||
key: 'defaultValue',
|
||||
title: $t('defValue'),
|
||||
width: '20%',
|
||||
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
|
||||
render: row => <div class="route-anchor" v-html={typeof row.defaultValue === 'string' ? row.defaultValue : row.defaultValue[state.langKey]}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ const getApiTableOptFn = oneApiArr => {
|
|||
key: 'defaultValue',
|
||||
title: $t('defValue'),
|
||||
width: '20%',
|
||||
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
|
||||
render: row => <div class="route-anchor" v-html={typeof row.defaultValue === 'string' ? row.defaultValue : row.defaultValue[state.langKey]}></div>,
|
||||
},
|
||||
{
|
||||
key: 'desc',
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'action',
|
||||
name: {
|
||||
'zh-CN': '操作列表模式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Operation list mode'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。</p>',
|
||||
'en-US': '<p>Set `type` to `action` to enable the operation list mode and set `title` to display prompts.</p>'
|
||||
},
|
||||
codeFiles: ['action.vue']
|
||||
},
|
||||
|
|
@ -30,12 +30,13 @@ export default {
|
|||
demoId: 'show',
|
||||
name: {
|
||||
'zh-CN': '显示隐藏',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Show Hide'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；</p>',
|
||||
'en-US':
|
||||
'<p>show-header: displays the header. The default value is true. - show-search: displays the header search function. The default value is true. - show-footer: displays the bottom. The default value is false</p>'
|
||||
},
|
||||
codeFiles: ['show.vue']
|
||||
},
|
||||
|
|
@ -43,11 +44,11 @@ export default {
|
|||
demoId: 'mask',
|
||||
name: {
|
||||
'zh-CN': '遮罩层1',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Mask layer one'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。</p>',
|
||||
'en-US': '<p>bAdd the `mask` attribute to turn off the mask layer. The default value is `true`.</p>'
|
||||
},
|
||||
codeFiles: ['mask.vue']
|
||||
},
|
||||
|
|
@ -55,12 +56,13 @@ export default {
|
|||
demoId: 'mask-event',
|
||||
name: {
|
||||
'zh-CN': '遮罩层2',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Mask layer two'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true`。</p>',
|
||||
'en-US':
|
||||
'<p>After the default pop-up window is opened, you can click the mask layer to close the pop-up window. If `mask-closable` is set to `false`, this function is disabled. The default value is `true`</p>'
|
||||
},
|
||||
codeFiles: ['mask-event.vue']
|
||||
},
|
||||
|
|
@ -68,12 +70,13 @@ export default {
|
|||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；</p>',
|
||||
'en-US':
|
||||
'<p> header: header slot. The header is displayed by default. This parameter is valid only when show-header is set to true. - header-left: slot on the left of the header. The search function is displayed by default. - header-right: slot on the right side of the head. The function is disabled by default. - footer: head slot. The bottom is hidden by default. This parameter is valid only when show-footer is set to true.</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
},
|
||||
|
|
@ -81,14 +84,236 @@ export default {
|
|||
demoId: 'ellipsis',
|
||||
name: {
|
||||
'zh-CN': '超出省略',
|
||||
'en-US': 'events'
|
||||
'en-US': 'ellipsis'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加属性 `ellipsis` 选项内容会超出隐藏。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>添加属性 `ellipsis` 选项内容会超出隐藏。</p>',
|
||||
'en-US': '<p>Added attribute `ellipsis` content meeting super surviving.</p>'
|
||||
},
|
||||
codeFiles: ['ellipsis.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'ActionSheet',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '自定义 class 样式',
|
||||
'en-US': 'Customize the class style.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'flex',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '设置弹性布局,默认为 true',
|
||||
'en-US': 'Sets the elastic layout. The default value is true.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'mask',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示遮罩层，默认值为 true',
|
||||
'en-US': 'Indicates whether to display the mask layer. The default value is true.'
|
||||
},
|
||||
'demoId': 'mask'
|
||||
},
|
||||
{
|
||||
'name': 'mask-closable',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '单击遮罩层是否关闭弹窗，默认值为 true',
|
||||
'en-US':
|
||||
'Indicates whether to close the pop-up window when you click the mask layer. The default value is true.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'action'
|
||||
},
|
||||
{
|
||||
'name': 'show-footer',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示底部，默认值为 false',
|
||||
'en-US': 'Indicates whether to display the bottom. The default value is false.'
|
||||
},
|
||||
'demoId': 'show'
|
||||
},
|
||||
{
|
||||
'name': 'show-header',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示头部，默认值为 true',
|
||||
'en-US': 'Indicates whether to display the header. The default value is true.'
|
||||
},
|
||||
'demoId': 'show'
|
||||
},
|
||||
{
|
||||
'name': 'title',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '面板标题',
|
||||
'en-US': 'Panel Title'
|
||||
},
|
||||
'demoId': 'actoin'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'Array[string]',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置 type 为 action 启用操作列表模式',
|
||||
'en-US': 'Set type to action to enable the operation list mode.'
|
||||
},
|
||||
'demoId': 'action'
|
||||
},
|
||||
{
|
||||
'name': 'v-model',
|
||||
'type': 'Number | String | Array',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '双向数据绑定',
|
||||
'en-US': 'bidirectional data binding'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'visible',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否弹出面板',
|
||||
'en-US': 'Indicates whether to display the panel.'
|
||||
}
|
||||
}
|
||||
],
|
||||
'methods': [
|
||||
{
|
||||
'name': 'actionSelectOption',
|
||||
'type': '',
|
||||
'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.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'close',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '关闭面板',
|
||||
'en-US': 'Close the panel.'
|
||||
},
|
||||
'demoId': 'action'
|
||||
}
|
||||
],
|
||||
'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.'
|
||||
},
|
||||
'demoId': 'action'
|
||||
},
|
||||
{
|
||||
'name': 'close',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '关闭面板时触发的事件。',
|
||||
'en-US': 'Event triggered when a panel is closed.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'update:visible',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '面板显示或隐藏时触发',
|
||||
'en-US': 'riggered when the panel is displayed or hidden'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'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.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'header-right ',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '头部右侧插槽，设置 show-header 为 true 时有效',
|
||||
'en-US': 'Slot on the right of the header. This parameter is valid only when show-header is set to true.'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': '默认主題样式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Default Theme Style'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`type` 设置显示主题，可选值：danger(默认)、primary、success、warning、info<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`type` 设置显示主题，可选值：danger(默认)、primary、success、warning、info</p>',
|
||||
'en-US': '<p>`type`Set the display theme. The options are danger (default), primary, success, warning, and info.</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
demoId: 'type-left',
|
||||
name: {
|
||||
'zh-CN': '圆点向左排列样式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Dot Left Arrange Style'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`show-left` 设置是否向左展示，仅对圆点生效<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`show-left` 设置是否向左展示，仅对圆点生效</p>',
|
||||
'en-US': '<p>`show-left` Sets whether to display the dots to the left. This parameter is valid only for dots.</p>'
|
||||
},
|
||||
codeFiles: ['type-left.vue']
|
||||
},
|
||||
|
|
@ -42,11 +42,11 @@ export default {
|
|||
demoId: 'is-dot',
|
||||
name: {
|
||||
'zh-CN': '小圆点标记',
|
||||
'en-US': 'events'
|
||||
'en-US': 'small dot mark'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过`is-dot` 显示小圆点标记<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过`is-dot` 显示小圆点标记</p>',
|
||||
'en-US': '<p>Display small dot markers with `is-dot`</p>'
|
||||
},
|
||||
codeFiles: ['is-dot.vue']
|
||||
},
|
||||
|
|
@ -54,11 +54,11 @@ export default {
|
|||
demoId: 'max',
|
||||
name: {
|
||||
'zh-CN': '计数最大值',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Maximum count value'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`max` 超过最大值会显示 `{max}+` <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`max` 超过最大值会显示 `{max}+` </p>',
|
||||
'en-US': '<p>`max` If the maximum value is exceeded, `{max}+` is displayed.</p>'
|
||||
},
|
||||
codeFiles: ['max.vue']
|
||||
},
|
||||
|
|
@ -66,11 +66,11 @@ export default {
|
|||
demoId: 'target',
|
||||
name: {
|
||||
'zh-CN': '跳转链接',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Jump link'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`href`定义跳转链接<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`href`定义跳转链接</p>',
|
||||
'en-US': '<p>`href`Define Jump Link</p>'
|
||||
},
|
||||
codeFiles: ['target.vue']
|
||||
},
|
||||
|
|
@ -78,11 +78,11 @@ export default {
|
|||
demoId: 'slot-default',
|
||||
name: {
|
||||
'zh-CN': '自定义标记目标',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Marker Targets'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`default slot` 标记内容自定义<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`default slot` 标记内容自定义</p>',
|
||||
'en-US': '<p>`default slot` tag content customization</p>'
|
||||
},
|
||||
codeFiles: ['slot-default.vue']
|
||||
},
|
||||
|
|
@ -90,11 +90,11 @@ export default {
|
|||
demoId: 'slot-content',
|
||||
name: {
|
||||
'zh-CN': '自定义提示内容',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Customized prompt content'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`content slot` 自定义提示内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`content slot` 自定义提示内容</p>',
|
||||
'en-US': '<p>`content slot` Customized prompt content</p>'
|
||||
},
|
||||
codeFiles: ['slot-content.vue']
|
||||
},
|
||||
|
|
@ -102,11 +102,11 @@ export default {
|
|||
demoId: 'dynamic-hidden',
|
||||
name: {
|
||||
'zh-CN': '消息已读动态隐藏标记',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Message Read Dynamic Hide Flag'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`hidden` 隐藏标记<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`hidden` 隐藏标记</p>',
|
||||
'en-US': '<p>`hidden`hide markup</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-hidden.vue']
|
||||
},
|
||||
|
|
@ -114,14 +114,31 @@ export default {
|
|||
demoId: 'props-content',
|
||||
name: {
|
||||
'zh-CN': '属性传值显示内容',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Displayed content of attribute value transfer'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过绑定`data`属性传入自定义内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过绑定`data`属性传入自定义内容</p>',
|
||||
'en-US': '<p>Transfer the customized content by binding the `data` attribute.</p>'
|
||||
},
|
||||
codeFiles: ['props-content.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Badge',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'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.'
|
||||
},
|
||||
'demoId': 'type-left'
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-button>
|
||||
<tiny-button size="medium">
|
||||
<img :src="image" width="26" />
|
||||
<span>图片按钮</span>
|
||||
</tiny-button>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,18 @@ export default {
|
|||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'click',
|
||||
name: {
|
||||
'zh-CN': '默认按钮',
|
||||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息</p>',
|
||||
'en-US': '<p>Click event of a button. In this example, a message is displayed when a button is clicked.</p>'
|
||||
},
|
||||
codeFiles: ['click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'text',
|
||||
name: {
|
||||
|
|
@ -11,7 +23,8 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置<code>type</code> 属性为 <code>text</code> 即为文字按钮，可在标签子级或者通过 <code>text</code> 属性设置显示内容。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US':
|
||||
'<p>Set the <code>type</code> attribute to <code>text</code>, which is a text button. You can set the content to be displayed at the tag child level or through the <code>text</code> attribute.</p>'
|
||||
},
|
||||
codeFiles: ['text.vue']
|
||||
},
|
||||
|
|
@ -19,11 +32,11 @@ export default {
|
|||
demoId: 'button-class',
|
||||
name: {
|
||||
'zh-CN': '定制样式类',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'Customized style class'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 <code>button-class</code> 属性定制按钮样式</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US': '<p>Set the <code>button-class</code> attribute to customize the button style</p>'
|
||||
},
|
||||
codeFiles: ['button-class.vue']
|
||||
},
|
||||
|
|
@ -31,11 +44,11 @@ export default {
|
|||
demoId: 'plain',
|
||||
name: {
|
||||
'zh-CN': '线性按钮',
|
||||
'en-US': 'events'
|
||||
'en-US': 'linearity'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 <code>plain</code> 属性为 true，即可展示为线性按钮的形式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>If <code>plain</code> is set to true, the button is displayed as a linear button</p>'
|
||||
},
|
||||
codeFiles: ['plain.vue']
|
||||
},
|
||||
|
|
@ -43,11 +56,11 @@ export default {
|
|||
demoId: 'link',
|
||||
name: {
|
||||
'zh-CN': '超链接按钮',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Hyperlink'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置<code>href</code> 属性可跳转到指定页面。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>You can set the <code>href</code> attribute to go to a specified page</p>'
|
||||
},
|
||||
codeFiles: ['link.vue']
|
||||
},
|
||||
|
|
@ -55,12 +68,13 @@ export default {
|
|||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': '主题样式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>type</code> 属性可以设置不同的主题样式，主要包括 primary、success、info、warning、danger、text。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>You can use the <code>type</code> attribute to set different theme styles, including primary, success, info, warning, danger, and text.</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
|
|
@ -68,12 +82,13 @@ export default {
|
|||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
'en-US': 'size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>size</code> 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Use the <code>size</code> attribute to set the button size, including medium, small, and mini. If this parameter is not set, the default size is used.</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
|
|
@ -81,11 +96,11 @@ export default {
|
|||
demoId: 'autofocus',
|
||||
name: {
|
||||
'zh-CN': '聚焦',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Focusing on'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>autofocus</code> 属性设置是否默认聚焦。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Set the <code>autofocus</code> attribute to determine whether to focus by default.</p>'
|
||||
},
|
||||
codeFiles: ['autofocus.vue']
|
||||
},
|
||||
|
|
@ -93,12 +108,13 @@ export default {
|
|||
demoId: 'reset-time',
|
||||
name: {
|
||||
'zh-CN': '防止表单重复提交',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Prevent repeated submission of forms'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>reset-time</code> 属性可设置单击后按钮禁用的时长，默认的禁用时长为 1000 毫秒。<br/>可用于防止按钮连续点击出现表单重复提交的问题。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>You can use the <code>reset-time</code> attribute to set the duration for which the button is disabled after you click the button. The default duration is 1000 ms. <br/> It can be used to prevent repeated submission of forms when buttons are clicked continuously.</p>'
|
||||
},
|
||||
codeFiles: ['reset-time.vue']
|
||||
},
|
||||
|
|
@ -110,7 +126,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Click event of a button. In this example, a message is displayed when a button is clicked</p>'
|
||||
},
|
||||
codeFiles: ['click.vue']
|
||||
},
|
||||
|
|
@ -118,11 +134,11 @@ export default {
|
|||
demoId: 'dynamic-disabled',
|
||||
name: {
|
||||
'zh-CN': '动态禁用按钮',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Dynamically disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 <code>disabled</code>属性为 true 后，可以禁用按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>If the <code>disabled</code> attribute is set to true, the button can be disabled.</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disabled.vue']
|
||||
},
|
||||
|
|
@ -130,14 +146,96 @@ export default {
|
|||
demoId: 'banner',
|
||||
name: {
|
||||
'zh-CN': '通知栏按钮',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Notification bar'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加<code>banner</code>属性设置通栏按钮<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Set the bar button by adding the <code>banner</code> attribute.</p>'
|
||||
},
|
||||
codeFiles: ['banner.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'image',
|
||||
name: {
|
||||
'zh-CN': '图片按钮',
|
||||
'en-US': 'image'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>以默认插槽的用法嵌入<code>img</code>标签，并引入图片<p>',
|
||||
'en-US': '<p>Embed the <code>img</code> tag with the usage of the default slot and introduce the image</p>'
|
||||
},
|
||||
codeFiles: ['image.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'icon',
|
||||
name: {
|
||||
'zh-CN': '图标按钮',
|
||||
'en-US': 'icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>指定 <code>icon</code>为需要的 Icon 图标即可展示为图标按钮<p>',
|
||||
'en-US': '<p>Specify <code>icon</code> as the required icon to display it as an icon button.</p>'
|
||||
},
|
||||
codeFiles: ['icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'loading',
|
||||
name: {
|
||||
'zh-CN': '加载按钮',
|
||||
'en-US': 'icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 <code>loading</code>属性为 true，即可展示为加载中的样式<p>',
|
||||
'en-US': '<p>Set <code>loading</code> to true to display the style being loaded.</p>'
|
||||
},
|
||||
codeFiles: ['loading.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'round',
|
||||
name: {
|
||||
'zh-CN': '圆角按钮',
|
||||
'en-US': 'icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 <code>round</code>属性属性设置是否圆角按钮。<p>',
|
||||
'en-US': '<p>Configure the <code>round</code> attribute to set whether to round the button.</p>'
|
||||
},
|
||||
codeFiles: ['round.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Button',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'banner ',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置通栏按钮', 'en-US': 'Setting the bar button' },
|
||||
'demoId': 'banner'
|
||||
},
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置 custom-class 属性定制按钮样式',
|
||||
'en-US': 'Set the custom-class attribute to customize the button style'
|
||||
},
|
||||
'demoId': 'button-class'
|
||||
},
|
||||
{
|
||||
'name': 'href',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '通过设置 href 属性可跳转到指定页面',
|
||||
'en-US': 'Set the href attribute to jump to a specified page'
|
||||
},
|
||||
'demoId': 'link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>组件 <code> v-model </code>只接受字符串值，例如 <code>2022-12-18 </code></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US':
|
||||
'<p>The <code>v-model </code> component accepts only string values, for example, <code>2022-12-18 </code></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,12 +19,13 @@ export default {
|
|||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>使用 <code>config.disabled </code>配置一个方法，用于判断参数日期是否禁用。<br> 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 <br>使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>使用 <code>config.disabled </code>配置一个方法，用于判断参数日期是否禁用。<br> 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 <br>使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
|
|
@ -31,14 +33,17 @@ export default {
|
|||
demoId: 'marked',
|
||||
name: {
|
||||
'zh-CN': '日期标记',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Date Marker'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。<br>
|
||||
此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 <br>
|
||||
使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 <br>
|
||||
使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。</p>`,
|
||||
'en-US': `<p>Use <code> config.mark</code> to configure a method to determine whether the parameter date has a mark.<br>
|
||||
This method returns an empty string, indicating that the tag does not exist. A non-empty string is returned, indicating that the tag exists and the tag content is the string.<br>
|
||||
Use <code> config.markBackgroundColorClass</code> to configure the color class name of the tag.<br>
|
||||
Use <code> config.showMarkMessage</code> to configure whether to enable the flag <code> title</code> prompt. The default value is <code> false</code>.</p>`
|
||||
},
|
||||
codeFiles: ['marked.vue']
|
||||
},
|
||||
|
|
@ -46,13 +51,15 @@ export default {
|
|||
demoId: 'render-current',
|
||||
name: {
|
||||
'zh-CN': '当前日期',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Current Date'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>用户传入的日期为<code> 当前日期</code> 。<br>
|
||||
使用 <code> config.currentColorClass</code> 配置<code> 当前日期</code> 的字体颜色类名；<br>
|
||||
使用<code> config.currentBackgroundColorClass</code> 配置<code> 当前日期</code> 的背景颜色类名。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': `<p><p>The date transferred by the user is <code>Current date</code>.<br>
|
||||
Use <code> config.currentColorClass</code> to configure the font color class name of <code>Current Date</code>.<br>
|
||||
Use <code> config.currentBackgroundColorClass</code> to configure the background color class name of <code>current date</code>.</p>`
|
||||
},
|
||||
codeFiles: ['render-current.vue']
|
||||
},
|
||||
|
|
@ -60,11 +67,12 @@ export default {
|
|||
demoId: 'render-today',
|
||||
name: {
|
||||
'zh-CN': '今天',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Today'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>使用<code> config.renderItem </code>可以配置一个方法，对日期面板的某些项进行定制渲染。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Use <code> config.renderItem </code> to configure a method for custom rendering of certain items in the date panel.</p>'
|
||||
},
|
||||
codeFiles: ['render-today.vue']
|
||||
},
|
||||
|
|
@ -72,12 +80,13 @@ export default {
|
|||
demoId: 'week-first',
|
||||
name: {
|
||||
'zh-CN': '周起始',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Week Start'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>使用<code> config.weekFirst </code>配置每周的起始天。默认值为<code> 0</code>，表示周起始为<code> 周日</code>。也可以配置为<code> 1 ~ 6</code>，分别表示<code> 周一 ~ 周六</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Use <code> config.weekFirst </code> to configure the start day of a week. The default value is <code> 0</code>, indicating that the start of the week is <code>Sunday</code>. You can also set this parameter to <code>1 to <code>6</code>, indicating <code>Monday to Saturday</code></p>'
|
||||
},
|
||||
codeFiles: ['week-first.vue']
|
||||
},
|
||||
|
|
@ -85,14 +94,17 @@ export default {
|
|||
demoId: 'workday',
|
||||
name: {
|
||||
'zh-CN': '工作日',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Workdays'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>用户传入的日期为<code> 当前日期</code>，当前日期所在月份为<code> 当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。<br>
|
||||
使用<code> config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日；<br>
|
||||
使用<code> config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； <br>
|
||||
使用<code> config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': `<p>The date transferred by the user is <code>Current Date</code>, and the month to which the current date belongs is <code>Current Month</code>. Saturday and Sunday of the current month are weekends, and non-Saturday and Sunday are workdays.<br>
|
||||
Use <code> config.workday </code> to configure a method to determine whether a workday is a real workday.<br>
|
||||
Use <code> config.holiday</code> to configure a method to determine whether a weekend is a real weekend.<br>
|
||||
Use <code> config.workdayColorClass and config.holidayColorClass</code> to configure the font color classes for weekdays and weekends.</p>`
|
||||
},
|
||||
codeFiles: ['workday.vue']
|
||||
},
|
||||
|
|
@ -100,11 +112,12 @@ export default {
|
|||
demoId: 'expand',
|
||||
name: {
|
||||
'zh-CN': '展开收起事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Expand Collapse Events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>日历栏展开或收起时触发的事件；事件参数为 true 时代表展开状态，反之为收起状态。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Event triggered when the calendar bar is expanded or collapsed; If the event parameter is set to true, the event is expanded. Otherwise, the event is collapsed.</p>'
|
||||
},
|
||||
codeFiles: ['expand.vue']
|
||||
},
|
||||
|
|
@ -112,14 +125,55 @@ export default {
|
|||
demoId: 'cascader-position',
|
||||
name: {
|
||||
'zh-CN': '年月选择的位置',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Year and month selected location'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>使用 cascaderPosition 属性可以改变年月选择的位置；可选值为：<code>start | center | end</code> 默认值为<code>center</code><p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>You can use the cascaderPosition attribute to change the location of the year and month. The options are as follows: <code>start | center | end</code>The default value is <code>center</code></p>'
|
||||
},
|
||||
codeFiles: ['cascader-position.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
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' },
|
||||
'demoId': 'cascader-position'
|
||||
},
|
||||
{
|
||||
'name': 'config',
|
||||
'type': 'Object',
|
||||
'defaultValue': '{}',
|
||||
'desc': { 'zh-CN': '传入用户日期配置信息', 'en-US': 'Transfer the user date configuration information.' },
|
||||
'demoId': 'marked'
|
||||
},
|
||||
{
|
||||
'name': 'v-model',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '数据绑定', 'en-US': 'Data Binding' },
|
||||
'demoId': 'marked'
|
||||
}
|
||||
],
|
||||
'methods': [
|
||||
{
|
||||
'name': 'expand',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '日历栏展开或收起时触发的事件',
|
||||
'en-US': 'Event triggered when the calendar bar expands or collapses'
|
||||
},
|
||||
'demoId': 'expand'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是samll尺寸卡片" v-model="value" check-type="checkbox" label="2">
|
||||
<tiny-card title="这是small尺寸卡片" v-model="value" check-type="radio" label="2">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'card-type',
|
||||
name: {
|
||||
'zh-CN': '卡片类型',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Card Type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 `text image video logo` 4 种类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>支持 `text image video logo` 4 种类型</p>',
|
||||
'en-US': '<p>Four types of `text image video logo` are supported.</p>'
|
||||
},
|
||||
codeFiles: ['card-type.vue']
|
||||
},
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
demoId: 'card-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持`mini small medium large`4 个尺寸的卡片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>支持`mini small medium large`4 个尺寸的卡片</p>',
|
||||
'en-US': '<p>Supports `mini small medium large` cards of four sizes</p>'
|
||||
},
|
||||
codeFiles: ['card-size.vue']
|
||||
},
|
||||
|
|
@ -42,11 +42,11 @@ export default {
|
|||
demoId: 'card-disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'disabling'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置属性`disabled`禁用卡片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过设置属性`disabled`禁用卡片</p>',
|
||||
'en-US': '<p>Disable the card by setting the property `disabled`</p>'
|
||||
},
|
||||
codeFiles: ['card-disabled.vue']
|
||||
},
|
||||
|
|
@ -54,11 +54,11 @@ export default {
|
|||
demoId: 'card-group',
|
||||
name: {
|
||||
'zh-CN': '卡片组',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Card Group'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`card-group` 与 `card` 结合一起使用，提供响应式布局的能力<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`card-group` 与 `card` 结合一起使用，提供响应式布局的能力</p>',
|
||||
'en-US': '<p>`card-group` is used in conjunction with `card` to provide responsive layout capabilities</p>'
|
||||
},
|
||||
codeFiles: ['card-group.vue']
|
||||
},
|
||||
|
|
@ -66,37 +66,24 @@ export default {
|
|||
demoId: 'card-status',
|
||||
name: {
|
||||
'zh-CN': '卡片状态',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Card Status'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 `success warning alerting danger` 4 种状态<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>支持 `success warning alerting danger` 4 种状态</p>',
|
||||
'en-US': '<p>The following four states are supported: `success warning alerting danger`</p>'
|
||||
},
|
||||
codeFiles: ['card-status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-type-radio',
|
||||
name: {
|
||||
'zh-CN': '单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`check-type="radio"`设置卡片单选，需同时设置 label。 注意：目前仅支持在 text 类型开启单选<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['check-type-radio.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-type-checkbox',
|
||||
name: {
|
||||
'zh-CN': '多选',
|
||||
'en-US': 'events'
|
||||
'zh-CN': '单选&多选',
|
||||
'en-US': 'Single-choice & multiple-choice'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`check-type="checkbox"`设置卡片多选，需同时设置 label。注意：目前仅支持在 text 类型开启多选<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过属性`check-type="checkbox"`设置卡片多选,通过属性`check-type="radio"`设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
|
||||
'en-US': '<p>Use the `check-type="checkbox"` attribute to set multiple card selections, and use the `check-type="radio"` attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
|
||||
},
|
||||
codeFiles: ['check-type-checkbox.vue']
|
||||
},
|
||||
|
|
@ -104,11 +91,11 @@ export default {
|
|||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义 class',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Customized class'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>属性`card-class`可自定义卡片的 class，属性`height`可设置卡片内容区的高度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>属性`card-class`可自定义卡片的 class，属性`height`可设置卡片内容区的高度。</p>',
|
||||
'en-US': '<p>The `card-class` attribute can be used to customize the card class, and the `height` attribute can be used to set the height of the card content area.</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
},
|
||||
|
|
@ -116,11 +103,11 @@ export default {
|
|||
demoId: 'operate-bar',
|
||||
name: {
|
||||
'zh-CN': '操作栏选项配置',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Operation Bar Option Configuration'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过`options`属性配置操作栏，支持按钮的禁用（`disabled: true`）与隐藏（`hidden: true`）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过`options`属性配置操作栏，支持按钮的禁用（`disabled: true`）与隐藏（`hidden: true`）</p>',
|
||||
'en-US': '<p>Use the `options` attribute to configure the operation bar. Buttons can be disabled (`disabled: true`) and hidden (`hidden: true`).</p>'
|
||||
},
|
||||
codeFiles: ['operate-bar.vue']
|
||||
},
|
||||
|
|
@ -131,8 +118,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`change` 事件：卡片勾选和取消勾选时触发;`icon-click` 事件：操作栏按钮点击时触发<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`change` 事件：卡片勾选和取消勾选时触发;`icon-click` 事件：操作栏按钮点击时触发</p>',
|
||||
'en-US': '<p>`change` event: triggered when a card is selected or deselected; `icon-click` event: triggered when a button in the operation bar is clicked</p>'
|
||||
},
|
||||
codeFiles: ['card-events.vue']
|
||||
},
|
||||
|
|
@ -140,14 +127,197 @@ export default {
|
|||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>组件提供`default、title-left、title-right、footer`4 个插槽<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>组件提供`default、title-left、title-right、footer`4 个插槽</p>',
|
||||
'en-US': '<p>The component provides four slots: `default, title-left, title-right, and footer`</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
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.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'check-type-checkbox'
|
||||
},
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '卡片的class',
|
||||
'en-US': 'Class of the card'
|
||||
},
|
||||
'demoId': 'card-custom-class'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '卡片禁用',
|
||||
'en-US': 'Card disabled'
|
||||
},
|
||||
'demoId': 'card-disabled'
|
||||
},
|
||||
{
|
||||
'name': 'height',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '卡片内容区域的高度',
|
||||
'en-US': 'Height of the card content area'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'card-icon-more'
|
||||
},
|
||||
{
|
||||
'name': 'label',
|
||||
'type': 'String / Number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': 'checkbox或radio的label',
|
||||
'en-US': 'Checkbox or radio label.'
|
||||
},
|
||||
'demoId': 'card-label'
|
||||
},
|
||||
{
|
||||
'name': 'options ',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '操作按钮配置',
|
||||
'en-US': 'Operation Button Configuration.'
|
||||
},
|
||||
'demoId': 'operate-bar'
|
||||
},
|
||||
{
|
||||
'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.'
|
||||
},
|
||||
'demoId': 'card-size'
|
||||
},
|
||||
{
|
||||
'name': 'src',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '图片或者视频的地址',
|
||||
'en-US': 'Address of a picture or video.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'card-status'
|
||||
},
|
||||
{
|
||||
'name': 'title',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '卡片的标题',
|
||||
'en-US': 'The title of the card.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'card-type'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '组件选中/取消选中事件',
|
||||
'en-US': 'Component check/uncheck event'
|
||||
},
|
||||
'demoId': 'card-events'
|
||||
},
|
||||
{
|
||||
'name': 'icon-click',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '操作栏按钮点击事件',
|
||||
'en-US': 'Operation bar button click event'
|
||||
},
|
||||
'demoId': 'card-events'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '组件默认插槽', 'en-US': 'Component Default Slot' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'footer',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '组件默认插槽', 'en-US': 'Component Default Slot' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'title',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标题插槽', 'en-US': 'Header Slot' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'title-left',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标题左侧插槽', 'en-US': 'Header Left Slot' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'title-right',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标题右侧插槽', 'en-US': 'Header right slot' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,12 +18,12 @@ export default {
|
|||
demoId: 'indicator-trigger',
|
||||
name: {
|
||||
'zh-CN': '指示器和触发方式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Indicators and Triggering Modes'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>',
|
||||
'en-US': '<p>The walk indicator is displayed on the slide by default. If `indicator-position` is set to outside, the indicator is displayed outside.<br />If `trigger` is set to click, you can change the indicator triggering mode to click. By default, when you hover the mouse over the indicator, the slideshow is switched accordingly.</p>'
|
||||
},
|
||||
codeFiles: ['indicator-trigger.vue']
|
||||
},
|
||||
|
|
@ -31,12 +31,12 @@ export default {
|
|||
demoId: 'manual-play',
|
||||
name: {
|
||||
'zh-CN': '手动轮播',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Manual Carousel'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
|
||||
'en-US': '<p>Invoke the `setActiveItem()`, `next()`, and `prev()` methods to perform NVOD as required. The `initial-index` property specifies the slide index that is initially activated.</p>'
|
||||
},
|
||||
codeFiles: ['manual-play.vue']
|
||||
},
|
||||
|
|
@ -44,12 +44,12 @@ export default {
|
|||
demoId: 'close-loop',
|
||||
name: {
|
||||
'zh-CN': '关闭循环轮播',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Disabling cyclic NVOD'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>',
|
||||
'en-US': '<p>After the `loop` attribute is set to false, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed.</p>'
|
||||
},
|
||||
codeFiles: ['close-loop.vue']
|
||||
},
|
||||
|
|
@ -57,11 +57,11 @@ export default {
|
|||
demoId: 'autoplay',
|
||||
name: {
|
||||
'zh-CN': '自动切换',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Automatic switchover'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。</p>',
|
||||
'en-US': '<p>After the `autoplay` attribute is set to true, the slide content of the walking lantern is automatically switched in rotation.</p>'
|
||||
},
|
||||
codeFiles: ['autoplay.vue']
|
||||
},
|
||||
|
|
@ -69,11 +69,11 @@ export default {
|
|||
demoId: 'play-interval',
|
||||
name: {
|
||||
'zh-CN': '轮播间隔时间',
|
||||
'en-US': 'events'
|
||||
'en-US': 'NVOD Interval'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。</p>',
|
||||
'en-US': '<p>The default interval is 3000 ms. You can customize the interval by using the `interval` attribute.</p>'
|
||||
},
|
||||
codeFiles: ['play-interval.vue']
|
||||
},
|
||||
|
|
@ -81,11 +81,11 @@ export default {
|
|||
demoId: 'up-down-carousel',
|
||||
name: {
|
||||
'zh-CN': '纵向轮播',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Vertical Carousel'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。</p>',
|
||||
'en-US': '<p>Set `type` to vertical to implement vertical rotation.</p>'
|
||||
},
|
||||
codeFiles: ['up-down-carousel.vue']
|
||||
},
|
||||
|
|
@ -93,11 +93,11 @@ export default {
|
|||
demoId: 'show-title',
|
||||
name: {
|
||||
'zh-CN': '显示标题',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Show Title'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。</p>',
|
||||
'en-US': '<p>Use `title` to configure the display title, which must be used together with `show-title`.</p>'
|
||||
},
|
||||
codeFiles: ['show-title.vue']
|
||||
},
|
||||
|
|
@ -105,11 +105,11 @@ export default {
|
|||
demoId: 'carousel-arrow-always',
|
||||
name: {
|
||||
'zh-CN': '总是显示切换箭头',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Always show toggle arrows'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-always.vue']
|
||||
},
|
||||
|
|
@ -117,11 +117,11 @@ export default {
|
|||
demoId: 'carousel-arrow-hover',
|
||||
name: {
|
||||
'zh-CN': 'hover 时显示切换箭头',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Toggle arrows are displayed when hovering.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-hover.vue']
|
||||
},
|
||||
|
|
@ -129,11 +129,11 @@ export default {
|
|||
demoId: 'carousel-arrow-never',
|
||||
name: {
|
||||
'zh-CN': '隐藏切换箭头',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Hide Toggle Arrow'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['carousel-arrow-never.vue']
|
||||
},
|
||||
|
|
@ -141,12 +141,12 @@ export default {
|
|||
demoId: 'aspect-ratio',
|
||||
name: {
|
||||
'zh-CN': '宽高比',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Aspect ratio'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。</p>',
|
||||
'en-US': '<p>The `aspect-ratio` attribute is used to set the aspect ratio of the carousel. If height is set, height is used as the primary value. The default value is 16:2. You can set any integer aspect ratio. After `aspect-ratio` is set, the height of the carousel is automatically adjusted according to the set scale when the page is zoomed in or out.</p>'
|
||||
},
|
||||
codeFiles: ['aspect-ratio.vue']
|
||||
},
|
||||
|
|
@ -154,11 +154,11 @@ export default {
|
|||
demoId: 'indicator-style',
|
||||
name: {
|
||||
'zh-CN': '指示器样式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Indicator Style'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。<p>',
|
||||
'en-US': '<p>button click</p>'
|
||||
'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。</p>',
|
||||
'en-US': '<p>The `indicator-style` attribute can be used to set the indicator style of the carousel chart. The options are light and dark. The default value is light.</p>'
|
||||
},
|
||||
codeFiles: ['indicator-style.vue']
|
||||
},
|
||||
|
|
@ -182,11 +182,38 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
|
||||
'<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
|
||||
'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
|
||||
},
|
||||
codeFiles: ['carousel-events.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Carousel',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'aspect-ratio',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '宽高比，默认为16:2。',
|
||||
'en-US': 'Aspect ratio. The default value is 16:2.'
|
||||
},
|
||||
'demoId': 'aspect-ratio'
|
||||
},
|
||||
{
|
||||
'name': 'indicator-style',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的可选值为 light/dark ，默认为light。',
|
||||
'desc': {
|
||||
'zh-CN': '指示器的样式。',
|
||||
'en-US': 'The style of the indicator.'
|
||||
},
|
||||
'demoId': 'indicator-style'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'with-date-picker',
|
||||
name: {
|
||||
'zh-CN': '结合日期选择一起使用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Used in conjunction with date selection'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['with-date-picker.vue']
|
||||
},
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
demoId: 'placeholder',
|
||||
name: {
|
||||
'zh-CN': '占位文本',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Placeholder Text'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['placeholder.vue']
|
||||
},
|
||||
|
|
@ -42,11 +42,11 @@ export default {
|
|||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
|
|
@ -54,14 +54,52 @@ export default {
|
|||
demoId: 'icon',
|
||||
name: {
|
||||
'zh-CN': 'icon 图标',
|
||||
'en-US': 'events'
|
||||
'en-US': 'icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以传入一个 svg 对象替换默认的下拉图标<p>',
|
||||
'zh-CN': '<p>可以传入一个 svg 对象替换默认的下拉图标</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['icon.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Cell',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '数据', 'en-US': 'data' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': { 'zh-CN': '禁用', 'en-US': 'disabled' },
|
||||
'demoId': 'disabled'
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': 'Object',
|
||||
'defaultValue': '{}',
|
||||
'desc': { 'zh-CN': '设置图标', 'en-US': 'Set icon' },
|
||||
'demoId': 'icon'
|
||||
},
|
||||
{
|
||||
'name': 'placeholder',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '占位文本',
|
||||
'en-US': 'Placeholder Text'
|
||||
},
|
||||
'demoId': 'placeholder'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,12 +18,13 @@ export default {
|
|||
demoId: 'accordion',
|
||||
name: {
|
||||
'zh-CN': '手风琴效果',
|
||||
'en-US': 'events'
|
||||
'en-US': 'accordion effect'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 `accordion` 属性为 true 后，折叠面板将展示手风琴效果。配置 `v-model` 设置当前激活的面板(如果是手风琴模式，绑定值类型需要为 string ，否则为 array )；`change` 事件，在当前激活面板改变时触发，参数为当前的 value 值；配置 `name` 属性作为每个 collapse-item 的唯一标志符<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>If the `accordion` attribute is set to true, the collapse panel displays the accordion effect. Configure `v-model` Sets the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) `change` event, which is triggered when the current active panel changes. The parameter is the current value. Configure the `name` attribute as the unique identifier for each collapse-item</p>'
|
||||
},
|
||||
codeFiles: ['accordion.vue']
|
||||
},
|
||||
|
|
@ -31,11 +32,12 @@ export default {
|
|||
demoId: 'dynamic-disable',
|
||||
name: {
|
||||
'zh-CN': '禁用状态',
|
||||
'en-US': 'events'
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `collapse-item` 元素上配置 `disabled` 属性为 true 后，将禁用指定的折叠面板项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>When the `disabled` attribute is set to true on the `collapse-item` element, the specified collapse panel item is disabled.</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disable.vue']
|
||||
},
|
||||
|
|
@ -43,12 +45,13 @@ export default {
|
|||
demoId: 'custom-collapse-title',
|
||||
name: {
|
||||
'zh-CN': '自定义面板标题',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Panel Title'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题，比如在标题前增加图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Configuring the `title` attribute on the `collapse-item` element specifies the title of each collapsed panel item. However, you can also customize the panel title by using the `title` slot, such as adding an icon before the title.</p>'
|
||||
},
|
||||
codeFiles: ['custom-collapse-title.vue']
|
||||
},
|
||||
|
|
@ -56,12 +59,13 @@ export default {
|
|||
demoId: 'custom-collapse-title-right',
|
||||
name: {
|
||||
'zh-CN': '自定义面板标题右侧内容',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Customizing the Content on the Right of the Panel Title'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>'
|
||||
},
|
||||
codeFiles: ['custom-collapse-title-right.vue']
|
||||
},
|
||||
|
|
@ -69,11 +73,11 @@ export default {
|
|||
demoId: 'collapse-events',
|
||||
name: {
|
||||
'zh-CN': '折叠面板事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Collapse Panel Events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>激活面板的值改变时将触发 `change` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>The `change` event is triggered when the value of the active panel changes.</p>'
|
||||
},
|
||||
codeFiles: ['collapse-events.vue']
|
||||
},
|
||||
|
|
@ -81,11 +85,12 @@ export default {
|
|||
demoId: 'block-close',
|
||||
name: {
|
||||
'zh-CN': '阻止折叠面板关闭事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Prevent Collapse Panel Close Event'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>:before-close 折叠面板关闭前事件,方法里面 return true/false，表示是否可以关闭<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>:before-close: indicates the event before the folding panel is closed. In the method, return true or false indicates whether the folding panel can be closed.</p>'
|
||||
},
|
||||
codeFiles: ['block-close.vue']
|
||||
},
|
||||
|
|
@ -93,11 +98,11 @@ export default {
|
|||
demoId: 'nested-grid',
|
||||
name: {
|
||||
'zh-CN': '嵌套表格',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Nested Tables'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表格。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Embed the table through the default slot of the `collapse-item` element</p>'
|
||||
},
|
||||
codeFiles: ['nested-grid.vue']
|
||||
},
|
||||
|
|
@ -105,11 +110,11 @@ export default {
|
|||
demoId: 'nested-form',
|
||||
name: {
|
||||
'zh-CN': '嵌套表单',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Nested Forms'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表单。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Embed the form through the default slot of the `collapse-item` element.</p>'
|
||||
},
|
||||
codeFiles: ['nested-form.vue']
|
||||
},
|
||||
|
|
@ -117,11 +122,11 @@ export default {
|
|||
demoId: 'slot-title',
|
||||
name: {
|
||||
'zh-CN': '自定义 Title 展示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Customized title display'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 title 插槽实现自定义标题展示<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Configure the built-in title slot of Collapse to customize the title display.</p>'
|
||||
},
|
||||
codeFiles: ['slot-title.vue']
|
||||
},
|
||||
|
|
@ -129,11 +134,12 @@ export default {
|
|||
demoId: 'slot-title-right',
|
||||
name: {
|
||||
'zh-CN': '自定义 Title 右侧内容展示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Customize the content displayed on the right of the title.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Configure the built-in title-right slot of Collapse to display the content on the right of a customized title.</p>'
|
||||
},
|
||||
codeFiles: ['slot-title-right.vue']
|
||||
},
|
||||
|
|
@ -141,14 +147,31 @@ export default {
|
|||
demoId: 'slot-icon',
|
||||
name: {
|
||||
'zh-CN': '自定义 icon 图标',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Icons'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 Collapse 内置的 icon 插槽实现图标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Icons are implemented by configuring the built-in icon slot of Collapse.</p>'
|
||||
},
|
||||
codeFiles: ['slot-icon.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Collapse',
|
||||
'type': 'component',
|
||||
'slots': [
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '展开收起icon插槽',
|
||||
'en-US': 'Expand and collapse icon slot'
|
||||
},
|
||||
'demoId': 'slot-icon'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -19,11 +19,11 @@ export default {
|
|||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '设置尺寸',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Set Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `size` 属性可以设置分区列表项的大小，支持 small 和 medium 两种尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `size` 属性可以设置分区列表项的大小，支持 small 和 medium 两种尺寸。</p>',
|
||||
'en-US': '<p>You can use the `size` attribute to set the size of the partition list item. The size can be small or medium.</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
|
|
@ -31,11 +31,11 @@ export default {
|
|||
demoId: 'content-slot',
|
||||
name: {
|
||||
'zh-CN': '内容区插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Content Area Slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#column1、#column2、#column3、#column4` 可以设置内容区插槽，最多支持 4 个内容插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>You can use `#column1, #column2, #column3, and #column4` to set the content area slots. A maximum of four content slots are supported.</p>'
|
||||
},
|
||||
codeFiles: ['content-slot.vue']
|
||||
},
|
||||
|
|
@ -43,12 +43,12 @@ export default {
|
|||
demoId: 'custom-width',
|
||||
name: {
|
||||
'zh-CN': '自定义内容插槽宽度',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Content Slot Width'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br />通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br />通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`</p>',
|
||||
'en-US': '<p>You can use the `flex-basis` attribute to set the width of the content slot. The flex-basis type is an array. A maximum of four values can be transferred. The percentage, fixed width, and inherent size keywords are supported. The default value is auto. For details, see the flex-basis attribute of Flex.<br />By setting the `flex-grow` property, you can set the relative proportion of the remaining space allocated to each item in the flex container. The default value is 1. If you do not want to automatically fill the main container, set this parameter to 0. For details, see the flex-grow attribute of flex.<br />flex-grow举例：`:flex-grow="[0, 0]":flex-grow="[2, 1]":flex-grow="[2,1,1]"`<br />flex-basis例如：`:flex-basis="["200px","100px","300px"]":flex-basis="["75%","25%"]":flex-basis="["40%","20%","20%"]"`</p>'
|
||||
},
|
||||
codeFiles: ['custom-width.vue']
|
||||
},
|
||||
|
|
@ -56,11 +56,11 @@ export default {
|
|||
demoId: 'icon-click-event',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮点击事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Clicking a button in the operation column'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `icon-click` 给按钮加点击事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `icon-click` 给按钮加点击事件。</p>',
|
||||
'en-US': '<p>Add a click event to a button through `icon-click`.</p>'
|
||||
},
|
||||
codeFiles: ['icon-click-event.vue']
|
||||
},
|
||||
|
|
@ -68,11 +68,11 @@ export default {
|
|||
demoId: 'icon-disabled',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮隐藏与禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Hide or Disable Buttons in the Operation Column'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>操作列配置项 options 中添加属性 hidden 可以隐藏按钮，可以通过 disabled 属性禁用操作按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>操作列配置项 options 中添加属性 hidden 可以隐藏按钮，可以通过 disabled 属性禁用操作按钮。</p>',
|
||||
'en-US': '<p>The hidden attribute is added to the options configuration item in the Operation column to hide the button. The disabled attribute can be used to disable the operation button.</p>'
|
||||
},
|
||||
codeFiles: ['icon-disabled.vue']
|
||||
},
|
||||
|
|
@ -80,11 +80,11 @@ export default {
|
|||
demoId: 'image-operate-slot',
|
||||
name: {
|
||||
'zh-CN': '图片和操作列插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Picture and Action Column Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#image` 可以设置图片插槽，通过 `#operate` 可以设置操作列插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `#image` 可以设置图片插槽，通过 `#operate` 可以设置操作列插槽。</p>',
|
||||
'en-US': '<p>You can use `#image` to set the picture slot and `#operate` to set the operation column slot.</p>'
|
||||
},
|
||||
codeFiles: ['image-operate-slot.vue']
|
||||
},
|
||||
|
|
@ -92,11 +92,11 @@ export default {
|
|||
demoId: 'show-radio',
|
||||
name: {
|
||||
'zh-CN': '单选',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Single-choice'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过属性`show-radio`设置卡片单选，需同时设置 label，`disabled` 属性可以禁用单选按钮 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过属性`show-radio`设置卡片单选，需同时设置 label，`disabled` 属性可以禁用单选按钮 。</p>',
|
||||
'en-US': '<p>Use the `show-radio` attribute to set the card radio option. You need to set the label and `disabled` attribute to disable the radio option button.</p>'
|
||||
},
|
||||
codeFiles: ['show-radio.vue']
|
||||
},
|
||||
|
|
@ -104,11 +104,11 @@ export default {
|
|||
demoId: 'show-checkbox',
|
||||
name: {
|
||||
'zh-CN': '多选',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Multiple Choices'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过属性`show-checkbox`设置卡片多选，需同时设置 label，`disabled` 属性可以禁用复选按钮 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过属性`show-checkbox`设置卡片多选，需同时设置 label，`disabled` 属性可以禁用复选按钮 。</p>',
|
||||
'en-US': '<p>Use the `show-checkbox` attribute to set multiple card selections. You need to set the label at the same time. The `disabled` attribute can disable the check button.</p>'
|
||||
},
|
||||
codeFiles: ['show-checkbox.vue']
|
||||
},
|
||||
|
|
@ -116,15 +116,208 @@ export default {
|
|||
demoId: 'list-group',
|
||||
name: {
|
||||
'zh-CN': '列表组',
|
||||
'en-US': 'events'
|
||||
'en-US': 'List Group'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过引入`column-list-group`组件来对列表进行分组，使用列表组结合复选功能时，需要给 item 设置 label，以此来记录选中的列表项。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过引入`column-list-group`组件来对列表进行分组，使用列表组结合复选功能时，需要给 item 设置 label，以此来记录选中的列表项。</p>',
|
||||
'en-US': '<p>The `column-list-group` component is introduced to group lists. When the list group and check function are used, you need to set labels for items to record the selected list items.</p>'
|
||||
},
|
||||
codeFiles: ['list-group.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
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.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '卡片禁用勾选',
|
||||
'en-US': 'Card Disable Check'
|
||||
},
|
||||
'demoId': 'icon-disabled'
|
||||
},
|
||||
{
|
||||
'name': 'round',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '通过 round 设置是否展示圆形',
|
||||
'en-US': 'Use round to set whether to display a circle.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'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.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'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].'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'icon-more',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
|
||||
'en-US': 'More button icons can be replaced by a svg icon object.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'image',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '图片地址',
|
||||
'en-US': 'Picture Address'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'label',
|
||||
'type': 'String / Number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'checkbox或radio的label',
|
||||
'en-US': 'Checkbox or radio label'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'options',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '操作按钮配置',
|
||||
'en-US': 'Operation Button Configuration'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'show-checkbox',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示checkbox按钮',
|
||||
'en-US': 'Show the checkbox button'
|
||||
},
|
||||
'demoId': 'show-checkbox'
|
||||
},
|
||||
{
|
||||
'name': 'show-radio',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示radio按钮',
|
||||
'en-US': 'Show radio button'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'size'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'change',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '组件选中/取消选中事件',
|
||||
'en-US': 'Component check/uncheck event'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'icon-click',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '操作栏按钮点击事件',
|
||||
'en-US': 'Operation bar button click event'
|
||||
},
|
||||
'demoId': 'icon-click-event'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'column1',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '内容插槽1', 'en-US': 'Content Slot 1' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'column2',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '内容插槽2', 'en-US': 'Content Slot 2' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'column3',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '内容插槽3', 'en-US': 'Content Slot 3' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'column4',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '内容插槽4', 'en-US': 'Content Slot 4' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'image',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '图片插槽', 'en-US': 'Picture Slot' },
|
||||
'demoId': 'image-operate-slot'
|
||||
},
|
||||
{
|
||||
'name': 'operate',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '操作栏插槽', 'en-US': 'Action Bar Slots' },
|
||||
'demoId': 'image-operate-slot'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p><、p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,12 +18,13 @@ export default {
|
|||
demoId: 'placement',
|
||||
name: {
|
||||
'zh-CN': '抽屉方向',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drawer direction'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left|right|top|bottom</code>，默认值为 <code>right</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 <code>left|right|top|bottom</code>，默认值为 <code>right</code>。</p>',
|
||||
'en-US':
|
||||
'<p>Add the <code>placement</code> attribute to set the drawer direction. The options are <code>left|right|top|bottom</code>. The default value is <code>right</code>.</p>'
|
||||
},
|
||||
codeFiles: ['placement.vue']
|
||||
},
|
||||
|
|
@ -31,11 +32,12 @@ export default {
|
|||
demoId: 'width',
|
||||
name: {
|
||||
'zh-CN': '抽屉宽度',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drawer width'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 <code>width</code> 属性设置抽屉的宽度，默认值为 <code>300px</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Add the <code>width</code> attribute to set the width of the drawer. The default value is <code>300px</code>.</p>'
|
||||
},
|
||||
codeFiles: ['width.vue']
|
||||
},
|
||||
|
|
@ -43,11 +45,12 @@ export default {
|
|||
demoId: 'dragable',
|
||||
name: {
|
||||
'zh-CN': '拖拽功能',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drag and drop function'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 <code>false</code>。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Add the <code>dragable</code> attribute to enable the drawer width drag function. The default value is <code>false</code>.</p>'
|
||||
},
|
||||
codeFiles: ['dragable.vue']
|
||||
},
|
||||
|
|
@ -55,11 +58,12 @@ export default {
|
|||
demoId: 'mask',
|
||||
name: {
|
||||
'zh-CN': '遮罩层1',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Masking layer one'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 <code>mask</code> 属性可以关闭遮罩层，默认值为 <code>true</code> 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US':
|
||||
'<p>Add the <code>mask</code> attribute to disable the mask layer. The default value is <code>true</code>.</p>'
|
||||
},
|
||||
codeFiles: ['mask.vue']
|
||||
},
|
||||
|
|
@ -67,12 +71,13 @@ export default {
|
|||
demoId: 'mask-event',
|
||||
name: {
|
||||
'zh-CN': '遮罩层2',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Masking layer two'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 <code>false</code> 后将禁用该功能，默认值为 <code>true</code> 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 <code>false</code> 后将禁用该功能，默认值为 <code>true</code> 。</p>',
|
||||
'en-US':
|
||||
'<p>After the default pop-up window is opened, you can click the mask layer to close the pop-up window. If <code>mask-closable</code> is set to <code>false</code>, this function is disabled. The default value is <code>true</code>.</p>'
|
||||
},
|
||||
codeFiles: ['mask-event.vue']
|
||||
},
|
||||
|
|
@ -80,11 +85,12 @@ export default {
|
|||
demoId: 'show',
|
||||
name: {
|
||||
'zh-CN': '显示隐藏',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Show Hide'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>- show-header: 显示头部，默认值为 true；<br>- show-footer: 显示底部，默认值为 false；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>- show-header: 显示头部，默认值为 true；<br>- show-footer: 显示底部，默认值为 false</p>',
|
||||
'en-US':
|
||||
'<p>- show-header: displays the header. The default value is true. <br>- show-footer: displays the bottom. The default value is false.</p>'
|
||||
},
|
||||
codeFiles: ['show.vue']
|
||||
},
|
||||
|
|
@ -92,12 +98,13 @@ export default {
|
|||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；<br>- header-right: 头部右侧插槽，默认显示关闭功能；<br>- footer: 底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；<br>- header-right: 头部右侧插槽，默认显示关闭功能；<br>- footer: 底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；</p>',
|
||||
'en-US':
|
||||
'<p>- header: header slot. The header is displayed by default. This parameter is valid when show-header is set to true. <br>-head-right: slot on the right of the head. The function is disabled by default. <br>- footer: bottom slot. The bottom is hidden by default. This parameter is valid when show-footer is set to true.</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
},
|
||||
|
|
@ -108,8 +115,9 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>- hide: 关闭抽屉事件；<br>- confirm: 确认事件，设置 :show-footer="true" 时有效；<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>- hide: 关闭抽屉事件；<br>- confirm: 确认事件，设置 :show-footer="true" 时有效；</p>',
|
||||
'en-US':
|
||||
'<p>- hide: close drawer event; <br>- confirm: confirms the event. This parameter is valid when show-footer is set to true.</p>'
|
||||
},
|
||||
codeFiles: ['event.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -19,12 +19,13 @@ export default {
|
|||
demoId: 'checked-status',
|
||||
name: {
|
||||
'zh-CN': '选中态',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Selected state'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`checked-status`属性实现选中态，其中必须添加索引值`current-index`和选中态`selected`属性<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过添加`checked-status`属性实现选中态，其中必须添加索引值`current-index`和选中态`selected`属性</p>',
|
||||
'en-US':
|
||||
'<p>The selected state is implemented by adding the `checked-status` attribute. The index value `current-index` and the `selected` attribute of the selected state must be added</p>'
|
||||
},
|
||||
codeFiles: ['checked-status.vue']
|
||||
},
|
||||
|
|
@ -32,11 +33,11 @@ export default {
|
|||
demoId: 'label-over',
|
||||
name: {
|
||||
'zh-CN': '标签超出显示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Label Out of Display'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当文字超出规定范围展示全部信息<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>当文字超出规定范围展示全部信息</p>',
|
||||
'en-US': '<p>When the text exceeds the specified range, all information is displayed.</p>'
|
||||
},
|
||||
codeFiles: ['label-over.vue']
|
||||
},
|
||||
|
|
@ -44,11 +45,11 @@ export default {
|
|||
demoId: 'button-dropdown',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮1',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drop-down button one'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以通过 `single-button` 属性设置按钮下拉菜单。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可以通过 `single-button` 属性设置按钮下拉菜单。</p>',
|
||||
'en-US': '<p>You can set the button drop-down menu through the `single-button` property.</p>'
|
||||
},
|
||||
codeFiles: ['button-dropdown.vue']
|
||||
},
|
||||
|
|
@ -56,11 +57,12 @@ export default {
|
|||
demoId: 'button-type',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮2',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drop-down button two'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以通过 `type` 属性设置下拉菜单按钮类型，仅支持`primary`类型。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可以通过 `type` 属性设置下拉菜单按钮类型，仅支持`primary`类型。</p>',
|
||||
'en-US':
|
||||
'<p>ou can set the drop-down menu button type through the `type` attribute. Only the `primary` type is supported.</p>'
|
||||
},
|
||||
codeFiles: ['button-type.vue']
|
||||
},
|
||||
|
|
@ -68,12 +70,13 @@ export default {
|
|||
demoId: 'button-size',
|
||||
name: {
|
||||
'zh-CN': '下拉按钮3',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Drop-down button three'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。</p>',
|
||||
'en-US':
|
||||
'<p>Set the sizes of buttons through the size attribute, including medium, small, and mini. If this parameter is not set, the default size is used.</p>'
|
||||
},
|
||||
codeFiles: ['button-size.vue']
|
||||
},
|
||||
|
|
@ -81,12 +84,13 @@ export default {
|
|||
demoId: 'multi-stage',
|
||||
name: {
|
||||
'zh-CN': '二级下拉触发对象',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Level-2 drop-down trigger object'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>将动作或菜单折叠到下拉菜单中。（暂不支持三级菜单）可以通过 `multi-stage` 属性设置二级下拉菜单，通过添加`level="2"`以便区分二级层级。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>将动作或菜单折叠到下拉菜单中。（暂不支持三级菜单）可以通过 `multi-stage` 属性设置二级下拉菜单，通过添加`level="2"`以便区分二级层级。</p>',
|
||||
'en-US':
|
||||
'<p>Collapses an action or menu into a drop-down menu. (Level-3 menus are not supported currently.) You can set the level-2 drop-down menu through the `multi-stage` attribute and add `level="2"` to distinguish level-2 levels.</p>'
|
||||
},
|
||||
codeFiles: ['multi-stage.vue']
|
||||
},
|
||||
|
|
@ -94,12 +98,13 @@ export default {
|
|||
demoId: 'many-dropdown',
|
||||
name: {
|
||||
'zh-CN': '更多图标下拉',
|
||||
'en-US': 'events'
|
||||
'en-US': 'More icon drop-down'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过添加`show-self-icon`属性自定义用户图标,无旋旋转动画；通过添加`:show-icon="false"`属性自定义用户图标,有旋旋转动画。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过添加`show-self-icon`属性自定义用户图标,无旋旋转动画；通过添加`:show-icon="false"`属性自定义用户图标,有旋旋转动画。</p>',
|
||||
'en-US':
|
||||
'<p>Customize the user icon by adding the `show-self-icon` attribute and rotate the animation without rotation. Customize the user icon by adding the `:show-icon="false"` attribute, with rotating animation.</p>'
|
||||
},
|
||||
codeFiles: ['many-dropdown.vue']
|
||||
},
|
||||
|
|
@ -107,11 +112,11 @@ export default {
|
|||
demoId: 'arrow-button',
|
||||
name: {
|
||||
'zh-CN': '箭头按钮1',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Arrow button one'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加`border`属性可实现箭头按钮<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过添加`border`属性可实现箭头按钮</p>',
|
||||
'en-US': '<p>The arrow button can be implemented by adding the `border` attribute.</p>'
|
||||
},
|
||||
codeFiles: ['arrow-button.vue']
|
||||
},
|
||||
|
|
@ -119,12 +124,13 @@ export default {
|
|||
demoId: 'border-size',
|
||||
name: {
|
||||
'zh-CN': '箭头按钮2',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Arrow button two'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 size 属性设置按钮不同的大小尺寸，包括 medium、small、mini 三种不同大小。不设置时为默认尺寸。</p>',
|
||||
'en-US':
|
||||
'<p>Set the sizes of buttons through the size attribute, including medium, small, and mini. If this parameter is not set, the default size is used.</p>'
|
||||
},
|
||||
codeFiles: ['border-size.vue']
|
||||
},
|
||||
|
|
@ -132,12 +138,13 @@ export default {
|
|||
demoId: 'events-visible-change',
|
||||
name: {
|
||||
'zh-CN': 'visible-change 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'visible-change events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>内置事件包含：`button-click`、`item-click`、`visible-change` 事件。`visible-change` 事件：下拉框出现/隐藏时触发<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>内置事件包含：`button-click`、`item-click`、`visible-change` 事件。`visible-change` 事件：下拉框出现/隐藏时触发</p>',
|
||||
'en-US':
|
||||
'<p>Built-in events include the `button-click`, `item-click`, and `visible-change` events. `visible-change` event: triggered when the drop-down list box is displayed or hidden</p>'
|
||||
},
|
||||
codeFiles: ['events-visible-change.vue']
|
||||
},
|
||||
|
|
@ -145,11 +152,12 @@ export default {
|
|||
demoId: 'events-item-click',
|
||||
name: {
|
||||
'zh-CN': 'item-click 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'item-click events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击菜单项时触发的事件回调。可以通过`itemData`，获取菜单项中设置的`item-data`属性<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>点击菜单项时触发的事件回调。可以通过`itemData`，获取菜单项中设置的`item-data`属性</p>',
|
||||
'en-US':
|
||||
'<p>Event callback triggered when a menu item is clicked. You can use `itemData` to obtain the `item-data` attribute set in the menu item.</p>'
|
||||
},
|
||||
codeFiles: ['events-item-click.vue']
|
||||
},
|
||||
|
|
@ -157,11 +165,12 @@ export default {
|
|||
demoId: 'events-button-click',
|
||||
name: {
|
||||
'zh-CN': 'button-click 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'button-click events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当下拉触发元素呈现为按钮组，即`single-button`属性为`true`时，点击左侧按钮的事件回调<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>当下拉触发元素呈现为按钮组，即`single-button`属性为`true`时，点击左侧按钮的事件回调</p>',
|
||||
'en-US':
|
||||
'<p>The drop-down trigger element is displayed as a button group. That is, when the `single-button` attribute is set to `true`, the event callback is triggered when the button on the left is clicked.</p>'
|
||||
},
|
||||
codeFiles: ['events-button-click.vue']
|
||||
},
|
||||
|
|
@ -169,11 +178,11 @@ export default {
|
|||
demoId: 'trigger-event',
|
||||
name: {
|
||||
'zh-CN': '触发方式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Triggering Mode'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可以配置 `click` 激活或者 `hover` 激活。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>You can configure `click` activation or `hover` activation.</p>'
|
||||
},
|
||||
codeFiles: ['trigger-event.vue']
|
||||
},
|
||||
|
|
@ -181,27 +190,105 @@ export default {
|
|||
demoId: 'pop-direction',
|
||||
name: {
|
||||
'zh-CN': '弹出方向',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Ejection direction'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性`palcement`来设置菜单弹出位置。可选值（top/top-start/top-end/bottom/bottom-start/bottom-end），默认：bottom-start;top：上居中;top-start：上偏左;top-end：上偏右;bottom 下居中;bottom-start 下偏左;bottom-end 下偏右 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过属性`palcement`来设置菜单弹出位置。可选值（top/top-start/top-end/bottom/bottom-start/bottom-end），默认：bottom-start;top：上居中;top-start：上偏左;top-end：上偏右;bottom 下居中;bottom-start 下偏左;bottom-end 下偏右 </p>',
|
||||
'en-US':
|
||||
'<p>se the property `palcement` to set the menu pop-up position. The options are (top/top-start/top-end/bottom/bottom-start/bottom-end). The default value is bottom-start. The top value is top-center. top-start: top-to-left; top-end: top-right; bottom centered; bottom-start: bottom-left; bottom-end: bottom-right</p>'
|
||||
},
|
||||
codeFiles: ['pop-direction.vue']
|
||||
},
|
||||
{
|
||||
demoId: '/max-height',
|
||||
demoId: 'max-height',
|
||||
name: {
|
||||
'zh-CN': '最大高度',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Maximum height'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加`max-height`属性可设置下拉最大高度<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过添加`max-height`属性可设置下拉最大高度</p>',
|
||||
'en-US': '<p>The maximum height of the drop-down can be set by adding the `max-height` attribute.</p>'
|
||||
},
|
||||
codeFiles: ['max-height.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Dropdown',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'show-self-icon ',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '更多图标下拉菜单。',
|
||||
'en-US': 'More icon drop-down list.'
|
||||
},
|
||||
'demoId': 'many-dropdown'
|
||||
},
|
||||
{
|
||||
'name': 'single-button',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '下拉触发元素呈现为按钮组。',
|
||||
'en-US': 'The drop-down trigger element is rendered as a button group.'
|
||||
},
|
||||
'demoId': 'button-dropdown'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'name': 'Dropdown-Menu',
|
||||
'type': '属性',
|
||||
'props': [
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置弹出下拉自定义样式。',
|
||||
'en-US': 'Set the custom style of the pop-up drop-down list.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'max-height',
|
||||
'type': 'Number | String',
|
||||
'defaultValue': '400',
|
||||
'desc': {
|
||||
'zh-CN': '设置下拉最大高度。',
|
||||
'en-US': 'Sets the maximum pull-down height. '
|
||||
},
|
||||
'demoId': 'max-height'
|
||||
},
|
||||
{
|
||||
'name': 'multi-stage',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '设置二级下拉菜单。',
|
||||
'en-US': 'Sets the level-2 drop-down list. '
|
||||
},
|
||||
'demoId': 'multi-stage'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'name': 'Dropdown-Item',
|
||||
'type': '属性',
|
||||
'props': [
|
||||
{
|
||||
'name': 'level',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置二级下拉菜单标志',
|
||||
'en-US': 'Sets the level-2 drop-down menu flag.'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default {
|
|||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'readonly',
|
||||
name: {
|
||||
'zh-CN': '选中项只读',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'The selected item is read-only'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击事件不改变选中项。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US': '<p>Clicking the event does not change the selected item.</p>'
|
||||
},
|
||||
codeFiles: ['readonly.vue']
|
||||
},
|
||||
|
|
@ -30,14 +30,75 @@ export default {
|
|||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可使用右侧 <code>icon</code> 自定义插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可使用右侧 <code>icon</code> 自定义插槽。</p>',
|
||||
'en-US': '<p>You can customize the slot using the right <code>icon</code>.</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'FilterBar',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '过滤栏列表数据。', 'en-US': 'Filter bar list data.' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'v-model',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '绑定值', 'en-US': 'Bind Value' },
|
||||
'demoId': 'basic-usage'
|
||||
}
|
||||
],
|
||||
'methods': [
|
||||
{
|
||||
'name': 'click(index) ',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '过滤项点击方法，index 是当前项索引。',
|
||||
'en-US': 'Method of clicking a filtering item. index indicates the index of the current item.'
|
||||
},
|
||||
'demoId': 'readonly'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'click',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '过滤项点击事件。',
|
||||
'en-US': 'Indicates the click event of a filtering item.'
|
||||
},
|
||||
'demoId': 'readonly'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '过滤项插槽。', 'en-US': 'Filter item slot.' },
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '组件右侧图标插槽。', 'en-US': 'Icon slot on the right of the component.' },
|
||||
'demoId': 'slot'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,20 +11,28 @@ export default {
|
|||
desc: {
|
||||
'zh-CN': `<p>
|
||||
<em>注意</em><br>
|
||||
1、<code>multiple</code> 为 true 时初始第一个过滤项为 <code>全部</code>，指全量数据未做过滤时的状态，并不表示<code>全部过滤条件都选上</code>；<br>
|
||||
2、当选中任意过滤条件时，<code>全部</code>选项自动去勾选。<br><br>
|
||||
|
||||
<em>data 属性说明</em><br>
|
||||
<code>type</code>：类型可选值有：标签、列表 (tag | list)；<br>
|
||||
<code>multiple</code>：是否开启多选，默认 false；<br>
|
||||
<code>placeholder</code>：当没有选中项时显示的占位文本；<br>
|
||||
<code>label</code>：面板的过滤组的说明文本；<br>
|
||||
<code>options</code>：面板的过滤组数据；<br>
|
||||
<code>panel-class</code>：面板的自定义样式，设置该属性会让面板取消<code>max-height: 70%</code> 的最高高度限制。<br><br>
|
||||
|
||||
过滤类型 <code>type</code> 包括 <code>标签、列表 (tag | list)</code>，通过 <code>multiple</code> 开启多选功能
|
||||
1、<code>multiple</code> 为 true 时初始第一个过滤项为 <code>全部</code>，指全量数据未做过滤时的状态，并不表示<code>全部过滤条件都选上</code>；<br>
|
||||
2、当选中任意过滤条件时，<code>全部</code>选项自动去勾选。<br><br>
|
||||
<em>data 属性说明</em><br>
|
||||
<code>type</code>：类型可选值有：标签、列表 (tag | list)；<br>
|
||||
<code>multiple</code>：是否开启多选，默认 false；<br>
|
||||
<code>placeholder</code>：当没有选中项时显示的占位文本；<br>
|
||||
<code>label</code>：面板的过滤组的说明文本；<br>
|
||||
<code>options</code>：面板的过滤组数据；<br>
|
||||
<code>panel-class</code>：面板的自定义样式，设置该属性会让面板取消<code>max-height: 70%</code> 的最高高度限制。<br><br>
|
||||
过滤类型 <code>type</code> 包括 <code>标签、列表 (tag | list)</code>，通过 <code>multiple</code> 开启多选功能
|
||||
</p>`,
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': `<p><em>Note</em><br>
|
||||
1. When <code>multiple</code> is set to true, the initial first filter item is <code>All</code>, indicating that full data is not filtered. It does not mean that <code>all filter criteria are selected.<br>
|
||||
2. When any filter condition is selected, <code>All</code> is automatically deselected. <br><br>
|
||||
<em>data Attribute Description</em><br>
|
||||
<code>type</code>: type. The options are tag and tag | list. <br>
|
||||
<code>multiple</code>: indicates whether to enable multiple choices. The default value is false. <br>
|
||||
<code>placeholder</code>: placeholder text displayed when no item is selected.<br>
|
||||
<code>label</code>: description text of the filter group on the panel.<br>
|
||||
<code>options</code>: Filter group data of the panel.<br>
|
||||
<code>panel-class</code>: custom style of a panel. Setting this attribute will cancel the maximum height limit of <code>max-height: 70%</code>. <br><br>
|
||||
Filtering type <code>type</code> includes <code> tag and tag | list</code>. You can use <code>multiple</code> to enable the multi-choice function.</p>`
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -32,12 +40,13 @@ export default {
|
|||
demoId: 'manual',
|
||||
name: {
|
||||
'zh-CN': '过滤选项自定义1',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'Filter Option Custom 1'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>manual</code> 属性开启过滤选项自定义功能。调用 <code>SelectMobile</code> 组件的示例</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>Use the <code>manual</code> attribute to enable the filtering option customization function. Example of invoking the <code>SelectMobile</code> component</p>'
|
||||
},
|
||||
codeFiles: ['manual.vue']
|
||||
},
|
||||
|
|
@ -45,11 +54,12 @@ export default {
|
|||
demoId: 'manual2',
|
||||
name: {
|
||||
'zh-CN': '过滤选项自定义2',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'Filter Option Custom 2'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>manual</code> 属性开启过滤选项自定义功能。调用 <code>SelectView</code> 组件的</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>Use the <code>manual</code> attribute to enable the filtering option customization function. Invoke the <code>SelectView</code> component</p>'
|
||||
},
|
||||
codeFiles: ['manual2.vue']
|
||||
},
|
||||
|
|
@ -57,11 +67,12 @@ export default {
|
|||
demoId: 'column-num',
|
||||
name: {
|
||||
'zh-CN': '面板每行标签数',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'Number of labels per row on the panel'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>column-num</code> 属性设置面板每行标签数，默认值为 3。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>The <code>column-num</code> attribute is used to set the number of labels in each row of the panel. The default value is 3.</p>'
|
||||
},
|
||||
codeFiles: ['column-num.vue']
|
||||
},
|
||||
|
|
@ -69,12 +80,13 @@ export default {
|
|||
demoId: 'filter-group',
|
||||
name: {
|
||||
'zh-CN': '过滤组',
|
||||
'en-US': '过滤组'
|
||||
'en-US': 'Filtering group'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组只支持 <code>type=tag</code> 类型，通过 <code>multiple</code> 开启多选功能。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组只支持 <code>type=tag</code> 类型，通过 <code>multiple</code> 开启多选功能。</p>',
|
||||
'en-US':
|
||||
'<p><p>The <code>filter-group</code> attribute is used to enable the filtering group function, and <code>filter-value</code> is bound to the value of the filtering group. The filter group supports only the <code>type=tag</code> type. You can run the <code>multiple</code> command to enable the multi-select function.</p>'
|
||||
},
|
||||
codeFiles: ['filter-group.vue']
|
||||
},
|
||||
|
|
@ -82,26 +94,141 @@ export default {
|
|||
demoId: 'enumeration',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Enumerated single-choice'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>设置过滤类型 <code>type: 'list'</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': `<p>设置过滤类型 <code>type: 'list'</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。</p>`,
|
||||
'en-US': `<p>When the filter type <code>type:'list'</code> is set, the current data is an enumerated single option. <code>showAll: true</code> is used to display <code>all</code> options.</p>`
|
||||
},
|
||||
codeFiles: ['enumeration.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>筛选图标 <code>icon</code> 插槽和面板底部按钮组 <code>footer</code> 插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>Filter icon <code>icon</code> slots and panel bottom button group <code>footer</code> slots.</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
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.'
|
||||
},
|
||||
'demoId': 'column-num'
|
||||
},
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '自定义组件 class 样式。', 'en-US': 'Customize the class style of the component.' }
|
||||
},
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '过滤列表数据。', 'en-US': 'Customized text of the close button' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'filter-value',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': {
|
||||
'zh-CN': '过滤组绑定的值。',
|
||||
'en-US': 'Indicates the value bound to the filtering group.'
|
||||
},
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'manual'
|
||||
},
|
||||
{
|
||||
'name': 'panel-class',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '自定义组件面板 class 样式。', 'en-US': 'Customize the Palette class style.' }
|
||||
},
|
||||
{
|
||||
'name': 'v-model',
|
||||
'type': 'Array',
|
||||
'defaultValue': '[]',
|
||||
'desc': { 'zh-CN': '绑定值', 'en-US': 'Bind Value' },
|
||||
'demoId': 'basic-usage'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'cancel',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '关闭面板时触发的事件。',
|
||||
'en-US': 'Event triggered when a panel is closed.'
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': 'panel',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '打开面板时触发的事件。',
|
||||
'en-US': 'Event triggered when a panel is opened.'
|
||||
},
|
||||
'demoId': 'manual'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '过滤项插槽。', 'en-US': 'Filter item slot.' },
|
||||
'demoId': '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.'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '过滤图标插槽，提供了参数 active，index。',
|
||||
'en-US': 'Filter icon slot. The active and index parameters are provided.'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ export default {
|
|||
demoId: 'frequently-used-form',
|
||||
name: {
|
||||
'zh-CN': '常用表单',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Common Forms'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 Form 组件中，每一个表单域由一个 FormItem 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>在 Form 组件中，每一个表单域由一个 FormItem 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。</p>',
|
||||
'en-US':
|
||||
'<p>In the Form component, each form field consists of a FormItem component. Various types of form controls can be placed in the form field, including Input, Select, Checkbox, Radio, Switch, DatePicker, and TimePicker.</p>'
|
||||
},
|
||||
codeFiles: ['frequently-used-form.vue']
|
||||
},
|
||||
|
|
@ -19,12 +20,13 @@ export default {
|
|||
demoId: 'form-in-row',
|
||||
name: {
|
||||
'zh-CN': '行内表单',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Inline Form'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>当垂直方向空间受限且表单较简单时，可以在一行内放置表单，设置 `inline` 属性可以让表单域变为行内的表单域。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>当垂直方向空间受限且表单较简单时，可以在一行内放置表单，设置 `inline` 属性可以让表单域变为行内的表单域。</p>',
|
||||
'en-US':
|
||||
'<p>When vertical space is limited and the form is simple, you can place the form within a line, and setting the `inline` property makes the form field within the line.</p>'
|
||||
},
|
||||
codeFiles: ['form-in-row.vue']
|
||||
},
|
||||
|
|
@ -32,12 +34,13 @@ export default {
|
|||
demoId: 'form-validation',
|
||||
name: {
|
||||
'zh-CN': '表单校验',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Form validation'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>包括常用的必填、日期、时间、URL、邮件等校验规则。通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。<br>校验时若校验类型为 `date`，则需要使用 `DatePicker` 组件进行日期选择，若使用 `Input` 组件进行日期输入，建议使用自定义校验规则。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>包括常用的必填、日期、时间、URL、邮件等校验规则。通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。<br>校验时若校验类型为 `date`，则需要使用 `DatePicker` 组件进行日期选择，若使用 `Input` 组件进行日期输入，建议使用自定义校验规则。</p>',
|
||||
'en-US':
|
||||
'<p>including mandatory fields, date, time, URL, and email verification rules. Use `trigger` to configure the mode of triggering the validation rule. If this parameter is set to `change`, the validation is triggered when the value in the text box changes. If this parameter is set to `blur`, the validation is triggered when the focus is lost. <br>If the validation type is `date`, you need to use the `DatePicker` component to select the date. If you use the `Input` component to enter the date, you are advised to use user-defined validation rules.</p>'
|
||||
},
|
||||
codeFiles: ['form-validation.vue']
|
||||
},
|
||||
|
|
@ -45,12 +48,13 @@ export default {
|
|||
demoId: 'custom-validation-rule',
|
||||
name: {
|
||||
'zh-CN': '自定义校验规则',
|
||||
'en-US': 'events'
|
||||
'en-US': 'User-defined validation rules'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validator` 选项进行自定义校验，校验方法中 `callback` 必须被调用。通过配置 `validate-on-rule-change` 属性,设置是否在 `rules` 属性改变后立即触发一次验证<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 `validator` 选项进行自定义校验，校验方法中 `callback` 必须被调用。通过配置 `validate-on-rule-change` 属性,设置是否在 `rules` 属性改变后立即触发一次验证</p>',
|
||||
'en-US':
|
||||
'<p>Use the `validator` option to perform customized validation. In the validation method, `callback` must be invoked. You can configure the `validate-on-rule-change` attribute to determine whether to trigger authentication immediately after the `rules` attribute changes.</p>'
|
||||
},
|
||||
codeFiles: ['custom-validation-rule.vue']
|
||||
},
|
||||
|
|
@ -58,12 +62,13 @@ export default {
|
|||
demoId: 'validation-position',
|
||||
name: {
|
||||
'zh-CN': '校验提示位置',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Verification prompt position'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validate-position` 可自定义错误提示出现的位置，在 `Form` 组件上设置后，子组件`FormItem`会继承父组件设置。单独在 `FormItem` 组件上进行设置优先级高于在 `From`上的设置。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 `validate-position` 可自定义错误提示出现的位置，在 `Form` 组件上设置后，子组件`FormItem`会继承父组件设置。单独在 `FormItem` 组件上进行设置优先级高于在 `From`上的设置。</p>',
|
||||
'en-US':
|
||||
'<p>You can use `validate-position` to customize the location where the error message appears. After the setting is performed on the `Form` component, the `FormItem` component inherits the setting of the parent component. Setting on the `FormItem` component alone takes precedence over setting on the `From`.</p>'
|
||||
},
|
||||
codeFiles: ['validation-position.vue']
|
||||
},
|
||||
|
|
@ -71,12 +76,13 @@ export default {
|
|||
demoId: 'popper-options-bubbling',
|
||||
name: {
|
||||
'zh-CN': '校验提示跟随表单项移动',
|
||||
'en-US': 'events'
|
||||
'en-US': 'The verification prompt moves with the form item.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过配置 `popperOptions.bubbling` 为 `true` ，可实现表单的校验提示跟随 Form 表单外部的滚动条滚动。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过配置 `popperOptions.bubbling` 为 `true` ，可实现表单的校验提示跟随 Form 表单外部的滚动条滚动。</p>',
|
||||
'en-US':
|
||||
'<p>You can set `popperOptions.bubbling` to `true` to enable the form verification prompt to scroll along with the scroll bar outside the form.</p>'
|
||||
},
|
||||
codeFiles: ['popper-options-bubbling.vue']
|
||||
},
|
||||
|
|
@ -84,12 +90,13 @@ export default {
|
|||
demoId: 'switch-from-item',
|
||||
name: {
|
||||
'zh-CN': '动态切换 FormItem',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Dynamically switch FormItems'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在表单中通过 `v-if` 切换两个 `FormItem` 控制页面元素时，会存在错误提示错位问题，原因时 Vue 复用了 ToolTip 组件，这时需要将 form-item 上加上 `key` 属性标识<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>在表单中通过 `v-if` 切换两个 `FormItem` 控制页面元素时，会存在错误提示错位问题，原因时 Vue 复用了 ToolTip 组件，这时需要将 form-item 上加上 `key` 属性标识</p>',
|
||||
'en-US':
|
||||
'<p>When you use `v-if` to switch between two `FormItem` control page elements in a form, an error message is displayed. The cause is that the Vue reuses the ToolTip component. In this case, the `key` attribute needs to be added to form-item.</p>'
|
||||
},
|
||||
codeFiles: ['switch-from-item.vue']
|
||||
},
|
||||
|
|
@ -97,11 +104,11 @@ export default {
|
|||
demoId: 'no-validate-to-add',
|
||||
name: {
|
||||
'zh-CN': 'RichText 等无校验的组件添加校验的方法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Add the verification method for components that do not have verification, such as RichText.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['no-validate-to-add.vue']
|
||||
},
|
||||
|
|
@ -109,12 +116,13 @@ export default {
|
|||
demoId: 'size',
|
||||
name: {
|
||||
'zh-CN': '表单尺寸',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Form Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过在 `tiny-form` 标签上设置 `size` 属性可以改变表单内组件尺寸；设置 `disabled` 属性可以改变表单内组件禁用状态<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过在 `tiny-form` 标签上设置 `size` 属性可以改变表单内组件尺寸；设置 `disabled` 属性可以改变表单内组件禁用状态</p>',
|
||||
'en-US':
|
||||
'<p>You can change the size of a component in a form by setting the `size` attribute on the `tiny-form` tab. Setting the `disabled` property can change the disabling status of a component in a form.</p>'
|
||||
},
|
||||
codeFiles: ['size.vue']
|
||||
},
|
||||
|
|
@ -122,12 +130,13 @@ export default {
|
|||
demoId: 'form-clear-validate',
|
||||
name: {
|
||||
'zh-CN': '移除表单项的校验结果',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Verification result of removing a form item'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组，如不传则移除整个表单的校验结果。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>调用 `clearValidate` 方法移除表单项的校验结果。传入待移除的表单项的 `prop` 属性或者 `prop` 组成的数组，如不传则移除整个表单的校验结果。</p>',
|
||||
'en-US':
|
||||
'<p>Invoke the `clearValidate` method to remove the verification result of a form item. Transfer the `prop` attribute or array consisting of `prop` of the form item to be removed. If this parameter is not transferred, the verification result of the entire form is removed.</p>'
|
||||
},
|
||||
codeFiles: ['form-clear-validate.vue']
|
||||
},
|
||||
|
|
@ -135,11 +144,11 @@ export default {
|
|||
demoId: 'slot-label',
|
||||
name: {
|
||||
'zh-CN': '标签文本插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Label Text Slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在 `label` 插槽，自定义标签文本的内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过在 `label` 插槽，自定义标签文本的内容</p>',
|
||||
'en-US': '<p>Customize the contents of the label text by setting the `label` slot</p>'
|
||||
},
|
||||
codeFiles: ['slot-label.vue']
|
||||
},
|
||||
|
|
@ -147,11 +156,11 @@ export default {
|
|||
demoId: 'form-item-tip',
|
||||
name: {
|
||||
'zh-CN': '给表单项 label 添加提示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Add a prompt to the label of a form item.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过给 form-item 添加 tip-content 属性给 label 添加提示信息<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过给 form-item 添加 tip-content 属性给 label 添加提示信息</p>',
|
||||
'en-US': '<p>Add the tip-content attribute to the form-item to add a prompt message to the label.</p>'
|
||||
},
|
||||
codeFiles: ['form-item-tip.vue']
|
||||
},
|
||||
|
|
@ -159,12 +168,13 @@ export default {
|
|||
demoId: 'validate-type',
|
||||
name: {
|
||||
'zh-CN': '校验提示的形式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Format of the verification prompt'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `validate-type` 可设置校验提示信息是以 `text` 文本显示还是以 `tip` 提示框的形式显示，默认为 `tip` 。也可直接配置在某一个 `<form-item>` 上控制某一项的校验提示形式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 `validate-type` 可设置校验提示信息是以 `text` 文本显示还是以 `tip` 提示框的形式显示，默认为 `tip` 。也可直接配置在某一个 `<form-item>` 上控制某一项的校验提示形式。</p>',
|
||||
'en-US':
|
||||
'<p>You can use `validate-type` to set whether the verification prompt information is displayed in `text` or `tip` format. The default value is `tip`. You can also directly configure the verification prompt mode of a certain item on a `<form-item>`.</p>'
|
||||
},
|
||||
codeFiles: ['validate-type.vue']
|
||||
},
|
||||
|
|
@ -172,11 +182,11 @@ export default {
|
|||
demoId: 'form-disabled',
|
||||
name: {
|
||||
'zh-CN': '表单禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Form Disable'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `disabled` 可设置表单是否禁用，默认为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `disabled` 可设置表单是否禁用，默认为 `false`。</p>',
|
||||
'en-US': '<p>You can use `disabled` to set whether to disable the form. The default value is `false`.</p>'
|
||||
},
|
||||
codeFiles: ['form-disabled.vue']
|
||||
},
|
||||
|
|
@ -184,11 +194,11 @@ export default {
|
|||
demoId: 'form-display-only',
|
||||
name: {
|
||||
'zh-CN': '只读 display-only',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Read-only'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `display-only` 属性，开启只读模式<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `display-only` 属性，开启只读模式</p>',
|
||||
'en-US': '<p>Use the `display-only` attribute to enable the read-only mode.</p>'
|
||||
},
|
||||
codeFiles: ['form-display-only.vue']
|
||||
},
|
||||
|
|
@ -196,12 +206,13 @@ export default {
|
|||
demoId: 'validate-debounce',
|
||||
name: {
|
||||
'zh-CN': '防抖处理',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Anti-shake processing'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置 FormItem 的属性 `validate-debounce` 为 `true`，可以开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验。默认为 `false` 不开启。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>设置 FormItem 的属性 `validate-debounce` 为 `true`，可以开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验。默认为 `false` 不开启。</p>',
|
||||
'en-US':
|
||||
'<p>Set the `validate-debounce` attribute of FormItem to `true` to enable the verification anti-jitter function. In the case of continuous input, the verification starts when the last input ends. The default value is `false`.</p>'
|
||||
},
|
||||
codeFiles: ['validate-debounce.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Enumerated single-choice'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
|
|
@ -18,10 +18,10 @@ export default {
|
|||
demoId: 'column-anchor',
|
||||
name: {
|
||||
'zh-CN': '列锚点',
|
||||
'en-US': 'events'
|
||||
'en-US': 'column anchor point'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['column-anchor.vue']
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
demoId: 'operation-column',
|
||||
name: {
|
||||
'zh-CN': '操作列',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Operation column'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['operation-column.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -19,11 +19,11 @@ export default {
|
|||
demoId: 'popover-content',
|
||||
name: {
|
||||
'zh-CN': '添加内容',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Add Content'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`content` 设置要显示的内容。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`content` 设置要显示的内容。</p>',
|
||||
'en-US': '<p>`content` Sets the content to be displayed.</p>'
|
||||
},
|
||||
codeFiles: ['popover-content.vue']
|
||||
},
|
||||
|
|
@ -31,11 +31,12 @@ export default {
|
|||
demoId: 'arrow-offset',
|
||||
name: {
|
||||
'zh-CN': '箭头偏移',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Arrow Offset'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`arrow-offset` 在 Popover 的范围内，设置箭头的偏移量，来改变箭头的位置。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`arrow-offset` 在 Popover 的范围内，设置箭头的偏移量，来改变箭头的位置。</p>',
|
||||
'en-US':
|
||||
'<p>`arrow-offset` Sets the offset of the arrow to change the position of the arrow within the range of the popover.</p>'
|
||||
},
|
||||
codeFiles: ['arrow-offset.vue']
|
||||
},
|
||||
|
|
@ -43,11 +44,12 @@ export default {
|
|||
demoId: 'frame-offset',
|
||||
name: {
|
||||
'zh-CN': '弹出框偏移',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Pop-up Box Offset'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`offset` 在触发源的范围内，设置弹框的偏移量，来改变弹框的位置。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`offset` 在触发源的范围内，设置弹框的偏移量，来改变弹框的位置。</p>',
|
||||
'en-US':
|
||||
'<p`offset` Sets the offset of the dialog box within the range of the trigger source to change the position of the dialog box.</p>'
|
||||
},
|
||||
codeFiles: ['frame-offset.vue']
|
||||
},
|
||||
|
|
@ -55,11 +57,11 @@ export default {
|
|||
demoId: 'close-delay',
|
||||
name: {
|
||||
'zh-CN': '延迟隐藏',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Delay concealment'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`close-delay` 弹出框延迟隐藏单位为毫秒(Number)<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`close-delay` 弹出框延迟隐藏单位为毫秒(Number)</p>',
|
||||
'en-US': '<p>`close-delay` pop-up dialog box hiding delay, in milliseconds (number).</p>'
|
||||
},
|
||||
codeFiles: ['close-delay.vue']
|
||||
},
|
||||
|
|
@ -67,11 +69,11 @@ export default {
|
|||
demoId: 'dynamic-disable',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'disable'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`disabled` 设置是否禁用弹出框。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`disabled` 设置是否禁用弹出框。</p>',
|
||||
'en-US': '<p>`disabled` Sets whether to disable pop-up boxes.</p>'
|
||||
},
|
||||
codeFiles: ['dynamic-disable.vue']
|
||||
},
|
||||
|
|
@ -79,11 +81,11 @@ export default {
|
|||
demoId: 'open-delay',
|
||||
name: {
|
||||
'zh-CN': '延迟显示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Delayed display'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`open-delay`，设置延迟时间 ( type:number,单位毫秒 )<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>`open-delay`: indicates the delay (type:number, in milliseconds).</p>'
|
||||
},
|
||||
codeFiles: ['open-delay.vue']
|
||||
},
|
||||
|
|
@ -91,12 +93,13 @@ export default {
|
|||
demoId: 'popover-placement',
|
||||
name: {
|
||||
'zh-CN': '显示位置',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Display position'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`placement` 设置弹出框的的位置,可选值为（to/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>`placement` 设置弹出框的的位置,可选值为（to/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end）</p>',
|
||||
'en-US':
|
||||
'<p>`placement` Sets the position of the pop-up box. The value can be (to/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end).</p>'
|
||||
},
|
||||
codeFiles: ['popover-placement.vue']
|
||||
},
|
||||
|
|
@ -104,11 +107,11 @@ export default {
|
|||
demoId: 'popper-class',
|
||||
name: {
|
||||
'zh-CN': '自定义样式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Styles'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`popper-class` 可配置单个或多个 class<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`popper-class` 可配置单个或多个 class</p>',
|
||||
'en-US': '<p>The `popper-class` command can be used to configure one or more classes.</p>'
|
||||
},
|
||||
codeFiles: ['popper-class.vue']
|
||||
},
|
||||
|
|
@ -116,12 +119,13 @@ export default {
|
|||
demoId: 'trigger-mode',
|
||||
name: {
|
||||
'zh-CN': '触发方式',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Triggering Mode'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`trigger`设定弹出框的触发方式 <br /> `click` 点击触发 <br /> `focus` 鼠标长按触发 <br /> `hover` 鼠标悬浮触发 <br /> `manual` 点击触发，再次点击隐藏<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>`trigger`设定弹出框的触发方式 <br /> `click` 点击触发 <br /> `focus` 鼠标长按触发 <br /> `hover` 鼠标悬浮触发 <br /> `manual` 点击触发，再次点击隐藏</p>',
|
||||
'en-US':
|
||||
'<p>`trigger`Set the triggering mode of the pop-up box<br /> `click`Click to trigger<br /> `focus`To trigger by holding the mouse<br /> `hover`To trigger by hovering the mouse<br /> `manual`To trigger, click to hide again</p>'
|
||||
},
|
||||
codeFiles: ['trigger-mode.vue']
|
||||
},
|
||||
|
|
@ -129,11 +133,11 @@ export default {
|
|||
demoId: 'hidden-arrow',
|
||||
name: {
|
||||
'zh-CN': '隐藏提示框箭头',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Hide the arrows in the prompt box.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`visible-arrow` 设定是否显示提示框的箭头<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`visible-arrow` 设定是否显示提示框的箭头</p>',
|
||||
'en-US': '<p>`visible-arrow` Sets whether to display the arrow of the prompt box./p>'
|
||||
},
|
||||
codeFiles: ['hidden-arrow.vue']
|
||||
},
|
||||
|
|
@ -141,11 +145,11 @@ export default {
|
|||
demoId: 'popover-width',
|
||||
name: {
|
||||
'zh-CN': '宽度',
|
||||
'en-US': 'events'
|
||||
'en-US': 'width'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`width` 弹出框的宽度<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`width` 弹出框的宽度</p>',
|
||||
'en-US': '<p>`width` Initial Planning</p>'
|
||||
},
|
||||
codeFiles: ['popover-width.vue']
|
||||
},
|
||||
|
|
@ -153,11 +157,11 @@ export default {
|
|||
demoId: 'popper-options',
|
||||
name: {
|
||||
'zh-CN': '弹出框选项',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Popup Box Options'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`popper-options` 配置弹出框选项<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`popper-options` 配置弹出框选项</p>',
|
||||
'en-US': '<p>`popper-options` Placement Initiation</p>'
|
||||
},
|
||||
codeFiles: ['popper-options.vue']
|
||||
},
|
||||
|
|
@ -165,11 +169,11 @@ export default {
|
|||
demoId: 'trigger-reference',
|
||||
name: {
|
||||
'zh-CN': '触发源',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Trigger Source'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`slot` 设置弹出框的触发源<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`slot` 设置弹出框的触发源</p>',
|
||||
'en-US': '<p>`slot` Sets the trigger source for the pop-up box.</p>'
|
||||
},
|
||||
codeFiles: ['trigger-reference.vue']
|
||||
},
|
||||
|
|
@ -177,11 +181,12 @@ export default {
|
|||
demoId: 'custom-tip-text',
|
||||
name: {
|
||||
'zh-CN': '自定义提示文本',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Define prompt text'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`content` 设置自定义文本，也可在标签内直接嵌套默认插槽为自定义文本<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`content` 设置自定义文本，也可在标签内直接嵌套默认插槽为自定义文本</p>',
|
||||
'en-US':
|
||||
'<p>`content` Sets the custom text, or nests the default slot directly inside the label as the custom text.</p>'
|
||||
},
|
||||
codeFiles: ['custom-tip-text.vue']
|
||||
},
|
||||
|
|
@ -193,8 +198,9 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`hide` 隐藏时触发回调<br />`show` 显示时触发回调<br />`after-leave` 隐藏动画播放完毕后触发回调<br />`after-enter` 显示动画播放完毕后触发回调<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>`hide` 隐藏时触发回调<br />`show` 显示时触发回调<br />`after-leave` 隐藏动画播放完毕后触发回调<br />`after-enter` 显示动画播放完毕后触发回调</p>',
|
||||
'en-US':
|
||||
'<p>`hide`Callback triggered when hiding<br />`show`Callback triggered when displaying<br />`after-leave`Callback triggered after the hidden animation is played<br />`after-enter`Callback triggered when the animation is played</p>'
|
||||
},
|
||||
codeFiles: ['popover-events.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -22,8 +22,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `clearable` 属性设置显示清空图标按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `clearable` 属性设置显示清空图标按钮。</p>',
|
||||
'en-US': '<p>You can use the `clearable` property to set the display of the clear icon button.</p>'
|
||||
},
|
||||
codeFiles: ['clearable.vue']
|
||||
},
|
||||
|
|
@ -34,8 +34,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `big` 设置组件为 big 模式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `big` 设置组件为 big 模式。</p>',
|
||||
'en-US': '<p>You can use `big` to set the component to the big mode.</p>'
|
||||
},
|
||||
codeFiles: ['big-mode.vue']
|
||||
},
|
||||
|
|
@ -46,8 +46,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `v-model` 配置组件默认搜索条件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `v-model` 配置组件默认搜索条件。</p>',
|
||||
'en-US': '<p>You can use `v-model` to configure the default search criteria of the component.</p>'
|
||||
},
|
||||
codeFiles: ['default-value.vue']
|
||||
},
|
||||
|
|
@ -58,8 +58,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `search-types` 配置组件可选的搜索类型。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `search-types` 配置组件可选的搜索类型。</p>',
|
||||
'en-US': '<p>You can use `search-types` to configure the search types available for the component.</p>'
|
||||
},
|
||||
codeFiles: ['search-types.vue']
|
||||
},
|
||||
|
|
@ -70,8 +70,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `is-enter-search` 属性设置按回车键后触发搜索。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `is-enter-search` 属性设置按回车键后触发搜索。</p>',
|
||||
'en-US': '<p>You can set the `is-enter-search` attribute to trigger search by pressing Enter.</p>'
|
||||
},
|
||||
codeFiles: ['enter-search.vue']
|
||||
},
|
||||
|
|
@ -79,11 +79,11 @@ export default {
|
|||
demoId: 'custom-search-types',
|
||||
name: {
|
||||
'zh-CN': '自定义搜索类型的内容',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Content of a custom search type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `search-types `配置组件可选的搜索类型。</p>',
|
||||
'en-US': '<p>You can use `search-types` to configure the search types available to the component.</p>'
|
||||
},
|
||||
codeFiles: ['custom-search-types.vue']
|
||||
},
|
||||
|
|
@ -91,11 +91,11 @@ export default {
|
|||
demoId: 'show-selected-types',
|
||||
name: {
|
||||
'zh-CN': '自定义搜索类型选择后的展示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Display after a user-defined search type is selected'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['show-selected-types.vue']
|
||||
},
|
||||
|
|
@ -103,11 +103,11 @@ export default {
|
|||
demoId: 'search-events',
|
||||
name: {
|
||||
'zh-CN': 'search 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'search events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['search-events.vue']
|
||||
},
|
||||
|
|
@ -118,7 +118,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['change-events.vue']
|
||||
|
|
@ -130,7 +130,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['select-events.vue']
|
||||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `show-button` 属性对移动端设置按钮搜索。<p>',
|
||||
'zh-CN': '<p>可通过 `show-button` 属性对移动端设置按钮搜索。</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-search.vue']
|
||||
|
|
@ -154,11 +154,49 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `change-bg-color` 属性切换背景色。(只针对移动端有效)<p>',
|
||||
'zh-CN': '<p>可通过 `change-bg-color` 属性切换背景色。(只针对移动端有效)</p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['change-bg.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Search',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'big',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '大尺寸，配置为true时，搜索框高度将变高。',
|
||||
'en-US': 'Large size. If this parameter is set to true, the height of the search box increases.'
|
||||
},
|
||||
'demoId': 'big-mode'
|
||||
},
|
||||
{
|
||||
'name': 'change-bg-color',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '可通过 change-bg-color 属性切换背景色(只针对移动端有效)。',
|
||||
'en-US':
|
||||
'You can use the change-bg-color attribute to switch the background color (only for mobile devices)'
|
||||
},
|
||||
'demoId': 'change-bg'
|
||||
},
|
||||
{
|
||||
'name': 'show-button',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '可通过 show-button 属性对移动端设置按钮搜索。',
|
||||
'en-US': 'You can use the show-button attribute to set button search for mobile devices.'
|
||||
},
|
||||
'demoId': 'search-types'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过设置`:show-image="true"`可以显示图片区域<br>`user-head` 属性可以配置头像的类型、大小、背景色等，具体可查看 UserHead 用户头像组件的属性配置<br>传入`icon` 属性可以将头像区域替换为 icon 图标</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p>You can set `:show-image="true"` to display the image area.<br>The `user-head` attribute can be used to configure the avatar type, size, and background color. For details, see the attribute configuration of the UserHead avatar component. <br>The `icon` attribute can be transferred to replace the avatar area with an icon.</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -20,11 +20,11 @@ export default {
|
|||
demoId: 'type',
|
||||
name: {
|
||||
'zh-CN': '设置类型',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Setting Type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `type` 属性可以设置标准列表项的模式，支持 card 和 list 两种模式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `type` 属性可以设置标准列表项的模式，支持 card 和 list 两种模式。</p>',
|
||||
'en-US': '<p>You can use the `type` attribute to set the mode of a standard list item. The card and list modes are supported.</p>'
|
||||
},
|
||||
codeFiles: ['type.vue']
|
||||
},
|
||||
|
|
@ -32,11 +32,11 @@ export default {
|
|||
demoId: 'content-slot',
|
||||
name: {
|
||||
'zh-CN': '内容区插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Content Area Slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#default` 可以设置内容区插槽，`#tag` 可以设置标签插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `#default` 可以设置内容区插槽，`#tag` 可以设置标签插槽。</p>',
|
||||
'en-US': '<p>You can use `#default` to set the content area slot and `#tag` to set the label slot.</p>'
|
||||
},
|
||||
codeFiles: ['content-slot.vue']
|
||||
},
|
||||
|
|
@ -44,11 +44,11 @@ export default {
|
|||
demoId: 'icon-click-event',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮点击事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Clicking a button in the operation column'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `icon-click` 给按钮加点击事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `icon-click` 给按钮加点击事件。</p>',
|
||||
'en-US': '<p>Add a click event to a button through `icon-click`.</p>'
|
||||
},
|
||||
codeFiles: ['icon-click-event.vue']
|
||||
},
|
||||
|
|
@ -56,11 +56,11 @@ export default {
|
|||
demoId: 'icon-disabled',
|
||||
name: {
|
||||
'zh-CN': '操作列按钮隐藏与禁用',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Hide or Disable Buttons in the Operation Column'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>操作列配置项 `options` 中添加属性 hidden 可以隐藏按钮，可以通过 disabled 属性禁用操作按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>操作列配置项 `options` 中添加属性 hidden 可以隐藏按钮，可以通过 disabled 属性禁用操作按钮。</p>',
|
||||
'en-US': '<p>The hidden attribute is added to the `options` configuration item in the Operation column to hide the button. The disabled attribute can be used to disable the operation button.</p>'
|
||||
},
|
||||
codeFiles: ['icon-disabled.vue']
|
||||
},
|
||||
|
|
@ -71,11 +71,167 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `#image` 可以设置头像插槽，通过 `#operate` 可以设置操作列插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `#image` 可以设置头像插槽，通过 `#operate` 可以设置操作列插槽。</p>',
|
||||
'en-US': '<p>Avatar and Action Column Slots</p>'
|
||||
},
|
||||
codeFiles: ['image-operate-slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'StandardListItem',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '列表数据源',
|
||||
'en-US': 'List Data Sources'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'icon配置项',
|
||||
'en-US': 'icon configuration item'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'icon-more',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
|
||||
'en-US': 'More button icons can be replaced by a svg icon object.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'options',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '操作按钮配置项',
|
||||
'en-US': 'Operation button configuration item'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'selected',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否选中列表项，为true表示选中列表项。',
|
||||
'en-US': 'Indicates whether to select a list item. The value true indicates that a list item is selected.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'show-image',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示图片',
|
||||
'en-US': 'Show Pictures'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '标签配置项',
|
||||
'en-US': 'Label configuration items'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'title-option',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '标题配置项',
|
||||
'en-US': 'Title configuration item'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '类型，支持 card 和 list 两种模式',
|
||||
'en-US': 'Indicates the type. The options are card and list.'
|
||||
},
|
||||
'demoId': 'type'
|
||||
},
|
||||
{
|
||||
'name': 'user-head',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '用户头像配置项',
|
||||
'en-US': 'User avatar configuration items'
|
||||
},
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'icon-click',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '操作栏按钮点击事件',
|
||||
'en-US': 'Operation bar button click event'
|
||||
},
|
||||
'demoId': 'icon-click-event'
|
||||
}
|
||||
],
|
||||
'slot': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '组件默认插槽', 'en-US': 'Component Default Slot' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'image',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '图片插槽', 'en-US': 'Picture Slot' },
|
||||
'demoId': 'image-operate-slot'
|
||||
},
|
||||
{
|
||||
'name': 'operate',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '操作栏插槽', 'en-US': 'Action Bar Slots' },
|
||||
'demoId': 'image-operate-slot'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标签插槽', 'en-US': 'Label Slot' },
|
||||
'demoId': 'content-slot'
|
||||
},
|
||||
{
|
||||
'name': 'title',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标题插槽', 'en-US': 'Header Slot' },
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'data-resource',
|
||||
name: {
|
||||
'zh-CN': '横向单链型',
|
||||
'en-US': 'basic usage'
|
||||
'en-US': 'transverse single-stranded type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>默认显示横向单链型</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p>he horizontal single-chain type is displayed by default.</p>'
|
||||
},
|
||||
codeFiles: ['data-resource.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,12 @@ export default {
|
|||
demoId: 'vertical',
|
||||
name: {
|
||||
'zh-CN': '垂直单链型',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'vertical single-stranded type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加 `vertical` 属性开启垂直单链型，通过 `visible-num` 属性设置显示的节点数，默认为 5。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>Add the `vertical` attribute to enable the vertical single-link mode. Use the `visible-num` attribute to set the number of nodes to be displayed. The default value is 5.</p>'
|
||||
},
|
||||
codeFiles: ['vertical.vue']
|
||||
},
|
||||
|
|
@ -30,11 +31,11 @@ export default {
|
|||
demoId: 'advanced-steps',
|
||||
name: {
|
||||
'zh-CN': '高级向导1',
|
||||
'en-US': ''
|
||||
'en-US': 'Advanced Wizard 1'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加属性 `advanced` 启用高级向导功能。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>添加属性 `advanced` 启用高级向导功能。</p>',
|
||||
'en-US': '<p>Add the attribute `advanced` to enable the advanced wizard feature</p>'
|
||||
},
|
||||
codeFiles: ['advanced-steps.vue']
|
||||
},
|
||||
|
|
@ -42,11 +43,12 @@ export default {
|
|||
demoId: 'advanced-flex',
|
||||
name: {
|
||||
'zh-CN': '高级向导2',
|
||||
'en-US': ''
|
||||
'en-US': 'Advanced Wizard 2'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>添加属性 `flex` 开启总宽度响应，节点等宽，撑满父容器，节点名称超出省略，默认值为 `false`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>添加属性 `flex` 开启总宽度响应，节点等宽，撑满父容器，节点名称超出省略，默认值为 `false`。</p>',
|
||||
'en-US':
|
||||
'<p>added attributes flex ,Enable the response to the total width. Nodes have the same width and are full of the parent container. If the node name exceeds the maximum, omit the node name. The default value is `false`</p>'
|
||||
},
|
||||
codeFiles: ['advanced-flex.vue']
|
||||
},
|
||||
|
|
@ -54,12 +56,13 @@ export default {
|
|||
demoId: 'advanced-no-arrow',
|
||||
name: {
|
||||
'zh-CN': '高级向导3',
|
||||
'en-US': ''
|
||||
'en-US': 'Advanced Wizard 3'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>添加属性 `no-arrow` 隐藏左右箭头，在 PC 端按住 `shift+鼠标滚轮` 进行节点左右滚动，移动端触屏左右滑动即可。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>添加属性 `no-arrow` 隐藏左右箭头，在 PC 端按住 `shift+鼠标滚轮` 进行节点左右滚动，移动端触屏左右滑动即可。</p>',
|
||||
'en-US':
|
||||
'<p>Add the attribute `no-arrow` to hide the left and right arrows. On the PC, press and hold `shift+mouse wheel` to scroll the node left and right. On the mobile end, swipe left and right on the touch screen.</p>'
|
||||
},
|
||||
codeFiles: ['advanced-no-arrow.vue']
|
||||
},
|
||||
|
|
@ -68,11 +71,11 @@ export default {
|
|||
demoId: 'slot-item',
|
||||
name: {
|
||||
'zh-CN': '插槽1',
|
||||
'en-US': ''
|
||||
'en-US': 'slot 1'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`item` 节点插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`item` 节点插槽。</p>',
|
||||
'en-US': '<p>`item`Node Slot</p>'
|
||||
},
|
||||
codeFiles: ['slot-item.vue']
|
||||
},
|
||||
|
|
@ -80,11 +83,11 @@ export default {
|
|||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽2',
|
||||
'en-US': ''
|
||||
'en-US': 'slot 2'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`prefix` 前置插槽，仅开启 `advanced` 高级向导模式有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`prefix` 前置插槽，仅开启 `advanced` 高级向导模式有效。</p>',
|
||||
'en-US': '<p>prefix` front slot, valid only when `advanced` advanced wizard mode is enabled</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
},
|
||||
|
|
@ -92,11 +95,12 @@ export default {
|
|||
demoId: 'slot-bottom',
|
||||
name: {
|
||||
'zh-CN': '插槽3',
|
||||
'en-US': ''
|
||||
'en-US': 'slot 3'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`block-bottom` 滚动块底部插槽，仅开启 `advanced` 高级向导模式有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`block-bottom` 滚动块底部插槽，仅开启 `advanced` 高级向导模式有效。</p>',
|
||||
'en-US':
|
||||
'<p>`block-bottom` scroll block bottom slot, valid only when `advanced` advanced wizard mode is enabled</p>'
|
||||
},
|
||||
codeFiles: ['slot-bottom.vue']
|
||||
},
|
||||
|
|
@ -105,12 +109,13 @@ export default {
|
|||
demoId: 'duration',
|
||||
name: {
|
||||
'zh-CN': '节点滚动时间',
|
||||
'en-US': ''
|
||||
'en-US': 'Node scrolling time'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`duration` 设置节点左右滚动的持续时间，默认值为 300（单位 ms），设置 0 则无滚动动画，仅开启 `advanced` 高级向导模式有效。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>`duration` 设置节点左右滚动的持续时间，默认值为 300（单位 ms），设置 0 则无滚动动画，仅开启 `advanced` 高级向导模式有效。</p>',
|
||||
'en-US':
|
||||
'<p>`duration` Sets the duration for scrolling left and right of a node. The default value is 300 (unit: ms). If this parameter is set to 0, there is no scrolling animation. This parameter is valid only when the advanced wizard mode is enabled.</p>'
|
||||
},
|
||||
codeFiles: ['duration.vue']
|
||||
},
|
||||
|
|
@ -119,14 +124,101 @@ export default {
|
|||
demoId: 'complicated',
|
||||
name: {
|
||||
'zh-CN': '综合示例',
|
||||
'en-US': ''
|
||||
'en-US': 'Comprehensive example'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>综合示例<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>综合示例</p>',
|
||||
'en-US': '<p>Comprehensive example</p>'
|
||||
},
|
||||
codeFiles: ['complicated.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Steps',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'advanced',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否开启高级向导模式', 'en-US': 'Enable Advanced Wizard Mode' },
|
||||
'demoId': 'advanced-steps'
|
||||
},
|
||||
{
|
||||
'name': 'description-field',
|
||||
'type': 'String',
|
||||
'defaultValue': 'description',
|
||||
'desc': { 'zh-CN': '描述字段', 'en-US': 'Description field' }
|
||||
},
|
||||
{
|
||||
'name': 'duration',
|
||||
'type': 'Number',
|
||||
'defaultValue': '300',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'设置节点左右滚动的持续时间，默认值为 300（单位 ms），设置 0 则无滚动动画，仅开启 advanced 高级向导模式有效',
|
||||
'en-US':
|
||||
'Duration for scrolling left and right of a node. The default value is 300 (unit: ms). If this parameter is set to 0, there is no scrolling animation. This parameter is valid only when the advanced wizard mode is enabled.'
|
||||
},
|
||||
'demoId': 'duration'
|
||||
},
|
||||
{
|
||||
'name': 'no-arrow ',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'添加属性 no-arrow 隐藏左右箭头，在 PC 端按住 shift+鼠标滚轮 进行节点左右滚动，移动端触屏左右滑动即可，仅开启 advanced 高级向导模式有效。',
|
||||
'en-US':
|
||||
'Add the no-arrow attribute to hide the left and right arrows. On the PC, press Shift and scroll the mouse wheel to scroll the node left and right. Swipe left and right on the touch screen of the mobile end. This function is valid only when the advanced wizard mode is enabled.'
|
||||
},
|
||||
'demoId': 'advanced-no-arrow'
|
||||
},
|
||||
{
|
||||
'name': 'vertical',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '是否开启垂直单链型',
|
||||
'en-US': 'Indicates whether to enable the vertical single chain mode.'
|
||||
},
|
||||
'demoId': 'vertical'
|
||||
},
|
||||
{
|
||||
'name': 'visible-num',
|
||||
'type': 'Number',
|
||||
'defaultValue': '5',
|
||||
'desc': {
|
||||
'zh-CN': '显示模块数量，超出隐藏',
|
||||
'en-US': 'Display the number of modules. The number of modules exceeds the hidden value'
|
||||
},
|
||||
'demoId': 'vertical'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'block-bottom ',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '滚动块底部插槽，仅开启 advanced 高级向导模式有效。',
|
||||
'en-US':
|
||||
'Slot at the bottom of the scroll block. This parameter is valid only when the advanced wizard mode is enabled.'
|
||||
},
|
||||
'demoId': 'slot-bottom'
|
||||
},
|
||||
{
|
||||
'name': 'prefix ',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '前置插槽，仅开启 advanced 高级向导模式有效。',
|
||||
'en-US': 'Front slot, valid only when the advanced wizard mode is enabled.'
|
||||
},
|
||||
'demoId': 'slot'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过<code>type</code>设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US':
|
||||
'<p>Use <code>type</code> to set different types. The options are success, warning, info, and error. The default value is info</p>'
|
||||
},
|
||||
codeFiles: ['base.vue']
|
||||
},
|
||||
|
|
@ -18,12 +19,13 @@ export default {
|
|||
demoId: 'active-inactive-color',
|
||||
name: {
|
||||
'zh-CN': '自定义颜色',
|
||||
'en-US': 'button round'
|
||||
'en-US': 'Custom Colors'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过设置<code>active-color</code>属性自定义颜色，<code>inactive-color</code>属性设置未激活颜色</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
'en-US':
|
||||
'<p>Set the <code>active-color</code> attribute to customize the color, and the <code>inactive-color</code> attribute to set the inactive color.</p>'
|
||||
},
|
||||
codeFiles: ['active-inactive-color.vue']
|
||||
},
|
||||
|
|
@ -31,11 +33,12 @@ export default {
|
|||
demoId: 'badge',
|
||||
name: {
|
||||
'zh-CN': '徽标提示',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Logo Tips'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加<code>badge</code>属性设置徽标数值，通过添加<code>dot</code>属性显示圆点徽标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过添加<code>badge</code>属性设置徽标数值，通过添加<code>dot</code>属性显示圆点徽标</p>',
|
||||
'en-US':
|
||||
'<p>Set the logo value by adding the <code>badge</code> attribute and display the dot logo by adding the <code>dot</code> attribute</p>'
|
||||
},
|
||||
codeFiles: ['badge.vue']
|
||||
},
|
||||
|
|
@ -43,11 +46,11 @@ export default {
|
|||
demoId: 'border',
|
||||
name: {
|
||||
'zh-CN': '无边框',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Borderless'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加<code>border</code>属性去除边框<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过添加<code>border</code>属性去除边框</p>',
|
||||
'en-US': '<p>Remove the border by adding the <code>border</code> attribute</p>'
|
||||
},
|
||||
codeFiles: ['border.vue']
|
||||
},
|
||||
|
|
@ -55,11 +58,11 @@ export default {
|
|||
demoId: 'event-change',
|
||||
name: {
|
||||
'zh-CN': '切换事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Handover event'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加<code>change</code>事件实现事件切换<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过添加<code>change</code>事件实现事件切换</p>',
|
||||
'en-US': '<p>Add the <code>change</code> event to switch events.</p>'
|
||||
},
|
||||
codeFiles: ['event-change.vue']
|
||||
},
|
||||
|
|
@ -67,11 +70,11 @@ export default {
|
|||
demoId: 'slot-icon',
|
||||
name: {
|
||||
'zh-CN': '自定义图标',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Icons'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['slot-icon.vue']
|
||||
},
|
||||
|
|
@ -79,12 +82,13 @@ export default {
|
|||
demoId: 'options',
|
||||
name: {
|
||||
'zh-CN': '循环配置',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Cyclic configuration'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过<code>show-number</code>属性设置展示个数，默认值为 5 可在 Tabbar 组件上设置 <code>item-list</code> 属性，可循环配置 TabbarItem。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过<code>show-number</code>属性设置展示个数，默认值为 5 可在 Tabbar 组件上设置 <code>item-list</code> 属性，可循环配置 TabbarItem。</p>',
|
||||
'en-US':
|
||||
'<p>The <code>show-number</code> attribute is used to set the number of displayed items. The default value is 5. You can set the <code>item-list</code> attribute on the Tabbar component to configure TabbarItem cyclically.</p>'
|
||||
},
|
||||
codeFiles: ['options.vue']
|
||||
}
|
||||
|
|
@ -96,23 +100,26 @@ export default {
|
|||
'props': [
|
||||
{
|
||||
'name': 'active-color',
|
||||
'type': 'string',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置被激活时的颜色', 'en-US': 'Whether the text is centered' },
|
||||
'desc': { 'zh-CN': '设置被激活时的颜色', 'en-US': 'Sets the color when activated' },
|
||||
'demoId': 'active-inactive-color'
|
||||
},
|
||||
{
|
||||
'name': 'border',
|
||||
'type': 'boolean',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'true',
|
||||
'desc': { 'zh-CN': '设置底部导航上边框', 'en-US': 'Set whether alarms can be disabled.' },
|
||||
'desc': { 'zh-CN': '设置底部导航上边框', 'en-US': 'Set bottom navigation top border' },
|
||||
'demoId': 'custom-close'
|
||||
},
|
||||
{
|
||||
'name': 'inactive-color',
|
||||
'type': 'string',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航未被激活颜色', 'en-US': 'Customized text of the close button' },
|
||||
'desc': {
|
||||
'zh-CN': '设置底部导航未被激活颜色',
|
||||
'en-US': 'Set the color of the bottom navigation that is not activated'
|
||||
},
|
||||
'demoId': 'active-inactive-color'
|
||||
},
|
||||
{
|
||||
|
|
@ -121,26 +128,25 @@ export default {
|
|||
'defaultValue': '[]',
|
||||
'desc': {
|
||||
'zh-CN': '设置底部导航虚幻遍历需要放的数组;',
|
||||
'en-US': 'Set the warning prompt content. The default value is null.'
|
||||
'en-US': 'Sets the array to be placed in the bottom navigation illusory traversal.'
|
||||
},
|
||||
'demoId': 'options'
|
||||
},
|
||||
{
|
||||
'name': 'show-number',
|
||||
'type': 'number',
|
||||
'type': 'Number',
|
||||
'defaultValue': '5',
|
||||
'desc': {
|
||||
'zh-CN': '设置底部导航需要展示的项数',
|
||||
'en-US':
|
||||
'Set the alarm icon. By default, the corresponding icon is automatically used based on the value of type.'
|
||||
'en-US': 'Set the number of items to be displayed in the bottom navigation.'
|
||||
},
|
||||
'demoId': 'options'
|
||||
},
|
||||
{
|
||||
'name': 'v-model',
|
||||
'type': 'number | string',
|
||||
'type': 'Number | String',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '设置底部导航双向数据绑定', 'en-US': 'Display icon' },
|
||||
'desc': { 'zh-CN': '设置底部导航双向数据绑定', 'en-US': 'Set bottom navigation bidirectional data binding' },
|
||||
'demoId': 'base'
|
||||
}
|
||||
],
|
||||
|
|
@ -161,7 +167,7 @@ export default {
|
|||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '底部导航每一项', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '底部导航每一项', 'en-US': 'Bottom navigation for each item' },
|
||||
'demoId': 'base'
|
||||
}
|
||||
]
|
||||
|
|
@ -172,37 +178,46 @@ export default {
|
|||
'props': [
|
||||
{
|
||||
'name': 'badge',
|
||||
'type': 'number | string',
|
||||
'type': 'Number | String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航选项徽标', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '设置底部导航选项徽标', 'en-US': 'Set bottom navigation option logo' },
|
||||
'demoId': 'badge'
|
||||
},
|
||||
{
|
||||
'name': 'dot',
|
||||
'type': 'boolean',
|
||||
'name': 'custom-icon',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航选项点', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '设置底部导航个性化图标', 'en-US': 'Set bottom navigation personalization icon' }
|
||||
},
|
||||
{
|
||||
'name': 'dot',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航选项点', 'en-US': 'Set bottom navigation option points' },
|
||||
'demoId': 'badge'
|
||||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': 'Object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航上自定义图标', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '设置底部导航上自定义图标', 'en-US': 'Set custom icons on bottom navigation' },
|
||||
'demoId': 'slot-icon'
|
||||
},
|
||||
{
|
||||
'name': 'name',
|
||||
'type': 'number | string',
|
||||
'type': 'Number | String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航选项标题', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '设置底部导航选项标题', 'en-US': 'Set bottom navigation option title' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'text',
|
||||
'type': 'string',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置底部导航循环时设定的标题', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '设置底部导航循环时设定的标题',
|
||||
'en-US': 'Sets the title set when the bottom navigation loop'
|
||||
},
|
||||
'demoId': 'base'
|
||||
}
|
||||
],
|
||||
|
|
@ -213,7 +228,7 @@ export default {
|
|||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '选项点击时触发的事件',
|
||||
'en-US': 'Event triggered when the alert function is disabled'
|
||||
'en-US': 'Event triggered when an option is clicked'
|
||||
},
|
||||
'demoId': 'event-change'
|
||||
}
|
||||
|
|
@ -223,7 +238,7 @@ export default {
|
|||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '底部导航每一项', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '底部导航每一项', 'en-US': 'Bottom navigation for each item' },
|
||||
'demoId': 'base'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ export default {
|
|||
demoId: 'mobile-first',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>v-model</code> 设置初始激活的标签页，绑定的值对应 <code>tiny-tab-item</code> 元素中 <code>name</code> 属性的值。一个 <code>tiny-tab-item</code> 为一个标签页，通过 <code>title</code> 属性设置标签页标题。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 <code>v-model</code> 设置初始激活的标签页，绑定的值对应 <code>tiny-tab-item</code> 元素中 <code>name</code> 属性的值。一个 <code>tiny-tab-item</code> 为一个标签页，通过 <code>title</code> 属性设置标签页标题。</p>',
|
||||
'en-US':
|
||||
'<p>Use <code>v-model</code> to set the tab page for initial activation. The bound value corresponds to the value of the <code>name</code> attribute in the <code>tiny-tab-item</code> element. A <code>tiny-tab-item</code> is a tab. You can use the <code>title</code> attribute to set the tab title.</p>'
|
||||
},
|
||||
codeFiles: ['mobile-first.vue']
|
||||
},
|
||||
|
|
@ -19,11 +20,12 @@ export default {
|
|||
demoId: 'align-center',
|
||||
name: {
|
||||
'zh-CN': '居中对齐',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Center Alignment'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在小屏下，页签项较少并且可以完全显示时，页签项默认居中对齐。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>在小屏下，页签项较少并且可以完全显示时，页签项默认居中对齐。</p>',
|
||||
'en-US':
|
||||
'<p>On a small screen, when there are few tab items and the tab items can be fully displayed, the tab items are center-aligned by default.</p>'
|
||||
},
|
||||
codeFiles: ['align-center.vue']
|
||||
},
|
||||
|
|
@ -31,12 +33,13 @@ export default {
|
|||
demoId: 'tab-style-card',
|
||||
name: {
|
||||
'zh-CN': 'card 类型',
|
||||
'en-US': 'events'
|
||||
'en-US': 'card type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>tab-style</code> 设置标签页风格类型，默认为 <code>card</code> 通过 <code>active-name</code> 设置初始激活的标签页 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 <code>tab-style</code> 设置标签页风格类型，默认为 <code>card</code> 通过 <code>active-name</code> 设置初始激活的标签页 。</p>',
|
||||
'en-US':
|
||||
'<p>Use <code>tab-style</code> to set the tab style type. The default value is <code>card</code>. Use <code>active-name</code> to set the initially activated tab</p>'
|
||||
},
|
||||
codeFiles: ['tab-style-card.vue']
|
||||
},
|
||||
|
|
@ -44,11 +47,11 @@ export default {
|
|||
demoId: 'tab-style-bordercard',
|
||||
name: {
|
||||
'zh-CN': 'bordercard 类型',
|
||||
'en-US': 'events'
|
||||
'en-US': 'bordercard type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>tab-style</code> 设置标签页风格类型为 <code>bordercard</code> 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 <code>tab-style</code> 设置标签页风格类型为 <code>bordercard</code> 。</p>',
|
||||
'en-US': '<p>Click <code>tab-style</code> to set the tab style to <code>bordercard</code>.</p>'
|
||||
},
|
||||
codeFiles: ['tab-style-bordercard.vue']
|
||||
},
|
||||
|
|
@ -56,12 +59,13 @@ export default {
|
|||
demoId: 'with-add',
|
||||
name: {
|
||||
'zh-CN': '标签页可增加',
|
||||
'en-US': 'events'
|
||||
'en-US': 'The tab page can be added'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置 <code>with-add</code> 属性启用标签可增加功能。<br />同时通过 <code>add</code> 事件自定义实现增加标签页的逻辑。配置 <code>show-more-tabs</code> 属性后当标签页超过一定宽度时将显示 <code>更多</code> 按钮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>设置 <code>with-add</code> 属性启用标签可增加功能。<br />同时通过 <code>add</code> 事件自定义实现增加标签页的逻辑。配置 <code>show-more-tabs</code> 属性后当标签页超过一定宽度时将显示 <code>更多</code> 按钮。</p>',
|
||||
'en-US':
|
||||
'<p>Set the <code>with-add</code> attribute to enable the tag to add functions. <br />In addition, the <code>add</code> event is customized to implement the logic of adding tabs. After the <code>show-more-tabs</code> attribute is configured, the <code>More</code> button is displayed when the tab page exceeds a certain width</p>'
|
||||
},
|
||||
codeFiles: ['with-add.vue']
|
||||
},
|
||||
|
|
@ -69,12 +73,13 @@ export default {
|
|||
demoId: 'tabs-events-close',
|
||||
name: {
|
||||
'zh-CN': '标签页可关闭',
|
||||
'en-US': 'events'
|
||||
'en-US': 'The tab page can be closed.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>withClose</code> 属性设置是否可关闭标签页。同时可通过 <code>close</code> 事件自定义实现关闭标签页的逻辑。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 <code>withClose</code> 属性设置是否可关闭标签页。同时可通过 <code>close</code> 事件自定义实现关闭标签页的逻辑。</p>',
|
||||
'en-US':
|
||||
'<p>Set the <code>withClose</code> attribute to determine whether to close the tab page. In addition, the <code>close</code> event can be used to customize the logic for closing the tab page.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-events-close.vue']
|
||||
},
|
||||
|
|
@ -82,12 +87,13 @@ export default {
|
|||
demoId: 'before-leave',
|
||||
name: {
|
||||
'zh-CN': '离开前事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Pre-departure events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p><code>before-leave</code> 切换标签之前的钩子函数，若返回 <code>false </code>或者返回 <code>Promise</code> 且被<code> reject</code>，则阻止切换，返回<code> true</code> 则可以切换。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p><code>before-leave</code> 切换标签之前的钩子函数，若返回 <code>false </code>或者返回 <code>Promise</code> 且被<code> reject</code>，则阻止切换，返回<code> true</code> 则可以切换。</p>',
|
||||
'en-US':
|
||||
'<p>code>before-leave</code>: If <code>false </code> is returned or <code>Promise</code> is returned and is rejected</code>, the switchover is blocked. <code> true</code> can be switched.</p>'
|
||||
},
|
||||
codeFiles: ['before-leave.vue']
|
||||
},
|
||||
|
|
@ -95,11 +101,12 @@ export default {
|
|||
demoId: 'stretch-wh',
|
||||
name: {
|
||||
'zh-CN': '可自动撑开',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Can be self-expanded'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><code>stretch</code> 属性设置标签的宽度是否自撑开，默认为<code> false</code> 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p><code>stretch</code> 属性设置标签的宽度是否自撑开，默认为<code> false</code> 。</p>',
|
||||
'en-US':
|
||||
'<p>The <code>stretch</code> attribute specifies whether the width of the tag is self-expanded. The default value is <code> false</code>.</p>'
|
||||
},
|
||||
codeFiles: ['stretch-wh.vue']
|
||||
},
|
||||
|
|
@ -107,11 +114,11 @@ export default {
|
|||
demoId: 'tabs-events-add',
|
||||
name: {
|
||||
'zh-CN': 'add 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'add events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>点击新增按钮增加标签页时触发 <code>add</code> 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>点击新增按钮增加标签页时触发 <code>add</code> 事件</p>',
|
||||
'en-US': '<p>The <code>add</code> event is triggered when the Add button is clicked to add a tab page.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-events-add.vue']
|
||||
},
|
||||
|
|
@ -119,11 +126,11 @@ export default {
|
|||
demoId: 'tabs-events-click',
|
||||
name: {
|
||||
'zh-CN': 'click 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'click events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>单击标签页时触发 <code>click</code> 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>单击标签页时触发 <code>click</code> 事件</p>',
|
||||
'en-US': '<p>The <code>click</code> event is triggered when a tab page is clicked.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-events-click.vue']
|
||||
},
|
||||
|
|
@ -131,11 +138,11 @@ export default {
|
|||
demoId: 'tabs-events-close2',
|
||||
name: {
|
||||
'zh-CN': 'close 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'close events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>关闭标签页时触发 <code>close</code> 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>关闭标签页时触发 <code>close</code> 事件</p>',
|
||||
'en-US': '<p>The <code>close</code> event is triggered when a tab page is closed.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-events-close.vue']
|
||||
},
|
||||
|
|
@ -143,12 +150,13 @@ export default {
|
|||
demoId: 'custom-tab-title',
|
||||
name: {
|
||||
'zh-CN': '自定义标签页标题',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Tab Title'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>tiny-tab-item</code> 的 <code>title</code> 插槽自定义标签页标题，比如在标题前增加图标。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 <code>tiny-tab-item</code> 的 <code>title</code> 插槽自定义标签页标题，比如在标题前增加图标。</p>',
|
||||
'en-US':
|
||||
'<p>se the <code>title</code> slot of <code>tiny-tab-item</code> to customize the tab title, for example, add an icon before the title.</p>'
|
||||
},
|
||||
codeFiles: ['custom-tab-title.vue']
|
||||
},
|
||||
|
|
@ -156,11 +164,12 @@ export default {
|
|||
demoId: 'tabdata-title',
|
||||
name: {
|
||||
'zh-CN': '循环创建标签页',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Create a tab page in a cycle.'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>v-for</code> 根据数据循环创建多个 <code>tiny-tab-item</code> 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 <code>v-for</code> 根据数据循环创建多个 <code>tiny-tab-item</code> 。</p>',
|
||||
'en-US':
|
||||
'<p>Use <code>v-for</code> to create multiple <code>tiny-tab-items</code> based on data cyclically.</p>'
|
||||
},
|
||||
codeFiles: ['tabdata-title.vue']
|
||||
},
|
||||
|
|
@ -168,12 +177,13 @@ export default {
|
|||
demoId: 'show-echarts',
|
||||
name: {
|
||||
'zh-CN': '标签页切换显示不同图表',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Tabs switch to display different charts'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>Tabs 组件里使用 Chart 组件要调用 Chart 实例方法 <code>resize()</code>，例如示例中的 <code>this.$refs.firstChart.resize()</code>，这样才能让 Chart 自适应父元素响应变化。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>Tabs 组件里使用 Chart 组件要调用 Chart 实例方法 <code>resize()</code>，例如示例中的 <code>this.$refs.firstChart.resize()</code>，这样才能让 Chart 自适应父元素响应变化。</p>',
|
||||
'en-US':
|
||||
'<p>o use the Chart component in the Tabs component, you need to invoke the chart instance method <code>resize()</code>, for example, <code>this.$refs.firstChart.resize()</code> in the example. In this way, the chart can adapt to the change of the parent element.</p>'
|
||||
},
|
||||
codeFiles: ['show-echarts.vue']
|
||||
},
|
||||
|
|
@ -181,36 +191,37 @@ export default {
|
|||
demoId: 'show-different-grid-data',
|
||||
name: {
|
||||
'zh-CN': '标签页切换不同 Grid',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Tab Page Switching Between Grids'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>Tabs 组件里使用 Grid 组件需要 Grid 设置属性 <code>:auto-resize="true"</code>，这样才能让 Grid 自适应父元素响应变化。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>Tabs 组件里使用 Grid 组件需要 Grid 设置属性 <code>:auto-resize="true"</code>，这样才能让 Grid 自适应父元素响应变化。</p>',
|
||||
'en-US':
|
||||
'<p>To use the Grid component in the Tabs component, you need to set the Grid attribute <code>:auto-resize="true"</code> so that the Grid can adapt to the changes of the parent element.</p>'
|
||||
},
|
||||
codeFiles: ['show-different-grid-data.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'tabs-tabs',
|
||||
name: {
|
||||
'zh-CN': '标签页嵌套',
|
||||
'en-US': 'events'
|
||||
'zh-CN': '标签页嵌套1',
|
||||
'en-US': 'Tab nesting'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p> 可将 子 tabs 作为 父 tabs 的 <code>tab-item</code> 嵌套显示标签页<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p> 可将 子 tabs 作为 父 tabs 的 <code>tab-item</code> 嵌套显示标签页</p>',
|
||||
'en-US': '<p>The <code>tab-item</code> tab can be nested with a child tab as a parent tab.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-tabs.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'tabs-separator',
|
||||
name: {
|
||||
'zh-CN': '标签页嵌套',
|
||||
'zh-CN': '标签页嵌套2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p> 通过 <code>separator</code>属性设置分隔符<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p> 通过 <code>separator</code>属性设置分隔符</p>',
|
||||
'en-US': '<p>Set the separator using the <code>separator</code> attribute.</p>'
|
||||
},
|
||||
codeFiles: ['tabs-separator.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -19,12 +19,12 @@ export default {
|
|||
demoId: 'tag-group-type',
|
||||
name: {
|
||||
'zh-CN': '类型',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`type`可以为标签设置相应的类型，可选值（success / warning / alerting / error / info / default），默认值为 info。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>`type`可以为标签设置相应的类型，可选值（success / warning / alerting / error / info / default），默认值为 info。</p>',
|
||||
'en-US': '<p>`type`You can set the corresponding type for a tag. The value can be (success / warning / alerting / error / info / default), and the default value is info.</p>'
|
||||
},
|
||||
codeFiles: ['tag-group-type.vue']
|
||||
},
|
||||
|
|
@ -32,11 +32,11 @@ export default {
|
|||
demoId: 'tag-group-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `size` 设置 TagGroup 标签组标签大小，可选值（medium / small / mini），默认值为 medium。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `size` 设置 TagGroup 标签组标签大小，可选值（medium / small / mini），默认值为 medium。</p>',
|
||||
'en-US': '<p>You can use `size` to set the tag size of the TagGroup tag group. The value can be medium, small, or mini. The default value is medium.</p>'
|
||||
},
|
||||
codeFiles: ['tag-group-size.vue']
|
||||
},
|
||||
|
|
@ -44,12 +44,12 @@ export default {
|
|||
demoId: 'tag-group-effect',
|
||||
name: {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Subject'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `effect` 设置 TagGroup 标签组 标签主题，可选值（dark / light / plain），默认值为 light。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>可通过 `effect` 设置 TagGroup 标签组 标签主题，可选值（dark / light / plain），默认值为 light。</p>',
|
||||
'en-US': '<p>You can use `effect` to set the tag theme of the TagGroup tag group. The value can be dark, light, or plain. The default value is light.</p>'
|
||||
},
|
||||
codeFiles: ['tag-group-effect.vue']
|
||||
},
|
||||
|
|
@ -57,14 +57,63 @@ export default {
|
|||
demoId: 'tag-group-event',
|
||||
name: {
|
||||
'zh-CN': 'Click 事件',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Click Event'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>TagGroup 标签组提供了`item-click`事件，`item-click`事件默认提供的参数有 `item,index,event`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>TagGroup 标签组提供了`item-click`事件，`item-click`事件默认提供的参数有 `item,index,event`</p>',
|
||||
'en-US': '<p>The TagGroup tag group provides the `item-click` event. The `item-click` event provides the following parameters by default: `item, index, and event`</p>'
|
||||
},
|
||||
codeFiles: ['tag-group-event.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'TagGroup',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'Array',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '数据源',
|
||||
'en-US': 'Data source'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'effect',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的可选值为 dark / light / plain，默认值为 light',
|
||||
'desc': {
|
||||
'zh-CN': '主题',
|
||||
'en-US': 'Subject'
|
||||
},
|
||||
'demoId': 'tag-group-effect'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的可选值为 medium / small / mini，默认为medium。',
|
||||
'desc': {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'Size'
|
||||
},
|
||||
'demoId': 'tag-group-size'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'item-click',
|
||||
'type': 'Function()',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '单个标签的点击事件',
|
||||
'en-US': 'Click event of a single tag.'
|
||||
},
|
||||
'demoId': 'tag-group-event'
|
||||
}
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -22,8 +22,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `color` 设置标签背景色。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `color` 设置标签背景色。</p>',
|
||||
'en-US': '<p>You can use `color` to set the background color of a label.</p>'
|
||||
},
|
||||
codeFiles: ['color3.vue']
|
||||
},
|
||||
|
|
@ -34,8 +34,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `hit` 设置标签边框，可选值（true/false）true 为有边框，false 无边框,默认值为 false。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `hit` 设置标签边框，可选值（true/false）true 为有边框，false 无边框,默认值为 false。</p>',
|
||||
'en-US': '<p>You can use `hit` to set the label border. The options are true and false. The default value is false.</p>'
|
||||
},
|
||||
codeFiles: ['hit.vue']
|
||||
},
|
||||
|
|
@ -46,8 +46,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `size` 设置 Tag 标签大小，可选值（medium / small / mini），默认值为 medium。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `size` 设置 Tag 标签大小，可选值（medium / small / mini），默认值为 medium。</p>',
|
||||
'en-US': '<p>You can use `size` to set the tag size. The value can be medium, small, or mini. The default value is medium.</p>'
|
||||
},
|
||||
codeFiles: ['tag-size.vue']
|
||||
},
|
||||
|
|
@ -59,8 +59,8 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `effect` 设置 Tag 标签主题，可选值（dark / light / plain），默认值为 light。<br>`type`可以为标签设置相应的类型，可选值（success / warning / alerting / error / default / info），默认值为 info。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>可通过 `effect` 设置 Tag 标签主题，可选值（dark / light / plain），默认值为 light。<br>`type`可以为标签设置相应的类型，可选值（success / warning / alerting / error / default / info），默认值为 info。</p>',
|
||||
'en-US': '<p>You can use `effect` to set the tag theme. The value can be dark, light, or plain. The default value is light. <br>`type`You can set the corresponding type for the tag. The value can be (success / warning / alerting / error / default / info). The default value is info.</p>'
|
||||
},
|
||||
codeFiles: ['effect.vue']
|
||||
},
|
||||
|
|
@ -71,22 +71,22 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过点击`+ New Tag`在文本框中输入你要定义的标签名就能在标签列表中最后一个创建标签 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过点击`+ New Tag`在文本框中输入你要定义的标签名就能在标签列表中最后一个创建标签 。</p>',
|
||||
'en-US': '<p>Click `+ New Tag` and enter the name of the tag you want to define in the text box to create a tag in the last tag list.</p>'
|
||||
},
|
||||
codeFiles: ['create.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'closeable',
|
||||
demoId: 'closable',
|
||||
name: {
|
||||
'zh-CN': '可移除标签',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`closable` 属性可以为标签设置成可去除标签。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>`closable` 属性可以为标签设置成可去除标签。</p>',
|
||||
'en-US': '<p>The `closable` attribute can be set to removeable tags for tags.</p>'
|
||||
},
|
||||
codeFiles: ['closeable.vue']
|
||||
codeFiles: ['closable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'tag-event-click',
|
||||
|
|
@ -95,8 +95,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置过滤类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>设置过滤类型</p>',
|
||||
'en-US': '<p>Set the filtering type.</p>'
|
||||
},
|
||||
codeFiles: ['tag-event-click.vue']
|
||||
},
|
||||
|
|
@ -107,8 +107,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置过滤类型<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>设置过滤类型</p>',
|
||||
'en-US': '<p>Set the filtering type.</p>'
|
||||
},
|
||||
codeFiles: ['tag-event-close.vue']
|
||||
},
|
||||
|
|
@ -119,8 +119,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>标签加上 selectable 属性可开启选中功能<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>标签加上 selectable 属性可开启选中功能</p>',
|
||||
'en-US': '<p>Add the selectable attribute to the tag to enable the selection function.</p>'
|
||||
},
|
||||
codeFiles: ['tag-selectable.vue']
|
||||
},
|
||||
|
|
@ -131,8 +131,8 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `theme` 设置其他颜色的标签，目前新增的彩色标签有 pink、purple、cyan。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>可通过 `theme` 设置其他颜色的标签，目前新增的彩色标签有 pink、purple、cyan。</p>',
|
||||
'en-US': '<p>You can use `theme` to set labels of other colors. Currently, the new color labels include pink, purple, and cyan.</p>'
|
||||
},
|
||||
codeFiles: ['colorful-tag.vue']
|
||||
},
|
||||
|
|
@ -143,11 +143,58 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过绑定`value`属性设置自定义内容<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过绑定`value`属性设置自定义内容</p>',
|
||||
'en-US': '<p>Set custom content by binding the `value` property</p>'
|
||||
},
|
||||
codeFiles: ['content.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Tag',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'custom-class',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '标签class',
|
||||
'en-US': 'Tag class'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'operable',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否可操作',
|
||||
'en-US': 'Operable or Not'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'theme',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
|
||||
'en-US': 'Color label. The value can be pink, purple, or cyan.'
|
||||
},
|
||||
'demoId': 'colorful-tag'
|
||||
},
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '该属性的可选值为 success / warning / alerting / error / default / info,默认值为 info',
|
||||
'en-US': 'The value of this attribute can be success / warning / alerting / error / default / info. The default value is info.'
|
||||
},
|
||||
'demoId': 'effect'
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export default {
|
|||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `data` 属性设置时间线步骤条数据<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `data` 属性设置时间线步骤条数据</p>',
|
||||
'en-US': '<p>Set the timeline step bar data through the `data` property.</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -18,11 +18,11 @@ export default {
|
|||
demoId: 'sub-field',
|
||||
name: {
|
||||
'zh-CN': '两侧分布',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Bilateral distribution'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `sub-field` 属性设置时间线两侧展示。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过 `sub-field` 属性设置时间线两侧展示。</p>',
|
||||
'en-US': '<p>Use the `sub-field` attribute to set the display on both sides of the timeline.</p>'
|
||||
},
|
||||
codeFiles: ['sub-field.vue']
|
||||
},
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
demoId: 'single-status',
|
||||
name: {
|
||||
'zh-CN': '单状态时间轴',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Single-state timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
|
||||
'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
|
||||
},
|
||||
codeFiles: ['single-status.vue']
|
||||
},
|
||||
|
|
@ -42,12 +42,12 @@ export default {
|
|||
demoId: 'many-status',
|
||||
name: {
|
||||
'zh-CN': '多状态时间轴',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Multi-state timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过在`data`里面的属性`autoColor`设置自定义状态。对应场景： `success` ：成功 `error` ：失败 `info` ：等待 <p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过在`data`里面的属性`autoColor`设置自定义状态。对应场景： `success` ：成功 `error` ：失败 `info` ：等待 </p>',
|
||||
'en-US': '<p>Set the user-defined state through the `autoColor` attribute in `data`. Scenario: `success`: success; error`: failure; info`: waiting</p>'
|
||||
},
|
||||
codeFiles: ['many-status.vue']
|
||||
},
|
||||
|
|
@ -55,11 +55,11 @@ export default {
|
|||
demoId: 'node-toset',
|
||||
name: {
|
||||
'zh-CN': '节点配置图标',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Node configuration icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
|
||||
'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
|
||||
},
|
||||
codeFiles: ['node-toset.vue']
|
||||
},
|
||||
|
|
@ -67,11 +67,11 @@ export default {
|
|||
demoId: 'fold-time',
|
||||
name: {
|
||||
'zh-CN': '折叠时间轴',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Collapse Timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当节点超过七项时，自动折叠节点，仅展示最近三项，点击后展开<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'zh-CN': '<p>当节点超过七项时，自动折叠节点，仅展示最近三项，点击后展开</p>',
|
||||
'en-US': '<p>When there are more than seven nodes, the system automatically collapses the nodes and displays only the latest three nodes.</p>'
|
||||
},
|
||||
codeFiles: ['fold-time.vue']
|
||||
},
|
||||
|
|
@ -79,15 +79,52 @@ export default {
|
|||
demoId: 'auto-slot',
|
||||
name: {
|
||||
'zh-CN': '自定义插槽',
|
||||
'en-US': 'events'
|
||||
'en-US': 'Custom Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `slot` 为 `left` 可以自定义步骤条右侧内容。`data`中自定义属性名应避免`name`(正标题)、`tips`(副标题)、`time`(时间)属性<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'<p>通过 `slot` 为 `left` 可以自定义步骤条右侧内容。`data`中自定义属性名应避免`name`(正标题)、`tips`(副标题)、`time`(时间)属性</p>',
|
||||
'en-US': '<p>You can set `slot` to `left` to customize the content on the right of the step bar. User-defined attribute names in `data` should avoid `name` (head title), `tips` (subtitle), and `time` (time) attributes.</p>'
|
||||
},
|
||||
codeFiles: ['auto-slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
apis: [
|
||||
{
|
||||
'name': 'Timeline',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'auto-color-field',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示组件二级标题内容，默认值为 autoColor',
|
||||
'en-US': 'Displays the level-2 title of the component. The default value is autoColor.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'sub-field',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置时间线两侧展示',
|
||||
'en-US': 'Set the display on both sides of the timeline.'
|
||||
},
|
||||
'demoId': 'sub-field'
|
||||
},
|
||||
{
|
||||
'name': 'tips-field',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示组件二级标题内容,默认值为 tips',
|
||||
'en-US': 'Displays the level-2 title of the component. The default value is tips.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
const map = {
|
||||
tinyMode: 'tiny_mode'
|
||||
}
|
||||
|
||||
export default {
|
||||
isMobile: true,
|
||||
initApp: (app) => {}
|
||||
VITE_CONTEXT: '',
|
||||
base: '',
|
||||
prodBase: '',
|
||||
initApp: (app) => {
|
||||
app.config.globalProperties[map.tinyMode] = { value: 'mobile' }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export const cmpMenus = [
|
|||
children: [
|
||||
{ name: 'Navbar', nameCn: '导航栏', key: 'navbar' },
|
||||
{ name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
|
||||
{ name: 'DropdownMenu ', nameCn: '下拉菜单', key: 'dropdownmenu' },
|
||||
{ name: 'Tabs', nameCn: '选项卡', key: 'tabs' },
|
||||
{ name: 'TimeLine ', nameCn: '时间轴', key: 'timeline' },
|
||||
{ name: 'IndexBar ', nameCn: '索引条', key: 'index-bar' }
|
||||
|
|
@ -58,23 +59,23 @@ export const cmpMenus = [
|
|||
label: '数据组件',
|
||||
labelEn: 'Data',
|
||||
key: 'cmp_data',
|
||||
children: [{ name: 'Progress', nameCn: '进度条', key: 'progress' }]
|
||||
children: [
|
||||
{ name: 'Table', nameCn: '表格', key: 'table' },
|
||||
{ name: 'List', nameCn: '列表', key: 'list' },
|
||||
{ name: 'Progress', nameCn: '进度条', key: 'progress' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '表单组件',
|
||||
labelEn: 'Form',
|
||||
key: 'cmp_form',
|
||||
children: [
|
||||
{ name: 'Table', nameCn: '表格', key: 'table' },
|
||||
{ name: 'Button', nameCn: '按钮', key: 'button' },
|
||||
{ name: 'Form', nameCn: '表单', key: 'form' },
|
||||
{ name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
|
||||
{ name: 'Slider', nameCn: '滑块', key: 'slider' },
|
||||
{ name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
|
||||
{ name: 'DropdownMenu ', nameCn: '筛选排序', key: 'dropdownmenu' },
|
||||
{ name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
|
||||
{ name: 'Input', nameCn: '输入框', key: 'input' },
|
||||
{ name: 'List', nameCn: '列表', key: 'list' },
|
||||
{ name: 'Radio', nameCn: '单选', key: 'radio' },
|
||||
{ name: 'Search', nameCn: '搜索框', key: 'search' },
|
||||
{ name: 'Switch', nameCn: '开关', key: 'switch' },
|
||||
|
|
@ -103,6 +104,7 @@ export const cmpMenus = [
|
|||
children: [
|
||||
{ name: 'Exception', nameCn: '缺省页', key: 'exception' },
|
||||
{ name: 'Avatar', nameCn: '头像', key: 'avatar' },
|
||||
{ name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
|
||||
{ name: 'Icon', nameCn: '图标', key: 'icon' },
|
||||
{ name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
|
||||
{ name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
# 更新日志
|
||||
|
||||
|
||||
## v2.6.0/v3.6.0
|
||||
|
||||
`2023/03/30`
|
||||
|
||||
### 📢 破坏性变更
|
||||
|
||||
- 无
|
||||
|
||||
### ✨ 新特性
|
||||
|
||||
- 【TimeLine 组件】增加内容插槽功能
|
||||
- 【TimeLine 组件】增加内容折叠功能
|
||||
- 【Exception 组件】增加自定义图片功能
|
||||
- 【PullRefresh 组件】增加上拉刷新功能
|
||||
- 【Tabs 组件】增加可展开的功能
|
||||
- 【Form 组件】增加label支撑文字超长自动换行功能
|
||||
- 【UserHead 组件】新增移动端UserHead组件
|
||||
- 【Popover 组件】新增移动端Popover组件
|
||||
- 【Table 组件】新增移动端Table组件
|
||||
- 【IndexBar 组件】新增移动端IndexBar组件
|
||||
- 【Multi-select 组件】新增移动端Multi-select组件
|
||||
|
||||
|
||||
### 🐞 缺陷修复
|
||||
|
||||
- 无
|
||||
|
||||
### 🚀 优化
|
||||
|
||||
- 【Button 组件】优化 Button 组件的移动端样式
|
||||
- 【Search 组件】优化 Search 组件的移动端样式
|
||||
- 【Action-sheet 组件】优化 Action-sheet 组件的滚动方式
|
||||
- 【Input 组件】优化type为select时，可下拉选择
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!--anchor:on-->
|
||||
|
||||
## 引入组件
|
||||
|
||||
`TinyVue` 支持多组件引入、单组件引入以及完整引入三种方式。
|
||||
|
||||
### 多组件引入（推荐）
|
||||
|
||||
多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `Button` 和 `Alert` 组件为例）：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<tiny-button>TinyVue</tiny-button>
|
||||
<tiny-alert description="TinyVue"></tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Alert } from '@opentiny/vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyAlert: Alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 单组件引入
|
||||
|
||||
`TinyVue` 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。
|
||||
|
||||
以 `Button` 和 `Alert` 组件为例，执行以下命令安装：
|
||||
|
||||
```bash
|
||||
yarn add @opentiny/vue-button @opentiny/vue-alert
|
||||
# 或者
|
||||
npm install @opentiny/vue-button @opentiny/vue-alert
|
||||
```
|
||||
|
||||
在页面中的使用 `Button` 和 `Alert` 组件的示例如下：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<tiny-button>TinyVue</tiny-button>
|
||||
<tiny-alert description="TinyVue"></tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '@opentiny/vue-button';
|
||||
import Alert from '@opentiny/vue-alert';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyAlert: Alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 完整引入（不推荐）
|
||||
|
||||
完整引入组件后，就不需每个页面都 import 组件和局部注册，只需在 `main.js` 中全局注册，但因此会失去 `tree-shaking` 的能力，打包后会有冗余代码。
|
||||
|
||||
`Vue 3.0` 版本完整引入的示例如下：
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import TinyVue from '@opentiny/vue';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(TinyVue);
|
||||
```
|
||||
|
||||
`Vue 2.0` 版本完整引入的示例如下：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import TinyVue from '@opentiny/vue';
|
||||
|
||||
Vue.use(TinyVue);
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
## 环境准备
|
||||
|
||||
TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。
|
||||
|
||||
浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器
|
||||
|
||||
### 安装 Node.js
|
||||
|
||||
推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确：
|
||||
|
||||
```bash
|
||||
node -v
|
||||
```
|
||||
|
||||
### 安装 Yarn
|
||||
|
||||
管理 `npm` 包的工具主要有两种，一种是安装 `Node.js` 时自带的 `npm` ，另一种是速度更快的 `yarn`，通过以下命令安装：
|
||||
|
||||
```bash
|
||||
npm install -g yarn
|
||||
```
|
||||
|
||||
包管理器的选择 `yarn` 和 `npm` 建议只选择使用一种包管理器，以免在安装过程中出现无法升级依赖包等问题。
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
export const standaloneMenus = [
|
||||
{
|
||||
label: '组件总览',
|
||||
key: 'overview'
|
||||
}
|
||||
]
|
||||
|
||||
export const docMenus = [
|
||||
{
|
||||
label: '使用指南',
|
||||
labelEn: 'Guide',
|
||||
key: 'doc_use',
|
||||
children: [
|
||||
{
|
||||
title: '更新日志',
|
||||
titleEn: 'Change Log',
|
||||
key: 'changelog'
|
||||
},
|
||||
{
|
||||
title: '组件介绍',
|
||||
titleEn: 'Introduce',
|
||||
key: 'introduce'
|
||||
},
|
||||
{
|
||||
title: '引入组件',
|
||||
titleEn: 'Import Component',
|
||||
key: 'import'
|
||||
},
|
||||
{
|
||||
title: '切换模式',
|
||||
titleEn: 'Switch Mode',
|
||||
key: 'mode'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export const cmpMenus = [
|
||||
{
|
||||
label: '导航组件',
|
||||
labelEn: 'Navigation',
|
||||
key: 'cmp_navigation',
|
||||
children: [
|
||||
{ name: 'Navbar', nameCn: '导航栏', key: 'navbar' },
|
||||
{ name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
|
||||
{ name: 'Tabs', nameCn: '选项卡', key: 'tabs' },
|
||||
{ name: 'TimeLine ', nameCn: '时间轴', key: 'timeline' },
|
||||
{ name: 'IndexBar ', nameCn: '索引条', key: 'index-bar' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '容器组件',
|
||||
labelEn: 'Container',
|
||||
key: 'cmp_container',
|
||||
children: [{ name: 'Dialog', nameCn: '对话框', key: 'dialogbox' }]
|
||||
},
|
||||
{
|
||||
label: '数据组件',
|
||||
labelEn: 'Data',
|
||||
key: 'cmp_data',
|
||||
children: [{ name: 'Progress', nameCn: '进度条', key: 'progress' }]
|
||||
},
|
||||
{
|
||||
label: '表单组件',
|
||||
labelEn: 'Form',
|
||||
key: 'cmp_form',
|
||||
children: [
|
||||
{ name: 'Table', nameCn: '表格', key: 'table' },
|
||||
{ name: 'Button', nameCn: '按钮', key: 'button' },
|
||||
{ name: 'Form', nameCn: '表单', key: 'form' },
|
||||
{ name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
|
||||
{ name: 'Slider', nameCn: '滑块', key: 'slider' },
|
||||
{ name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
|
||||
{ name: 'DropdownMenu ', nameCn: '筛选排序', key: 'dropdownmenu' },
|
||||
{ name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
|
||||
{ name: 'Input', nameCn: '输入框', key: 'input' },
|
||||
{ name: 'List', nameCn: '列表', key: 'list' },
|
||||
{ name: 'Radio', nameCn: '单选', key: 'radio' },
|
||||
{ name: 'Search', nameCn: '搜索框', key: 'search' },
|
||||
{ name: 'Switch', nameCn: '开关', key: 'switch' },
|
||||
{ name: 'Numeric', nameCn: '计数器 ', key: 'numeric' },
|
||||
{ name: 'FileUpload', nameCn: '文件上传', key: 'file-upload' },
|
||||
{ name: 'MultiSelect', nameCn: '下拉选择器', key: 'multi-select' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '提示组件',
|
||||
labelEn: 'Tooltip',
|
||||
key: 'cmp_tooltip',
|
||||
children: [
|
||||
{ name: 'PullRefresh', nameCn: '下拉刷新', key: 'pull-refresh' },
|
||||
{ name: 'Alert', nameCn: '提示', key: 'alert' },
|
||||
{ name: 'Badge', nameCn: '徽章', key: 'badge' },
|
||||
{ name: 'Loading', nameCn: '加载', key: 'loading' },
|
||||
{ name: 'Modal', nameCn: '模态框', key: 'modal' },
|
||||
{ name: 'Popover', nameCn: '气泡', key: 'popover' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '其它组件',
|
||||
labelEn: 'Others',
|
||||
key: 'cmp_others',
|
||||
children: [
|
||||
{ name: 'Exception', nameCn: '缺省页', key: 'exception' },
|
||||
{ name: 'Avatar', nameCn: '头像', key: 'avatar' },
|
||||
{ name: 'Icon', nameCn: '图标', key: 'icon' },
|
||||
{ name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
|
||||
{ name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
|
||||
{ name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
## 切换为 mobile 模式
|
||||
|
||||
Tiny Vue 移动组件既存在和 PC 组件同名的组件，也存在不同名的组件。针对于同名组件，组件在渲染时默认加载的是 PC 组件，所以在使用移动组件之前，需要先切换为 mobile 模式，切换方式有如下两种：
|
||||
|
||||
### 单组件切换
|
||||
|
||||
可在组件标签上配置 `tiny_mode` 为 `mobile` 将该组件切换为 mobile 模式，渲染时就会按照移动组件模板渲染，如下所示：
|
||||
|
||||
```html
|
||||
<tiny-alert tiny_mode="mobile" description="type 为默认值 info"></tiny-alert>
|
||||
```
|
||||
|
||||
### 全局切换
|
||||
|
||||
如果按照单组件切换的方式，则每用到一个同名组件时都需要切换，比较麻烦，实际上还可以通过在 Vue 的原型上全局设置 `tiny_mode` 来实现。在 `src/main.js` 文件中 `boot` 之前增加如下代码：
|
||||
|
||||
```bash
|
||||
## Vue 2.0
|
||||
Vue.prototype.tiny_mode = { value: 'mobile' }
|
||||
|
||||
## Vue 3.0
|
||||
app.config.globalProperties.tiny_mode = { value: 'mobile' }
|
||||
```
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
|
||||
当前类型：{{ type }}
|
||||
<tiny-anchor :links="links"></tiny-anchor>
|
||||
<tiny-anchor :links="links" :type="type"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
|
||||
<tiny-anchor :links="links" @change="handleChange"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-anchor :links="links" @on-change="handleChange"></tiny-anchor>
|
||||
<tiny-anchor :links="links" @change="handleChange"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -4,4 +4,4 @@ title: Anchor 锚点
|
|||
|
||||
# Anchor 锚点
|
||||
|
||||
<div>跳转到页面指定位置。</div>
|
||||
<div>用于页内导航。</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Anchor
|
|||
|
||||
# Anchor
|
||||
|
||||
<div>Jump to the specified position on the page.</div>
|
||||
<div>Used for intra page navigation.</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export default {
|
|||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '属性<code>links</code>传入数据渲染',
|
||||
'en-US': 'Attribute <code>links</code>: input data rendering'
|
||||
'zh-CN': '通过<code>links</code>设置导航数据，<code>type</code>设置类型。',
|
||||
'en-US': 'Set navigation data through<code>links</code>, and<code>type</code>to set the type.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
|
|
@ -15,8 +15,8 @@ export default {
|
|||
'demoId': 'is-affix',
|
||||
'name': { 'zh-CN': '固定模式', 'en-US': 'Fixed mode' },
|
||||
'desc': {
|
||||
'zh-CN': '设置属性<code>is-affix</code>为true, 让锚点不随页面滚动',
|
||||
'en-US': 'Set the <code>is-affix</code> attribute to true so that the anchor does not scroll with the page.'
|
||||
'zh-CN': '通过<code>is-affix</code>设置固定定位，不随页面滚动。',
|
||||
'en-US': 'Set fixed positioning through<code>is-affix</code>, without scrolling with the page.'
|
||||
},
|
||||
'codeFiles': ['is-affix.vue']
|
||||
},
|
||||
|
|
@ -24,33 +24,37 @@ export default {
|
|||
'demoId': 'set-container',
|
||||
'name': { 'zh-CN': '滚动容器', 'en-US': 'Rolling Container' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'通过<code>container-id</code>属性指定滚动容器，<code>link-click</code>监听锚点点击事件，阻止浏览器默认行为，实现单页面<code>hash</code>路由模式的页内跳转，让页面只在想要的指定容器内滚动。通过<code>mask-class</code>属性设置自定义类名，高亮显示滚动的目标元素',
|
||||
'en-US':
|
||||
'Use the <code>container-id</code> attribute to specify the scrolling container. <code>link-click</code> listens to anchor click events and prevents the default browser behavior. Implement intra-page redirection in single-page <code>hash</code> routing mode so that the page scrolls only in the specified container. Set the custom class name through the <code>mask-class</code> attribute to highlight the scrolling target element'
|
||||
'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.`
|
||||
},
|
||||
'codeFiles': ['set-container.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'on-change',
|
||||
'demoId': 'change',
|
||||
'name': { 'zh-CN': 'change事件', 'en-US': 'change event' },
|
||||
'desc': {
|
||||
'zh-CN': '<code>on-change</code>事件，锚点链接改变时触发回调',
|
||||
'en-US': '<code>on-change</code> event. Callback is triggered when the anchor link changes.'
|
||||
'zh-CN': '通过<code>change</code>监听锚点改变的事件。',
|
||||
'en-US': '<code>change</code> event. Callback is triggered when the anchor link changes.'
|
||||
},
|
||||
'codeFiles': ['on-change.vue']
|
||||
'codeFiles': ['change.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'anchor',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'container-id',
|
||||
'type': 'string',
|
||||
'defaultValue': 'document.body',
|
||||
'desc': { 'zh-CN': '指定滚动容器的id值', 'en-US': 'Specify the scrolling container ID.' },
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '用于单页面 hash 路由模式时指定滚动容器的id值，不指定则默认为 HTML 文档的根节点 body 元素',
|
||||
'en-US':
|
||||
'When using single page hash routing mode, specify the id value of the scrolling container. If not specified, it defaults to the root node body element of the HTML document'
|
||||
},
|
||||
'demoId': 'set-container'
|
||||
},
|
||||
{
|
||||
|
|
@ -62,11 +66,12 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'links',
|
||||
'type': '{ key, link, title, children }[]',
|
||||
'type': 'ILink[]',
|
||||
'typeAnchorName': 'ILink',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '数据配置项，可通过children嵌套',
|
||||
'en-US': 'Data configuration item, which can be nested by children.'
|
||||
'zh-CN': '导航数据配置项，可通过children嵌套',
|
||||
'en-US': 'Navigation data configuration items can be nested through children'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
|
|
@ -94,29 +99,50 @@ export default {
|
|||
'events': [
|
||||
{
|
||||
'name': 'link-click',
|
||||
'type': 'Function(arg1,arg2)',
|
||||
'type': '(arg1: Event, arg2: {link: string, title: string}) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'锚点点击事件, 点击后触发的回调函数;//参数arg1:点击事件对象 //参数arg2: {link: 点击锚点的链接, title: 点击节点的标题文字 }',
|
||||
'en-US':
|
||||
'An anchor click event, which is a callback function triggered after the anchor clicks. //Parameter arg1: click event object //Parameter arg2: {link: click anchor link, title: click node title}'
|
||||
'zh-CN': '锚点点击事件；// 参数arg2: {link: 当前锚点链接, title: 当前锚点标题 }',
|
||||
'en-US': 'Anchor click event; // Parameter arg2: {link: Current anchor link, title: Current anchor title}'
|
||||
},
|
||||
'demoId': 'set-container'
|
||||
},
|
||||
{
|
||||
'name': 'on-change',
|
||||
'type': 'Function(arg1)',
|
||||
'name': 'change',
|
||||
'type': '(arg1: string) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '监听锚点链接的改变；锚点改变后的回调函数; // 参数arg1: 当前锚点的id值',
|
||||
'en-US':
|
||||
'Listen to the change of the anchor link; Callback function after the anchor point is changed; //arg1: ID of the current anchor'
|
||||
'zh-CN': '锚点链接改变事件；// 参数arg1: 当前锚点的 hash 值',
|
||||
'en-US': 'Anchor link change event// Parameter arg1: hash value of the current anchor point'
|
||||
},
|
||||
'demoId': 'on-change'
|
||||
'demoId': 'change'
|
||||
},
|
||||
{
|
||||
'name': 'on-change',
|
||||
'type': '(arg: string) => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '[deprecated v3.12.0废弃，v3.17.0移除；移除原因：命名规范，使用change代替]',
|
||||
'en-US':
|
||||
'[deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention, use change instead]'
|
||||
},
|
||||
'demoId': 'change'
|
||||
}
|
||||
],
|
||||
'slots': []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ILink',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface ILink {
|
||||
key: string // 锚点的key值
|
||||
link: string // 导航的hash值
|
||||
title: string // 锚点标题
|
||||
children: ILink[] // 子锚点
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<tiny-autocomplete v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
|
||||
<template #prepend>前置内容</template>
|
||||
<template #append>后置内容</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
const restaurants = ref([])
|
||||
const value = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
restaurants.value = loadAll()
|
||||
})
|
||||
|
||||
function querySearch(queryString, cb) {
|
||||
let results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
|
||||
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results)
|
||||
}
|
||||
|
||||
function createFilter(queryString) {
|
||||
return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
}
|
||||
|
||||
function loadAll() {
|
||||
return [
|
||||
{
|
||||
value: 'GFD科技YX公司',
|
||||
address: '福州'
|
||||
},
|
||||
{
|
||||
value: 'WWWW科技YX公司',
|
||||
address: '深圳福田区'
|
||||
},
|
||||
{
|
||||
value: 'RFV有限责任公司',
|
||||
address: '中山市'
|
||||
},
|
||||
{
|
||||
value: 'TGBYX公司',
|
||||
address: '梅州'
|
||||
},
|
||||
{
|
||||
value: 'YHN科技YX公司',
|
||||
address: '韶关'
|
||||
},
|
||||
{
|
||||
value: '康康物业YX公司',
|
||||
address: '广州天河区'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-autocomplete .tiny-autocomplete {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('append-prepend', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#append-prepend')
|
||||
const prependText = await page.textContent('div.tiny-input-group__prepend')
|
||||
await expect(prependText).toBe('前置内容')
|
||||
})
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<tiny-autocomplete v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
|
||||
<template #prepend>前置内容</template>
|
||||
<template #append>后置内容</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAutocomplete: Autocomplete
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
let restaurants = this.restaurants
|
||||
let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
||||
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results)
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{
|
||||
value: 'GFD科技YX公司',
|
||||
address: '福州'
|
||||
},
|
||||
{
|
||||
value: 'WWWW科技YX公司',
|
||||
address: '深圳福田区'
|
||||
},
|
||||
{
|
||||
value: 'RFV有限责任公司',
|
||||
address: '中山市'
|
||||
},
|
||||
{
|
||||
value: 'TGBYX公司',
|
||||
address: '梅州'
|
||||
},
|
||||
{
|
||||
value: 'YHN科技YX公司',
|
||||
address: '韶关'
|
||||
},
|
||||
{
|
||||
value: '康康物业YX公司',
|
||||
address: '广州天河区'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-autocomplete .tiny-autocomplete {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -5,4 +5,9 @@ test('basic-usage', async ({ page }) => {
|
|||
await page.goto('autocomplete#basic-usage')
|
||||
const autocomplete = page.locator('.demo-autocomplete > .tiny-autocomplete')
|
||||
await expect(autocomplete).toBeVisible()
|
||||
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await page.getByRole('option', { name: 'GFD科技YX公司' }).click()
|
||||
|
||||
await expect(page.getByRole('textbox', { name: '请输入内容', exact: true })).toHaveValue('GFD科技YX公司')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
|
|||
test('可清除', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#clearable')
|
||||
await page.getByPlaceholder('请输入内容', { exact: true }).click()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
|
||||
await page.getByPlaceholder('请输入内容', { exact: true }).hover()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).hover()
|
||||
await page.getByRole('combobox').locator('path').click()
|
||||
|
||||
await expect(page.getByPlaceholder('请输入内容', { exact: true })).toHaveValue('')
|
||||
await expect(page.getByRole('textbox', { name: '请输入内容', exact: true })).toHaveValue('')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<tiny-autocomplete value-key="name" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容">
|
||||
<template #default="{ slotScope }">
|
||||
<div>{{ slotScope.name }}</div>
|
||||
<span style="font-size: 12px; color: #a29b91">{{ slotScope.address }}</span>
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
const restaurants = ref([])
|
||||
const state1 = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
restaurants.value = loadAll()
|
||||
})
|
||||
|
||||
function querySearch(queryString, cb) {
|
||||
let results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
|
||||
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results)
|
||||
}
|
||||
|
||||
function createFilter(queryString) {
|
||||
return (restaurant) => restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
}
|
||||
|
||||
function loadAll() {
|
||||
return [
|
||||
{
|
||||
name: 'GFD科技YX公司',
|
||||
address: '福州'
|
||||
},
|
||||
{
|
||||
name: 'WWWW科技YX公司',
|
||||
address: '深圳福田区'
|
||||
},
|
||||
{
|
||||
name: 'RFV有限责任公司',
|
||||
address: '中山市'
|
||||
},
|
||||
{
|
||||
name: 'TGBYX公司',
|
||||
address: '梅州'
|
||||
},
|
||||
{
|
||||
name: 'YHN科技YX公司',
|
||||
address: '韶关'
|
||||
},
|
||||
{
|
||||
name: '康康物业YX公司',
|
||||
address: '广州天河区'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-autocomplete .tiny-autocomplete {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('cust-template', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#cust-template')
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').click()
|
||||
await expect(page.getByText('WWWW科技YX公司')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<tiny-autocomplete value-key="name" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容">
|
||||
<template #default="{ slotScope }">
|
||||
<div>{{ slotScope.name }}</div>
|
||||
<span style="font-size: 12px; color: #a29b91">{{ slotScope.address }}</span>
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAutocomplete: Autocomplete
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state1: '',
|
||||
state2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
let restaurants = this.restaurants
|
||||
let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
||||
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results)
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{
|
||||
name: 'GFD科技YX公司',
|
||||
address: '福州'
|
||||
},
|
||||
{
|
||||
name: 'WWWW科技YX公司',
|
||||
address: '深圳福田区'
|
||||
},
|
||||
{
|
||||
name: 'RFV有限责任公司',
|
||||
address: '中山市'
|
||||
},
|
||||
{
|
||||
name: 'TGBYX公司',
|
||||
address: '梅州'
|
||||
},
|
||||
{
|
||||
name: 'YHN科技YX公司',
|
||||
address: '韶关'
|
||||
},
|
||||
{
|
||||
name: '康康物业YX公司',
|
||||
address: '广州天河区'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-autocomplete .tiny-autocomplete {
|
||||
width: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
import { iconEdit, iconAssociation } from '@opentiny/vue-icon'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
|
|||
test('custom-icon', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#custom-icon')
|
||||
await page.getByText('自定义图标').first().click()
|
||||
const prefix = page.locator('.tiny-autocomplete > .tiny-input > .tiny-input__prefix')
|
||||
const suffix = page.locator('.tiny-autocomplete > .tiny-input > div > .tiny-input__suffix')
|
||||
await expect(prefix).toBeVisible()
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
import { IconEdit, IconAssociation } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@ test('debounce', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#debounce')
|
||||
await page.getByText('去抖延时').nth(3).click()
|
||||
await page.locator('.rel').click()
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').click()
|
||||
await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
|
||||
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await expect(page.getByRole('option', { name: 'WWWW科技YX公司' })).not.toBeVisible()
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(page.getByRole('option', { name: 'WWWW科技YX公司' })).toBeVisible()
|
||||
await expect(
|
||||
page.locator('.demo-autocomplete > .tiny-autocomplete > .tiny-input > .tiny-input-display-only > input')
|
||||
).toHaveAttribute('debounce', '1000')
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('disabled', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#disabled1')
|
||||
await page.getByTitle('表单组件').click()
|
||||
await page.locator('.rel').click()
|
||||
await page.goto('autocomplete#disabled')
|
||||
await expect(page.locator('//div[@class="tiny-input is-disabled"]')).toHaveClass(/disabled/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<div>
|
||||
<div class="loading-icon">
|
||||
默认有加载图标：
|
||||
<tiny-autocomplete v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch"></tiny-autocomplete>
|
||||
</div>
|
||||
<div>
|
||||
<div class="loading-icon_hide">
|
||||
隐藏加载图标：
|
||||
<tiny-autocomplete
|
||||
v-model="value"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -75,4 +75,8 @@ function loadAll() {
|
|||
display: flex;
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,8 @@ import { test, expect } from '@playwright/test'
|
|||
test('hide-loading', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#hide-loading')
|
||||
await page.getByPlaceholder('请输入内容').nth(1).click()
|
||||
await expect(
|
||||
page
|
||||
.locator('.demo-autocomplete > div > .tiny-autocomplete > .tiny-input > .tiny-input-display-only > input')
|
||||
.first()
|
||||
).toHaveAttribute('hideloading', 'false')
|
||||
await page.getByPlaceholder('请输入内容').nth(2).click()
|
||||
await expect(
|
||||
page
|
||||
.locator('.demo-autocomplete > div > .tiny-autocomplete > .tiny-input > .tiny-input-display-only > input')
|
||||
.nth(1)
|
||||
).toHaveAttribute('hideloading', 'true')
|
||||
await page.getByPlaceholder('请输入内容', { exact: true }).nth(1).click()
|
||||
await expect(page.getByRole('listitem').getByRole('img')).toBeVisible()
|
||||
await page.getByPlaceholder('请输入内容', { exact: true }).nth(2).click()
|
||||
await expect(page.getByRole('listitem').getByRole('img')).not.toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<div>
|
||||
<div class="loading-icon">
|
||||
默认有加载图标：
|
||||
<tiny-autocomplete v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch"></tiny-autocomplete>
|
||||
</div>
|
||||
<div>
|
||||
<div class="loading-icon_hide">
|
||||
隐藏加载图标：
|
||||
<tiny-autocomplete
|
||||
v-model="value"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -82,4 +82,8 @@ export default {
|
|||
display: flex;
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('highlight-first-item', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#highlight-first-item')
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').click()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await page.getByRole('option', { name: 'TGBYX公司' }).click()
|
||||
await expect(page.locator('#preview').getByPlaceholder('请输入内容')).toHaveAttribute('highlightfirstitem', 'true')
|
||||
await expect(page.getByRole('textbox', { name: '请输入内容', exact: true })).toHaveAttribute('highlightfirstitem', 'true')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
|
|||
test('no-trigger-on-focus', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#no-trigger-on-focus')
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').click()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await expect(page.locator('.tiny-autocomplete-suggestion')).not.toBeVisible()
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').fill('gfd')
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).fill('gfd')
|
||||
await expect(page.locator('.tiny-autocomplete-suggestion')).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('prefix-suffix-slot', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#prefix-suffix-slot')
|
||||
const prefix = page.locator('.demo-autocomplete > .tiny-autocomplete > .tiny-input > .tiny-input__prefix')
|
||||
const suffix = page.locator('.demo-autocomplete > .tiny-autocomplete > .tiny-input > div > .tiny-input__suffix')
|
||||
await expect(prefix).toBeVisible()
|
||||
await expect(suffix).toBeVisible()
|
||||
})
|
||||
|
|
@ -7,15 +7,11 @@
|
|||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
>
|
||||
<template #default="{ slotScope }">
|
||||
<div>{{ slotScope.name }}</div>
|
||||
<span style="font-size: 12px; color: #a29b91">{{ slotScope.address }}</span>
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
|
|||
test('remote-search', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#remote-search')
|
||||
await expect(
|
||||
page.locator('.demo-autocomplete > .tiny-autocomplete > .tiny-input > .tiny-input-display-only > input')
|
||||
).toHaveAttribute('fetchsuggestions', 'function () { [native code] }')
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await expect(page.getByRole('option', { name: 'GFD科技YX公司' })).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,15 +7,11 @@
|
|||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
>
|
||||
<template #default="{ slotScope }">
|
||||
<div>{{ slotScope.name }}</div>
|
||||
<span style="font-size: 12px; color: #a29b91">{{ slotScope.address }}</span>
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('select-event', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#select-event')
|
||||
await page.getByPlaceholder('请输入内容', { exact: true }).click()
|
||||
await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
|
||||
await expect(page.getByText('当前选择：{"value":"WWWW科技YX公司","address":"深圳福田区"}')).toBeVisible()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await page.getByRole('option', { name: 'GFD科技YX公司' }).click()
|
||||
await expect(page.locator('div').filter({ hasText: '当前选择：{"value":"GFD科技YX公司","address":"福州"}' }).nth(1)).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ test('size', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#size')
|
||||
await page.getByText('输入框大小').nth(1).click()
|
||||
await page.locator('#preview').getByPlaceholder('请输入内容').click()
|
||||
await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
|
||||
await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
|
||||
await expect(page.locator('//div[@class="tiny-input tiny-input-medium"]')).toHaveClass(/tiny-input-medium/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Autocomplete } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-autocomplete">
|
||||
<tiny-autocomplete v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
|
||||
<tiny-autocomplete class="pend-slot" v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
|
||||
<template #prepend>前置内容</template>
|
||||
<template #append>后置内容</template>
|
||||
</tiny-autocomplete>
|
||||
<tiny-autocomplete class="fix-slot" v-model="value" placeholder="请输入内容" :fetch-suggestions="querySearch">
|
||||
<template #prefix>
|
||||
<tiny-icon-edit />
|
||||
</template>
|
||||
|
|
@ -8,17 +12,22 @@
|
|||
<tiny-icon-association />
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
<tiny-autocomplete class="default-slot" v-model="value" :fetch-suggestions="querySearch">
|
||||
<template #default="{ slotScope }">
|
||||
<div>{{ slotScope.value }}</div>
|
||||
<span class="default-slot-buttom">{{ slotScope.address }}</span>
|
||||
</template>
|
||||
</tiny-autocomplete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
|
||||
import { iconEdit, iconAssociation } from '@opentiny/vue-icon'
|
||||
|
||||
const restaurants = ref([])
|
||||
const value = ref('')
|
||||
|
||||
const TinyIconEdit = iconEdit()
|
||||
const TinyIconAssociation = iconAssociation()
|
||||
|
||||
|
|
@ -71,4 +80,12 @@ function loadAll() {
|
|||
.demo-autocomplete .tiny-autocomplete {
|
||||
width: 270px;
|
||||
}
|
||||
.pend-slot, .fix-slot {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.default-slot-buttom {
|
||||
font-size: 12px;
|
||||
color: #a29b91
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('slot', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('autocomplete#slot')
|
||||
|
||||
await expect(page.locator('.demo-autocomplete > .tiny-autocomplete.pend-slot').getByText('前置内容', { exact: true })).toBeVisible()
|
||||
await expect(page.locator('.demo-autocomplete > .tiny-autocomplete.pend-slot').getByText('后置内容', { exact: true })).toBeVisible()
|
||||
|
||||
const prefix = page.locator('.demo-autocomplete > .tiny-autocomplete.fix-slot > .tiny-input > .tiny-input__prefix')
|
||||
const suffix = page.locator('.demo-autocomplete > .tiny-autocomplete.fix-slot > .tiny-input > div > .tiny-input__suffix')
|
||||
await expect(prefix).toBeVisible()
|
||||
await expect(suffix).toBeVisible()
|
||||
|
||||
await page.locator('.demo-autocomplete > .tiny-autocomplete.default-slot').click()
|
||||
await expect(page.getByRole('option', { name: 'GFD科技YX公司 福州' })).toBeVisible()
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue