forked from opentiny/tiny-vue
doc(fix):[carousel,color-picker,color-select-panel,config-provider,crop,dialog-box] Update doc text (#1130)
This commit is contained in:
parent
899174994c
commit
41c608fbbd
|
@ -287,7 +287,7 @@ export default {
|
||||||
'type': 'string',
|
'type': 'string',
|
||||||
'defaultValue': '',
|
'defaultValue': '',
|
||||||
'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
|
'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
|
||||||
'demoId': 'show-title'
|
'demoId': 'manual-play'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'slots': [
|
'slots': [
|
||||||
|
|
|
@ -88,16 +88,6 @@ export default {
|
||||||
'name': 'color-picker',
|
'name': 'color-picker',
|
||||||
'type': 'component',
|
'type': 'component',
|
||||||
'props': [
|
'props': [
|
||||||
{
|
|
||||||
'name': 'modelValue',
|
|
||||||
'type': 'string',
|
|
||||||
'defaultValue': `'transparent'`,
|
|
||||||
desc: {
|
|
||||||
'zh-CN': '默认颜色',
|
|
||||||
'en-US': 'default color'
|
|
||||||
},
|
|
||||||
demoId: 'basic-usage'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'visible',
|
name: 'visible',
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
|
|
|
@ -60,16 +60,6 @@ export default {
|
||||||
'name': 'color select panel',
|
'name': 'color select panel',
|
||||||
'type': 'component',
|
'type': 'component',
|
||||||
'props': [
|
'props': [
|
||||||
{
|
|
||||||
name: 'modelValue',
|
|
||||||
type: 'String',
|
|
||||||
defaultValue: 'transparent',
|
|
||||||
desc: {
|
|
||||||
'zh-CN': '默认颜色',
|
|
||||||
'en-US': 'default color'
|
|
||||||
},
|
|
||||||
demoId: 'basic-usage'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'visible',
|
name: 'visible',
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: ConfigProvide 组件
|
title: ConfigProvider 组件
|
||||||
---
|
---
|
||||||
|
|
||||||
# ConfigProvide 组件
|
# ConfigProvider 组件
|
||||||
|
|
||||||
<div></div>
|
<div></div>
|
||||||
|
|
|
@ -48,19 +48,12 @@ export default {
|
||||||
},
|
},
|
||||||
'demoId': 'base'
|
'demoId': 'base'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
'name': 'breakPoints',
|
|
||||||
'type': 'breakPoint',
|
|
||||||
'defaultValue': "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}",
|
|
||||||
'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': 'Breakpoints, providing layout with' },
|
|
||||||
'demoId': 'base'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
'name': 'direction',
|
'name': 'direction',
|
||||||
'type': "'ltr' | 'rtl'",
|
'type': "'ltr' | 'rtl'",
|
||||||
'defaultValue': 'ltr',
|
'defaultValue': 'ltr',
|
||||||
'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
|
'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
|
||||||
'demoId': 'text-dire'
|
'demoId': 'text-direct'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'tag',
|
'name': 'tag',
|
||||||
|
@ -71,7 +64,7 @@ export default {
|
||||||
'en-US':
|
'en-US':
|
||||||
'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
|
'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
|
||||||
},
|
},
|
||||||
'demoId': 'base'
|
'demoId': 'tag'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'events': [],
|
'events': [],
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
:preview="true"
|
:preview="true"
|
||||||
:quality="0.5"
|
:quality="0.5"
|
||||||
max-size="300KB"
|
max-size="300KB"
|
||||||
|
@setAspectRatio="setAspectRatio"
|
||||||
></tiny-crop>
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -20,4 +21,11 @@ import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
|
||||||
|
|
||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
|
const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
|
||||||
|
|
||||||
|
function setAspectRatio(aspectRatio) {
|
||||||
|
Modal.message({
|
||||||
|
message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
:preview="true"
|
:preview="true"
|
||||||
:quality="0.5"
|
:quality="0.5"
|
||||||
max-size="300KB"
|
max-size="300KB"
|
||||||
|
@setAspectRatio="setAspectRatio"
|
||||||
></tiny-crop>
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -27,6 +28,14 @@ export default {
|
||||||
visible: false,
|
visible: false,
|
||||||
imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
|
imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setAspectRatio(aspectRatio) {
|
||||||
|
Modal.message({
|
||||||
|
message: `宽高比数据: ${JSON.stringify(aspectRatio)}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -11,6 +11,8 @@
|
||||||
@cropmove="cropmove"
|
@cropmove="cropmove"
|
||||||
@cropend="cropend"
|
@cropend="cropend"
|
||||||
@crop="crop"
|
@crop="crop"
|
||||||
|
@cropdata="cropdata"
|
||||||
|
enable
|
||||||
></tiny-crop>
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -30,6 +32,13 @@ function getCanvasData() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function cropdata(data) {
|
||||||
|
Modal.message({
|
||||||
|
message: `Canvas 数据:${JSON.stringify(data)}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function cropstart(e) {
|
function cropstart(e) {
|
||||||
Modal.message({
|
Modal.message({
|
||||||
message: 'cropstart 事件,回调参数:' + e,
|
message: 'cropstart 事件,回调参数:' + e,
|
||||||
|
|
|
@ -11,6 +11,8 @@
|
||||||
@cropmove="cropmove"
|
@cropmove="cropmove"
|
||||||
@cropend="cropend"
|
@cropend="cropend"
|
||||||
@crop="crop"
|
@crop="crop"
|
||||||
|
@cropdata="cropdata"
|
||||||
|
enable
|
||||||
></tiny-crop>
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -36,6 +38,12 @@ export default {
|
||||||
status: 'info'
|
status: 'info'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
cropdata(data) {
|
||||||
|
Modal.message({
|
||||||
|
message: `Canvas 数据:${JSON.stringify(data)}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
|
},
|
||||||
cropstart(e) {
|
cropstart(e) {
|
||||||
Modal.message({
|
Modal.message({
|
||||||
message: 'cropstart 事件,回调参数:' + e,
|
message: 'cropstart 事件,回调参数:' + e,
|
||||||
|
|
|
@ -4,7 +4,13 @@
|
||||||
获取裁剪后的图片数据
|
获取裁剪后的图片数据
|
||||||
</tiny-button>
|
</tiny-button>
|
||||||
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
||||||
<tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
<tiny-crop
|
||||||
|
ref="cropRef"
|
||||||
|
:cropvisible="visible"
|
||||||
|
@update:cropvisible="visible = $event"
|
||||||
|
:src="imgUrl"
|
||||||
|
:crop-type="blob"
|
||||||
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,13 @@
|
||||||
获取裁剪后的图片数据
|
获取裁剪后的图片数据
|
||||||
</tiny-button>
|
</tiny-button>
|
||||||
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
||||||
<tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
<tiny-crop
|
||||||
|
ref="crop"
|
||||||
|
:cropvisible="visible"
|
||||||
|
@update:cropvisible="visible = $event"
|
||||||
|
:src="imgUrl"
|
||||||
|
:crop-type="blob"
|
||||||
|
></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
|
<tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
|
||||||
|
<tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
|
||||||
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
||||||
<tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
<tiny-crop ref="cropRef" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,4 +21,10 @@ function getImageData() {
|
||||||
status: 'info'
|
status: 'info'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
function getCanvasData() {
|
||||||
|
Modal.message({
|
||||||
|
message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
|
<tiny-button @click="getImageData" style="margin-bottom: 20px">获取图像数据</tiny-button>
|
||||||
|
<tiny-button @click="getCanvasData" style="margin-bottom: 20px">获取画布位置和大小数据</tiny-button>
|
||||||
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
<tiny-button text="图片裁剪" @click="visible = !visible" style="margin-bottom: 20px"></tiny-button>
|
||||||
<tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
<tiny-crop ref="crop" :cropvisible="visible" @update:cropvisible="visible = $event" :src="imgUrl"></tiny-crop>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,6 +27,12 @@ export default {
|
||||||
message: `图像数据:${JSON.stringify(this.$refs.crop.getImageData())}`,
|
message: `图像数据:${JSON.stringify(this.$refs.crop.getImageData())}`,
|
||||||
status: 'info'
|
status: 'info'
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
getCanvasData() {
|
||||||
|
Modal.message({
|
||||||
|
message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
|
||||||
|
status: 'info'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
|
<tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
|
||||||
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
|
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="title">标题区</span>
|
<span class="title">标题区</span>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
|
<tiny-button @click="boxVisibility = true"> 右侧弹窗 </tiny-button>
|
||||||
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
|
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" modal-append-to-body>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="title">标题区</span>
|
<span class="title">标题区</span>
|
||||||
|
|
Loading…
Reference in New Issue