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

feat: add dialog-select and refactor sites (#378)

This commit is contained in:
Kagol 2023-08-11 16:40:06 +08:00 committed by GitHub
parent 18d4d190d3
commit 164afb23e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8616 changed files with 220485 additions and 115511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.all-contributorsrc
View File

@ -293,24 +293,6 @@
"contributions": [
"test"
]
},
{
"login": "Zz-ZzzZ",
"name": "Zz-ZzzZ",
"avatar_url": "https://avatars.githubusercontent.com/u/48228016?v=4",
"profile": "https://zz-zzzz.github.io/",
"contributions": [
"test"
]
},
{
"login": "lyx-jay",
"name": "Lyx",
"avatar_url": "https://avatars.githubusercontent.com/u/39766860?v=4",
"profile": "https://github.com/lyx-jay",
"contributions": [
"code"
]
}
],
"contributorsPerLine": 8,

5
.eslintignore
View File

@ -1,6 +1,7 @@
dist
runtime
dist-vue2/
dist-vue3/
dist2/
dist2.7/
dist3/
node_modules
examples/docs/public/assets/map/js

4
.eslintrc.js
View File

@ -2,7 +2,7 @@
/** @type {import('eslint').Linter.Config} */
module.exports = {
extends: '@antfu',
extends: ['@antfu', 'plugin:prettier/recommended'],
rules: {
'vue/component-tags-order': [
'error',
@ -20,6 +20,7 @@ module.exports = {
'vue/prefer-separate-static-class': 'off',
'vue/comma-dangle': 'off',
'vue/prefer-template': 'off',
'vue/singleline-html-element-content-newline': 'off',
'curly': 'off',
'sort-imports': 'off',
'prefer-template': 'off',
@ -31,6 +32,7 @@ module.exports = {
'import/no-duplicates': 'off',
'quote-props': 'off',
'prefer-const': 'off',
'multiline-ternary': 'off',
'@typescript-eslint/comma-dangle': 'off',
// '@typescript-eslint/indent': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',

3
.gitignore vendored
View File

@ -25,6 +25,7 @@ vitest.config.ts.timestamp*
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-lock.yaml
yarn.lock
# Editor directories and files
@ -47,3 +48,5 @@ packages/theme/scripts/theme-result.txt
packages/theme/scripts/themeExcel.xlsx
packages/theme/src/theme/*-theme/component.js

1
.prettierignore
View File

@ -1,5 +1,6 @@
dist
dist2
dist2.7
dist3
node_modules
internal/template

1
.vscode/settings.json vendored
View File

@ -24,6 +24,7 @@
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
"better-comments.highlightPlainText": true,
"better-comments.tags": [
{

8
README.md
View File

@ -38,9 +38,9 @@ npm i @opentiny/vue@2
Then you can use the TinyVue component(such as `<tiny-button>`) in the `App.vue` file.
```vue
```html
<script lang="ts" setup>
import { Button as TinyButton } from '@opentiny/vue'
import { Button as TinyButton } from '@opentiny/vue'
</script>
<template>
@ -124,10 +124,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/><br /><sub><b>chenqifeng66</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td>
</tr>
<tr>
<td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/><br /><sub><b>Zz-ZzzZ</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/><br /><sub><b>Lyx</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td>
</tr>
</tbody>
</table>

4
README.zh-CN.md
View File

@ -38,9 +38,9 @@ npm i @opentiny/vue@2
在`App.vue`文件中使用 TinyVue 组件。
```vue
```html
<script lang="ts" setup>
import { Button as TinyButton } from '@opentiny/vue'
import { Button as TinyButton } from '@opentiny/vue'
</script>
<template>

2
examples/docs/newsrc/mobile.vue
View File

@ -144,7 +144,7 @@ export default {
}
},
openInVscode: (demo) => {
fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${state.pathName}/${demo.codeFiles[0]}`)
fetch(`/__open-in-editor?file=../docs/resources/mobile/app/${modeState.pathName}/${demo.codeFiles[0]}`)
}
}

142
examples/docs/newsrc/pc.vue
View File

@ -11,59 +11,71 @@
<div class="fi-1 f-c px20 pb30 f-c pr200 of-auto" ref="rightRef">
<!-- 标题 -->
<div class="py20 f24 fw-bold text-center">
{{ state.demos[0]?.component }}
<component :is="state.currMd" class="component-md"></component>
</div>
<div id="preview" class="bg-white f-c">
<!-- 标题 + 组件说明 -->
<div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
<div class="mr20 fw-bold">
{{ state.currDemo?.title }}( <span class="allselect">{{ state.currDemo?.demoId }}</span>.vue ):
{{ state.currDemo?.name['zh-CN'] }}
(<span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
>):
</div>
<div v-html="state.currDemo?.content"></div>
<div v-html="state.currDemo?.desc['zh-CN']"></div>
</div>
<!-- 预览 -->
<div class="rel px20 py60 of-auto b-a bs-dotted">
<div class="rel px20 py60 b-a bs-dotted">
<div class="abs top10 right10">
<span title="点击在vscode中打开">
<IconOpeninVscode @click="fn.openInVscode(state.currDemo)" class="ml12 cur-hand" />
</span>
</div>
<config-provider :design="design">
<component :is="state.comp"></component>
<component :is="state.comp" v-loading="state.demoLoading"></component>
</config-provider>
</div>
</div>
<!-- API表格 -->
<div v-if="state.currApi" class="mt20 f24 fw-bold">
组件API
</div>
<div v-for="(apiTable, key) in state.currApi" :key="key">
<div class="my8 f22 fw-bold">
{{ key }}
<div v-if="state.currApi?.length" class="mt20 f24 fw-bold">组件API</div>
<div v-for="(oneGroup, idx) in state.currApi" :key="idx">
<div class="f-r f-pos-start fw-bold">
<div :id="oneGroup.name" class="f18">
{{ oneGroup.name }}
</div>
<div class="ml12 b-a-primary c-primary px8 py4">
{{ oneGroup.type }}
</div>
</div>
<div v-for="(oneApiArr, key) in oneGroup" :key="key">
<div v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
<div class="f18 py28">
{{ key }}
</div>
<table class="api-table">
<thead>
<tr>
<th width="20%">名称</th>
<th width="15%">类型</th>
<th width="20%">默认值</th>
<th width="55%">说明</th>
</tr>
</thead>
<tbody>
<tr v-for="row in oneApiArr" :key="row.name">
<td>
<a v-if="row.demoId" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.demoId)">{{
row.name
}}</a>
<span v-else>{{ row.name }}</span>
</td>
<td>{{ row.type }}</td>
<td>{{ row.defaultValue }}</td>
<td v-html="row.desc['zh-CN']"></td>
</tr>
</tbody>
</table>
</div>
</div>
<table class="api-table">
<thead>
<tr>
<th width="15%">名称</th>
<th width="20%">类型</th>
<th width="20%">默认值</th>
<th width="55%">说明</th>
</tr>
</thead>
<tbody>
<tr v-for="row in apiTable" :key="row.name">
<td>
<a v-if="row.sample" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.sample)">{{
row.name
}}</a>
<span v-else>{{ row.name }}</span>
</td>
<td>{{ row.type }}</td>
<td>{{ row.defaultValue }}</td>
<td>{{ row.desc }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 右边浮动所有的demos -->
@ -77,7 +89,7 @@
:class="{ 'c-error': state.currDemo === demo }"
>
<div class="link-primary h:c-error h:td-under ellipsis">
{{ demo.title }}
{{ demo.name['zh-CN'] }}
<Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />
</div>
<IconOpeninVscode @click.stop="fn.openInVscode(demo)" class="f18 cur-hand" />
@ -131,11 +143,21 @@ import {
ConfigProvider
} from '@opentiny/vue'
import { iconStarActive, iconSelect } from '@opentiny/vue-icon'
import { menuData, zhDemo, demoVue, demoStr, zhApi } from './resourcePc.js'
import { useTheme, useModeCtx } from './uses'
import SvgTheme from './assets/theme.svg'
import Loading from '@opentiny/vue-loading'
import designSmbConfig from '@opentiny/vue-design-smb'
import designAuroraConfig from '@opentiny/vue-design-aurora'
import { menuData, apis, demoStr, demoVue, mds } from './resourcePc.js'
import { useTheme, useModeCtx } from './uses'
import SvgTheme from './assets/theme.svg'
const getPath = (path) => {
if (path.startsWith('grid-')) {
return 'grid'
} else if (path.startsWith('chart-')) {
return 'chart'
}
return path
}
export default {
components: {
@ -151,6 +173,9 @@ export default {
IconOpeninVscode: iconSelect(),
ConfigProvider
},
directives: {
loading: Loading.directive
},
setup() {
const { state: modeState, fn: modeFn } = useModeCtx()
const { changeTheme, currThemeLabel } = useTheme()
@ -160,7 +185,9 @@ export default {
currDemo: null, // 选中的demo
currApi: [], // 当前path下的api
comp: null, // 当前示例的组件实例
currDemoSrc: ''
currDemoSrc: '',
currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
demoLoading: false
})
const fn = {
// 菜单搜索：忽略大小写
@ -170,8 +197,8 @@ export default {
},
// 点击菜单：如果是二级菜单，根据path 刷新整个页面内容
clickMenu: async (menu) => {
if (menu.path && menu.path !== modeState.pathName) {
modeState.pathName = menu.path.slice(1)
if (menu.nameCn && menu.key !== state.key) {
modeState.pathName = menu.key
await _switchPath()
}
},
@ -184,7 +211,7 @@ export default {
}
},
openInVscode: (demo) => {
fetch(`/__open-in-editor?file=../docs/resources/pc/demo/${demo.link}.vue`)
fetch(`/__open-in-editor?file=../sites/demos/app/${getPath(modeState.pathName)}/${demo.codeFiles[0]}`)
}
}
@ -194,34 +221,33 @@ export default {
// 以下私有方法，无须传递给vue模板的。
async function _switchPath() {
state.demoLoading = true
// 查找API
const apiModule = zhApi[`../resources/pc/api/zh-CN/${modeState.pathName}.json`]
const apiModule = apis[`../../sites/demos/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`]
if (apiModule) {
const api = await apiModule()
state.currApi = api.default
const module = await apiModule()
const apiRoot = module.default
state.currApi = apiRoot.apis
state.demos = apiRoot.demos || []
state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
} else {
state.currApi = null
state.currDemos = []
}
// 查找demo配置，并默认进入第一个 demo
const demosJson = await zhDemo[`../resources/pc/demo-config/zh-CN/${modeState.pathName}.json`]()
state.demos = demosJson.default
state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos[0]
state.comp = null
await _switchDemo()
}
async function _switchDemo() {
modeState.demoId = state.currDemo.demoId
// 查找源码
state.currDemoSrc = await demoStr[`../resources/pc/demo/${state.currDemo.link}.vue`]()
const path = `../../sites/demos/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
// 查找组件
const comp = await demoVue[`../resources/pc/demo/${state.currDemo.link}.vue`]()
// 查找源码 查找组件
state.currDemoSrc = await demoStr[path]()
const comp = await demoVue[path]()
state.demoLoading = false
state.comp = hooks.markRaw(comp.default)
// 让内容区滚动到顶部
setTimeout(() => rightRef.value && rightRef.value.scrollTo({ left: 0, top: 0, behavior: 'smooth' }), 0)
modeFn.cacheCtx()
modeFn.pushToUrl()
}

27
examples/docs/newsrc/resourcePc.js
View File

@ -3,23 +3,26 @@
// demo源码
// 同web-doc的菜单资源
import originMenuData from '../resources/pc/menus.js'
import { cmpMenus } from '../../sites/demos/menus.js'
export const demoStr = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false, as: 'raw' })
export const demoVue = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false })
export const demoStr = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false, as: 'raw' })
export const demoVue = import.meta.glob('../../sites/demos/app/**/*.vue', { eager: false })
// api属性
export const zhApi = import.meta.glob('../resources/pc/api/zh-CN/**/*.json', { eager: false })
// export const enApi = import.meta.glob('@resources/api/en-US/**/*.json', { eager: false })
export const apis = import.meta.glob('../../sites/demos/app/*/webdoc/*.js', { eager: false })
// // json, demo的配置文件
export const zhDemo = import.meta.glob('../resources/pc/demo-config/zh-CN/**/*.json', { eager: false })
// 格式：{zh,en,enSuffix,path}
// path: '/breadcrumb' 对应着【 demo的配置文件】。每个path有多个示例
const menuData = originMenuData.slice(0)
// 组件的md
const allMD = import.meta.glob('../../sites/demos/app/*/webdoc/*.cn.md', { eager: true })
export const mds = {}
for (const path in allMD) {
let key = path.split('/').slice(-1)[0]
mds[key] = allMD[path].default
}
const menuData = cmpMenus.slice(0)
function processMenu(menu, isTop) {
menu.id = menu.en
menu.label = isTop ? menu.zh : `${menu.zh} ${menu.en}`
menu.id = menu.key
menu.label = isTop ? menu.label : `${menu.nameCn} ${menu.name}`
if (menu.children && menu.children.length > 0) {
menu.children.forEach((m) => processMenu(m, false))
}

19
examples/docs/newsrc/uses/useTheme.js
View File

@ -1,6 +1,19 @@
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
import { tinyAuroraTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
import { hooks } from '@opentiny/vue-common'
import { Notify } from '@opentiny/vue'
let isShowTip = false
function showTip() {
Notify({
type: 'info',
title: '请注意',
message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
position: 'top-right',
duration: 3000
})
isShowTip = true
}
export function useTheme() {
const theme = new TinyThemeTool()
@ -16,8 +29,10 @@ export function useTheme() {
localStorage.setItem('tinyThemeToolkey', vm.label)
theme.changeTheme(THEME_MAP[vm.label])
currThemeLabel.value = vm.label
// 刷新页面保证对应的主题系统全局配置生效
location.reload()
// 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
if (!isShowTip) {
showTip()
}
}
// 切换上次缓存的主题

2
examples/docs/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@opentiny/vue-docs",
"name": "@opentiny/vue-localhost-dev",
"type": "module",
"version": "1.0.8",
"description": "",

27
examples/docs/resources/mobile-first/app/action-sheet/action.vue
View File

@ -1,17 +1,28 @@
<template>
<div>
<div>
<tiny-button type="primary" @click="boxVisibility = true">
显示提示语
</tiny-button>
<tiny-button type="primary" style="margin-left: 20px;" @click="boxVisibility2 = true">
不显示提示语
</tiny-button>
<tiny-button type="primary" @click="boxVisibility = true"> 显示提示语 </tiny-button>
<tiny-button type="primary" style="margin-left: 20px" @click="boxVisibility2 = true"> 不显示提示语 </tiny-button>
</div>
<tiny-action-sheet title="显示提示语" type="action" :menus="menus" :visible="boxVisibility" @update:visible="boxVisibility = $event" @click="selectOption" @close="close"></tiny-action-sheet>
<tiny-action-sheet
title="显示提示语"
type="action"
:menus="menus"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
@click="selectOption"
@close="close"
></tiny-action-sheet>
<tiny-action-sheet type="action" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event" @click="selectOption" @close="close"></tiny-action-sheet>
<tiny-action-sheet
type="action"
:menus="menus"
:visible="boxVisibility2"
@update:visible="boxVisibility2 = $event"
@click="selectOption"
@close="close"
></tiny-action-sheet>
</div>
</template>

10
examples/docs/resources/mobile-first/app/action-sheet/basic-usage.vue
View File

@ -1,9 +1,11 @@
<template>
<div>
<tiny-button @click="fn" type="primary">
动作面板
</tiny-button>
<tiny-action-sheet title="标题" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
<tiny-button @click="fn" type="primary"> 动作面板 </tiny-button>
<tiny-action-sheet
title="标题"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
></tiny-action-sheet>
</div>
</template>

11
examples/docs/resources/mobile-first/app/action-sheet/mask-event.vue
View File

@ -1,9 +1,12 @@
<template>
<div>
<tiny-button @click="fn" type="primary" style="max-width:200px">
单击遮罩层不关闭弹窗
</tiny-button>
<tiny-action-sheet title="标题" :mask-closable="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
<tiny-button @click="fn" type="primary" style="max-width: 200px"> 单击遮罩层不关闭弹窗 </tiny-button>
<tiny-action-sheet
title="标题"
:mask-closable="false"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
></tiny-action-sheet>
</div>
</template>

11
examples/docs/resources/mobile-first/app/action-sheet/mask.vue
View File

@ -1,9 +1,12 @@
<template>
<div>
<tiny-button @click="fn" type="primary">
关闭遮罩层
</tiny-button>
<tiny-action-sheet title="标题" :mask="false" :visible="boxVisibility" @update:visible="boxVisibility = $event"></tiny-action-sheet>
<tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
<tiny-action-sheet
title="标题"
:mask="false"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
></tiny-action-sheet>
</div>
</template>

28
examples/docs/resources/mobile-first/app/action-sheet/multiple.vue
View File

@ -1,21 +1,33 @@
<template>
<div>
<div>
<tiny-button @click="boxVisibility1 = true">
单选
</tiny-button>
<tiny-button @click="boxVisibility1 = true"> 单选 </tiny-button>
<p>值：{{ activeName1 }}</p>
</div>
<br />
<div>
<tiny-button @click="boxVisibility2 = true">
多选
</tiny-button>
<tiny-button @click="boxVisibility2 = true"> 多选 </tiny-button>
<p>值：{{ activeName2 }}</p>
</div>
<tiny-action-sheet v-model="activeName1" title="标题1" :search-config="searchConfig" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
<tiny-action-sheet v-model="activeName2" title="标题2" multiple :search-config="searchConfig" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
<tiny-action-sheet
v-model="activeName1"
title="标题1"
:search-config="searchConfig"
:menus="menus"
:visible="boxVisibility1"
@update:visible="boxVisibility1 = $event"
></tiny-action-sheet>
<tiny-action-sheet
v-model="activeName2"
title="标题2"
multiple
:search-config="searchConfig"
:show-footer="true"
:menus="menus"
:visible="boxVisibility2"
@update:visible="boxVisibility2 = $event"
></tiny-action-sheet>
</div>
</template>

28
examples/docs/resources/mobile-first/app/action-sheet/show.vue
View File

@ -2,15 +2,34 @@
<div>
<span>
<tiny-button @click="boxVisibility4 = true">默认属性配置</tiny-button>
<tiny-action-sheet v-model="activeName" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event"></tiny-action-sheet>
<tiny-action-sheet
v-model="activeName"
:menus="menus"
:visible="boxVisibility4"
@update:visible="boxVisibility4 = $event"
></tiny-action-sheet>
</span>
<span>
<tiny-button @click="boxVisibility1 = true">隐藏头部</tiny-button>
<tiny-action-sheet v-model="activeName" title="标题1" :show-header="false" :menus="menus" :visible="boxVisibility1" @update:visible="boxVisibility1 = $event"></tiny-action-sheet>
<tiny-action-sheet
v-model="activeName"
title="标题1"
:show-header="false"
:menus="menus"
:visible="boxVisibility1"
@update:visible="boxVisibility1 = $event"
></tiny-action-sheet>
</span>
<span>
<tiny-button @click="boxVisibility2 = true">显示底部</tiny-button>
<tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility2" @update:visible="boxVisibility2 = $event"></tiny-action-sheet>
<tiny-action-sheet
v-model="activeName"
title="标题1"
:show-footer="true"
:menus="menus"
:visible="boxVisibility2"
@update:visible="boxVisibility2 = $event"
></tiny-action-sheet>
</span>
</div>
</template>
@ -52,7 +71,6 @@ export default {
]
}
},
methods: {
}
methods: {}
}
</script>

37
examples/docs/resources/mobile-first/app/action-sheet/slot.vue
View File

@ -2,7 +2,13 @@
<div>
<span>
<tiny-button @click="boxVisibility3 = true">头部左侧插槽</tiny-button>
<tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility3" @update:visible="boxVisibility3 = $event">
<tiny-action-sheet
v-model="activeName"
title="标题1"
:menus="menus"
:visible="boxVisibility3"
@update:visible="boxVisibility3 = $event"
>
<template #header-left>
<div @click="activeName = ''">清空</div>
</template>
@ -10,7 +16,14 @@
</span>
<span>
<tiny-button @click="boxVisibility4 = true">头部右侧插槽</tiny-button>
<tiny-action-sheet ref="actionSheet4" v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility4" @update:visible="boxVisibility4 = $event">
<tiny-action-sheet
ref="actionSheet4"
v-model="activeName"
title="标题1"
:menus="menus"
:visible="boxVisibility4"
@update:visible="boxVisibility4 = $event"
>
<template #header-right>
<div @click="$refs.actionSheet4.close()">自定义关闭</div>
</template>
@ -18,7 +31,13 @@
</span>
<span>
<tiny-button @click="boxVisibility5 = true">内容插槽</tiny-button>
<tiny-action-sheet v-model="activeName" title="标题1" :menus="menus" :visible="boxVisibility5" @update:visible="boxVisibility5 = $event">
<tiny-action-sheet
v-model="activeName"
title="标题1"
:menus="menus"
:visible="boxVisibility5"
@update:visible="boxVisibility5 = $event"
>
<div class="text-center">
<div>选项1</div>
<div>选项2</div>
@ -29,7 +48,14 @@
</span>
<span>
<tiny-button @click="boxVisibility6 = true">底部插槽</tiny-button>
<tiny-action-sheet v-model="activeName" title="标题1" :show-footer="true" :menus="menus" :visible="boxVisibility6" @update:visible="boxVisibility6 = $event">
<tiny-action-sheet
v-model="activeName"
title="标题1"
:show-footer="true"
:menus="menus"
:visible="boxVisibility6"
@update:visible="boxVisibility6 = $event"
>
<template #footer>
<tiny-button>自定义按钮1</tiny-button> &nbsp;&nbsp; <tiny-button>自定义按钮2</tiny-button>
</template>
@ -75,7 +101,6 @@ export default {
]
}
},
methods: {
}
methods: {}
}
</script>

7
examples/docs/resources/mobile-first/app/alert/base.vue
View File

@ -4,7 +4,12 @@
<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>
<tiny-alert
type="warning"
single-line
scrolling
description="single-line 开启单行，scrolling 开启滚动，通过属性 close-text 自定义关闭按钮文本，通过 center 属性可使文字显示居中,通过 type 设置不同的类型。可选值：success、warning、info、error，默认值：info "
></tiny-alert>
</div>
</template>

8
examples/docs/resources/mobile-first/app/badge/base.vue
View File

@ -6,9 +6,7 @@
<div class="flex items-center my-4">
<tiny-badge>点标记 :</tiny-badge>
<div class="flex justify-between items-center w-80">
<tiny-badge is-dot>
我的待办
</tiny-badge>
<tiny-badge is-dot> 我的待办 </tiny-badge>
<tiny-badge type="icon" is-dot>
<tiny-user-head type="icon"></tiny-user-head>
</tiny-badge>
@ -23,9 +21,7 @@
<div class="flex items-center my-4">
<span>数字标记 : </span>
<div class="flex justify-between items-center w-80">
<tiny-badge :value="0">
我的待办
</tiny-badge>
<tiny-badge :value="0"> 我的待办 </tiny-badge>
<tiny-badge :value="0" type="icon">
<tiny-user-head type="icon" round></tiny-user-head>
</tiny-badge>

8
examples/docs/resources/mobile-first/app/badge/dynamic-hidden.vue
View File

@ -1,12 +1,8 @@
<template>
<div>
<tiny-badge :value="unread" :hidden="unread === 0">
我的待办
</tiny-badge>
<tiny-badge :value="unread" :hidden="unread === 0"> 我的待办 </tiny-badge>
<br />
<tiny-button :disabled="unread === 0" @click="read">
读取一条消息
</tiny-button>
<tiny-button :disabled="unread === 0" @click="read"> 读取一条消息 </tiny-button>
</div>
</template>

4
examples/docs/resources/mobile-first/app/badge/is-dot.vue
View File

@ -1,7 +1,5 @@
<template>
<tiny-badge is-dot>
小圆点显示
</tiny-badge>
<tiny-badge is-dot> 小圆点显示 </tiny-badge>
</template>
<script>

4
examples/docs/resources/mobile-first/app/badge/max.vue
View File

@ -1,7 +1,5 @@
<template>
<tiny-badge :value="500" :max="99">
最大值显示
</tiny-badge>
<tiny-badge :value="500" :max="99"> 最大值显示 </tiny-badge>
</template>
<script>

4
examples/docs/resources/mobile-first/app/badge/slot-content.vue
View File

@ -1,9 +1,7 @@
<template>
<tiny-badge :value="2">
自定义内容插槽
<template #content>
自定义
</template>
<template #content> 自定义 </template>
</tiny-badge>
</template>

8
examples/docs/resources/mobile-first/app/badge/target.vue
View File

@ -1,12 +1,8 @@
<template>
<div>
<tiny-badge :value="2" href="/" target="_self">
当前标签打开
</tiny-badge>
<tiny-badge :value="2" href="/" target="_self"> 当前标签打开 </tiny-badge>
<br />
<tiny-badge :value="2" href="/" target="_blank">
新建标签打开
</tiny-badge>
<tiny-badge :value="2" href="/" target="_blank"> 新建标签打开 </tiny-badge>
</div>
</template>

20
examples/docs/resources/mobile-first/app/badge/type-left.vue
View File

@ -1,24 +1,14 @@
<template>
<div>
<tiny-badge is-dot show-left type="danger">
danger 类型
</tiny-badge>
<tiny-badge is-dot show-left type="danger"> danger 类型 </tiny-badge>
<br />
<tiny-badge is-dot show-left type="primary">
primary 类型
</tiny-badge>
<tiny-badge is-dot show-left type="primary"> primary 类型 </tiny-badge>
<br />
<tiny-badge is-dot show-left type="success">
success 类型
</tiny-badge>
<tiny-badge is-dot show-left type="success"> success 类型 </tiny-badge>
<br />
<tiny-badge is-dot show-left type="warning">
warning 类型
</tiny-badge>
<tiny-badge is-dot show-left type="warning"> warning 类型 </tiny-badge>
<br />
<tiny-badge is-dot show-left type="info">
info 类型
</tiny-badge>
<tiny-badge is-dot show-left type="info"> info 类型 </tiny-badge>
</div>
</template>

4
examples/docs/resources/mobile-first/app/badge/type.vue
View File

@ -1,7 +1,5 @@
<template>
<tiny-badge :value="value1">
默认类型
</tiny-badge>
<tiny-badge :value="value1"> 默认类型 </tiny-badge>
</template>
<script>

4
examples/docs/resources/mobile-first/app/button/autofocus.vue
View File

@ -1,9 +1,7 @@
<template>
<div>
<tiny-button>默认按钮</tiny-button>
<tiny-button autofocus>
默认聚焦
</tiny-button>
<tiny-button autofocus> 默认聚焦 </tiny-button>
</div>
</template>

44
examples/docs/resources/mobile-first/app/button/base-saas.vue
View File

@ -2,41 +2,19 @@
<tiny-layout>
<tiny-row>
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary" native-type="submit">
主要按钮
</tiny-button>
<tiny-button type="success">
成功按钮
</tiny-button>
<tiny-button type="info">
信息按钮
</tiny-button>
<tiny-button type="warning">
警告按钮
</tiny-button>
<tiny-button type="danger">
危险按钮
</tiny-button>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>
<tiny-button type="warning"> 警告按钮 </tiny-button>
<tiny-button type="danger"> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button plain>
朴素按钮
</tiny-button>
<tiny-button type="primary" plain>
主要按钮
</tiny-button>
<tiny-button type="success" plain>
成功按钮
</tiny-button>
<tiny-button type="info" plain>
信息按钮
</tiny-button>
<tiny-button type="warning" plain>
警告按钮
</tiny-button>
<tiny-button type="danger" plain>
危险按钮
</tiny-button>
<tiny-button plain> 朴素按钮 </tiny-button>
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
<tiny-button type="success" plain> 成功按钮 </tiny-button>
<tiny-button type="info" plain> 信息按钮 </tiny-button>
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
</tiny-row>
</tiny-layout>
</template>

44
examples/docs/resources/mobile-first/app/button/base.vue
View File

@ -2,41 +2,19 @@
<tiny-layout>
<tiny-row>
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary" native-type="submit">
主要按钮
</tiny-button>
<tiny-button type="success">
成功按钮
</tiny-button>
<tiny-button type="info">
信息按钮
</tiny-button>
<tiny-button type="warning">
警告按钮
</tiny-button>
<tiny-button type="danger">
危险按钮
</tiny-button>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>
<tiny-button type="warning"> 警告按钮 </tiny-button>
<tiny-button type="danger"> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button plain>
线性按钮
</tiny-button>
<tiny-button type="primary" plain>
主要按钮
</tiny-button>
<tiny-button type="success" plain>
成功按钮
</tiny-button>
<tiny-button type="info" plain>
信息按钮
</tiny-button>
<tiny-button type="warning" plain>
警告按钮
</tiny-button>
<tiny-button type="danger" plain>
危险按钮
</tiny-button>
<tiny-button plain> 线性按钮 </tiny-button>
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
<tiny-button type="success" plain> 成功按钮 </tiny-button>
<tiny-button type="info" plain> 信息按钮 </tiny-button>
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
</tiny-row>
</tiny-layout>
</template>

4
examples/docs/resources/mobile-first/app/button/button-class.vue
View File

@ -1,9 +1,7 @@
<template>
<div class="demo">
<tiny-button>默认按钮</tiny-button>
<tiny-button button-class="text-color-brand-active bg-color-bg-3">
主要按钮
</tiny-button>
<tiny-button button-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
</div>
</template>

24
examples/docs/resources/mobile-first/app/button/circle.vue
View File

@ -1,24 +1,12 @@
<template>
<tiny-layout>
<tiny-row>
<tiny-button circle>
C
</tiny-button>
<tiny-button type="primary" circle>
C
</tiny-button>
<tiny-button type="success" circle>
C
</tiny-button>
<tiny-button type="info" circle>
C
</tiny-button>
<tiny-button type="warning" circle>
C
</tiny-button>
<tiny-button type="danger" circle>
C
</tiny-button>
<tiny-button circle> C </tiny-button>
<tiny-button type="primary" circle> C </tiny-button>
<tiny-button type="success" circle> C </tiny-button>
<tiny-button type="info" circle> C </tiny-button>
<tiny-button type="warning" circle> C </tiny-button>
<tiny-button type="danger" circle> C </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch" circle></tiny-button>

4
examples/docs/resources/mobile-first/app/button/click.vue
View File

@ -1,7 +1,5 @@
<template>
<tiny-button @click="click">
默认按钮
</tiny-button>
<tiny-button @click="click"> 默认按钮 </tiny-button>
</template>
<script>

24
examples/docs/resources/mobile-first/app/button/dynamic-disabled.vue
View File

@ -6,24 +6,12 @@
</tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :disabled="disabled">
默认按钮
</tiny-button>
<tiny-button type="primary" :disabled="disabled">
主要按钮
</tiny-button>
<tiny-button type="success" :disabled="disabled">
成功按钮
</tiny-button>
<tiny-button type="info" :disabled="disabled">
信息按钮
</tiny-button>
<tiny-button type="warning" :disabled="disabled">
警告按钮
</tiny-button>
<tiny-button type="danger" :disabled="disabled">
危险按钮
</tiny-button>
<tiny-button :disabled="disabled"> 默认按钮 </tiny-button>
<tiny-button type="primary" :disabled="disabled"> 主要按钮 </tiny-button>
<tiny-button type="success" :disabled="disabled"> 成功按钮 </tiny-button>
<tiny-button type="info" :disabled="disabled"> 信息按钮 </tiny-button>
<tiny-button type="warning" :disabled="disabled"> 警告按钮 </tiny-button>
<tiny-button type="danger" :disabled="disabled"> 危险按钮 </tiny-button>
</tiny-row>
</tiny-layout>
</template>

4
examples/docs/resources/mobile-first/app/button/link.vue
View File

@ -1,8 +1,6 @@
<template>
<div>
<tiny-button type="text" href="/">
超链接按钮
</tiny-button>
<tiny-button type="text" href="/"> 超链接按钮 </tiny-button>
</div>
</template>

24
examples/docs/resources/mobile-first/app/button/loading.vue
View File

@ -1,23 +1,11 @@
<template>
<div>
<tiny-button loading>
加载中
</tiny-button>
<tiny-button type="primary" loading>
加载中
</tiny-button>
<tiny-button type="success" loading>
加载中
</tiny-button>
<tiny-button type="info" loading>
加载中
</tiny-button>
<tiny-button type="warning" loading>
加载中
</tiny-button>
<tiny-button type="danger" loading>
加载中
</tiny-button>
<tiny-button loading> 加载中 </tiny-button>
<tiny-button type="primary" loading> 加载中 </tiny-button>
<tiny-button type="success" loading> 加载中 </tiny-button>
<tiny-button type="info" loading> 加载中 </tiny-button>
<tiny-button type="warning" loading> 加载中 </tiny-button>
<tiny-button type="danger" loading> 加载中 </tiny-button>
</div>
</template>

24
examples/docs/resources/mobile-first/app/button/plain.vue
View File

@ -1,23 +1,11 @@
<template>
<div>
<tiny-button plain>
朴素按钮
</tiny-button>
<tiny-button type="primary" plain>
主要按钮
</tiny-button>
<tiny-button type="success" plain>
成功按钮
</tiny-button>
<tiny-button type="info" plain>
信息按钮
</tiny-button>
<tiny-button type="warning" plain>
警告按钮
</tiny-button>
<tiny-button type="danger" plain>
危险按钮
</tiny-button>
<tiny-button plain> 朴素按钮 </tiny-button>
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
<tiny-button type="success" plain> 成功按钮 </tiny-button>
<tiny-button type="info" plain> 信息按钮 </tiny-button>
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
</div>
</template>

8
examples/docs/resources/mobile-first/app/button/reset-time.vue
View File

@ -1,12 +1,8 @@
<template>
<div>
<tiny-button>默认禁用</tiny-button>
<tiny-button :reset-time="0">
无禁用
</tiny-button>
<tiny-button :reset-time="5000">
禁用 5 秒
</tiny-button>
<tiny-button :reset-time="0"> 无禁用 </tiny-button>
<tiny-button :reset-time="5000"> 禁用 5 秒 </tiny-button>
</div>
</template>

24
examples/docs/resources/mobile-first/app/button/round.vue
View File

@ -1,23 +1,11 @@
<template>
<div>
<tiny-button round>
默认按钮
</tiny-button>
<tiny-button type="primary" round>
主要按钮
</tiny-button>
<tiny-button type="success" round>
成功按钮
</tiny-button>
<tiny-button type="info" round>
信息按钮
</tiny-button>
<tiny-button type="warning" round>
警告按钮
</tiny-button>
<tiny-button type="danger" round>
危险按钮
</tiny-button>
<tiny-button round> 默认按钮 </tiny-button>
<tiny-button type="primary" round> 主要按钮 </tiny-button>
<tiny-button type="success" round> 成功按钮 </tiny-button>
<tiny-button type="info" round> 信息按钮 </tiny-button>
<tiny-button type="warning" round> 警告按钮 </tiny-button>
<tiny-button type="danger" round> 危险按钮 </tiny-button>
</div>
</template>

12
examples/docs/resources/mobile-first/app/button/size.vue
View File

@ -1,15 +1,9 @@
<template>
<div>
<tiny-button>默认按钮</tiny-button>
<tiny-button size="medium">
中等按钮
</tiny-button>
<tiny-button size="small">
小型按钮
</tiny-button>
<tiny-button size="mini">
超小按钮
</tiny-button>
<tiny-button size="medium"> 中等按钮 </tiny-button>
<tiny-button size="small"> 小型按钮 </tiny-button>
<tiny-button size="mini"> 超小按钮 </tiny-button>
</div>
</template>

4
examples/docs/resources/mobile-first/app/button/text.vue
View File

@ -1,8 +1,6 @@
<template>
<div>
<tiny-button type="text">
文本按钮
</tiny-button>
<tiny-button type="text"> 文本按钮 </tiny-button>
<tiny-button type="text" text="text属性"></tiny-button>
</div>
</template>

24
examples/docs/resources/mobile-first/app/button/type.vue
View File

@ -1,24 +1,12 @@
<template>
<div>
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary">
主要按钮
</tiny-button>
<tiny-button type="success">
成功按钮
</tiny-button>
<tiny-button type="info">
信息按钮
</tiny-button>
<tiny-button type="warning">
警告按钮
</tiny-button>
<tiny-button type="danger">
危险按钮
</tiny-button>
<tiny-button type="text">
文本按钮
</tiny-button>
<tiny-button type="primary"> 主要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>
<tiny-button type="warning"> 警告按钮 </tiny-button>
<tiny-button type="danger"> 危险按钮 </tiny-button>
<tiny-button type="text"> 文本按钮 </tiny-button>
</div>
</template>

2
examples/docs/resources/mobile-first/app/card/basic-usage.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-card title="这是卡片标题" type="image" src="static/images/dsj.png">
<tiny-card title="这是卡片标题" type="image" src="/static/images/dsj.png">
<p>
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，

10
examples/docs/resources/mobile-first/app/card/card-events.vue
View File

@ -1,6 +1,14 @@
<template>
<div>
<tiny-card title="这是卡片标题" v-model="value" check-type="checkbox" label="1" :options="options" @change="change" @icon-click="iconClick">
<tiny-card
title="这是卡片标题"
v-model="value"
check-type="checkbox"
label="1"
:options="options"
@change="change"
@icon-click="iconClick"
>
<p>
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，

10
examples/docs/resources/mobile-first/app/card/card-type.vue
View File

@ -7,21 +7,25 @@
</p>
</tiny-card>
<br />
<tiny-card title="这是图片类型" type="image" src="static/images/dsj.png">
<tiny-card title="这是图片类型" type="image" src="/static/images/dsj.png">
<p>
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
</p>
</tiny-card>
<br />
<tiny-card title="这是视频类型" type="video" src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4">
<tiny-card
title="这是视频类型"
type="video"
src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
>
<p>
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
</p>
</tiny-card>
<br />
<tiny-card title="这是logo类型" type="logo" size="mini" src="static/images/user-head.png">
<tiny-card title="这是logo类型" type="logo" size="mini" src="/static/images/user-head.png">
<p>这是一段长文本内容，这是一段长文本内容</p>
</tiny-card>
</div>

2
examples/docs/resources/mobile-first/app/card/slot.vue
View File

@ -34,7 +34,7 @@
</p>
<template #footer>
<div class="flex">
<img src="static/images/user-head.png" class="h-9 w-9" alt="user-head" />
<img src="/static/images/user-head.png" class="h-9 w-9" alt="user-head" />
<div class="pl-4">
<p class="text-sm">刘小华</p>
<p class="text-xs text-color-text-secondary">2023-03-20 10:10:10</p>

3
examples/docs/resources/mobile-first/app/carousel/webdoc/carousel.js
View File

@ -181,7 +181,8 @@ export default {
'en-US': 'Carousel Events'
},
desc: {
'zh-CN': '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
'zh-CN':
'<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
},
codeFiles: ['carousel-events.vue']

7
examples/docs/resources/mobile-first/app/cascader-select/basic-usage.vue
View File

@ -1,7 +1,12 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
></tiny-cascader-select>
</div>
</template>

8
examples/docs/resources/mobile-first/app/cascader-select/cities.vue
View File

@ -1,7 +1,13 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
cycle-roll
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
></tiny-cascader-select>
</div>
</template>

8
examples/docs/resources/mobile-first/app/cascader-select/cycle-roll.vue
View File

@ -1,7 +1,13 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
cycle-roll
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
></tiny-cascader-select>
</div>
</template>

8
examples/docs/resources/mobile-first/app/cascader-select/disabled-array.vue
View File

@ -1,7 +1,13 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
:disabled="disabled"
></tiny-cascader-select>
</div>
</template>

7
examples/docs/resources/mobile-first/app/cascader-select/disabled.vue
View File

@ -1,7 +1,12 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
></tiny-cascader-select>
</div>
</template>

7
examples/docs/resources/mobile-first/app/cascader-select/object-option.vue
View File

@ -1,7 +1,12 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" :options="optionList" :visible="visible" @update:visible="visible = $event"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
></tiny-cascader-select>
</div>
</template>

10
examples/docs/resources/mobile-first/app/cascader-select/text-color-class.vue
View File

@ -1,7 +1,15 @@
<template>
<div date-tag="tiny-demo">
<tiny-button @click="showCascader">点击显示级联选择</tiny-button>
<tiny-cascader-select v-model="value" cycle-roll :options="optionList" :visible="visible" @update:visible="visible = $event" :disabled="disabled" :text-color="textColorClass"></tiny-cascader-select>
<tiny-cascader-select
v-model="value"
cycle-roll
:options="optionList"
:visible="visible"
@update:visible="visible = $event"
:disabled="disabled"
:text-color="textColorClass"
></tiny-cascader-select>
</div>
</template>

4
examples/docs/resources/mobile-first/app/checkbox/basic-usage.vue
View File

@ -1,7 +1,5 @@
<template>
<tiny-checkbox v-model="checked">
复选框
</tiny-checkbox>
<tiny-checkbox v-model="checked"> 复选框 </tiny-checkbox>
</template>
<script>

9
examples/docs/resources/mobile-first/app/checkbox/button-chek-box.vue
View File

@ -1,6 +1,11 @@
<template>
<div class="demo-checkbox-button">
<tiny-checkbox-button v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox-button>
<tiny-checkbox-button
v-model="checked"
text="复选框"
true-label="真文本"
false-label="假文本"
></tiny-checkbox-button>
<tiny-button class="btn" @click="getValue">获取文本</tiny-button>
</div>
</template>
@ -33,4 +38,4 @@ export default {
.demo-checkbox-button .btn {
margin-left: 20px;
}
</style>
</style>

4
examples/docs/resources/mobile-first/app/checkbox/text.vue
View File

@ -28,9 +28,9 @@ export default {
}
}
</script>
<style scoped>
.demo-checkbox .btn {
margin-left: 20px;
}
</style>
</style>

8
examples/docs/resources/mobile-first/app/collapse/nested-grid.vue
View File

@ -7,7 +7,13 @@
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="created_date" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
<tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
<tiny-grid-column
field="boole"
title="布尔值"
align="center"
format-text="boole"
:editor="checkboxEdit"
></tiny-grid-column>
</tiny-grid>
</tiny-collapse-item>
</tiny-collapse>

18
examples/docs/resources/mobile-first/app/collapse/slot-icon.vue
View File

@ -2,13 +2,16 @@
<tiny-collapse v-model="activeNames">
<tiny-collapse-item name="1" title="一致性 Consistency">
<template #icon="{ active }">
<icon-arrow-bottom class="tiny-svg-size" :style="{
fill: 'red',
width: '10px',
height: '10px',
transition: 'all 0.2s',
transform: active ? 'rotate(0deg)' : 'rotate(-90deg)'
}"></icon-arrow-bottom>
<icon-arrow-bottom
class="tiny-svg-size"
:style="{
fill: 'red',
width: '10px',
height: '10px',
transition: 'all 0.2s',
transform: active ? 'rotate(0deg)' : 'rotate(-90deg)'
}"
></icon-arrow-bottom>
</template>
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
@ -24,6 +27,7 @@
<script>
import { Collapse, CollapseItem } from '@opentiny/vue'
import { IconArrowBottom } from '@opentiny/vue-icon'
export default {
components: {
TinyCollapse: Collapse,

1
examples/docs/resources/mobile-first/app/collapse/slot-title-right.vue
View File

@ -24,6 +24,7 @@
<script>
import { Collapse, CollapseItem } from '@opentiny/vue'
import { IconWriting } from '@opentiny/vue-icon'
export default {
components: {
TinyCollapse: Collapse,

11
examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue
View File

@ -1,6 +1,15 @@
<template>
<div>
<tiny-column-list-item v-model="checked" :show-checkbox="true" image="webnova/static/images/1.jpg" size="medium" :options="options1" :flex-grow="[1, 1]" class="mb-3" @icon-click="iconClick">
<tiny-column-list-item
v-model="checked"
:show-checkbox="true"
image="webnova/static/images/1.jpg"
size="medium"
:options="options1"
:flex-grow="[1, 1]"
class="mb-3"
@icon-click="iconClick"
>
<template #column1>
<ul>
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

7
examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue
View File

@ -1,6 +1,11 @@
<template>
<div>
<tiny-column-list-item image="webnova/static/images/1.jpg" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
<tiny-column-list-item
image="webnova/static/images/1.jpg"
:flex-grow="[0, 0]"
:flex-basis="['25%', '25%']"
class="mb-3"
>
<template #column1>
<ul>
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

11
examples/docs/resources/mobile-first/app/column-list-item/size.vue
View File

@ -1,6 +1,15 @@
<template>
<div>
<tiny-column-list-item v-model="checked" :show-checkbox="true" image="webnova/static/images/1.jpg" :size="size" :options="options" :flex-grow="[1, 3]" class="mb-3" @icon-click="iconClick">
<tiny-column-list-item
v-model="checked"
:show-checkbox="true"
image="webnova/static/images/1.jpg"
:size="size"
:options="options"
:flex-grow="[1, 3]"
class="mb-3"
@icon-click="iconClick"
>
<template #column1>
<ul>
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

7
examples/docs/resources/mobile-first/app/date-picker-mobile/basic-usage.vue
View File

@ -4,7 +4,12 @@
<p>值：{{ value }}</p>
<p>格式化值：{{ formatValue }}</p>
<tiny-date-picker-mobile v-model="value" title="日期选择" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-date-picker-mobile
v-model="value"
title="日期选择"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
>
</tiny-date-picker-mobile>
</div>
</template>

13
examples/docs/resources/mobile-first/app/date-picker-mobile/date-range.vue
View File

@ -4,7 +4,13 @@
<p>值：{{ value }}</p>
<p>格式化值：{{ formatValue }}</p>
<tiny-date-picker-mobile v-model="value" title="日期选择" type="daterange" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-date-picker-mobile
v-model="value"
title="日期选择"
type="daterange"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
>
</tiny-date-picker-mobile>
</div>
</template>
@ -28,8 +34,9 @@ export default {
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}/${date1.getDate()}, ${date2.getFullYear()}/${date2.getMonth() + 1
}/${date2.getDate()}]`
return `[${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}, ${date2.getFullYear()}/${
date2.getMonth() + 1
}/${date2.getDate()}]`
}
},
methods: {

8
examples/docs/resources/mobile-first/app/date-picker-mobile/datetime-range.vue
View File

@ -4,7 +4,13 @@
<p>值：{{ value }}</p>
<p>格式化值：{{ formatValue }}</p>
<tiny-date-picker-mobile v-model="value" title="日期时间选择" type="datetimerange" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-date-picker-mobile
v-model="value"
title="日期时间选择"
type="datetimerange"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
>
</tiny-date-picker-mobile>
</div>
</template>

8
examples/docs/resources/mobile-first/app/date-picker-mobile/datetime.vue
View File

@ -4,7 +4,13 @@
<p>值：{{ value }}</p>
<p>格式化值：{{ formatValue }}</p>
<tiny-date-picker-mobile v-model="value" type="datetime" title="日期时间选择" :visible="boxVisibility" @update:visible="boxVisibility = $event">
<tiny-date-picker-mobile
v-model="value"
type="datetime"
title="日期时间选择"
:visible="boxVisibility"
@update:visible="boxVisibility = $event"
>
</tiny-date-picker-mobile>
</div>
</template>

4
examples/docs/resources/mobile-first/app/drawer/basic-usage.vue
View File

@ -2,7 +2,7 @@
<div>
<tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
<div style="height: 200px; text-align: center;">内容区域</div>
<div style="height: 200px; text-align: center">内容区域</div>
</tiny-drawer>
</div>
</template>
@ -26,4 +26,4 @@ export default {
}
}
}
</script>
</script>

9
examples/docs/resources/mobile-first/app/drawer/event.vue
View File

@ -1,7 +1,14 @@
<template>
<div>
<tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
<tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close" @confirm="confirm">
<tiny-drawer
title="标题"
:show-footer="true"
:visible="visible"
@update:visible="visible = $event"
@close="close"
@confirm="confirm"
>
<div style="height: 200px; text-align: center">内容区域</div>
</tiny-drawer>
</div>

2
examples/docs/resources/mobile-first/app/drawer/mask-event.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<tiny-button @click="fn" type="primary" style="max-width:200px">单击遮罩层不关闭弹窗</tiny-button>
<tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭弹窗</tiny-button>
<tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
<div style="height: 200px; text-align: center">内容区域</div>
</tiny-drawer>

8
examples/docs/resources/mobile-first/app/drawer/show.vue
View File

@ -4,7 +4,13 @@
<tiny-button @click="fn({ showHeader: false, showFooter: false })"> 隐藏头部 </tiny-button>
<tiny-button @click="fn({ showHeader: true, showFooter: true })"> 显示底部 </tiny-button>
<tiny-drawer :show-header="showHeader" :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
<tiny-drawer
:show-header="showHeader"
:show-footer="showFooter"
title="标题"
:visible="visible"
@update:visible="visible = $event"
>
<div style="height: 200px; text-align: center">内容区域</div>
</tiny-drawer>
</div>

4
examples/docs/resources/mobile-first/app/drawer/slot.vue
View File

@ -5,7 +5,7 @@
<template #header-right>
<div @click="$refs.tinyDrawer.close()">自定义关闭</div>
</template>
<div style="height: 200px; text-align: center;">内容区域</div>
<div style="height: 200px; text-align: center">内容区域</div>
</tiny-drawer>
</div>
</template>
@ -29,4 +29,4 @@ export default {
}
}
}
</script>
</script>

1
examples/docs/resources/mobile-first/app/dropdown/arrow-button.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/basic-usage.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/border-size.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/button-dropdown.vue
View File

@ -10,6 +10,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/button-size.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/button-type.vue
View File

@ -10,6 +10,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/events-button-click.vue
View File

@ -10,6 +10,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/events-item-click.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/events-visible-change.vue
View File

@ -12,6 +12,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/many-dropdown.vue
View File

@ -10,6 +10,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { IconEllipsis } from '@opentiny/vue-icon'
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

1
examples/docs/resources/mobile-first/app/dropdown/max-height.vue
View File

@ -38,6 +38,7 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

10
examples/docs/resources/mobile-first/app/dropdown/multi-stage.vue
View File

@ -9,8 +9,12 @@
这是一级不可点击
</tiny-dropdown-item>
<tiny-dropdown-menu multi-stage checked-status>
<tiny-dropdown-item level="2" :current-index="0" :selected="selectedIndex === '2-0'">这是二级</tiny-dropdown-item>
<tiny-dropdown-item level="2" :current-index="1" :selected="selectedIndex === '2-1'">这是二级</tiny-dropdown-item>
<tiny-dropdown-item level="2" :current-index="0" :selected="selectedIndex === '2-0'"
>这是二级</tiny-dropdown-item
>
<tiny-dropdown-item level="2" :current-index="1" :selected="selectedIndex === '2-1'"
>这是二级</tiny-dropdown-item
>
</tiny-dropdown-menu>
<tiny-dropdown-item :current-index="3" :selected="selectedIndex === '3'">这是一级</tiny-dropdown-item>
</template>
@ -18,8 +22,10 @@
</template>
</tiny-dropdown>
</template>
<script>
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
export default {
components: {
TinyDropdown: Dropdown,

28
examples/docs/resources/mobile-first/app/dropdown/trigger-event.vue
View File

@ -38,13 +38,31 @@
<template #dropdown>
<tiny-dropdown-menu checked-status>
<template #default="{ selectedIndex }">
<tiny-dropdown-item :icon="IconPlus" :current-index="0" :selected="selectedIndex === '0'">这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级</tiny-dropdown-item>
<tiny-dropdown-item :icon="IconPlusCircle" :current-index="1" :selected="selectedIndex === '1'" disabled>这是一级不可点击</tiny-dropdown-item>
<tiny-dropdown-item :icon="IconPlus" :current-index="0" :selected="selectedIndex === '0'"
>这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级这是一级</tiny-dropdown-item
>
<tiny-dropdown-item :icon="IconPlusCircle" :current-index="1" :selected="selectedIndex === '1'" disabled
>这是一级不可点击</tiny-dropdown-item
>
<tiny-dropdown-menu multi-stage checked-status>
<tiny-dropdown-item :icon="IconPlusSquare" level="2" :current-index="0" :selected="selectedIndex === '2-0'">这是二级</tiny-dropdown-item>
<tiny-dropdown-item :icon="IconCheckedLinear" level="2" :current-index="1" :selected="selectedIndex === '2-1'">这是二级</tiny-dropdown-item>
<tiny-dropdown-item
:icon="IconPlusSquare"
level="2"
:current-index="0"
:selected="selectedIndex === '2-0'"
>这是二级</tiny-dropdown-item
>
<tiny-dropdown-item
:icon="IconCheckedLinear"
level="2"
:current-index="1"
:selected="selectedIndex === '2-1'"
>这是二级</tiny-dropdown-item
>
</tiny-dropdown-menu>
<tiny-dropdown-item :icon="IconCheckedSur" :current-index="3" :selected="selectedIndex === '3'">这是一级</tiny-dropdown-item>
<tiny-dropdown-item :icon="IconCheckedSur" :current-index="3" :selected="selectedIndex === '3'"
>这是一级</tiny-dropdown-item
>
</template>
</tiny-dropdown-menu>
</template>

1
examples/docs/resources/mobile-first/app/exception/component-empty.vue
View File

@ -46,6 +46,7 @@ export default {
}
}
</script>
<style scoped>
.demo-split {
height: 200px;

1
examples/docs/resources/mobile-first/app/exception/sub-message.vue
View File

@ -15,4 +15,5 @@ export default {
methods: {}
}
</script>
<style scoped>

49
examples/docs/resources/mobile-first/app/file-upload/bubble.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<tiny-file-upload mode="bubble" ref="upload" :action="action" :file-list="fileList" />
</template>
<script>
import { FileUpload } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload
},
data() {
return {
action: 'http://localhost:3000/api/upload',
fileList: [
{
docId: 'M1T2A1N548572512085860351',
path: 'edm/one/',
docVersion: 'V1',
name: 'test1.png',
docSize: 100 * 1024,
size: 100 * 1024,
serverName: 'ShenZhen'
},
{
docId: 'M1T2A1N548572512085860353',
path: 'edm/one/',
docVersion: 'V1',
name: 'test4.doc',
docSize: 17252 * 1024,
size: 17252 * 1024,
serverName: 'ShenZhen',
status: 'fail',
percentage: 30
},
{
docId: 'M1T2A1N548572512085860353',
path: 'edm/one/',
docVersion: 'V1',
name: 'test5超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长.doc',
docSize: 17252 * 1024,
size: 17252 * 1024,
serverName: 'ShenZhen'
}
]
}
}
}
</script>

3
examples/docs/resources/mobile-first/app/file-upload/display-only-picture.vue
View File

@ -1,6 +1,7 @@
<template>
<div>
<tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" display-only> </tiny-file-upload>
<tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" display-only>
</tiny-file-upload>
<br />
<br />
<tiny-file-upload :action="action" list-type="picture-card" :file-list="fileList2" display-only> </tiny-file-upload>

16
examples/docs/resources/mobile-first/app/file-upload/display-only-video-audio.vue
View File

@ -1,10 +1,22 @@
<template>
<div>
<tiny-file-upload :action="action" display-only list-type="picture-single" source-type="video" :file-list="fileList1">
<tiny-file-upload
:action="action"
display-only
list-type="picture-single"
source-type="video"
:file-list="fileList1"
>
</tiny-file-upload>
<br />
<br />
<tiny-file-upload :action="action" display-only list-type="picture-single" source-type="audio" :file-list="fileList2">
<tiny-file-upload
:action="action"
display-only
list-type="picture-single"
source-type="audio"
:file-list="fileList2"
>
</tiny-file-upload>
</div>
</template>

7
examples/docs/resources/mobile-first/app/file-upload/download-all.vue
View File

@ -1,5 +1,10 @@
<template>
<tiny-file-upload ref="upload" :action="action" :file-list="fileList" @download-all="handleDownloadAll"></tiny-file-upload>
<tiny-file-upload
ref="upload"
:action="action"
:file-list="fileList"
@download-all="handleDownloadAll"
></tiny-file-upload>
</template>
<script>

14
examples/docs/resources/mobile-first/app/file-upload/download-picture.vue
View File

@ -1,10 +1,20 @@
<template>
<div>
<tiny-file-upload :action="action" list-type="picture-single" :file-list="fileList1" @download-file="handleDownloadFile">
<tiny-file-upload
:action="action"
list-type="picture-single"
:file-list="fileList1"
@download-file="handleDownloadFile"
>
</tiny-file-upload>
<br />
<br />
<tiny-file-upload :action="action" list-type="picture-card" :file-list="fileList2" @download-file="handleDownloadFile">
<tiny-file-upload
:action="action"
list-type="picture-card"
:file-list="fileList2"
@download-file="handleDownloadFile"
>
</tiny-file-upload>
</div>
</template>

7
examples/docs/resources/mobile-first/app/file-upload/download.vue
View File

@ -1,5 +1,10 @@
<template>
<tiny-file-upload ref="upload" :action="action" :file-list="fileList" @download-file="handleDownloadFile"></tiny-file-upload>
<tiny-file-upload
ref="upload"
:action="action"
:file-list="fileList"
@download-file="handleDownloadFile"
></tiny-file-upload>
</template>
<script>

3
examples/docs/resources/mobile-first/app/file-upload/drag.vue
View File

@ -1,6 +1,5 @@
<template>
<tiny-file-upload :action="action" list-type="drag-single">
</tiny-file-upload>
<tiny-file-upload :action="action" list-type="drag-single"> </tiny-file-upload>
</template>
<script>

13
examples/docs/resources/mobile-first/app/file-upload/event-trigger-click.vue
View File

@ -1,5 +1,16 @@
<template>
<tiny-file-upload ref="upload" :action="action" :file-list="fileList" @trigger-click="handleTriggerClick" @preview="handlePreview" @download-file="handleDownloadFile" @download-all="handleDownloadAll" @re-upload="handleReUpload" @click-file-list="handleClickFileList" @remove="handleRemove"></tiny-file-upload>
<tiny-file-upload
ref="upload"
:action="action"
:file-list="fileList"
@trigger-click="handleTriggerClick"
@preview="handlePreview"
@download-file="handleDownloadFile"
@download-all="handleDownloadAll"
@re-upload="handleReUpload"
@click-file-list="handleClickFileList"
@remove="handleRemove"
></tiny-file-upload>
</template>
<script>

65
examples/docs/resources/mobile-first/app/file-upload/multi-media-native.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<tiny-file-upload
:action="action"
list-type="picture-card"
source-type="audio/video/picture"
:file-list="fileList"
:hwh5="hwh5"
@trigger-click="handleTriggerClick"
@play="handlePlay"
>
</tiny-file-upload>
</template>
<script>
import { FileUpload } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload
},
data() {
return {
hwh5: {
HWH5: () => window.HWH5 || {}
},
action: 'http://localhost:3000/api/upload',
fileList: [
{
name: 'video-test.mp4',
url: 'http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4'
},
{
name: 'audio-test.3gp',
type: 'audio',
url: 'https://hicdev.huawei.com/mirrors/resource/audio-test.3gp'
}
]
}
},
methods: {
handleTriggerClick($event, sourceType, type) {
/**
* $event事件对象
* sourceType表示选取资源类型（picture、video、audio）图片、视频、音频
* sourceType为picture时：type: 1 从相册选择; type: 2 拍摄
* sourceType为video时：type: 1 从相册选择; type: 3 录像
* sourceType为audio时（type类型包括start、pause、continue、end、cancel）：
* type: start 开始录音;
* type: pause 中止录音;
* type: continue 继续录音;
* type: end 结束录音;
* type: cancel 取消录音
*/
console.log('handleTriggerClick', $event, sourceType, type)
},
handlePlay(file, sourceType) {
/**
* file为文件对象
* sourceType表示选取资源类型（video、audio）视频、音频
*/
console.log('handlePlay', file, sourceType)
}
}
}
</script>

41
examples/docs/resources/mobile-first/app/file-upload/multi-media.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<tiny-file-upload
:action="action"
list-type="picture-card"
source-type="video/audio/picture"
:file-list="fileList"
@trigger-click="handleTriggerClick"
>
</tiny-file-upload>
</template>
<script>
import { FileUpload } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload
},
data() {
return {
action: 'http://localhost:3000/api/upload',
fileList: [
{
name: 'video-test.mp4',
url: 'http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4'
},
{
name: 'audio-test.3gp',
type: 'audio',
url: 'https://hicdev.huawei.com/mirrors/resource/audio-test.3gp'
}
]
}
},
methods: {
handleTriggerClick() {
console.log('handleTriggerClick', ...arguments)
}
}
}
</script>

45
examples/docs/resources/mobile-first/app/file-upload/slot-operate.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<tiny-file-upload ref="upload" :show-title="false" :action="action" :file-list="fileList">
<template #operate="{ file }">
<div class="h-[3.75rem] leading-[3.75rem] cursor-pointer text-center sm:h-auto sm:leading-[initial]">
<span v-if="file.docId === 'M1T2A1N548572512085860351'" class="sm:mr-2">下载</span>
<span>删除</span>
</div>
</template>
</tiny-file-upload>
</template>
<script>
import { FileUpload } from '@opentiny/vue'
export default {
components: {
TinyFileUpload: FileUpload
},
data() {
return {
action: 'http://localhost:3000/api/upload',
fileList: [
{
docId: 'M1T2A1N548572512085860351',
path: 'edm/one/',
docVersion: 'V1',
name: 'test1.png',
docSize: 100 * 1024,
size: 100 * 1024,
serverName: 'ShenZhen'
},
{
docId: 'M1T2A1N548572512085860352',
path: 'edm/one/',
docVersion: 'V1',
name: 'test2.png',
docSize: 100 * 1024,
size: 100 * 1024,
serverName: 'ShenZhen'
}
]
}
}
}
</script>

Some files were not shown because too many files have changed in this diff Show More