forked from opentiny/tiny-vue
feat: update mobile-first and saas (#702)
This commit is contained in:
ajaxzheng
GitHub
parent
b2b8c9cecf
commit
a5303d798f
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert custom-class="bg-color-bg-2" type="error" description="type 为 error"></tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAlert: Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert :icon="IconBoat" description="自定义图标"></tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from '@opentiny/vue'
|
||||
import { iconBoat } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAlert: Alert
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconBoat: iconBoat()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
<br />
|
||||
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
|
||||
<br />
|
||||
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,19 +19,19 @@
|
|||
</tiny-alert>
|
||||
<br />
|
||||
<tiny-alert size="large" title="slot 自定义交互操作" class="demo-alert">
|
||||
<tiny-button size="mini" type="primary">确定</tiny-button>
|
||||
<tiny-button size="mini" type="primary" class="mr-2">确定</tiny-button>
|
||||
<tiny-button size="mini">取消</tiny-button>
|
||||
</tiny-alert>
|
||||
<br />
|
||||
<tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
<br />
|
||||
<tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
|
||||
<br />
|
||||
<tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<tiny-button size="mini" type="primary">继续提交</tiny-button>
|
||||
<tiny-button size="mini" type="primary" class="mr-2">继续提交</tiny-button>
|
||||
<tiny-button size="mini">取消操作</tiny-button>
|
||||
</tiny-alert>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-alert type="info" description="type 为 info"></tiny-alert>
|
||||
<tiny-alert description="type 为默认值 info"></tiny-alert>
|
||||
<tiny-alert type="error" description="type 为 error"></tiny-alert>
|
||||
<tiny-alert type="success" description="type 为 success"></tiny-alert>
|
||||
<tiny-alert type="warning" description="type 为 warning"></tiny-alert>
|
||||
<tiny-alert
|
||||
type="warning"
|
||||
single-line
|
||||
scrolling
|
||||
description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "
|
||||
></tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from '@opentiny/vue'
|
||||
import { Alert } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAlert: Alert,
|
||||
TinyButton: Button
|
||||
TinyAlert: Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,18 @@ export default {
|
|||
},
|
||||
codeFiles: ['title.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-icon',
|
||||
name: {
|
||||
'zh-CN': '自定义图标',
|
||||
'en-US': 'Custom icon'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>icon</code> 属性自定义图标。<p>',
|
||||
'en-US': '<p>Customize the icon through the <code>icon</code> attribute.</p>'
|
||||
},
|
||||
codeFiles: ['custom-icon.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'closable',
|
||||
name: {
|
||||
|
|
@ -124,6 +136,18 @@ export default {
|
|||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['show-foldable.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义类名',
|
||||
'en-US': 'Custom class'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过<code>custom-class</code>属性设置自定义类名<p>',
|
||||
'en-US': '<p>Set a custom class name through the <code>custom-class</code> attribute</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-calendar-bar v-model="value" cascader-position="start"></tiny-calendar-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CalendarBar } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCalendarBar: CalendarBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '2022-12-18'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<tiny-calendar-bar v-model="value" @expand="expand"></tiny-calendar-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CalendarBar, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCalendarBar: CalendarBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '2022-12-18'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
expand(expanded) {
|
||||
if (expanded) {
|
||||
Modal.message('处于展开状态')
|
||||
} else {
|
||||
Modal.message('处于收起状态')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
return {
|
||||
value: '2022-12-18',
|
||||
config: {
|
||||
currentColorClass: 'text-white',
|
||||
currentColorClass: 'text-color-text-inverse',
|
||||
currentBackgroundColorClass: 'bg-color-success'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>使用 <code>config.disabled </code>配置一个方法，用于判断参数日期是否禁用。 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
|
||||
'<p>使用 <code>config.disabled </code>配置一个方法，用于判断参数日期是否禁用。<br> 使用 <code>config.disabledColorClass </code> 配置禁用日期的字体颜色类名。 <br>使用 <code>config.disabledBackgroundColorClass </code> 配置禁用日期的背景颜色类名。</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
|
|
@ -34,8 +34,10 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。 此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。<p>',
|
||||
'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>'
|
||||
},
|
||||
codeFiles: ['marked.vue']
|
||||
|
|
@ -47,8 +49,9 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>用户传入的日期为<code> 当前日期</code> 。 使用 <code> config.currentColorClass</code> 配置<code> 当前日期</code> 的字体颜色类名； 使用<code> config.currentBackgroundColorClass</code> 配置<code> 当前日期</code> 的背景颜色类名。<p>',
|
||||
'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>'
|
||||
},
|
||||
codeFiles: ['render-current.vue']
|
||||
|
|
@ -85,11 +88,37 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>用户传入的日期为<code> 当前日期</code>，当前日期所在月份为<code> 当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。 使用<code> config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日； 使用<code> config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； 使用<code> config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
|
||||
'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>'
|
||||
},
|
||||
codeFiles: ['workday.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'expand',
|
||||
name: {
|
||||
'zh-CN': '展开收起事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>日历栏展开或收起时触发的事件；事件参数为 true 时代表展开状态，反之为收起状态。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['expand.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'cascader-position',
|
||||
name: {
|
||||
'zh-CN': '年月选择的位置',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>使用 cascaderPosition 属性可以改变年月选择的位置；可选值为：<code>start | center | end</code> 默认值为<code>center</code><p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['cascader-position.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default {
|
|||
config: {
|
||||
workday: this.workday,
|
||||
holiday: this.holiday,
|
||||
workdayColorClass: 'text-black',
|
||||
holidayColorClass: 'text-gray-200'
|
||||
workdayColorClass: 'text-color-text-primary',
|
||||
holidayColorClass: 'text-color-none-hover'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 级联选择器 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<tiny-cascader-mobile
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="标题"
|
||||
placeholder="请选择"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
></tiny-cascader-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderMobile, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderMobile: CascaderMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['zhinan', 'anzhuang', 'xiangmudengji', 'dengji1', 'dengji1-1'],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: false,
|
||||
load: null,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 父子不互相关联 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<tiny-cascader-mobile
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="标题"
|
||||
placeholder="请选择"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
></tiny-cascader-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderMobile, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderMobile: CascaderMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['zhinan', 'kaifa'],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
nodeConfig: {
|
||||
checkStrictly: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 异步加载 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<tiny-cascader-mobile
|
||||
v-model="value"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="标题"
|
||||
:placeholder="['选择省份', '选择城市', '选择区域', '选择街道']"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
></tiny-cascader-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderMobile, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderMobile: CascaderMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [],
|
||||
boxVisibility: false,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: true,
|
||||
load: this.lazyload,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
// checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
},
|
||||
getNode(nodes, value) {
|
||||
let result
|
||||
if (!nodes) {
|
||||
return
|
||||
}
|
||||
|
||||
nodes.map((node) => {
|
||||
if (node.value === value) {
|
||||
result = node.children.map(({ value, label, children }) => {
|
||||
return {
|
||||
value,
|
||||
label,
|
||||
leaf: !children || !children.length
|
||||
}
|
||||
})
|
||||
} else {
|
||||
result = this.getNode(node.children, value) || result
|
||||
}
|
||||
})
|
||||
return result
|
||||
},
|
||||
lazyload(node, resolve) {
|
||||
const { level, data } = node
|
||||
console.log('lazyload -> ', level, node)
|
||||
|
||||
setTimeout(() => {
|
||||
const nodes =
|
||||
level === 0
|
||||
? list.map(({ value, label, children }) => {
|
||||
return {
|
||||
value,
|
||||
label,
|
||||
leaf: !children || !children.length
|
||||
}
|
||||
})
|
||||
: this.getNode(list, data.value) || []
|
||||
// 通过调用 resolve 将子节点数据返回，通知组件数据加载完成
|
||||
resolve(nodes)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 显示多级标题 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<tiny-cascader-mobile
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="标题"
|
||||
:placeholder="['选择省份', '选择城市', '选择区域', '选择街道']"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
></tiny-cascader-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderMobile, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderMobile: CascaderMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['zhinan', 'kaifa'],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
nodeConfig: {
|
||||
checkStrictly: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderMobile 级联选择
|
||||
---
|
||||
|
||||
# CascaderMobile 级联选择
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderMobile 级联选择
|
||||
---
|
||||
|
||||
# CascaderMobile 级联选择
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法<p>',
|
||||
'en-US': '<p>Basic Usage</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'lazyload',
|
||||
name: {
|
||||
'zh-CN': '异步加载',
|
||||
'en-US': 'Asynchronous loading'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>:node-config="{ lazy: true, load:() => {...} }"<code>load</code> 设置属性 <code>lazy: true<code>load</code> 和 <code>load</code> 数据加载方法，开启异步加载。<p>',
|
||||
'en-US':
|
||||
'<p><p>Set the <code>lazy: true<code>load</code> attribute and <code>load</code>data loading method through <code>:node-config="{lazy: true, load:() => {...}}"<code>load</code> to enable asynchronous loading.<p></p>'
|
||||
},
|
||||
codeFiles: ['lazyload.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-strictly',
|
||||
name: {
|
||||
'zh-CN': '父子不互相关联',
|
||||
'en-US': 'Father and son are not related to each other'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>:node-config="{ checkStrictly: true }"</code> 设置属性 <code>checkStrictly: true</code>，开启父子层级互不关联，可选择非叶子节点，默认值为 <code>false</code> 显示到叶子节点。<p>',
|
||||
'en-US':
|
||||
'<p>You can set the <code>checkStrictly: true</code> attribute in <code>:node-config="{checkStrictly: true}"</code> to enable the disassociation between parent and child levels. You can select non-leaf nodes. The default value is <code>false</code>.<p>'
|
||||
},
|
||||
codeFiles: ['check-strictly.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'placeholder',
|
||||
name: {
|
||||
'zh-CN': '显示多级标题',
|
||||
'en-US': 'Display Multi-Level Headings'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过设置 <code>:placeholder="[...]"</code> 属性支持显示多级标题，<code>placeholder</code> 支持字符串和数组类型，默认值为字符串 "请选择"。<p>',
|
||||
'en-US':
|
||||
'<p>You can set the <code>:placeholder="[...]"</code> attribute to support the display of multi-level titles. <code>placeholder</code> supports the character string and array type. The default value is the character string "Please select".<p>'
|
||||
},
|
||||
codeFiles: ['placeholder.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 级联选择视图 </tiny-button> 值：{{ value }}
|
||||
<tiny-cascader-view
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="选择人员"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-cascader-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderView, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderView: CascaderView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [
|
||||
['zhinan', 'kaifa', 'yinruzujian'],
|
||||
['zhinan', 'kaifa', 'monishuju']
|
||||
],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: false,
|
||||
load: null,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
// checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
].concat(
|
||||
Array.from({ length: 20 }).map((v, i) => ({
|
||||
value: 'jiqiren-' + (i + 1),
|
||||
label: '机器人' + (i + 1)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 级联选择视图 </tiny-button> 值：{{ value }}
|
||||
<tiny-cascader-view
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="选择人员"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-cascader-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderView, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderView: CascaderView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [
|
||||
['zhinan', 'kaifa', 'yinruzujian'],
|
||||
['zhinan', 'kaifa', 'monishuju']
|
||||
],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: false,
|
||||
load: null,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
].concat(
|
||||
Array.from({ length: 20 }).map((v, i) => ({
|
||||
value: 'jiqiren-' + (i + 1),
|
||||
label: '机器人' + (i + 1)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 级联选择视图 </tiny-button> 值：{{ value }}
|
||||
<tiny-cascader-view
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="选择人员"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-cascader-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderView, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderView: CascaderView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [
|
||||
['zhinan', 'kaifa', 'yinruzujian'],
|
||||
['zhinan', 'kaifa', 'monishuju']
|
||||
],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: false,
|
||||
load: null,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
// checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
disabled: true,
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
].concat(
|
||||
Array.from({ length: 20 }).map((v, i) => ({
|
||||
value: 'jiqiren-' + (i + 1),
|
||||
label: '机器人' + (i + 1)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 隐藏值路径 </tiny-button> 值：{{ value }}
|
||||
<tiny-cascader-view
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="选择人员"
|
||||
:emit-path="false"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-cascader-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderView, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderView: CascaderView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['yinruzujian', 'monishuju'],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: false,
|
||||
load: null,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
// checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
].concat(
|
||||
Array.from({ length: 20 }).map((v, i) => ({
|
||||
value: 'jiqiren-' + (i + 1),
|
||||
label: '机器人' + (i + 1)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 级联选择视图 </tiny-button> 值：{{ value }}
|
||||
<tiny-cascader-view
|
||||
v-model="value"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="选择人员"
|
||||
:search-config="searchConfig"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-cascader-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderView, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderView: CascaderView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [
|
||||
['zhinan', 'kaifa', 'yinruzujian'],
|
||||
['zhinan', 'kaifa', 'monishuju']
|
||||
],
|
||||
boxVisibility: false,
|
||||
searchConfig: {
|
||||
searchMethod: null
|
||||
},
|
||||
nodeConfig: {
|
||||
lazy: true,
|
||||
load: this.lazyload,
|
||||
isLeaf: 'leaf',
|
||||
children: 'children',
|
||||
// checkStrictly: true,
|
||||
afterLoad: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
},
|
||||
getNode(nodes, value) {
|
||||
let result
|
||||
if (!nodes) {
|
||||
return
|
||||
}
|
||||
|
||||
nodes.map((node) => {
|
||||
if (node.value === value) {
|
||||
result = node.children.map(({ value, label, children }) => {
|
||||
return {
|
||||
value,
|
||||
label,
|
||||
leaf: !children || !children.length
|
||||
}
|
||||
})
|
||||
} else {
|
||||
result = this.getNode(node.children, value) || result
|
||||
}
|
||||
})
|
||||
return result
|
||||
},
|
||||
lazyload(node, resolve) {
|
||||
const { level, data } = node
|
||||
console.log('lazyload -> ', level, node)
|
||||
|
||||
setTimeout(() => {
|
||||
const nodes =
|
||||
level === 0
|
||||
? list.map(({ value, label, children }) => {
|
||||
return {
|
||||
value,
|
||||
label,
|
||||
leaf: !children || !children.length
|
||||
}
|
||||
})
|
||||
: this.getNode(list, data.value) || []
|
||||
// 通过调用 resolve 将子节点数据返回，通知组件数据加载完成
|
||||
resolve(nodes)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
].concat(
|
||||
Array.from({ length: 20 }).map((v, i) => ({
|
||||
value: 'jiqiren-' + (i + 1),
|
||||
label: '机器人' + (i + 1)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 显示多级标题 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<tiny-cascader-mobile
|
||||
v-model="value"
|
||||
:data="data"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
title="标题"
|
||||
:placeholder="['选择省份', '选择城市', '选择区域', '选择街道']"
|
||||
:node-config="nodeConfig"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
></tiny-cascader-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CascaderMobile, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCascaderMobile: CascaderMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['zhinan', 'kaifa'],
|
||||
boxVisibility: false,
|
||||
data: list,
|
||||
nodeConfig: {
|
||||
checkStrictly: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const list = [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
value: 'anzhuang',
|
||||
label: '安装',
|
||||
children: [
|
||||
{
|
||||
value: 'xiangmudengji',
|
||||
label: '项目登记',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1',
|
||||
label: '登记1登记1登记1登记1登记1登记1登记1',
|
||||
children: [
|
||||
{
|
||||
value: 'dengji1-1',
|
||||
label: '登记1-1 登记1-1 登记1-1'
|
||||
},
|
||||
{
|
||||
value: 'dengji1-2',
|
||||
label: '登记1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'dengji2',
|
||||
label: '项目登记2'
|
||||
},
|
||||
{
|
||||
value: 'dengji3',
|
||||
label: '项目登记3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'huanjingzhunbei',
|
||||
label: '环境准备'
|
||||
},
|
||||
{
|
||||
value: 'anzhuangcli',
|
||||
label: '安装 CLI'
|
||||
},
|
||||
{
|
||||
value: 'chuangjianxiangmu',
|
||||
label: '创建项目'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'kaifa',
|
||||
label: '开发',
|
||||
children: [
|
||||
{
|
||||
value: 'yinruzujian',
|
||||
label: '引入组件'
|
||||
},
|
||||
{
|
||||
value: 'monishuju',
|
||||
label: '模拟数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: '框架风格',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
},
|
||||
{
|
||||
value: 'font',
|
||||
label: 'Font 字体'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon 图标'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form-component',
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio 单选框'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
},
|
||||
{
|
||||
value: 'number',
|
||||
label: 'Numeric 计数器'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select 选择器'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader 级联选择器'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch 开关'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider 滑块'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker 时间选择器'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker 日期选择器'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form 表单'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: '数据组件',
|
||||
children: [
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree 树形控件'
|
||||
},
|
||||
{
|
||||
value: 'pager',
|
||||
label: 'Pager 分页'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: '提示组件',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert 警告'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading 加载'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: '导航组件',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'NavMenu 导航菜单'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs 标签页'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb 面包屑'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps 步骤条'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: '其他组件',
|
||||
children: [
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate 评分'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag 标签'
|
||||
},
|
||||
{
|
||||
value: 'usercontact',
|
||||
label: 'UserContact 联系人'
|
||||
},
|
||||
{
|
||||
value: 'slidebar',
|
||||
label: 'SlideBar 滚动块'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderView 级联选择视图
|
||||
---
|
||||
|
||||
# CascaderView 级联选择视图
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: CascaderView 级联选择视图
|
||||
---
|
||||
|
||||
# CascaderView 级联选择视图
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基本用法<p>',
|
||||
'en-US': '<p>Basic Usage</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'lazyload',
|
||||
name: {
|
||||
'zh-CN': '异步加载',
|
||||
'en-US': 'Asynchronous loading'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>:node-config="{ lazy: true, load:() => {...} }"<code>load</code> 设置属性 <code>lazy: true<code>load</code> 和 <code>load</code> 数据加载方法，开启异步加载。<p>',
|
||||
'en-US':
|
||||
'<p><p>Set the <code>lazy: true<code>load</code> attribute and <code>load</code>data loading method through <code>:node-config="{lazy: true, load:() => {...}}"<code>load</code> to enable asynchronous loading.<p></p>'
|
||||
},
|
||||
codeFiles: ['lazyload.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-strictly',
|
||||
name: {
|
||||
'zh-CN': '父子不互相关联',
|
||||
'en-US': 'Father and son are not related to each other'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>:node-config="{ checkStrictly: true }"</code> 设置属性 <code>checkStrictly: true</code>，开启父子层级互不关联，可选择非叶子节点，默认值为 <code>false</code> 显示到叶子节点。<p>',
|
||||
'en-US':
|
||||
'<p>You can set the <code>checkStrictly: true</code> attribute in <code>:node-config="{checkStrictly: true}"</code> to enable the disassociation between parent and child levels. You can select non-leaf nodes. The default value is <code>false</code>.<p>'
|
||||
},
|
||||
codeFiles: ['check-strictly.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用选项',
|
||||
'en-US': 'Disable option'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>数据源里面带 <code>disabled: true</code> 渲染时自动禁用选项。<p>',
|
||||
'en-US':
|
||||
'<p>The <code>disabled: true</code> option is automatically disabled during rendering in the data source.<p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'emit-path',
|
||||
name: {
|
||||
'zh-CN': '显示值路径',
|
||||
'en-US': 'Display Value Path'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过设置 <code>emit-path</code> 属性值为 <code>false</code> 不显示值路径，默认值为 <code>true</code> 显示值路径。<p>',
|
||||
'en-US':
|
||||
'<p>The value path is not displayed by setting the <code>emit-path</code> attribute to <code>false</code>. The default value is <code>true</code>.<p>'
|
||||
},
|
||||
codeFiles: ['emit-path.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
checked: ''
|
||||
checked: '假文本'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>默认尺寸</div>
|
||||
<tiny-checkbox v-model="checked1" class="mt-2">复选框</tiny-checkbox>
|
||||
<br /><br /><br />
|
||||
<div>中尺寸</div>
|
||||
<tiny-checkbox v-model="checked2" size="medium" class="mt-2">复选框</tiny-checkbox>
|
||||
|
||||
<br /><br /><br />
|
||||
<div>垂直布局</div>
|
||||
<tiny-checkbox-group size="medium" v-model="checkboxGroup" vertical text-color="#fff" class="mt-2">
|
||||
<tiny-checkbox v-for="city in cities" :label="city" :key="city">
|
||||
{{ city }}
|
||||
</tiny-checkbox>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox, CheckboxGroup } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCheckbox: Checkbox,
|
||||
TinyCheckboxGroup: CheckboxGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked1: true,
|
||||
checked2: true,
|
||||
checkboxGroup: ['上海'],
|
||||
cities: ['上海', '北京', '广州', '深圳']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,23 @@
|
|||
<template>
|
||||
<tiny-checkbox v-model="checked" border>
|
||||
<tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
|
||||
<div class="content-overflow">备选项1 提示文字 提示文字</div>
|
||||
</tiny-tooltip>
|
||||
</tiny-checkbox>
|
||||
<tiny-tooltip
|
||||
ref="tooltip"
|
||||
effect="light"
|
||||
:content="label"
|
||||
:manual="true"
|
||||
placement="top-start"
|
||||
v-model="showContent"
|
||||
>
|
||||
<tiny-checkbox v-model="checked" border>
|
||||
<div
|
||||
ref="label"
|
||||
class="w-20 overflow-hidden text-ellipsis whitespace-nowrap align-middle"
|
||||
@mouseenter="mouseEnter"
|
||||
@mouseleave="mouseLeave"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
</tiny-checkbox>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -16,18 +30,20 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
checked: false,
|
||||
label: '备选项1 提示文字 提示文字',
|
||||
showContent: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mouseLeave() {
|
||||
this.showContent = false
|
||||
},
|
||||
mouseEnter() {
|
||||
if (this.$refs.label.scrollWidth > this.$refs.label.offsetWidth) {
|
||||
this.showContent = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-overflow {
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-checkbox v-model="checked" display-only true-label="可以" false-label="不可以"></tiny-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCheckbox: Checkbox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-checkbox v-model="checked" display-only>复选框</tiny-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCheckbox: Checkbox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,8 +22,9 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组，在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。<p>',
|
||||
'zh-CN': `<p>通过 <code>checkbox-group</code> 元素把多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。<br>
|
||||
<code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。<br>
|
||||
<code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checkbox-group.vue']
|
||||
|
|
@ -35,12 +36,27 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>提供 `options` 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。<br />`options` 对象数组中包括三个字段：`label`、`text`、`events`。<br />另外还提供 `type` 属性，配合 `options` 属性一起使用，默认值为 `checkbox`。还可以配置为 `button`，配置后复选框组将以按钮的形式展示。<p>',
|
||||
'zh-CN': `<p>提供 <code>options</code> 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。<br />
|
||||
<code>options</code> 对象数组中包括三个字段：<code>label</code>、<code>text</code>、<code>events</code>。<br />
|
||||
另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>checkbox</code>。
|
||||
还可以配置为 <code>button</code>，配置后复选框组将以按钮的形式展示。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['group-options.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'checkbox-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸设置',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>当组件 `checkbox-group` 和 `checkbox` 配置 `size` 属性为 `medium` 时，显示为中尺寸（仅 pc 支持）<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['checkbox-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'indeterminate',
|
||||
name: {
|
||||
|
|
@ -103,6 +119,31 @@ export default {
|
|||
},
|
||||
codeFiles: ['content-overflow.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only',
|
||||
name: {
|
||||
'zh-CN': '只读',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加 <code>display-only</code> 属性设置复选框只读<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only-no-label',
|
||||
name: {
|
||||
'zh-CN': '只读(无 label)',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>当 CheckBox 只有一个勾选框，没有 label 时，只读状态下默认显示 是/否，可通过设置<code>true-label</code>与<code>false-label</code>指定需要显示的值，<br>
|
||||
此功能只适用于单个 CheckBox 用作选择框<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-no-label.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'checkbox-slot',
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item
|
||||
v-model="checked"
|
||||
v-model="value"
|
||||
:show-checkbox="true"
|
||||
image="/static/images/1.jpg"
|
||||
size="medium"
|
||||
|
|
@ -9,77 +9,82 @@
|
|||
:flex-grow="[1, 1]"
|
||||
class="mb-3"
|
||||
@icon-click="iconClick"
|
||||
label="1"
|
||||
>
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>品牌：</span><span class="text-color-text-primary">手机</span></li>
|
||||
<li><span>编码：</span><span class="text-color-text-primary">HYFVFHJGG1354</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span class="text-color-text-primary">256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span class="text-color-text-primary">1</span></li>
|
||||
<li><span>尺寸：</span><span class="text-color-text-primary">6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item image="/static/images/1.jpg" size="medium" :options="options2" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>品牌：</span><span class="text-color-text-primary">手机</span></li>
|
||||
<li><span>编码：</span><span class="text-color-text-primary">HYFVFHJGG1354</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span class="text-color-text-primary">256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span class="text-color-text-primary">1</span></li>
|
||||
<li><span>尺寸：</span><span class="text-color-text-primary">6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column3>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span>2</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span>8888.55</span></li>
|
||||
<li><span>换算率：</span><span>55</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span class="text-color-text-primary">2</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span class="text-color-text-primary">8888.55</span></li>
|
||||
<li><span>换算率：</span><span class="text-color-text-primary">55</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column4>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>上架时间：</span><span>2023-01-31</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>顺序号：</span><span>123456</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>上架时间：</span><span class="text-color-text-primary">2023-01-31</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>顺序号：</span><span class="text-color-text-primary">123456</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item v-model="checked" :show-checkbox="true" :checkbox-disabled="true">
|
||||
<tiny-column-list-item v-model="value" :show-checkbox="true" label="2" disabled>
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
<li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-fill-secondary">
|
||||
<span>品牌：</span><span class="text-color-text-primary">手机</span>
|
||||
</li>
|
||||
<li class="text-color-fill-secondary">
|
||||
<span>编码：</span><span class="text-color-text-primary">HYFVFHJGG1354</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span class="text-color-text-primary">256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span class="text-color-text-primary">1</span></li>
|
||||
<li><span>尺寸：</span><span class="text-color-text-primary">6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column3>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span>2</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span>8888.55</span></li>
|
||||
<li><span>换算率：</span><span>55</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>最小包装数：</span><span class="text-color-text-primary">2</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>参考价格：</span><span class="text-color-text-primary">8888.55</span></li>
|
||||
<li><span>换算率：</span><span class="text-color-text-primary">55</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column4>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>上架时间：</span><span>2023-01-31</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>顺序号：</span><span>123456</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>上架时间：</span><span class="text-color-text-primary">2023-01-31</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>顺序号：</span><span class="text-color-text-primary">123456</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
|
|
@ -88,7 +93,7 @@
|
|||
|
||||
<script>
|
||||
import { ColumnListItem, Modal } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
import { iconDel, iconWriting, iconAscending, iconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -96,43 +101,43 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
value: ['1'],
|
||||
options1: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
icon: iconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
icon: iconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
icon: iconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
icon: iconShare(),
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
options2: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
icon: iconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting()
|
||||
icon: iconWriting()
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
icon: iconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
icon: iconShare(),
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,34 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item v-model="checked1" :show-checkbox="true" class="mb-3">
|
||||
<tiny-column-list-item v-model="value" show-checkbox label="1" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
<li class="text-sm mb-1 text-color-text-primary font-medium sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-fill-secondary">
|
||||
<span>品牌：</span><span class="text-color-text-primary">手机</span>
|
||||
</li>
|
||||
<li class="text-color-fill-secondary">
|
||||
<span>编码：</span><span class="text-color-text-primary">HYFVFHJGG1354</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span class="text-color-text-primary">256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span class="text-color-text-primary">1</span></li>
|
||||
<li><span>尺寸：</span><span class="text-color-text-primary">6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item v-model="checked2" :show-checkbox="true" :checkbox-disabled="true">
|
||||
<tiny-column-list-item v-model="value" show-checkbox label="2">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
|
||||
<li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
|
||||
<li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
<li class="mb-1 sm:mb-1.5 text-color-fill-secondary">
|
||||
<span>品牌：</span><span class="text-color-text-primary">手机</span>
|
||||
</li>
|
||||
<li class="text-color-fill-secondary">
|
||||
<span>编码：</span><span class="text-color-text-primary">HYFVFHJGG1354</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #column2>
|
||||
<ul class="text-color-text-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
|
||||
<li><span>尺寸：</span><span>6.5英寸</span></li>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span class="text-color-text-primary">256G</span></li>
|
||||
<li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span class="text-color-text-primary">1</span></li>
|
||||
<li><span>尺寸：</span><span class="text-color-text-primary">6.5英寸</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
|
|
@ -44,8 +52,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
value: ['1']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 日期选择器组件 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<p>格式化值：{{ formatValue }}</p>
|
||||
|
||||
<tiny-date-picker-mobile
|
||||
v-model="value"
|
||||
title="日期选择"
|
||||
:picker-options="pickerOptions"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-date-picker-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePickerMobileFirst, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePickerMobile: DatePickerMobileFirst,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
boxVisibility: false,
|
||||
pickerOptions: {
|
||||
disabledDate: (date) => {
|
||||
return date.getTime() > Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatValue() {
|
||||
if (!this.value) return ''
|
||||
const date = new Date(this.value)
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -50,6 +50,58 @@ export default {
|
|||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['datetime-range.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'year-month',
|
||||
name: {
|
||||
'zh-CN': '年月选择器',
|
||||
'en-US': 'Year and month selector'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性为 `year-month`，以年月选择器的形式进行选择。<p>',
|
||||
'en-US': '<p>Set the `type` attribute to `year-month` to select a year-month selector.</p>'
|
||||
},
|
||||
codeFiles: ['year-month.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'year-month-range',
|
||||
name: {
|
||||
'zh-CN': '年月范围选择器',
|
||||
'en-US': 'Year Month Range Selector'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `type` 属性为 `year-month-range`，以年月范围选择器的形式进行选择。<p>',
|
||||
'en-US': '<p>Set the `type` property to `year-month-range` to select a year-month range selector.</p>'
|
||||
},
|
||||
codeFiles: ['year-month-range.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '日期选择限制',
|
||||
'en-US': 'Date Selection Restrictions'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 picker-options 属性，在对象中的 disabledDate 方法中根据日期进行判断来禁用指定的日期段，通过这种方式来实现最大最小值，picker-options 属性的格式为：{ disabledDate: (date) => {...} }。<p>',
|
||||
'en-US':
|
||||
'<p>Configure the picker-options attribute to disable the specified date segment based on the date in the disabledDate method of the object. In this way, the maximum and minimum values are implemented. The format of the picker-options attribute is {disabledDate: (date) => {...}}.</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'year-month-disabled',
|
||||
name: {
|
||||
'zh-CN': '年月范围选择器限制范围',
|
||||
'en-US': 'Year Month Range Selector Limit Range'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>配置 picker-options 属性，在对象中的 disabledDate 方法中根据日期进行判断来禁用指定的日期段，通过这种方式来实现最大最小值，picker-options 属性的格式为：{ disabledDate: (date) => {...} }。<p>',
|
||||
'en-US':
|
||||
'<p>Configure the picker-options attribute to disable the specified date segment based on the date in the disabledDate method of the object. In this way, the maximum and minimum values are implemented. The format of the picker-options attribute is {disabledDate: (date) => {...}}.</p>'
|
||||
},
|
||||
codeFiles: ['year-month-disabled.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 年月选择器 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<p>格式化值：{{ formatValue }}</p>
|
||||
|
||||
<tiny-date-picker-mobile
|
||||
v-model="value"
|
||||
title="年月选择"
|
||||
:picker-options="pickerOptions"
|
||||
type="year-month-range"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-date-picker-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePickerMobileFirst, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePickerMobile: DatePickerMobileFirst,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['2022-11', '2023-1'],
|
||||
boxVisibility: false,
|
||||
pickerOptions: {
|
||||
disabledDate: (date) => {
|
||||
return date.getTime() > Date.now() || date.getTime() < new Date('2020/3/1').getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatValue() {
|
||||
if (!this.value || this.value.length === 0) return ''
|
||||
const date1 = new Date(this.value[0])
|
||||
const date2 = new Date(this.value[1])
|
||||
return `[${date1.getFullYear()}/${date1.getMonth() + 1}, ${date2.getFullYear()}/${date2.getMonth() + 1}]`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 年月选择器 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<p>格式化值：{{ formatValue }}</p>
|
||||
|
||||
<tiny-date-picker-mobile
|
||||
v-model="value"
|
||||
title="年月选择"
|
||||
type="year-month-range"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-date-picker-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePickerMobileFirst, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePickerMobile: DatePickerMobileFirst,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['2022-11', '2023-1'],
|
||||
boxVisibility: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatValue() {
|
||||
if (!this.value || this.value.length === 0) return ''
|
||||
const date1 = new Date(this.value[0])
|
||||
const date2 = new Date(this.value[1])
|
||||
return `[${date1.getFullYear()}/${date1.getMonth() + 1}, ${date2.getFullYear()}/${date2.getMonth() + 1}]`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="fn" type="primary"> 年月选择器 </tiny-button>
|
||||
<p>值：{{ value }}</p>
|
||||
<p>格式化值：{{ formatValue }}</p>
|
||||
|
||||
<tiny-date-picker-mobile
|
||||
v-model="value"
|
||||
title="年月选择"
|
||||
type="year-month"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
>
|
||||
</tiny-date-picker-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePickerMobileFirst, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyDatePickerMobile: DatePickerMobileFirst,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '2022-11',
|
||||
boxVisibility: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatValue() {
|
||||
if (!this.value) return ''
|
||||
const date = new Date(this.value)
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fn() {
|
||||
this.boxVisibility = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<tiny-exception type="pagenoperm">
|
||||
<template #content>
|
||||
<div>content插槽</div>
|
||||
</template>
|
||||
</tiny-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Exception } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyException: Exception
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-exception type="pagenoperm"></tiny-exception>
|
||||
<tiny-exception type="pageservererror"></tiny-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-exception page-empty type="pagenoperm"></tiny-exception>
|
||||
<tiny-exception page-empty type="pageservererror"></tiny-exception>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<tiny-exception type="pagenoperm" sub-message="自定义副文本内容"></tiny-exception>
|
||||
<tiny-exception type="pageservererror" sub-message="自定义副文本内容"></tiny-exception>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { Exception } from '@opentiny/vue'
|
||||
|
||||
|
|
@ -15,5 +15,3 @@ export default {
|
|||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -55,14 +55,26 @@ export default {
|
|||
{
|
||||
demoId: 'button-text',
|
||||
name: {
|
||||
'zh-CN': '自定义插槽',
|
||||
'en-US': 'events'
|
||||
'zh-CN': '自定义按钮文本',
|
||||
'en-US': 'button-text'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>已去除`button-text`自定义按钮文本，直接可以通过插槽自定义<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['button-text.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'content-slot',
|
||||
name: {
|
||||
'zh-CN': 'content 插槽',
|
||||
'en-US': 'content-slot'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过命名插槽 `content`，自定义内容区<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['content-slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ encryptConfig }}
|
||||
<tiny-file-upload :action="action" :data="data" :encrypt-config="encryptConfig">
|
||||
<tiny-button type="primary">点击上传</tiny-button>
|
||||
</tiny-file-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FileUpload, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFileUpload: FileUpload,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: 'http://localhost:3000/api/upload',
|
||||
encryptConfig: {
|
||||
enabled: true,
|
||||
encrypt: true,
|
||||
watermark: '水印示例1'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
return {
|
||||
encrypt: this.encryptConfig.encrypt,
|
||||
watermark: this.encryptConfig.watermark
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -276,7 +276,20 @@ export default {
|
|||
},
|
||||
codeFiles: ['multi-media-native.vue']
|
||||
},
|
||||
|
||||
{
|
||||
demoId: 'bubble',
|
||||
name: {
|
||||
'zh-CN': '气泡上传',
|
||||
'en-US': 'Bubble Upload'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 <code>list-type</code> 为默认值 <code>text</code> 时，设置 <code>mode</code> 为 <code>bubble</code> 时进行气泡模式的上传<p>',
|
||||
'en-US':
|
||||
'<p><p>Upload in bubble mode when <code>list-type</code> is set to the default value <code>text</code> and <code>mode</code> is set to <code>bubble</code>.<p></p>'
|
||||
},
|
||||
codeFiles: ['bubble.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'drag',
|
||||
name: {
|
||||
|
|
@ -325,6 +338,18 @@ export default {
|
|||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['assist-content.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'encrypt-config',
|
||||
name: {
|
||||
'zh-CN': '水印和加密配置',
|
||||
'en-US': 'Watermark and Encryption Configuration'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>设置 <code>:encrypt-config: { enabled: true, ... }</code> 开启水印和加密弹窗配置，<code>encrypt-config</code> 默认值为 <code>{ enabled: false, encrypt: false, watermark: '' }</code><p>`,
|
||||
'en-US': `<p>Set the <code>:encrypt-config: {enabled: true, ...}</code> to enable the watermark and encryption pop-up window configuration. <code>encrypt-config</code>The default value is <code>{enabled: false, encrypt: false, watermark: ''}</code><p>`
|
||||
},
|
||||
codeFiles: ['encrypt-config.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可使用右侧 `icon` 自定义插槽。<p>',
|
||||
'zh-CN': '<p>可使用右侧 <code>icon</code> 自定义插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div>
|
||||
<p><tiny-button @click="value = [1, [1], [1, 2]]">点击改变当前值</tiny-button> 值：{{ value }}</p>
|
||||
<br />
|
||||
<tiny-filter
|
||||
ref="filter"
|
||||
v-model="value"
|
||||
manual
|
||||
:data="data"
|
||||
@update:modelValue="update"
|
||||
@panel="panel"
|
||||
></tiny-filter>
|
||||
|
||||
<tiny-select-mobile
|
||||
v-model="activeName"
|
||||
:menus="menus"
|
||||
:multiple="multiple"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
:search-config="searchConfig"
|
||||
title="标题"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
@confirm="confirm"
|
||||
></tiny-select-mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Filter, Button, SelectMobile } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFilter: Filter,
|
||||
TinySelectMobile: SelectMobile,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [1, [2], [1, 2, 3]],
|
||||
data: filterList,
|
||||
// ---- select config ----
|
||||
currentIndex: -1,
|
||||
activeName: 1,
|
||||
boxVisibility: false,
|
||||
multiple: false,
|
||||
menus: [],
|
||||
searchConfig: {
|
||||
options: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
console.log(111)
|
||||
},
|
||||
panel({ index, modelValue }) {
|
||||
if (index !== -1) {
|
||||
const config = this.data[index]
|
||||
this.currentIndex = index
|
||||
this.multiple = config.multiple
|
||||
this.menus = config.options
|
||||
this.activeName = this.value[index]
|
||||
this.boxVisibility = true
|
||||
}
|
||||
},
|
||||
confirm(data) {
|
||||
console.log('val', data)
|
||||
const value = this.value.slice(0)
|
||||
const modelValue = this.multiple ? data.checkIds.slice(0) : data
|
||||
value[this.currentIndex] = modelValue
|
||||
this.value = value
|
||||
this.currentIndex = -1
|
||||
this.$refs.filter.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filterList = [
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: false,
|
||||
label: '状态选择',
|
||||
placeholder: '状态',
|
||||
options: [
|
||||
{
|
||||
label: '单选选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: true,
|
||||
label: '类目一状态',
|
||||
placeholder: '类目一类目一',
|
||||
options: [
|
||||
{
|
||||
label: '类目一选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: true,
|
||||
label: '类目二状态',
|
||||
placeholder: '类目二',
|
||||
options: [
|
||||
{
|
||||
label: '类目二选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const list = [
|
||||
{
|
||||
id: 1,
|
||||
label: '进行中'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '未开始'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '已完成'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '已过期已过期已过期已过期已过期已过期已过期'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<div>
|
||||
<p><tiny-button @click="value = [1, [1], [1, 2]]">点击改变当前值</tiny-button> 值：{{ value }}</p>
|
||||
<br />
|
||||
<tiny-filter
|
||||
ref="filter"
|
||||
v-model="value"
|
||||
manual
|
||||
:data="data"
|
||||
@update:modelValue="update"
|
||||
@panel="panel"
|
||||
></tiny-filter>
|
||||
|
||||
<tiny-select-view
|
||||
v-model="activeName"
|
||||
:menus="menus"
|
||||
:multiple="multiple"
|
||||
value-field="value"
|
||||
text-field="label"
|
||||
:search-config="searchConfig"
|
||||
title="标题"
|
||||
:visible="boxVisibility"
|
||||
@update:visible="boxVisibility = $event"
|
||||
@confirm="confirm"
|
||||
></tiny-select-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Filter, Button, SelectView } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFilter: Filter,
|
||||
TinySelectView: SelectView,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: [1, [2], [1, 2, 3]],
|
||||
data: filterList,
|
||||
// ---- select config ----
|
||||
currentIndex: -1,
|
||||
activeName: 1,
|
||||
boxVisibility: false,
|
||||
multiple: false,
|
||||
menus: [],
|
||||
searchConfig: {
|
||||
options: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
console.log(111)
|
||||
},
|
||||
panel({ index, modelValue }) {
|
||||
if (index !== -1) {
|
||||
const config = this.data[index]
|
||||
this.currentIndex = index
|
||||
this.multiple = config.multiple
|
||||
this.menus = config.options
|
||||
this.activeName = this.value[index]
|
||||
this.boxVisibility = true
|
||||
}
|
||||
},
|
||||
confirm(data) {
|
||||
console.log('val', data)
|
||||
const value = this.value.slice(0)
|
||||
const modelValue = this.multiple ? data.checkIds.slice(0) : data
|
||||
value[this.currentIndex] = modelValue
|
||||
this.value = value
|
||||
this.currentIndex = -1
|
||||
this.$refs.filter.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filterList = [
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: false,
|
||||
label: '状态选择',
|
||||
placeholder: '状态',
|
||||
options: [
|
||||
{
|
||||
label: '单选选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: true,
|
||||
label: '类目一状态',
|
||||
placeholder: '类目一类目一',
|
||||
options: [
|
||||
{
|
||||
label: '类目一选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tag',
|
||||
multiple: true,
|
||||
label: '类目二状态',
|
||||
placeholder: '类目二',
|
||||
options: [
|
||||
{
|
||||
label: '类目二选项',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已审批',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已驳回',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已转交已转交',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: '已退回',
|
||||
value: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
const list = [
|
||||
{
|
||||
id: 1,
|
||||
label: '进行中'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '未开始'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '已完成'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '已过期已过期已过期已过期已过期已过期已过期'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -12,21 +12,20 @@
|
|||
>
|
||||
<template #icon="{ active, show }">
|
||||
<div style="text-align: center; cursor: pointer" :style="{ color: active ? '#0067D1' : '#333' }">
|
||||
插槽内容可以很长很长很长很长 {{ show ? '^' : 'v' }}
|
||||
插槽内容可以很长 {{ show ? '^' : 'v' }}
|
||||
<icon-express-search style="fill: currentColor; width: 20px; height: 20px"></icon-express-search>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer="{ cancel, reset, confirm }">
|
||||
面板底部插槽，调换按钮顺序
|
||||
<tiny-button
|
||||
tiny_mode="mobile-first"
|
||||
key="btn2"
|
||||
size="small"
|
||||
button-class="w-20 mr-4 flex-1"
|
||||
custom-class="w-20 mr-4 flex-1"
|
||||
@click="reset(true)"
|
||||
>重置-自定义</tiny-button
|
||||
>
|
||||
<tiny-button tiny_mode="mobile-first" key="btn1" size="small" button-class="w-20 mr-4 flex-1" @click="cancel"
|
||||
<tiny-button tiny_mode="mobile-first" key="btn1" size="small" custom-class="w-20 mr-4 flex-1" @click="cancel"
|
||||
>取消-自定义</tiny-button
|
||||
>
|
||||
<tiny-button
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
key="btn3"
|
||||
type="primary"
|
||||
size="small"
|
||||
button-class="w-20 flex-1"
|
||||
custom-class="w-20 flex-1"
|
||||
@click="confirm(true)"
|
||||
>确定-自定义</tiny-button
|
||||
>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,50 @@ export default {
|
|||
'en-US': 'basic usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>过滤类型 <code>type</code> 包括 <code>单选、多选、枚举单选 (radio | checkbox | enum-radio)<code>。</p>',
|
||||
'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> 开启多选功能
|
||||
</p>`,
|
||||
'en-US': '<p>button type</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'manual',
|
||||
name: {
|
||||
'zh-CN': '过滤选项自定义1',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>manual</code> 属性开启过滤选项自定义功能。调用 <code>SelectMobile</code> 组件的示例</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['manual.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'manual2',
|
||||
name: {
|
||||
'zh-CN': '过滤选项自定义2',
|
||||
'en-US': 'button round'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>manual</code> 属性开启过滤选项自定义功能。调用 <code>SelectView</code> 组件的</p>',
|
||||
'en-US': '<p>button round</p>'
|
||||
},
|
||||
codeFiles: ['manual2.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'column-num',
|
||||
name: {
|
||||
|
|
@ -35,7 +73,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组类型 <code>type</code> 包括 <code>单选、多选 (radio | checkbox)</code>。<p>',
|
||||
'<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组只支持 <code>type=tag</code> 类型，通过 <code>multiple</code> 开启多选功能。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['filter-group.vue']
|
||||
|
|
@ -47,11 +85,22 @@ export default {
|
|||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>设置过滤类型 <code>type: "enum-radio"</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>',
|
||||
'zh-CN': `<p>设置过滤类型 <code>type: 'list'</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['enumeration.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '枚举单选',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>筛选图标 <code>icon</code> 插槽和面板底部按钮组 <code>footer</code> 插槽。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div style="display: flex; justify-content: space-around; width: 300px">
|
||||
<tiny-image :image-size="100" :src="url"></tiny-image>
|
||||
<br />
|
||||
<tiny-image :image-size="100" round :src="url"></tiny-image>
|
||||
</div>
|
||||
<tiny-image :src="url"></tiny-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="flex justify-center items-center text-xs">
|
||||
<div class="w-80 py-8 text-center inline-block">
|
||||
<div class="mb-5">默认</div>
|
||||
<tiny-image :src="url" :image-size="200"></tiny-image>
|
||||
</div>
|
||||
<div class="w-80 py-8 text-center inline-block">
|
||||
<div class="mb-5">自定义</div>
|
||||
<tiny-image :src="url" :image-size="200">
|
||||
<template #error>
|
||||
<div class="h-full flex items-center justify-center">自定义加载失败内容</div>
|
||||
</template>
|
||||
</tiny-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="flex">
|
||||
<div class="px-5">
|
||||
<p>默认</p>
|
||||
<tiny-image :src="url" :image-size="600"></tiny-image>
|
||||
</div>
|
||||
<div class="px-5">
|
||||
<p>自定义</p>
|
||||
<tiny-image :src="url" :image-size="600">
|
||||
<template #placeholder>
|
||||
<div class="image-slot">加载中<span>...</span></div>
|
||||
</template>
|
||||
</tiny-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '/static/images/9.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="block h-80 overflow-auto">
|
||||
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'https://his-beta.huawei.com/opentiny/webnova/static/img/featuremap.c5e796e.png'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-image :src="url1" @error="errorHandler" :image-size="200"></tiny-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url1: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
errorHandler() {
|
||||
Modal.message({ message: '加载失败触发事件', status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-image :src="url" @load="loadHandler"></tiny-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '/static/images/1.jpg'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadHandler() {
|
||||
Modal.message({ message: '加载成功触发事件', status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<label><input v-model="pageOnly" class="align-middle" type="checkbox" name="button" />pageOnly</label>
|
||||
<label><input v-model="teleport" class="align-middle" type="checkbox" name="button" />teleport</label>
|
||||
<tiny-fullscreen
|
||||
:teleport="teleport"
|
||||
:page-only="pageOnly"
|
||||
:z-index="999"
|
||||
:fullscreen="fullscreen"
|
||||
@update:fullscreen="fullscreen = $event"
|
||||
>
|
||||
<div
|
||||
data-tag="tiny-fullscreen-wrapper"
|
||||
class="tiny-fullscreen-wrapper w-full h-full flex flex-col justify-center bg-color-bg-2"
|
||||
>
|
||||
<tiny-button class="self-center" @click="toggle">{{
|
||||
fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen'
|
||||
}}</tiny-button>
|
||||
<tiny-image-viewer
|
||||
v-show="!fullscreen"
|
||||
modal-view
|
||||
is-menu-view
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
<tiny-image-viewer
|
||||
modal-view
|
||||
:modal-height="450"
|
||||
v-show="fullscreen"
|
||||
is-menu-view
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
</div>
|
||||
</tiny-fullscreen>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button, Fullscreen } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button,
|
||||
TinyFullscreen: Fullscreen
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullscreen: false,
|
||||
teleport: true,
|
||||
pageOnly: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
},
|
||||
toggle() {
|
||||
this.fullscreen = !this.fullscreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer is-menu-view :url-list="srcList" show-index @delete="deleteHander"></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
{ url: '/static/images/3.jpg', name: '名称1' },
|
||||
{ url: '/static/images/1.jpg', name: '名称2' },
|
||||
{ url: '/static/images/3.jpg', name: '名称3' },
|
||||
{ url: '/static/images/1.jpg', name: '名称4' },
|
||||
{ url: '/static/images/3.jpg', name: '名称5' },
|
||||
{ url: '/static/images/1.jpg', name: '名称6' },
|
||||
{ url: '/static/images/3.jpg', name: '名称7' },
|
||||
{ url: '/static/images/1.jpg', name: '名称8' },
|
||||
{ url: '/static/images/3.jpg', name: '名称9' },
|
||||
{ url: '/static/images/1.jpg', name: '名称10' },
|
||||
{ url: '/static/images/3.jpg', name: '名称11' },
|
||||
{ url: '/static/images/1.jpg', name: '名称12' },
|
||||
{ url: '/static/images/3.jpg', name: '名称13' },
|
||||
{ url: '/static/images/1.jpg', name: '名称14' },
|
||||
{ url: '/static/images/3.jpg', name: '名称15' },
|
||||
{ url: '/static/images/1.jpg', name: '名称16' },
|
||||
{ url: '/static/images/3.jpg', name: '名称17' },
|
||||
{ url: '/static/images/1.jpg', name: '名称18' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer is-menu-view :url-list="srcList" show-index @delete="deleteHander"></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander() {
|
||||
this.$message({ message: '已删除照片', status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer
|
||||
bg-color="white"
|
||||
is-menu-view
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander() {
|
||||
this.$message({ message: '已删除照片', status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="visible3 = true">弹出Dialog</tiny-button>
|
||||
<tiny-dialog-box :visible="visible3" @update:visible="visible3 = $event" :dragable="true" title="消息" width="30%">
|
||||
<div>
|
||||
<tiny-image class="w-20 h-20" :src="url" :preview-src-list="srcList"></tiny-image>
|
||||
</div>
|
||||
<template #footer>
|
||||
<tiny-button hue="primary" @click="visible3 = false">确定</tiny-button>
|
||||
</template>
|
||||
</tiny-dialog-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, DialogBox, Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: { TinyButton: Button, TinyDialogBox: DialogBox, TinyImage: Image },
|
||||
data() {
|
||||
return {
|
||||
visible3: false,
|
||||
url: '/static/images/1.jpg',
|
||||
srcList: ['/static/images/1.jpg', '/static/images/3.jpg']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
import { Image, Message } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
url: '/static/images/1.jpg',
|
||||
srcList: ['/static/images/1.jpg', '/static/images/2.jpg', '/static/images/3.jpg']
|
||||
srcList: ['/static/images/1.jpg', '/static/images/3.jpg']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<tiny-image :imageSize="100" :src="url" :preview-src-list="srcList" :z-index="3000"></tiny-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '/static/images/1.jpg',
|
||||
srcList: ['/static/images/1.jpg', '/static/images/3.jpg']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div class="flex justify-around w-30">
|
||||
<tiny-image :image-size="100" :src="url"></tiny-image>
|
||||
<br />
|
||||
<tiny-image :image-size="100" round :src="url"></tiny-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Image } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImage: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '/static/images/1.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<label><input v-model="pageOnly" class="align-middle" type="checkbox" name="button" />pageOnly</label>
|
||||
<label><input v-model="teleport" class="align-middle" type="checkbox" name="button" />teleport</label>
|
||||
<tiny-fullscreen
|
||||
:teleport="teleport"
|
||||
:page-only="pageOnly"
|
||||
:z-index="999"
|
||||
:fullscreen="fullscreen"
|
||||
@update:fullscreen="fullscreen = $event"
|
||||
>
|
||||
<div
|
||||
data-tag="tiny-fullscreen-wrapper"
|
||||
class="tiny-fullscreen-wrapper w-full h-full flex flex-col items-center justify-center bg-color-bg-2"
|
||||
>
|
||||
<tiny-button type="button" @click="toggle">
|
||||
{{ fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen' }}
|
||||
</tiny-button>
|
||||
<tiny-image-viewer
|
||||
v-show="!fullscreen"
|
||||
modal-view
|
||||
is-thumbnail
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
<tiny-image-viewer
|
||||
modal-view
|
||||
:modal-height="450"
|
||||
v-show="fullscreen"
|
||||
is-thumbnail
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
</div>
|
||||
</tiny-fullscreen>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button, Fullscreen } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button,
|
||||
TinyFullscreen: Fullscreen
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullscreen: false,
|
||||
teleport: true,
|
||||
pageOnly: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
},
|
||||
toggle() {
|
||||
this.fullscreen = !this.fullscreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer is-thumbnail :url-list="srcList" show-index @delete="deleteHander"></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
{ url: '/static/images/3.jpg', name: '名称1' },
|
||||
{ url: '/static/images/1.jpg', name: '名称2' },
|
||||
{ url: '/static/images/3.jpg', name: '名称3' },
|
||||
{ url: '/static/images/1.jpg', name: '名称4' },
|
||||
{ url: '/static/images/3.jpg', name: '名称5' },
|
||||
{ url: '/static/images/1.jpg', name: '名称6' },
|
||||
{ url: '/static/images/3.jpg', name: '名称7' },
|
||||
{ url: '/static/images/1.jpg', name: '名称8' },
|
||||
{ url: '/static/images/3.jpg', name: '名称9' },
|
||||
{ url: '/static/images/1.jpg', name: '名称10' },
|
||||
{ url: '/static/images/3.jpg', name: '名称11' },
|
||||
{ url: '/static/images/1.jpg', name: '名称12' },
|
||||
{ url: '/static/images/3.jpg', name: '名称13' },
|
||||
{ url: '/static/images/1.jpg', name: '名称14' },
|
||||
{ url: '/static/images/3.jpg', name: '名称15' },
|
||||
{ url: '/static/images/1.jpg', name: '名称16' },
|
||||
{ url: '/static/images/3.jpg', name: '名称17' },
|
||||
{ url: '/static/images/1.jpg', name: '名称18' },
|
||||
{ url: '/static/images/1.jpg', name: '名称19' },
|
||||
{ url: '/static/images/3.jpg', name: '名称20' },
|
||||
{ url: '/static/images/1.jpg', name: '名称21' },
|
||||
{ url: '/static/images/3.jpg', name: '名称22' },
|
||||
{ url: '/static/images/1.jpg', name: '名称23' },
|
||||
{ url: '/static/images/3.jpg', name: '名称24' },
|
||||
{ url: '/static/images/1.jpg', name: '名称25' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer
|
||||
bg-color="white"
|
||||
is-thumbnail
|
||||
:url-list="srcList"
|
||||
show-index
|
||||
@delete="deleteHander"
|
||||
></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="() => (show = !show)">点我触发</tiny-button>
|
||||
<div v-if="show">
|
||||
<tiny-image-viewer is-thumbnail :url-list="srcList" show-index @delete="deleteHander"></tiny-image-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImageViewer, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyImageViewer: ImageViewer,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
srcList: [
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg',
|
||||
'/static/images/3.jpg',
|
||||
'/static/images/1.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHander(imageName) {
|
||||
this.$message({ message: `已删除${imageName}图片`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -51,6 +51,201 @@ export default {
|
|||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview-src-list.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'round',
|
||||
name: {
|
||||
'zh-CN': '尺寸类型',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `image-size` 设置预览的图片尺寸大小，通过 round 设置是否展示圆形。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['round.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-placeholder',
|
||||
name: {
|
||||
'zh-CN': '占位内容',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `slot = placeholder` 自定义占位内容。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-placeholder.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'lazy-load',
|
||||
name: {
|
||||
'zh-CN': '懒加载',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>可通过 `lazy` 开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 `scroll-container` 来设置滚动容器，若未定义，则为最近一个 `overflow` 值为 `auto` 或 `scroll` 的父元素。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['lazy-load.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'preview-z-index',
|
||||
name: {
|
||||
'zh-CN': '图片预览层级',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `z-index` 设置预览图片的层级。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview-z-index.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'load-event',
|
||||
name: {
|
||||
'zh-CN': '加载成功事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图片加载成功触发 `load` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['load-event.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'load-error',
|
||||
name: {
|
||||
'zh-CN': '加载失败事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图片加载失败触发 `error` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['load-error.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-load-failed-text',
|
||||
name: {
|
||||
'zh-CN': '加载失败',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 `slot = error` 自定义加载失败内容。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-load-failed-text.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'preview-in-dialog',
|
||||
name: {
|
||||
'zh-CN': '对话框中预览图片',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `dialog-box` 元素中嵌入 image 进行图片预览。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['preview-in-dialog.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'thumbnail',
|
||||
name: {
|
||||
'zh-CN': '缩略图视图（非模态）',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `is-thumbnail` 属性开启非模态缩略图视图的功能<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['thumbnail.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'thumbnail-modal-view',
|
||||
name: {
|
||||
'zh-CN': '缩略图视图（模态）',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `modal-view` 属性开启模态缩略图视图的功能，可以通过modal-height属性设置模态框内对应的高度，默认值为 400。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['thumbnail-modal-view.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'menu-view',
|
||||
name: {
|
||||
'zh-CN': '目录视图（非模态）',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `is-menu-view` 属性开启非模态目录视图的功能<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['menu-view.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'menu-modal-view',
|
||||
name: {
|
||||
'zh-CN': '目录视图（模态）',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 `modal-view` 属性开启模态目录视图的功能，可以通过`modal-height`属性设置模态框内对应的高度，默认值为 400。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['menu-modal-view.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'thumbnail-viewer-bg',
|
||||
name: {
|
||||
'zh-CN': '缩略图视图',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>缩略图视图背景<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['thumbnail-viewer-bg.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'menu-viewer-bg',
|
||||
name: {
|
||||
'zh-CN': '目录视图背景',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>目录视图<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['menu-viewer-bg.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'thumbnail-rename',
|
||||
name: {
|
||||
'zh-CN': '视图文件名-缩略图',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>视图文件名-缩略图<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['thumbnail-rename.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'menu-rename',
|
||||
name: {
|
||||
'zh-CN': '视图文件名-目录',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>视图文件名-目录<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['menu-rename.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-input v-model="text" placeholder="请输入内容" custom-class="p-8"></tiny-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-input type="textarea" :height="100" v-model="input" placeholder="resize 为默认"></tiny-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="inline-block">
|
||||
<tiny-input
|
||||
class="w-full"
|
||||
v-model="input"
|
||||
display-only
|
||||
display-only-content="内容只读"
|
||||
placeholder="先获取焦点后再失去焦点"
|
||||
></tiny-input>
|
||||
<br />
|
||||
<tiny-input class="w-full" v-model="input1" display-only placeholder="先获取焦点后再失去焦点"></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
input1: '只读态'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="demo-input">
|
||||
<tiny-input
|
||||
type="textarea"
|
||||
v-model="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
:hover-expand="true"
|
||||
></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-input .tiny-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="demo-input">
|
||||
<tiny-input type="textarea" v-model="textarea" autosize :hover-expand="true"></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-input .tiny-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="w-40">
|
||||
<tiny-input v-model="input" mask disabled></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '文字过长时会显示点点点，并且鼠标悬浮出现tip'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="w-40">
|
||||
<tiny-input v-model="input" mask display-only></tiny-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '文字过长时会显示点点点，并且鼠标悬浮出现tip'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -163,6 +163,18 @@ export default {
|
|||
},
|
||||
codeFiles: ['resize.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-height',
|
||||
name: {
|
||||
'zh-CN': '自定义最小文本域高度',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 height 属性设置文本域的最小高度。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-height.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'rows',
|
||||
name: {
|
||||
|
|
@ -418,6 +430,18 @@ export default {
|
|||
},
|
||||
codeFiles: ['event-focus.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-input',
|
||||
name: {
|
||||
'zh-CN': '输入事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>输入框输入时触发 input 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-input.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'method-addMemory',
|
||||
name: {
|
||||
|
|
@ -465,6 +489,30 @@ export default {
|
|||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['method-select.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义样式',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 custom-class 属性设置自定义样式。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'display-only-content',
|
||||
name: {
|
||||
'zh-CN': '内容区只读',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过 display-only或display-only-content 属性设置只读态。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-content.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.new-loading .tiny-tailwind-text {
|
||||
color: darkgreen;
|
||||
:deep(.tiny-loading__spinner .tiny-loading__text) {
|
||||
color: darkorange;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-menu :data="treeData" :actived-keys="activedKeys"> </tiny-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activedKeys: 40102,
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-menu :data="treeData"></tiny-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-menu :data="treeData" empty-text="空数据"></tiny-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<tiny-menu :data="treeData" @current-change="currentChange"></tiny-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentChange(data) {
|
||||
Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<tiny-menu :data="treeData" @node-click="handleNodeClick"></tiny-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<tiny-menu :data="treeData" :expand-all="true"></tiny-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-menu :data="treeData" :expanded-keys="expandedKeys"> </tiny-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expandedKeys: [30101, 40102],
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-menu :data="treeData" :show-filter="true"> </tiny-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮',
|
||||
url: '#/webcore/v3/zh-CN/component/button'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期',
|
||||
url: '#/webcore/v3/zh-CN/component/datepicker'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框',
|
||||
url: '#/webcore/v3/zh-CN/component/dropdown'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间',
|
||||
url: '#/webcore/v3/zh-CN/component/droptimes'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框',
|
||||
url: '#/webcore/v3/zh-CN/component/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据',
|
||||
url: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<tiny-menu :data="treeData" only-check-children></tiny-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: [
|
||||
{
|
||||
id: 100,
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
id: 200,
|
||||
label: '指南',
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 300,
|
||||
label: '组件',
|
||||
children: [
|
||||
{
|
||||
id: 305,
|
||||
label: '组件'
|
||||
},
|
||||
{
|
||||
id: 301,
|
||||
label: '表单组件',
|
||||
children: [
|
||||
{
|
||||
id: 30101,
|
||||
label: 'Button 按钮'
|
||||
},
|
||||
{
|
||||
id: 30102,
|
||||
label: 'Datepicker 日期'
|
||||
},
|
||||
{
|
||||
id: 30103,
|
||||
label: 'Dropdown 下拉框'
|
||||
},
|
||||
{
|
||||
id: 30104,
|
||||
label: 'DropTimes 下拉时间'
|
||||
},
|
||||
{
|
||||
id: 30105,
|
||||
label: 'Input 输入框'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 302, label: '数据组件' },
|
||||
{ id: 303, label: '导航组件' },
|
||||
{ id: 304, label: '业务组件' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 400,
|
||||
label: '教程',
|
||||
children: [
|
||||
{
|
||||
id: 401,
|
||||
label: '页面布局',
|
||||
children: [
|
||||
{
|
||||
id: 40101,
|
||||
label: '添加标签页',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 40102,
|
||||
label: '标签页配置'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
label: '查询功能',
|
||||
children: [
|
||||
{
|
||||
id: 40201,
|
||||
label: '添加查询页面'
|
||||
},
|
||||
{
|
||||
id: 40202,
|
||||
label: '列表属性配置'
|
||||
},
|
||||
{
|
||||
id: 40203,
|
||||
label: '通讯录查询'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
label: '新增功能',
|
||||
children: [
|
||||
{
|
||||
id: 40301,
|
||||
label: '表单新增功能'
|
||||
},
|
||||
{
|
||||
id: 40302,
|
||||
label: '表单数据验证'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
label: '编辑功能',
|
||||
children: [
|
||||
{
|
||||
id: 40401,
|
||||
label: '开启编辑功能'
|
||||
},
|
||||
{
|
||||
id: 40402,
|
||||
label: '保存表格数据'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 500,
|
||||
label: '规范'
|
||||
},
|
||||
{
|
||||
id: 600,
|
||||
label: '性能'
|
||||
},
|
||||
{
|
||||
id: 700,
|
||||
label: '案例'
|
||||
},
|
||||
{
|
||||
id: 800,
|
||||
label: '更新日志'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Menu 菜单
|
||||
---
|
||||
|
||||
# Menu 菜单
|
||||
|
||||
<div>
|
||||
|
||||
以树形方式显示的菜单，适用于版型定制的一种组件。
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Menu 菜单
|
||||
---
|
||||
|
||||
# Menu 菜单
|
||||
|
||||
<div>
|
||||
|
||||
以树形方式显示的菜单，适用于版型定制的一种组件。
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': `<p>通过 <code>data</code> 设置树形菜单的数据。<br>
|
||||
注意：由于树形菜单是通过节点 id 来查找子节点和关联父节点的，所以必须保证 id 的必填性和唯一性。<br>
|
||||
树形菜单移动端最多只能展示两层数据结构<p>`,
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'actived-keys',
|
||||
name: {
|
||||
'zh-CN': '默认高亮',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `actived-keys` 设置初始化展开的某个节点高亮。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['actived-keys.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'empty-text',
|
||||
name: {
|
||||
'zh-CN': '自定义空数据文本',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过属性 `empty-text` 配置空数据显示文本。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['empty-text.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'expand-all',
|
||||
name: {
|
||||
'zh-CN': '默认展开全部菜单',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过属性 `expand-all` 配置默认展开全部菜单。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['expand-all.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'expanded-keys',
|
||||
name: {
|
||||
'zh-CN': '默认展开某节点',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `expanded-keys` 设置初始化展开某一节点 。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['expanded-keys.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'filter-node',
|
||||
name: {
|
||||
'zh-CN': '菜单搜索',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可配置 `show-filter` 开启菜单搜索。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['filter-node.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'only-check-children',
|
||||
name: {
|
||||
'zh-CN': '父级不可选，只能选无子级项',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可通过属性 `only-check-children` 配置父级点击只能展开，不能跳转。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['only-check-children.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-current-change',
|
||||
name: {
|
||||
'zh-CN': '事件1',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`current-change` 当前选中节点变化时触发的事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-current-change.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-node-click',
|
||||
name: {
|
||||
'zh-CN': '事件2',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`node-click` 节点被点击时的回调。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['event-node-click.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'with-icon',
|
||||
name: {
|
||||
'zh-CN': '带图标',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过在 data 里面配置`customIcon`属性进行图标组件传值，设置带图标树形菜单<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
},
|
||||
codeFiles: ['with-icon.vue']
|
||||
}
|
||||
],
|
||||
apis: []
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-menu :data="treeData"></tiny-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from '@opentiny/vue'
|
||||
import { IconPlusCircle, IconPlusSquare, IconPreChecked, IconNode, IconNew } from '@opentiny/vue-icon'
|
||||
export default {
|
||||
components: {
|
||||
TinyMenu: Menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData().then((data) => {
|
||||
this.treeData = data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
return new Promise((resolve) => {
|
||||
resolve([
|
||||
{
|
||||
id: 1,
|
||||
label: '首页',
|
||||
customIcon: IconPlusCircle()
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '指南',
|
||||
customIcon: IconPlusSquare()
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '规范',
|
||||
customIcon: IconPreChecked()
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '教程',
|
||||
customIcon: IconNode()
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '性能',
|
||||
customIcon: IconNew()
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '组件',
|
||||
customIcon: IconNew(),
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
label: '引入组件',
|
||||
customIcon: IconNew(),
|
||||
children: [
|
||||
{ id: 20101, label: '按需引入' },
|
||||
{ id: 20102, label: '完整引入' }
|
||||
]
|
||||
},
|
||||
{ id: 202, label: '后端适配器' },
|
||||
{ id: 203, label: '服务代理' },
|
||||
{ id: 204, label: '构建部署' }
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
messageClick() {
|
||||
this.$message('message 提示框')
|
||||
Modal.message('message 提示框')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -15,17 +15,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
baseClick() {
|
||||
this.$message('默认3000ms后自动关闭提示框')
|
||||
Modal.message('默认3000ms后自动关闭提示框')
|
||||
},
|
||||
successClick() {
|
||||
this.$message({
|
||||
Modal.message({
|
||||
message: '500ms后自动关闭提示框',
|
||||
status: 'success',
|
||||
duration: '500'
|
||||
})
|
||||
},
|
||||
errorClick() {
|
||||
this.$message({
|
||||
Modal.message({
|
||||
message: '5000ms后自动关闭提示框',
|
||||
status: 'error',
|
||||
duration: '5000'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
this.$message({ message: '不允许重复点击', id: 'unique' })
|
||||
Modal.message({ message: '不允许重复点击', id: 'unique' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -16,16 +16,16 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
baseClick() {
|
||||
this.$message({ message: '基本提示图标', status: 'info', showClose: true })
|
||||
Modal.message({ message: '基本提示图标', status: 'info', showClose: true })
|
||||
},
|
||||
successClick() {
|
||||
this.$message({ message: '成功提示图标', status: 'success' })
|
||||
Modal.message({ message: '成功提示图标', status: 'success' })
|
||||
},
|
||||
warningClick() {
|
||||
this.$message({ message: '警告提示图标', status: 'warning' })
|
||||
Modal.message({ message: '警告提示图标', status: 'warning' })
|
||||
},
|
||||
errorClick() {
|
||||
this.$message({ message: '错误提示图标', status: 'error' })
|
||||
Modal.message({ message: '错误提示图标', status: 'error' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,14 @@
|
|||
<tiny-button @click="errorClick" :reset-time="0">失败提示框</tiny-button>
|
||||
<tiny-button @click="confirmClick" :reset-time="0">确认提示框</tiny-button>
|
||||
<tiny-button @click="warnningClick" :reset-time="0">警告提示框</tiny-button>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-button ref="popRef" @click="popClickRef" :reset-time="0">气泡确认框-Ref</tiny-button>
|
||||
<tiny-button @click="popClickTarget" :reset-time="0">气泡确认框-Target</tiny-button>
|
||||
<br />
|
||||
<br />
|
||||
<tiny-button ref="popRefInfo" @click="popInfoClick" :reset-time="0">信息气泡确认框</tiny-button>
|
||||
<tiny-button ref="popRefWarning" @click="popWarningClick" :reset-time="0">警告气泡确认框</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,6 +38,65 @@ export default {
|
|||
},
|
||||
warnningClick() {
|
||||
Modal.alert({ message: '删除后数据不可恢复，确定删除吗？', title: '删除确认', status: 'warning' })
|
||||
},
|
||||
popClickRef() {
|
||||
Modal.popconfirm({
|
||||
title: '这是气泡标题',
|
||||
message: '这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长',
|
||||
reference: this.$refs.popRef.$el,
|
||||
events: {
|
||||
show() {
|
||||
console.log('show')
|
||||
},
|
||||
hide() {
|
||||
console.log('hide')
|
||||
},
|
||||
confirm() {
|
||||
console.log('confirm')
|
||||
}
|
||||
}
|
||||
}).then((type) => {
|
||||
console.log('type', type)
|
||||
})
|
||||
},
|
||||
popClickTarget(event) {
|
||||
Modal.popconfirm({
|
||||
title: '这是气泡标题',
|
||||
message: '这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长',
|
||||
reference: event.currentTarget,
|
||||
events: {
|
||||
show() {
|
||||
console.log('show')
|
||||
},
|
||||
hide() {
|
||||
console.log('hide')
|
||||
},
|
||||
confirm() {
|
||||
console.log('confirm')
|
||||
}
|
||||
}
|
||||
}).then((type) => {
|
||||
console.log('type', type)
|
||||
})
|
||||
},
|
||||
popInfoClick() {
|
||||
Modal.popconfirm({
|
||||
type: 'info',
|
||||
title: '这是提示气泡',
|
||||
message: '内容很短',
|
||||
reference: this.$refs.popRefInfo.$el,
|
||||
placement: 'right',
|
||||
cancelButton: false
|
||||
})
|
||||
},
|
||||
popWarningClick() {
|
||||
Modal.popconfirm({
|
||||
type: 'warning',
|
||||
title: '这是警告气泡',
|
||||
message: '内容很短',
|
||||
reference: this.$refs.popRefWarning.$el,
|
||||
placement: 'bottom'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-numeric v-model="num1" allow-empty></tiny-numeric>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Numeric } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyNumeric: Numeric
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
num1: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<tiny-numeric v-model="stepNum" :controls="false"></tiny-numeric>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Numeric } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyNumeric: Numeric
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
step: 2,
|
||||
stepNum: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue