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

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,

View File

@ -1,6 +1,7 @@
dist
runtime
dist-vue2/
dist-vue3/
dist2/
dist2.7/
dist3/
node_modules
examples/docs/public/assets/map/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

View File

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

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": [
{

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>

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>

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]}`)
}
}

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: [], // pathapi
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()
}

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))
}

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()
}
}
// 切换上次缓存的主题

View File

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

View File

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

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>

View File

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

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>

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>

View File

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

View File

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

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>

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>

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>

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>

View File

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

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>

View File

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

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>

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>

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>

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>

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>

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>

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>

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>
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容

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>
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容

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>

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>

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']

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>

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>

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>

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>

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>

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>

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>

View File

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

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>

View File

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

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>

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,

View File

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

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>

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>

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>

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>

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: {

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>

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>

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>

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>

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>

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>

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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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>

View File

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

View File

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

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>

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>

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>

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>

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>

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>

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>

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>

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表示选取资源类型picturevideoaudio图片视频音频
* sourceType为picture时type: 1 从相册选择; type: 2 拍摄
* sourceType为video时type: 1 从相册选择; type: 3 录像
* sourceType为audio时type类型包括startpausecontinueendcancel
* type: start 开始录音;
* type: pause 中止录音;
* type: continue 继续录音;
* type: end 结束录音;
* type: cancel 取消录音
*/
console.log('handleTriggerClick', $event, sourceType, type)
},
handlePlay(file, sourceType) {
/**
* file为文件对象
* sourceType表示选取资源类型videoaudio视频音频
*/
console.log('handlePlay', file, sourceType)
}
}
}
</script>

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>

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