forked from opentiny/tiny-vue
feat: update site design style (#1752)
This commit is contained in:
ajaxzheng
GitHub
parent
0b961665a6
commit
ce0da6845f
|
|
@ -135,3 +135,14 @@ If you have submitted Issue or PR to OpenTiny, you can comment on Issue or Pull
|
|||
```
|
||||
|
||||
For detailed rules, please refer to [https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
|
||||
|
||||
## Contributors
|
||||
|
||||
We sincerely thank all the contributors who have participated in the TinyVue project!
|
||||
In recognition of the contributions of our contributors, we have added a 'Contributors' section at the bottom of each component documentation, displaying the GitHub information of each contributor, including their profile picture, username, and GitHub personal page.
|
||||
Due to the current manpower constraints, only information of internal members (or former members) of the TinyVue team is currently being recorded. Open source contributors are welcome to supplement their own information.
|
||||
The file that record contributors info is:
|
||||
|
||||
```
|
||||
/examples/sites/src/data/contributorMap.js
|
||||
```
|
||||
|
|
|
|||
|
|
@ -135,3 +135,13 @@ pnpm dev:vue2
|
|||
```
|
||||
|
||||
详细规则可以参考：[https://allcontributors.org/docs/en/bot/usage](https://allcontributors.org/docs/en/bot/usage)
|
||||
|
||||
## 贡献者
|
||||
|
||||
我们诚挚感谢每位参与过TinyVue项目的贡献者们！
|
||||
为彰显贡献者们的付出，我们在每个组件文档底部增加“贡献者”模块，陈列各位贡献者的github信息，包括头像、昵称、github个人主页等。由于当前团队人力较为紧张，目前只录入TinyVue团队内部成员（或前组员）信息，欢迎各位开源贡献者自行补充信息。
|
||||
贡献者信息记录的文件路径为：
|
||||
|
||||
```
|
||||
/examples/sites/src/data/contributorMap.js
|
||||
```
|
||||
|
|
|
|||
|
|
@ -319,6 +319,7 @@ export default {
|
|||
{
|
||||
name: 'IAutocompleteFetchSuggestions',
|
||||
type: 'type',
|
||||
depTypes: ['IAutocompleteSuggestionItem'],
|
||||
code: `type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void`
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -170,6 +170,7 @@ interface IOptionsItemTo {
|
|||
{
|
||||
name: 'IOptionsItem',
|
||||
type: 'interface',
|
||||
depTypes: ['IOptionsItemTo'],
|
||||
code: `
|
||||
interface IOptionsItem {
|
||||
label?: string
|
||||
|
|
@ -181,6 +182,7 @@ interface IOptionsItem {
|
|||
{
|
||||
name: 'ISelectValue',
|
||||
type: 'interface',
|
||||
depTypes: ['IOptionsItem', 'IOptionsItemTo'],
|
||||
code: `
|
||||
interface ISelectValue {
|
||||
event: Event
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ export default {
|
|||
props: [
|
||||
{
|
||||
name: 'events',
|
||||
typeAnchorName: 'eventLists',
|
||||
type: 'eventLists[]',
|
||||
typeAnchorName: 'ICalendarEvent',
|
||||
type: 'ICalendarEvent[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '事件列表',
|
||||
|
|
@ -90,15 +90,17 @@ export default {
|
|||
],
|
||||
types: [
|
||||
{
|
||||
name: 'eventLists',
|
||||
name: 'ICalendarEvent',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface eventLists [{
|
||||
time: 1534297845236, // 指定需要展示事件的日期
|
||||
title: '消息', // 指定事件标题
|
||||
content: '这是一条消息', // 指定事件的具体内容
|
||||
type: 'info' // 事件主题类型，包括 warning、error、info、success。
|
||||
}]`
|
||||
type ICalendarEventType = 'info' | 'warning' | 'error' | 'info' | 'success'
|
||||
|
||||
interface ICalendarEvent {
|
||||
time: number, // 指定需要展示事件的日期的时间戳
|
||||
title: string, // 指定事件标题
|
||||
content: string, // 指定事件的具体内容
|
||||
type: ICalendarEventType // 事件主题类型
|
||||
}`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,6 +252,7 @@ export default {
|
|||
{
|
||||
name: 'ICascaderPanelNodePropValue',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNodePropValue =
|
||||
| ICascaderPanelNodeValue
|
||||
|
|
@ -261,6 +262,7 @@ type ICascaderPanelNodePropValue =
|
|||
{
|
||||
name: 'ICascaderPanelData',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelData = {
|
||||
value?: ICascaderPanelNodeValue
|
||||
|
|
@ -274,6 +276,7 @@ type ICascaderPanelData = {
|
|||
{
|
||||
name: 'ICascaderPanelConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
interface ICascaderPanelConfig {
|
||||
emitPath: boolean
|
||||
|
|
@ -296,6 +299,7 @@ interface ICascaderPanelConfig {
|
|||
{
|
||||
name: 'ICascaderPanelNode',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNode = {
|
||||
parent: ICascaderPanelNode | null
|
||||
|
|
@ -320,6 +324,7 @@ type ICascaderPanelNode = {
|
|||
{
|
||||
name: 'ICascaderPanelLazyLoad',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
|
||||
`
|
||||
|
|
|
|||
|
|
@ -536,6 +536,7 @@ export default {
|
|||
{
|
||||
name: 'ICascaderPanelNodePropValue',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNodePropValue =
|
||||
| ICascaderPanelNodeValue
|
||||
|
|
@ -545,6 +546,7 @@ type ICascaderPanelNodePropValue =
|
|||
{
|
||||
name: 'ICascaderPanelData',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelData = {
|
||||
value?: ICascaderPanelNodeValue
|
||||
|
|
@ -558,6 +560,7 @@ type ICascaderPanelData = {
|
|||
{
|
||||
name: 'ICascaderPanelConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
interface ICascaderPanelConfig {
|
||||
emitPath: boolean
|
||||
|
|
@ -580,6 +583,7 @@ interface ICascaderPanelConfig {
|
|||
{
|
||||
name: 'ICascaderPanelNode',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData', 'ICascaderPanelConfig', 'ICascaderPanelNodeValue'],
|
||||
code: `
|
||||
type ICascaderPanelNode = {
|
||||
parent: ICascaderPanelNode | null
|
||||
|
|
@ -604,6 +608,7 @@ type ICascaderPanelNode = {
|
|||
{
|
||||
name: 'ICascaderPanelLazyLoad',
|
||||
type: 'type',
|
||||
depTypes: ['ICascaderPanelNode', 'ICascaderPanelData'],
|
||||
code: `
|
||||
type ICascaderPanelLazyLoad = (node: ICascaderPanelNode, resolve: (dataList: ICascaderPanelData[]) => void) => void
|
||||
`
|
||||
|
|
|
|||
|
|
@ -502,6 +502,7 @@ interface IDialogOption {
|
|||
{
|
||||
name: 'IGridOption',
|
||||
type: 'interface',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IGridOption {
|
||||
// 表格列配置
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -486,6 +486,7 @@ export default {
|
|||
{
|
||||
name: 'IMenuOption',
|
||||
type: 'interface',
|
||||
depTypes: ['IItemData'],
|
||||
code: `
|
||||
interface IMenuOption {
|
||||
options: IItemData[]
|
||||
|
|
@ -498,6 +499,7 @@ interface IMenuOption {
|
|||
{
|
||||
name: 'IItemClickParam',
|
||||
type: 'interface',
|
||||
depTypes: ['IItemData'],
|
||||
code: `
|
||||
interface IItemClickParam {
|
||||
itemData: IItemData
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'popper-options',
|
||||
typeAnchorName: 'popover#IPopperOption',
|
||||
linkTo: 'popover#IPopperOption',
|
||||
type: 'Popover.IPopperOption',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -679,6 +679,7 @@ interface IFormErrorField {
|
|||
{
|
||||
name: 'IFormValidateMethod',
|
||||
type: 'function',
|
||||
depTypes: ['IFormError'],
|
||||
code: `
|
||||
function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
|
||||
`
|
||||
|
|
@ -686,6 +687,7 @@ function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) =>
|
|||
{
|
||||
name: 'IFormValidateFieldMethod',
|
||||
type: 'function',
|
||||
depTypes: ['IFormError'],
|
||||
code: `
|
||||
function IFormValidateFieldMethod(
|
||||
prop: string | string[],
|
||||
|
|
|
|||
|
|
@ -148,16 +148,7 @@ export default {
|
|||
type: 'string[]',
|
||||
defaultValue: "['TinyGridColumn']",
|
||||
metaData: {
|
||||
experimental: {
|
||||
version: '3.17.0'
|
||||
}
|
||||
},
|
||||
versionTipOption: {
|
||||
extendTip: {
|
||||
'zh-CN': '该属性于3.17版本新增，封装 grid-column 时需要配置此字段，提供给表格收集配置',
|
||||
'en-US':
|
||||
'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
|
||||
}
|
||||
new: '3.17.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
|
||||
|
|
@ -1422,8 +1413,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'select-change',
|
||||
typeAnchorName: 'ISelectChangeArgs',
|
||||
type: '(args: ISelectChangeArgs, event: Event)=> void',
|
||||
type: '(args: object, event: Event)=> void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '只对 type=selection 有效，当手动勾选并且值发生改变时触发的事件',
|
||||
|
|
@ -1462,17 +1452,10 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'toggle-group-change',
|
||||
typeAnchorName: 'IToggleGroupChangeArgs',
|
||||
type: '(row: IRow) => void',
|
||||
defaultValue: '',
|
||||
metaData: {
|
||||
experimental: '3.17.0'
|
||||
},
|
||||
versionTipOption: {
|
||||
extendTip: {
|
||||
'zh-CN': '该特性于3.17版本新增',
|
||||
'en-US': 'This feature was added in version 3.17'
|
||||
}
|
||||
new: '3.17.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '当分组的展开和收起时会触发该事件',
|
||||
|
|
@ -4004,6 +3987,7 @@ interface IRow {
|
|||
{
|
||||
name: 'IColumnConfig',
|
||||
type: 'interface',
|
||||
depTypes: ['IValidRules'],
|
||||
code: `
|
||||
interface IColumnConfig {
|
||||
type: 'index' | 'radio' | 'checkbox'
|
||||
|
|
@ -4446,6 +4430,7 @@ interface IToolbarButtonClickArgs {
|
|||
{
|
||||
name: 'ICellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ICellClickArgs {
|
||||
// 当前行
|
||||
|
|
@ -4472,6 +4457,7 @@ interface ICellContextMenuArgs {
|
|||
{
|
||||
name: 'ICellArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ICellArgs {
|
||||
//当前行
|
||||
|
|
@ -4498,6 +4484,7 @@ interface ICurrentChangeArgs {
|
|||
{
|
||||
name: 'IEditActivedArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditActivedArgs {
|
||||
// 当前行
|
||||
|
|
@ -4510,6 +4497,7 @@ interface IEditActivedArgs {
|
|||
{
|
||||
name: 'IEditClosedArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditClosedArgs {
|
||||
// 当前行
|
||||
|
|
@ -4522,6 +4510,7 @@ interface IEditClosedArgs {
|
|||
{
|
||||
name: 'IEditDisabledArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IEditDisabledArgs {
|
||||
//当前行
|
||||
|
|
@ -4546,6 +4535,7 @@ interface IFilterChangeArgs {
|
|||
{
|
||||
name: 'IFooterCellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFooterCellClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4563,6 +4553,7 @@ interface IFooterCellClickArgs {
|
|||
{
|
||||
name: 'IContextMenuArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IContextMenuArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4584,6 +4575,7 @@ interface IContextMenuArgs {
|
|||
{
|
||||
name: 'IFooterCellDblClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFooterCellDblClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4601,6 +4593,7 @@ interface IFooterCellDblClickArgs {
|
|||
{
|
||||
name: 'IHeaderCellClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IHeaderCellClickArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4622,6 +4615,7 @@ interface IHeaderCellClickArgs {
|
|||
{
|
||||
name: 'IHeaderCellDblClickArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IHeaderCellDblClickArgs {
|
||||
// 列数据
|
||||
|
|
@ -4638,6 +4632,7 @@ interface IHeaderCellDblClickArgs {
|
|||
{
|
||||
name: 'IResizableChangeArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IResizableChangeArgs {
|
||||
// table组件的vue 实例
|
||||
|
|
@ -4674,6 +4669,7 @@ interface IScrollArgs {
|
|||
{
|
||||
name: 'ISelectAllArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISelectAllArgs {
|
||||
$columnIndex: number
|
||||
|
|
@ -4733,6 +4729,7 @@ interface IToggleTreeChangeArgs {
|
|||
{
|
||||
name: 'IValidErrorArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IValidErrorArgs {
|
||||
// 校验的单元格信息对象
|
||||
|
|
@ -4749,6 +4746,7 @@ interface IValidErrorArgs {
|
|||
{
|
||||
name: 'ISortChangeArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISortChangeArgs {
|
||||
// 表格实例对象信息
|
||||
|
|
@ -4767,6 +4765,7 @@ interface ISortChangeArgs {
|
|||
{
|
||||
name: 'IClassNameArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IClassNameArgs {
|
||||
seq: number
|
||||
|
|
@ -4782,6 +4781,7 @@ interface IClassNameArgs {
|
|||
{
|
||||
name: 'IIndexMethodArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IIndexMethodArgs {
|
||||
row: IRow
|
||||
|
|
@ -4794,6 +4794,7 @@ interface IIndexMethodArgs {
|
|||
{
|
||||
name: 'IFormatConfig',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface IFormatConfig {
|
||||
// 列数据源
|
||||
|
|
@ -4845,6 +4846,7 @@ interface ISettingConfigs {
|
|||
{
|
||||
name: 'ISpanMethodArgs',
|
||||
type: 'type',
|
||||
depTypes: ['IColumnConfig'],
|
||||
code: `
|
||||
interface ISpanMethodArgs {
|
||||
// 行标
|
||||
|
|
@ -4860,6 +4862,7 @@ interface ISpanMethodArgs {
|
|||
},
|
||||
{
|
||||
name: 'IExportCsvOptions',
|
||||
depTypes: ['IRow'],
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IExportCsvOptions {
|
||||
|
|
@ -4910,18 +4913,6 @@ interface IFilterConfig {
|
|||
// 设置枚举数据的实际值属性字段， 默认'value'
|
||||
value: string
|
||||
}[] | () => Promise
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IOPConfig',
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IOPConfig {
|
||||
editConfig?: IEditConfig
|
||||
pagerConfig?: IPagerConfig
|
||||
columns: IColumnConfig[]
|
||||
data: IRow[]
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
{
|
||||
name: 'expandNode',
|
||||
typeAnchorName: 'IMindExpandNode',
|
||||
type: 'IMindnExpandNode',
|
||||
type: 'IMindExpandNode',
|
||||
desc: {
|
||||
'zh-CN': '展开节点时会触发该事件',
|
||||
'en-US': 'This event will be triggered when expanding a node'
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'cancel-btn-props',
|
||||
typeAnchorName: 'button#API',
|
||||
linkTo: 'button#API',
|
||||
type: 'Button.props',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'confirm-btn-props',
|
||||
typeAnchorName: 'button#API',
|
||||
linkTo: 'button#API',
|
||||
type: 'Button.props',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@ export default {
|
|||
{
|
||||
name: 'IMultiSelectMenu',
|
||||
type: 'interface',
|
||||
depTypes: ['IMultiSelectOption'],
|
||||
code: `
|
||||
interface IMultiSelectMenu {
|
||||
title: string, // 菜单项标题
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'before-remove',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(file: IFile) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'before-upload',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(file: IFile) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -227,7 +227,7 @@ export default {
|
|||
events: [
|
||||
{
|
||||
name: 'error',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(file: IFile) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -239,7 +239,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'exceed',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(files: File | File[], fileList: IFile[]) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -251,7 +251,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'progress',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(file: IFile) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -263,7 +263,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'remove',
|
||||
typeAnchorName: 'file-upload#IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(file: IFile, fileList: IFile[]) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -276,7 +276,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'success',
|
||||
typeAnchorName: 'IFile',
|
||||
linkTo: 'file-upload#IFile',
|
||||
type: '(res: ProgressEvent, file: IFile) => void',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'placement',
|
||||
typeAnchorName: 'popover#IPopperPlacement',
|
||||
linkTo: 'popover#IPopperPlacement',
|
||||
type: 'IPopperPlacement',
|
||||
defaultValue: "'top'",
|
||||
desc: {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'grid-op',
|
||||
typeAnchorName: 'grid#API',
|
||||
linkTo: 'grid#API',
|
||||
type: `InstanceType<typeof TinyGrid>['$props']`,
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -141,8 +141,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'pager-op',
|
||||
typeAnchorName: 'pager#API',
|
||||
type: `InstanceType<typeof TinyPager>['$props']`,
|
||||
linkTo: 'pager#API',
|
||||
type: `InstanceType<typeof TinyPager>['$props']`,
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置分页配置',
|
||||
|
|
@ -221,7 +221,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'selected-box-op',
|
||||
typeAnchorName: 'dialog-select#ISelectedBoxOption',
|
||||
linkTo: 'dialog-select#ISelectedBoxOption',
|
||||
type: 'ISelectedBoxOption',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
|
|||
|
|
@ -169,7 +169,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'popper-options',
|
||||
type: 'object',
|
||||
type: 'IPopperOption',
|
||||
typeAnchorName: 'IPopperOption',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
'zh-CN': '弹出层参数',
|
||||
|
|
|
|||
|
|
@ -225,6 +225,7 @@ export default {
|
|||
{
|
||||
name: 'IStepsItem',
|
||||
type: 'interface',
|
||||
depTypes: ['IStepsStatus'],
|
||||
code: `
|
||||
interface IStepsItem {
|
||||
// 节点数据
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'ITagGroupItemClick',
|
||||
depTypes: ['ITagGroupDataItem'],
|
||||
type: 'type',
|
||||
code: `type ITagGroupItemClick = (item: ITagGroupDataItem, index: number, event: Event) => void`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'columns',
|
||||
typeAnchorName: 'grid#IColumnConfig',
|
||||
linkTo: 'grid#IColumnConfig',
|
||||
type: 'IColumnConfig',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'left-columns',
|
||||
typeAnchorName: 'grid#IColumnConfig',
|
||||
linkTo: 'grid#IColumnConfig',
|
||||
type: 'IColumnConfig',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'right-columns',
|
||||
typeAnchorName: 'grid#IColumnConfig',
|
||||
linkTo: 'grid#IColumnConfig',
|
||||
type: 'IColumnConfig',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
@ -267,7 +267,7 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'tree-op',
|
||||
typeAnchorName: 'tree#API',
|
||||
linkTo: 'tree#API',
|
||||
type: 'Tree props',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
:image="row.logo"
|
||||
:flex-grow="[0, 0]"
|
||||
:flex-basis="['50%', '50%']"
|
||||
operate-flex-basis="80px"
|
||||
:options="listOptions"
|
||||
class="mb-3"
|
||||
>
|
||||
|
|
@ -176,7 +177,12 @@ export default {
|
|||
},
|
||||
operationConfig: {
|
||||
buttons: [
|
||||
{ name: '操作1', icon: IconAreaChart(), click: this.clickHandler, disabled: true },
|
||||
{
|
||||
name: '操作',
|
||||
icon: IconAreaChart(),
|
||||
click: this.clickHandler,
|
||||
disabled: true
|
||||
},
|
||||
{ name: '操作2', icon: IconBarChart(), click: this.clickHandler, disabled: (row) => row.id === '1' },
|
||||
{ name: '操作3', icon: IconDotChart(), click: this.clickHandler, hidden: true },
|
||||
{ name: '操作4', icon: IconLineChart(), click: this.clickHandler, hidden: (row) => row.id === '2' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="flex justify-between">
|
||||
<tiny-time-line :data="data">
|
||||
<template #left="data">
|
||||
<div class="ml-1.5 -mt-1.5">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
|
||||
</div>
|
||||
<span class="ml-2 inline-block text-xs leading-5 mb-6">
|
||||
{{ data.slotScope.title }}
|
||||
</span>
|
||||
</template>
|
||||
</tiny-time-line>
|
||||
|
||||
<tiny-time-line :data="data1">
|
||||
<template #left="data1">
|
||||
<div class="ml-1.5 -mt-1.5">
|
||||
<tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
|
||||
</div>
|
||||
<span class="ml-2 inline-block text-xs leading-5 mb-6">
|
||||
{{ data1.slotScope.title }}
|
||||
</span>
|
||||
</template>
|
||||
</tiny-time-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew, UserHead } from '@opentiny/vue'
|
||||
import { IconLoading } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew,
|
||||
TinyUserHead: UserHead
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
|
||||
data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
|
||||
data1: [
|
||||
{ title: '节点标题1' },
|
||||
{ title: '节点标题2' },
|
||||
{ title: '节点标题3' },
|
||||
{ title: '节点标题4' },
|
||||
{ title: '节点标题5', autoColor: IconLoading() }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data"></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" vertical></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" :show-number="false"> </tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'error' },
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" :show-number="false">
|
||||
<template #icon="{ slotScope }">
|
||||
<icon-loading v-if="slotScope.type === 'loading'"></icon-loading>
|
||||
<icon-time v-if="slotScope.type === 'time'"></icon-time>
|
||||
</template>
|
||||
</tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
import { IconLoading, IconTime } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconLoading: IconLoading(),
|
||||
IconTime: IconTime(),
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() },
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30', autoColor: IconTime() },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<tiny-time-line :data="data1" show-icon> </tiny-time-line>
|
||||
<tiny-time-line :data="data2" show-icon>
|
||||
<template #show-icon>
|
||||
<icon-copy />
|
||||
</template>
|
||||
</tiny-time-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
import { IconCopy, IconLoading } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew,
|
||||
IconCopy: IconCopy()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data1: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() }
|
||||
],
|
||||
data2: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconCopy() }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" sub-field></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLineNew } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLineNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ name: '节点标题', time: '2022-11-11 00:01:30', tips: '这是节点内容描述' },
|
||||
{ name: '节点标题', time: '2022-11-12 14:20:15', tips: '这是节点内容描述' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' },
|
||||
{ name: '节点标题', time: '2022-11-14 20:45:50', tips: '这是节点内容描述' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: TimeLine 时间线
|
||||
---
|
||||
|
||||
# TimeLine 时间线
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: TimeLine 时间线
|
||||
---
|
||||
|
||||
# TimeLine 时间线
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `data` 属性设置时间线步骤条数据</p>',
|
||||
'en-US': '<p>Set the timeline step bar data through the `data` property.</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'sub-field',
|
||||
name: {
|
||||
'zh-CN': '两侧分布',
|
||||
'en-US': 'Bilateral distribution'
|
||||
},
|
||||
desc: {
|
||||
'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']
|
||||
},
|
||||
{
|
||||
demoId: 'single-status',
|
||||
name: {
|
||||
'zh-CN': '单状态时间轴',
|
||||
'en-US': 'Single-state timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
|
||||
'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
|
||||
},
|
||||
codeFiles: ['single-status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'many-status',
|
||||
name: {
|
||||
'zh-CN': '多状态时间轴',
|
||||
'en-US': 'Multi-state timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<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']
|
||||
},
|
||||
{
|
||||
demoId: 'node-toset',
|
||||
name: {
|
||||
'zh-CN': '节点配置图标',
|
||||
'en-US': 'Node configuration icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在`data`里面的属性`autoColor`设置自定义图标</p>',
|
||||
'en-US': '<p>Set the customized icon through the `autoColor` attribute in `data`.</p>'
|
||||
},
|
||||
codeFiles: ['node-toset.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'fold-time',
|
||||
name: {
|
||||
'zh-CN': '折叠时间轴',
|
||||
'en-US': 'Collapse Timeline'
|
||||
},
|
||||
desc: {
|
||||
'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']
|
||||
},
|
||||
{
|
||||
demoId: 'node-max',
|
||||
name: {
|
||||
'zh-CN': '触发折叠节点数',
|
||||
'en-US': 'Number of Nodes Triggering Folding'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>node-max</code> 属性可以配置节点达到指定个数后自动折叠节点。</p>',
|
||||
'en-US':
|
||||
'<p>Use <code>node-max</code> to automatically collapse nodes after reaching a specified number of nodes.</p>'
|
||||
},
|
||||
codeFiles: ['node-max.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'limited-nodes',
|
||||
name: {
|
||||
'zh-CN': '折叠后节点数',
|
||||
'en-US': 'Number of Nodes After Folding'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>limited-nodes</code> 属性可以设置折叠后展示的节点个数。</p>',
|
||||
'en-US': '<p>Use <code>node-max</code> to set the number of nodes displayed after folding.</p>'
|
||||
},
|
||||
codeFiles: ['limited-nodes.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'auto-slot',
|
||||
name: {
|
||||
'zh-CN': '自定义插槽',
|
||||
'en-US': 'Custom Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<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']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ export const cmpMenus = [
|
|||
{
|
||||
label: '导航组件',
|
||||
labelEn: 'Navigation',
|
||||
key: 'cmp_navigation_components',
|
||||
key: 'cmp-navigation-components',
|
||||
children: [
|
||||
{ name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
|
||||
{ name: 'CalendarBar', nameCn: '日历栏', key: 'calendar-bar' },
|
||||
|
|
@ -21,6 +21,8 @@ export const cmpMenus = [
|
|||
{ name: 'Tabs ', nameCn: '标签页', key: 'tabs' },
|
||||
{ name: 'Menu ', nameCn: '菜单', key: 'menu' },
|
||||
{ name: 'TimeLine ', nameCn: '时间线', key: 'time-line' },
|
||||
// 测试时打开该行---------------
|
||||
// { name: 'TimeLineNew ', nameCn: '时间线AUI', key: 'time-line-new' },
|
||||
{ name: 'Dropdown ', nameCn: '下拉菜单', key: 'dropdown' },
|
||||
{ name: 'Flowchart ', nameCn: '流程图', key: 'flowchart' }
|
||||
]
|
||||
|
|
@ -28,7 +30,7 @@ export const cmpMenus = [
|
|||
{
|
||||
label: '容器组件',
|
||||
labelEn: 'Container',
|
||||
key: 'cmp_container_components',
|
||||
key: 'cmp-container-components',
|
||||
children: [
|
||||
{ name: 'Cell', nameCn: '单元格', key: 'cell' },
|
||||
{ name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' },
|
||||
|
|
@ -46,7 +48,7 @@ export const cmpMenus = [
|
|||
{
|
||||
label: '表单组件',
|
||||
labelEn: 'Form',
|
||||
key: 'cmp_form_components',
|
||||
key: 'cmp-form-components',
|
||||
children: [
|
||||
{ name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' },
|
||||
{ name: 'DatePicker', nameCn: '日期选择器多端', key: 'date-picker' },
|
||||
|
|
@ -74,7 +76,7 @@ export const cmpMenus = [
|
|||
{
|
||||
label: '数据组件',
|
||||
labelEn: 'Data',
|
||||
key: 'cmp_data_components',
|
||||
key: 'cmp-data-components',
|
||||
children: [
|
||||
{ name: 'ColumnListItem', nameCn: '分区列表项', key: 'column-list-item' },
|
||||
{ name: 'StandardListItem', nameCn: '标准列表项', key: 'standard-list-item' },
|
||||
|
|
@ -86,13 +88,13 @@ export const cmpMenus = [
|
|||
{
|
||||
'label': '表格组件',
|
||||
'labelEn': 'Table Components',
|
||||
'key': 'cmp_table_components',
|
||||
'key': 'cmp-table-components',
|
||||
'children': [{ 'nameCn': '基本用法', 'name': 'Grid', 'key': 'grid' }]
|
||||
},
|
||||
{
|
||||
label: '提示组件',
|
||||
labelEn: 'Tooltip',
|
||||
key: 'cmp_tips_components',
|
||||
key: 'cmp-tips-components',
|
||||
children: [
|
||||
{ name: 'Alert', nameCn: '警告', key: 'alert' },
|
||||
{ name: 'Badge', nameCn: '标记', key: 'badge' },
|
||||
|
|
@ -108,7 +110,7 @@ export const cmpMenus = [
|
|||
{
|
||||
label: '其它组件',
|
||||
labelEn: 'Others',
|
||||
key: 'cmp_other_components',
|
||||
key: 'cmp-other-components',
|
||||
children: [
|
||||
{ name: 'Exception', nameCn: '缺省页', key: 'exception' },
|
||||
{ name: 'Image', nameCn: '图片预览', key: 'image' },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
|
||||
<span>当前类型：{{ type }}</span>
|
||||
<span class="demo-anchor">当前类型：{{ type }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :type="type"></tiny-anchor>
|
||||
</template>
|
||||
|
|
@ -53,4 +53,8 @@ const type = ref('dot')
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
|
||||
<span>当前类型：{{ type }}</span>
|
||||
<span class="demo-anchor">当前类型：{{ type }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :type="type"></tiny-anchor>
|
||||
</div>
|
||||
|
|
@ -63,4 +63,8 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="wrap">
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="isAffix"></tiny-switch>
|
||||
<span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
<span class="demo-anchor">{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
|
||||
</div>
|
||||
|
|
@ -57,4 +57,8 @@ const links = ref([
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="wrap">
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="isAffix"></tiny-switch>
|
||||
<span>{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
<span class="demo-anchor">{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
|
||||
</div>
|
||||
|
|
@ -66,4 +66,8 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>使用字符串：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
|
||||
<br /><br />
|
||||
<p>使用数字：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>使用字符串：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
|
||||
<br /><br />
|
||||
<p>使用数字：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const handleFocus2 = () => {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -30,5 +30,6 @@ const value = ref({ val: '选项3', id: 3 })
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ const multiVal = ref(['选项2', '11'])
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,5 +47,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,5 +40,6 @@ const copyValue = ref('')
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,5 +50,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -146,5 +146,6 @@ onMounted(() => {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -152,5 +152,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,5 +68,6 @@ const customFilterMethod = (searchValue) => {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -78,5 +78,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ const value3 = ref([])
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,5 +48,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,5 +35,6 @@ const value = ref('')
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,5 +44,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,5 +29,6 @@ const options = ref([
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,5 +61,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,5 +47,6 @@ const clickItem = (value) => {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,5 +61,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="demo-box">
|
||||
<tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
|
||||
<br /><br />
|
||||
<p>边框为表单范围</p>
|
||||
<tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
|
||||
<tiny-form-item label="label 垂直布局">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="demo-box">
|
||||
<tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
|
||||
<br /><br />
|
||||
<p>边框为表单范围</p>
|
||||
<tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
|
||||
<tiny-form-item label="label 垂直布局">
|
||||
|
|
@ -82,7 +83,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, FormItem, Option, Button } from '@opentiny/vue'
|
||||
import { Form, FormItem, Option, Button, BaseSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -30,5 +30,6 @@ const value = ref('')
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,5 +41,6 @@ const onChange = (value) => {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,5 +50,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,5 +35,6 @@ const value4 = ref(['选项1', '选项2'])
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,5 +43,6 @@ export default {
|
|||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,11 @@ const value2 = ref('选项1')
|
|||
margin: 6px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -78,6 +78,11 @@ export default {
|
|||
margin: 6px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>场景1：下拉树单选</div>
|
||||
<p>场景1：下拉树单选</p>
|
||||
<tiny-base-select v-model="value">
|
||||
<template #panel="{ methods: { updateSelectedData, hidePanel } }">
|
||||
<tiny-tree
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
></tiny-tree>
|
||||
</template>
|
||||
</tiny-base-select>
|
||||
<div>场景2：下拉树多选</div>
|
||||
<p>场景2：下拉树多选</p>
|
||||
<tiny-base-select v-model="value2" multiple>
|
||||
<template #panel="{ methods: { updateSelectedData } }">
|
||||
<tiny-tree
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
></tiny-tree>
|
||||
</template>
|
||||
</tiny-base-select>
|
||||
<div>场景3：下拉树可搜索</div>
|
||||
<p>场景3：下拉树可搜索</p>
|
||||
<tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
|
||||
<template #panel="{ methods: { updateSelectedData, hidePanel } }">
|
||||
<tiny-tree
|
||||
|
|
@ -140,4 +140,9 @@ const filter = (value, data) => {
|
|||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>场景1：下拉树单选</div>
|
||||
<p>场景1：下拉树单选</p>
|
||||
<tiny-base-select v-model="value">
|
||||
<template #panel="{ methods: { updateSelectedData, hidePanel } }">
|
||||
<tiny-tree
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
></tiny-tree>
|
||||
</template>
|
||||
</tiny-base-select>
|
||||
<div>场景2：下拉树多选</div>
|
||||
<p>场景2：下拉树多选</p>
|
||||
<tiny-base-select v-model="value2" multiple>
|
||||
<template #panel="{ methods: { updateSelectedData } }">
|
||||
<tiny-tree
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
></tiny-tree>
|
||||
</template>
|
||||
</tiny-base-select>
|
||||
<div>场景3：下拉树可搜索</div>
|
||||
<p>场景3：下拉树可搜索</p>
|
||||
<tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
|
||||
<template #panel="{ methods: { updateSelectedData, hidePanel } }">
|
||||
<tiny-tree
|
||||
|
|
@ -146,4 +146,9 @@ export default {
|
|||
.tiny-base-select {
|
||||
width: 280px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="demo-bulletin-board">
|
||||
<tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
|
@ -91,3 +93,9 @@ const data = ref([
|
|||
]
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-bulletin-board ::v-deep .tiny-svg {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="demo-bulletin-board">
|
||||
<tiny-bulletin-board :tab-title="tabTitle" :data="data" :icon="IconShare"></tiny-bulletin-board>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -99,3 +101,9 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-bulletin-board ::v-deep .tiny-svg {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-button">
|
||||
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||
<template #button4="{ sup }">
|
||||
<tiny-icon-plus-circle></tiny-icon-plus-circle>
|
||||
|
|
@ -20,7 +20,7 @@ const TinyIconPlusCircle = iconPlusCircle()
|
|||
const checkedVal = ref('Button1')
|
||||
const groupData = ref([
|
||||
{
|
||||
text: 'Button1',
|
||||
text: '1年',
|
||||
value: 'Button1',
|
||||
sup: {
|
||||
class: ['success-bg'],
|
||||
|
|
@ -28,7 +28,7 @@ const groupData = ref([
|
|||
}
|
||||
},
|
||||
{
|
||||
text: 'Button2',
|
||||
text: '2年',
|
||||
value: 'Button2',
|
||||
sup: {
|
||||
class: 'sup-icon',
|
||||
|
|
@ -36,20 +36,20 @@ const groupData = ref([
|
|||
}
|
||||
},
|
||||
{
|
||||
text: 'Button3',
|
||||
text: '3年',
|
||||
value: 'Button3',
|
||||
sup: {
|
||||
class: 'sup-text',
|
||||
text: '8.8折'
|
||||
text: '8折'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Button4',
|
||||
text: '4年',
|
||||
value: 'Button4',
|
||||
sup: {
|
||||
slot: 'button4',
|
||||
class: 'sup-slot',
|
||||
text: '8.8折'
|
||||
text: '8折'
|
||||
}
|
||||
}
|
||||
])
|
||||
|
|
@ -75,3 +75,9 @@ const groupData = ref([
|
|||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.demo-button button {
|
||||
width: 124px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@ test('测试选块角标', async ({ page }) => {
|
|||
|
||||
// 测试文字角标
|
||||
const sup3 = getSup(item.nth(2))
|
||||
await expect(sup3).toHaveText('8.8折')
|
||||
await expect(sup3).toHaveText('8折')
|
||||
await expect(sup3).toHaveClass(/tiny-group-item__sup-text/)
|
||||
|
||||
// 测试自定义角标
|
||||
const sup4 = getSup(item.nth(3))
|
||||
await expect(sup4.locator('svg')).toBeVisible()
|
||||
await expect(sup4).toHaveText('8.8折')
|
||||
await expect(sup4).toHaveText('8折')
|
||||
await expect(sup4).toHaveClass(/sup-slot/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-button">
|
||||
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||
<template #button4="{ sup }">
|
||||
<icon-plus-circle></icon-plus-circle>
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
checkedVal: 'Button1',
|
||||
groupData: [
|
||||
{
|
||||
text: 'Button1',
|
||||
text: '1年',
|
||||
value: 'Button1',
|
||||
sup: {
|
||||
class: ['success-bg'],
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
}
|
||||
},
|
||||
{
|
||||
text: 'Button2',
|
||||
text: '2年',
|
||||
value: 'Button2',
|
||||
sup: {
|
||||
class: 'sup-icon',
|
||||
|
|
@ -42,20 +42,20 @@ export default {
|
|||
}
|
||||
},
|
||||
{
|
||||
text: 'Button3',
|
||||
text: '3年',
|
||||
value: 'Button3',
|
||||
sup: {
|
||||
class: 'sup-text',
|
||||
text: '8.8折'
|
||||
text: '8折'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Button4',
|
||||
text: '4年',
|
||||
value: 'Button4',
|
||||
sup: {
|
||||
slot: 'button4',
|
||||
class: 'sup-slot',
|
||||
text: '8.8折'
|
||||
text: '8折'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -84,3 +84,9 @@ export default {
|
|||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.demo-button button {
|
||||
width: 124px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,3 +8,11 @@
|
|||
<script setup>
|
||||
import { Button as TinyButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,3 +14,11 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,6 @@ const IconSearch = iconSearch()
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,6 @@ export default {
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,6 @@ const TinyIconSearch = iconSearch()
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,6 @@ export default {
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ import { Button as TinyButton } from '@opentiny/vue'
|
|||
|
||||
<style scoped>
|
||||
.gray-bg {
|
||||
background: #ccc;
|
||||
background: #fafafa;
|
||||
padding: 20px 10px 10px;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.gray-bg {
|
||||
background: #ccc;
|
||||
background: #fafafa;
|
||||
padding: 20px 10px 10px;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,6 @@ const TinyIconSearch = iconSearch()
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,6 @@ export default {
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@ import { Button as TinyButton } from '@opentiny/vue'
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,6 @@ export default {
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,3 +9,11 @@
|
|||
<script setup>
|
||||
import { Button as TinyButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,3 +15,11 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -69,6 +69,6 @@ const TinyIconEdit = iconEdit()
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,6 @@ export default {
|
|||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,13 @@ const TinyIconMail = iconMail()
|
|||
<style scoped>
|
||||
.title {
|
||||
margin-top: 16px;
|
||||
padding: 10px 0 6px 0;
|
||||
padding: 10px 0 10px 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,13 @@ export default {
|
|||
<style scoped>
|
||||
.title {
|
||||
margin-top: 16px;
|
||||
padding: 10px 0 6px 0;
|
||||
padding: 10px 0 10px 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tiny-button {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`)
|
||||
const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
|
||||
image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,11 +69,6 @@ const dataArr = ref([
|
|||
title: 'TinyNG',
|
||||
content: '^16.0.01',
|
||||
imageSrc: ''
|
||||
},
|
||||
{
|
||||
title: 'TinyEngine',
|
||||
content: '^14.0.01',
|
||||
imageSrc: ''
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -83,13 +78,17 @@ const dataArr = ref([
|
|||
width: 100%;
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
.card-wrap :deep(.tiny-card-group) {
|
||||
margin: 20px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
height: 150px;
|
||||
}
|
||||
.my-card {
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
padding: 20px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue