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

docs(components): Delete excess document examples (#1127)

This commit is contained in:
chenxi-20 2023-12-14 15:42:45 +08:00 committed by GitHub
parent eda5b4f86e
commit 3e7c167e7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 7 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/sites/demos/pc/app/anchor/webdoc/anchor.js
View File

@ -25,9 +25,9 @@ export default {
'name': { 'zh-CN': '滚动容器', 'en-US': 'Rolling Container' },
'desc': {
'zh-CN': `通过 <code>container-id</code> 设置滚动容器， <code>link-click</code> 监听锚点点击事件，阻止浏览器默认行为，实现单页面 <code>hash</code> 路由模式的页内跳转，在指定容器内滚动。<br/>
<code>mask-class</code> 设置自定义类名，高亮显示导航的目标元素。`,
<code>mark-class</code> 设置自定义类名，高亮显示导航的目标元素。`,
'en-US': `By setting the scrolling container through <code>container-id</code> , <code>link-click</code> listens for anchor click events, prevents browser default behavior, and implements single page <code>hash</code> routing mode for page hopping, scrolling within the specified container<br/>
<code>mask-class</code> Set a custom class name to highlight the target element for navigation.`
<code>mark-class</code> Set a custom class name to highlight the target element for navigation.`
},
'codeFiles': ['set-container.vue']
},
@ -77,7 +77,7 @@ export default {
'demoId': 'basic-usage'
},
{
'name': 'mask-class',
'name': 'mark-class',
'type': 'string',
'defaultValue': '',
'desc': {

14
examples/sites/demos/pc/app/file-upload/accept-file-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-file-upload :action="action" accept=".doc,.docx" :file-list="fileList2">
<tiny-button type="primary">点击上传</tiny-button>
</tiny-file-upload>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
const action = ref('http://localhost:3000/api/upload')
const fileList = ref([])
const fileList2 = ref([])
</script>

23
examples/sites/demos/pc/app/file-upload/accept-file.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-file-upload :action="action" accept=".doc,.docx" :file-list="fileList2">
<tiny-button type="primary">点击上传</tiny-button>
</tiny-file-upload>
</template>
<script lang="jsx">
import { FileUpload, Button } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload,
TinyButton: Button
},
data() {
return {
action: 'http://localhost:3000/api/upload',
fileList: [],
fileList2: []
}
}
}
</script>

2
examples/sites/demos/pc/app/file-upload/drag-upload.spec.ts
View File

@ -15,6 +15,6 @@ test('是否可以拖拽上传', async ({ page }) => {
await expect(drag).toHaveCSS('width', '360px')
await expect(drag).toHaveCSS('height', '180px')
await fileChooser.setFiles(currentPath)
await expect(lists.nth(0)).toHaveText(/测试.jpg/)
await lists.getByText('测试.jpg').isVisible()
await expect(input).toHaveAttribute('accept', '.png,.jpeg,.jpg')
})

20
examples/sites/demos/pc/app/file-upload/dynamic-disable-composition-api.vue
View File

@ -1,20 +0,0 @@
<template>
<tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" disabled>
<template #trigger>
<tiny-button type="primary">选取文件</tiny-button>
</template>
</tiny-file-upload>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
const action = ref('http://localhost:3000/api/upload')
const fileList = ref([
{
name: 'test1',
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
}
])
</script>

29
examples/sites/demos/pc/app/file-upload/dynamic-disable.vue
View File

@ -1,29 +0,0 @@
<template>
<tiny-file-upload ref="upload" :action="action" :file-list="fileList" disabled>
<template #trigger>
<tiny-button type="primary">选取文件</tiny-button>
</template>
</tiny-file-upload>
</template>
<script lang="jsx">
import { FileUpload, Button } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload,
TinyButton: Button
},
data() {
return {
action: 'http://localhost:3000/api/upload',
fileList: [
{
name: 'test1',
url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
}
]
}
}
}
</script>

21
examples/sites/demos/pc/app/file-upload/jalor-request-composition-api.vue
View File

@ -1,21 +0,0 @@
<template>
<tiny-file-upload ref="uploadRef" :data="requestData" :before-upload="beforeUpload">
<template #trigger>
<tiny-button type="primary">选取文件</tiny-button>
</template>
</tiny-file-upload>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
const requestData = ref({
id: 123
})
function beforeUpload() {
Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
return true
}
</script>

31
examples/sites/demos/pc/app/file-upload/jalor-request.vue
View File

@ -1,31 +0,0 @@
<template>
<tiny-file-upload ref="upload" :data="requestData" :before-upload="beforeUpload">
<template #trigger>
<tiny-button type="primary">选取文件</tiny-button>
</template>
</tiny-file-upload>
</template>
<script lang="jsx">
import { FileUpload, Button, Modal } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload,
TinyButton: Button
},
data() {
return {
requestData: {
id: 123
}
}
},
methods: {
beforeUpload() {
Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
return true
}
}
}
</script>

4
examples/sites/demos/pc/app/file-upload/picture-card.spec.ts
View File

@ -27,12 +27,12 @@ test('照片墙', async ({ page }) => {
await expect(height).toEqual(148)
await expect(li).toHaveCount(1)
await fileChooser.setFiles(currentPath)
await expect(li).toHaveCount(2)
await first.hover()
await prevPic.click()
await expect(prevImg).toHaveAttribute('src', '/static/images/fruit.jpg')
await dialogClose.click()
await first.hover()
await delButton.click()
await expect(items).toHaveCount(1)
await page.waitForTimeout(200)
await li.isHidden()
})

34
examples/sites/demos/pc/app/file-upload/upload-file-filters-composition-api.vue
View File

@ -1,34 +0,0 @@
<template>
<tiny-file-upload :action="action" :filters="filters">
<tiny-button type="primary">点击上传</tiny-button>
</tiny-file-upload>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
const action = ref('http://localhost:3000/api/upload')
const filters = ref({
max_file_size: '1GB', // 文件大小
mime_types: [
{
// 文件格式，Title可选，为了便于分类。
title: 'Image files',
extensions: 'jpg,gif,png'
},
{
title: 'Zip files',
extensions: 'zip,rar'
},
{
title: 'Doc files',
extensions: 'doc,docx,xls,xlsx'
},
{
title: 'Video files',
extensions: 'mkv,mov,mp4,avi'
}
]
})
</script>

43
examples/sites/demos/pc/app/file-upload/upload-file-filters.vue
View File

@ -1,43 +0,0 @@
<template>
<tiny-file-upload :action="action" :filters="filters">
<tiny-button type="primary">点击上传</tiny-button>
</tiny-file-upload>
</template>
<script lang="jsx">
import { FileUpload, Button } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload,
TinyButton: Button
},
data() {
return {
action: 'http://localhost:3000/api/upload',
filters: {
max_file_size: '1GB', // 文件大小
mime_types: [
{
// 文件格式，Title可选，为了便于分类。
title: 'Image files',
extensions: 'jpg,gif,png'
},
{
title: 'Zip files',
extensions: 'zip,rar'
},
{
title: 'Doc files',
extensions: 'doc,docx,xls,xlsx'
},
{
title: 'Video files',
extensions: 'mkv,mov,mp4,avi'
}
]
}
}
}
}
</script>

2
examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
View File

@ -228,7 +228,7 @@ export default {
'type': 'number',
'defaultValue': '',
'desc': { 'zh-CN': '最大上传文件大小', 'en-US': 'Maximum size of files to be uploaded' },
'demoId': 'max-upload-file-size'
'demoId': 'file-type'
},
{
'name': 'multiple',

17
examples/sites/demos/pc/app/tabs/custom-tab-content-composition-api.vue
View File

@ -1,17 +0,0 @@
<template>
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
const activeName = ref('second')
</script>

26
examples/sites/demos/pc/app/tabs/custom-tab-content.vue
View File

@ -1,26 +0,0 @@
<template>
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>
<script lang="jsx">
import { Tabs, TabItem } from '@opentiny/vue'
export default {
components: {
TinyTabs: Tabs,
TinyTabItem: TabItem
},
data() {
return {
activeName: 'second'
}
}
}
</script>

25
examples/sites/demos/pc/app/tabs/prevent-tab-switching-composition-api.vue
View File

@ -1,25 +0,0 @@
<template>
<div style="clear: both; overflow: auto">
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" :editable="false" :with-close="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first">
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
const activeName = ref('third')
function beforeLeave() {
return false
}
</script>

33
examples/sites/demos/pc/app/tabs/prevent-tab-switching.vue
View File

@ -1,33 +0,0 @@
<template>
<div style="clear: both; overflow: auto">
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" :editable="false" :with-close="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first">
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>
<script lang="jsx">
import { Tabs, TabItem } from '@opentiny/vue'
export default {
components: {
TinyTabs: Tabs,
TinyTabItem: TabItem
},
data() {
return { activeName: 'third' }
},
methods: {
beforeLeave() {
return false
}
}
}
</script>

46
examples/sites/demos/pc/app/tabs/show-echarts-composition-api.vue
View File

@ -1,46 +0,0 @@
<template>
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="条形图组件" name="first">
<tiny-chart-bar ref="firstChartRef" :data="chartData"></tiny-chart-bar>
</tiny-tab-item>
<tiny-tab-item title="油量表组件" name="second">
<tiny-chart-gauge ref="secondChartRef" :data="chartData1"></tiny-chart-gauge>
</tiny-tab-item>
</tiny-tabs>
</template>
<script setup lang="jsx">
import { ref, watch, nextTick } from 'vue'
import {
Tabs as TinyTabs,
TabItem as TinyTabItem,
ChartBar as TinyChartBar,
ChartGauge as TinyChartGauge
} from '@opentiny/vue'
const activeName = ref('second')
const chartData = ref({
columns: ['日期', '余额', '年龄'],
rows: [
{ 日期: '1-1', 余额: 123, 年龄: 3 },
{ 日期: '1-2', 余额: 1223, 年龄: 6 },
{ 日期: '1-3', 余额: 2123, 年龄: 9 },
{ 日期: '1-4', 余额: 4123, 年龄: 12 },
{ 日期: '1-5', 余额: 3123, 年龄: 15 },
{ 日期: '1-6', 余额: 7123, 年龄: 20 }
]
})
const chartData1 = ref({
columns: ['type', 'value'],
rows: [{ type: '油量', value: 123 }]
})
const firstChartRef = ref()
const secondChartRef = ref()
watch(activeName, () => {
nextTick(() => {
firstChartRef.value.resize()
secondChartRef.value.resize()
})
})
</script>

52
examples/sites/demos/pc/app/tabs/show-echarts.vue
View File

@ -1,52 +0,0 @@
<template>
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="条形图组件" name="first">
<tiny-bar ref="firstChart" :data="chartData"></tiny-bar>
</tiny-tab-item>
<tiny-tab-item title="油量表组件" name="second">
<tiny-gauge ref="secondChart" :data="chartData1"></tiny-gauge>
</tiny-tab-item>
</tiny-tabs>
</template>
<script lang="jsx">
import { Tabs, TabItem, ChartBar, ChartGauge } from '@opentiny/vue'
export default {
components: {
TinyTabs: Tabs,
TinyTabItem: TabItem,
TinyBar: ChartBar,
TinyGauge: ChartGauge
},
data() {
return {
activeName: 'second',
chartData: {
columns: ['日期', '余额', '年龄'],
rows: [
{ 日期: '1-1', 余额: 123, 年龄: 3 },
{ 日期: '1-2', 余额: 1223, 年龄: 6 },
{ 日期: '1-3', 余额: 2123, 年龄: 9 },
{ 日期: '1-4', 余额: 4123, 年龄: 12 },
{ 日期: '1-5', 余额: 3123, 年龄: 15 },
{ 日期: '1-6', 余额: 7123, 年龄: 20 }
]
},
chartData1: {
columns: ['type', 'value'],
rows: [{ type: '油量', value: 123 }]
}
}
},
watch: {
activeName(v) {
this.$nextTick(() => {
this.$refs[`${v}Chart`].resize()
// 或者通过 echarts 实例调用 echarts 的 resize() 方法
// this.$refs[`chart${v}`].state.echarts.resize()
})
}
}
}
</script>

17
examples/sites/demos/pc/app/tabs/tabs-size-composition-api.vue
View File

@ -1,17 +0,0 @@
<template>
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
const activeName = ref('second')
</script>

26
examples/sites/demos/pc/app/tabs/tabs-size.vue
View File

@ -1,26 +0,0 @@
<template>
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>
<script lang="jsx">
import { Tabs, TabItem } from '@opentiny/vue'
export default {
components: {
TinyTabs: Tabs,
TinyTabItem: TabItem
},
data() {
return {
activeName: 'second'
}
}
}
</script>

33
examples/sites/demos/pc/app/wizard/status-icon-composition-api.vue
View File

@ -1,33 +0,0 @@
<template>
<tiny-wizard :data="dataSet" :status-icon="IconMarkOn"></tiny-wizard>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Wizard as TinyWizard } from '@opentiny/vue'
import { iconMarkOn } from '@opentiny/vue-icon'
const IconMarkOn = iconMarkOn()
const dataSet = ref([
{
name: '出差信息填写',
status: 'ready'
},
{
name: '项目信息填写',
status: 'doing'
},
{
name: '主管审批',
status: 'wait'
},
{
name: '权签人审批',
status: 'wait'
},
{
name: '完成申请',
status: 'wait'
}
])
</script>

41
examples/sites/demos/pc/app/wizard/status-icon.vue
View File

@ -1,41 +0,0 @@
<template>
<tiny-wizard :data="dataSet" :status-icon="IconMarkOn"></tiny-wizard>
</template>
<script lang="jsx">
import { Wizard } from '@opentiny/vue'
import { IconMarkOn } from '@opentiny/vue-icon'
export default {
components: {
TinyWizard: Wizard
},
data() {
return {
IconMarkOn: IconMarkOn(),
dataSet: [
{
name: '出差信息填写',
status: 'ready'
},
{
name: '项目信息填写',
status: 'doing'
},
{
name: '主管审批',
status: 'wait'
},
{
name: '权签人审批',
status: 'wait'
},
{
name: '完成申请',
status: 'wait'
}
]
}
}
}
</script>