forked from opentiny/tiny-vue
feat: add dialog-select and refactor sites (#378)
This commit is contained in:
GitHub
parent
18d4d190d3
commit
164afb23e4
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
dist
|
||||
runtime
|
||||
dist-vue2/
|
||||
dist-vue3/
|
||||
dist2/
|
||||
dist2.7/
|
||||
dist3/
|
||||
node_modules
|
||||
examples/docs/public/assets/map/js
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,5 +1,6 @@
|
|||
dist
|
||||
dist2
|
||||
dist2.7
|
||||
dist3
|
||||
node_modules
|
||||
internal/template
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
|
||||
"better-comments.highlightPlainText": true,
|
||||
"better-comments.tags": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ 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'
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ npm i @opentiny/vue@2
|
|||
|
||||
在`App.vue`文件中使用 TinyVue 组件。
|
||||
|
||||
```vue
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { Button as TinyButton } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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]}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,61 +11,73 @@
|
|||
<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 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 v-for="(apiTable, key) in state.currApi" :key="key">
|
||||
<div class="my8 f22 fw-bold">
|
||||
<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="15%">名称</th>
|
||||
<th width="20%">类型</th>
|
||||
<th width="20%">名称</th>
|
||||
<th width="15%">类型</th>
|
||||
<th width="20%">默认值</th>
|
||||
<th width="55%">说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in apiTable" :key="row.name">
|
||||
<tr v-for="row in oneApiArr" :key="row.name">
|
||||
<td>
|
||||
<a v-if="row.sample" class="c-primary h:c-error cur-hand" @click="fn.selectDemo(row.sample)">{{
|
||||
<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>{{ row.desc }}</td>
|
||||
<td v-html="row.desc['zh-CN']"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边浮动所有的demos -->
|
||||
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
|
||||
<div class="f12 ofy-auto" style="max-height: calc(100vh - 240px)">
|
||||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
// 切换上次缓存的主题
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@opentiny/vue-docs",
|
||||
"name": "@opentiny/vue-localhost-dev",
|
||||
"type": "module",
|
||||
"version": "1.0.8",
|
||||
"description": "",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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> <tiny-button>自定义按钮2</tiny-button>
|
||||
</template>
|
||||
|
|
@ -75,7 +101,6 @@ export default {
|
|||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<tiny-badge is-dot>
|
||||
小圆点显示
|
||||
</tiny-badge>
|
||||
<tiny-badge is-dot> 小圆点显示 </tiny-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<tiny-badge :value="500" :max="99">
|
||||
最大值显示
|
||||
</tiny-badge>
|
||||
<tiny-badge :value="500" :max="99"> 最大值显示 </tiny-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<tiny-badge :value="2">
|
||||
自定义内容插槽
|
||||
<template #content>
|
||||
自定义
|
||||
</template>
|
||||
<template #content> 自定义 </template>
|
||||
</tiny-badge>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<tiny-badge :value="value1">
|
||||
默认类型
|
||||
</tiny-badge>
|
||||
<tiny-badge :value="value1"> 默认类型 </tiny-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button autofocus>
|
||||
默认聚焦
|
||||
</tiny-button>
|
||||
<tiny-button autofocus> 默认聚焦 </tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<tiny-button @click="click">
|
||||
默认按钮
|
||||
</tiny-button>
|
||||
<tiny-button @click="click"> 默认按钮 </tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button type="text" href="/">
|
||||
超链接按钮
|
||||
</tiny-button>
|
||||
<tiny-button type="text" href="/"> 超链接按钮 </tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<tiny-checkbox v-model="checked">
|
||||
复选框
|
||||
</tiny-checkbox>
|
||||
<tiny-checkbox v-model="checked"> 复选框 </tiny-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="{
|
||||
<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>
|
||||
</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,
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<script>
|
||||
import { Collapse, CollapseItem } from '@opentiny/vue'
|
||||
import { IconWriting } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCollapse: Collapse,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,7 +34,8 @@ 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
|
||||
return `[${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}, ${date2.getFullYear()}/${
|
||||
date2.getMonth() + 1
|
||||
}/${date2.getDate()}]`
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconEllipsis } from '@opentiny/vue-icon'
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
</template>
|
||||
</tiny-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-split {
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -15,4 +15,5 @@ export default {
|
|||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过配置 `accept(.doc,.docx)` 来限制上传文件的格式为 `.doc .docx`<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['file-type.vue']
|
||||
},
|
||||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `fileList` 配置需要显示的文件列表。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['file-list.vue']
|
||||
},
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>配置 `show-title` 为 `false` 隐藏标题，默认为 `true`。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['show-title.vue']
|
||||
},
|
||||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 `title` 可自定义标题。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['title.vue']
|
||||
},
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `preview` 事件，已上传的文件会显示预览按钮，点击预览图标会触发 `preview` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['preview.vue']
|
||||
},
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `preview` 事件，已上传的文件会显示预览图标，点击预览图标会触发 `preview` 事件。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['preview-picture.vue']
|
||||
},
|
||||
|
|
@ -98,7 +98,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-all` 事件，会显示下载全部按钮，点击下载全部按钮会触发 `download-all` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download-all.vue']
|
||||
},
|
||||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `download-file` 事件，已上传的文件会显示下载按钮，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download.vue']
|
||||
},
|
||||
|
|
@ -124,7 +124,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `download-file` 事件，已上传的文件会显示下载图标，点击下载按钮会触发 `download-file` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['download-picture.vue']
|
||||
},
|
||||
|
|
@ -137,7 +137,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>文件上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传按钮，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload.vue']
|
||||
},
|
||||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>图片上传模式，配置 `re-upload` 事件，上传失败的文件会显示重新上传图标，点击重新上传按钮会触发 `re-upload` 事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['re-upload-picture.vue']
|
||||
},
|
||||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>文件上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['display-only.vue']
|
||||
},
|
||||
|
|
@ -174,7 +174,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>图片上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-picture.vue']
|
||||
},
|
||||
|
|
@ -186,7 +186,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>音视频上传模式，通过 `display-only` 设置组件是否只读。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['display-only-video-audio.vue']
|
||||
},
|
||||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `picture-single`，展示单图片模式。可配置 `file-list` 属性展示对应的图片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['picture.vue']
|
||||
},
|
||||
|
|
@ -210,7 +210,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `picture-card`，展示图片墙模式。可配置 `file-list` 属性展示对应的图片<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['picture-card.vue']
|
||||
},
|
||||
|
|
@ -222,7 +222,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `show-name` 控制是否展示图片名字<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['picture-show-name.vue']
|
||||
},
|
||||
|
|
@ -234,7 +234,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `list-type` 为 `picture-single` 时，设置 `source-type` 为 `video` 时展示视频<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['video.vue']
|
||||
},
|
||||
|
|
@ -246,7 +246,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>在 `list-type` 为 `picture-single` 时，设置 `source-type` 为 `audio` 时展示视频<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['audio.vue']
|
||||
},
|
||||
|
|
@ -259,7 +259,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>在 `list-type` 为 `picture-card` 时，设置 `source-type` 为 `video/audio/picture` 时进行视频、音频、图片上传，`source-type` 支持 `video、audio、picture` 的互相组合<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['multi-media.vue']
|
||||
},
|
||||
|
|
@ -272,7 +272,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>同时在多媒体上传模式下，可配置hwh5属性，进行原生上传。可在 `trigger-click` 事件中进行文件选取操作并上传，可在 `play` 事件中进行音视频播放操作<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['multi-media-native.vue']
|
||||
},
|
||||
|
|
@ -285,7 +285,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>设置 `list-type` 为 `drag-single`，开启单文件拖拽上传。<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['drag.vue']
|
||||
},
|
||||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>可配置 `file-list` 属性展示对应的文件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['drag-file-list.vue']
|
||||
},
|
||||
|
|
@ -310,7 +310,7 @@ export default {
|
|||
desc: {
|
||||
'zh-CN':
|
||||
'<p>`trigger-click` 点击文件上传时触发的事件<br>`preview` 点击预览时触发的事件<br> `download-file` 点击下载时触发的事件<br>`download-all` 点击全部下载时触发的事件<br>`re-upload` 点击重新上传时触发的事件<br>`click-file-list` 点击上传的文件列表时触发的事件<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['event-trigger-click.vue']
|
||||
},
|
||||
|
|
@ -322,7 +322,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>`assist-content` 辅助内容插槽<p>',
|
||||
'en-US': '<p>bbutton click</p>'
|
||||
'en-US': '<p>button click</p>'
|
||||
},
|
||||
codeFiles: ['assist-content.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height: 300px;">
|
||||
<div style="height: 300px">
|
||||
<p><tiny-button @click="value = [2, 1, 2, [1, 4, 5]]">点击改变当前值</tiny-button> 值：{{ value }}</p>
|
||||
<br />
|
||||
<tiny-filter v-model="value" :data="data" @update:modelValue="aa"></tiny-filter>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue