forked from opentiny/tiny-vue
feat(modal): 增加反馈弹窗modal组件 (#19)
* feat(modal): 增加反馈弹窗modal组件 Signed-off-by: MNZhu <zhumaonan@aliyun.com> * fix(modal): 变更tiny_mode读取字段 Signed-off-by: MNZhu <zhumaonan@aliyun.com> * fix(modal): message属性增加Object类型 Signed-off-by: MNZhu <zhumaonan@aliyun.com> --------- Signed-off-by: MNZhu <zhumaonan@aliyun.com>
This commit is contained in:
jacknan
GitHub
parent
6eeea71f90
commit
73e2ec0ce9
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="baseClick1" :reset-time="0">单按钮无标题</tiny-button>
|
||||
<tiny-button @click="baseClick2" :reset-time="0">单按钮有标题</tiny-button>
|
||||
<tiny-button @click="baseClick3" :reset-time="0">单按钮有标题多行</tiny-button>
|
||||
<tiny-button @click="baseClick4" :reset-time="0">双按钮有标题</tiny-button>
|
||||
<tiny-button @click="baseClick5" :reset-time="0">双按钮无标题</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal, Notify } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
baseClick1() {
|
||||
Modal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
|
||||
},
|
||||
baseClick2() {
|
||||
Modal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
|
||||
},
|
||||
baseClick3() {
|
||||
Modal.alert({
|
||||
message: '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
|
||||
title: '标题',
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
},
|
||||
baseClick4() {
|
||||
Modal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
|
||||
Notify({
|
||||
type: 'info',
|
||||
title: '触发回调事件',
|
||||
message: `点击${res}按钮`
|
||||
})
|
||||
})
|
||||
},
|
||||
baseClick5() {
|
||||
Modal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
|
||||
Notify({
|
||||
type: 'info',
|
||||
title: '触发回调事件',
|
||||
message: `点击${res}按钮`
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击取消按钮时触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @cancel="cancelClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelClick() {
|
||||
Modal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeClick() {
|
||||
Modal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击确定按钮触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @confirm="confirmClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmClick() {
|
||||
Modal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="baseClick" :reset-time="0">默认3000ms后自动关闭提示框</tiny-button>
|
||||
<tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
|
||||
<tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
baseClick() {
|
||||
Modal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
|
||||
},
|
||||
successClick() {
|
||||
Modal.message({
|
||||
message: '500ms后自动关闭提示框',
|
||||
status: 'success',
|
||||
duration: '500',
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
},
|
||||
errorClick() {
|
||||
Modal.message({
|
||||
message: '5000ms后自动关闭提示框',
|
||||
status: 'error',
|
||||
duration: '5000',
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">按 Esc 键可以关闭弹出框</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">自定义脚部</tiny-button>
|
||||
<tiny-modal v-model="value1" show-footer>
|
||||
<template #footer>
|
||||
<tiny-button type="primary" @click="value1 = false" round>我知道了</tiny-button>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">最大化显示</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
|
||||
<tiny-modal v-model="value1" :lock-scroll="false" show-footer width="1000">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
<tiny-grid :tooltip-config="{ 'append-to-body': false }" :data="tableData" :auto-resize="true">
|
||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
||||
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="公司名称" show-tip></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" show-overflow="tooltip"></tiny-grid-column>
|
||||
<tiny-grid-column field="created_date" title="创建日期" show-overflow="tooltip"></tiny-grid-column>
|
||||
<tiny-grid-column field="city" title="城市文字" show-overflow="tooltip"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal, Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal,
|
||||
TinyGrid: Grid,
|
||||
TinyGridColumn: GridColumn
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false,
|
||||
tableData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司 GFD科技YX公司',
|
||||
city: '福州 福州 福州 福州 福州 福州 福州 福州 福州 福州',
|
||||
address: '中国广东省深圳龙岗区SZ单身公寓',
|
||||
created_date: '2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00 2014-04-30 00:56:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
address: '深圳福田区',
|
||||
created_date: '2016-07-08 12:36:22'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
address: '深圳福田区',
|
||||
created_date: '2014-02-14 14:14:14'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">在窗口关闭时会触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @hide="hideClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideClick() {
|
||||
Modal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不允许重复点击</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
|
||||
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick" :is-form-reset="false">
|
||||
<tiny-form :model="createData" label-width="100px">
|
||||
<tiny-form-item label="用户名" prop="username">
|
||||
<tiny-input v-model="createData.username"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="密码" prop="password">
|
||||
<tiny-input v-model="createData.password" show-password></tiny-input>
|
||||
</tiny-form-item>
|
||||
</tiny-form>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal, Notify, Form, FormItem, Input } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal,
|
||||
TinyForm: Form,
|
||||
TinyFormItem: FormItem,
|
||||
TinyInput: Input
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false,
|
||||
createData: {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeClick() {
|
||||
Notify({
|
||||
title: 'closeClick事件',
|
||||
message: '点击关闭按钮时触发事件',
|
||||
position: 'top-right'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不锁住滚动条不要遮罩层</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '不锁住滚动条不要遮罩层',
|
||||
lockScroll: false,
|
||||
mask: false,
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '不锁界面不要遮罩层',
|
||||
lockView: false,
|
||||
mask: false,
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">点击遮罩层可以关闭</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">自定义提示框的内容</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '提示框拖动最小高度为300',
|
||||
resize: true,
|
||||
minHeight: 300,
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '提示框拖动最小宽度为700',
|
||||
resize: true,
|
||||
minWidth: 700,
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">可以拖动调整窗口大小</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({
|
||||
message: '可以拖动调整窗口大小',
|
||||
resize: true,
|
||||
height: 188,
|
||||
width: 366,
|
||||
tiny_mode: 'mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">在窗口显示时触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" show-footer @show="showClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showClick() {
|
||||
Modal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="baseClick" :reset-time="0">基本提示图标</tiny-button>
|
||||
<tiny-button @click="successClick" :reset-time="0">成功提示图标</tiny-button>
|
||||
<tiny-button @click="warningClick" :reset-time="0">警告提示图标</tiny-button>
|
||||
<tiny-button @click="errorClick" :reset-time="0">错误提示图标</tiny-button>
|
||||
<tiny-button @click="loadingClick" :reset-time="0">加载提示图标</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
baseClick() {
|
||||
Modal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
|
||||
},
|
||||
successClick() {
|
||||
Modal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
|
||||
},
|
||||
warningClick() {
|
||||
Modal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
|
||||
},
|
||||
errorClick() {
|
||||
Modal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
|
||||
},
|
||||
loadingClick() {
|
||||
Modal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="alertClick" :reset-time="0">alert 弹框</tiny-button>
|
||||
<tiny-button @click="messageClick" :reset-time="0">message 提示框</tiny-button>
|
||||
<tiny-button @click="confirmClick" :reset-time="0">confirm 确认提示框</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal, Notify } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
alertClick() {
|
||||
Modal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
|
||||
},
|
||||
messageClick() {
|
||||
Modal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
|
||||
},
|
||||
confirmClick() {
|
||||
Modal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {
|
||||
Notify({
|
||||
type: 'info',
|
||||
title: '触发回调事件',
|
||||
message: `点击${res}按钮`
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">默认插槽</tiny-button>
|
||||
<tiny-modal v-model="value1" :lock-scroll="false" show-footer>
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-button @click="btnClick" :reset-time="0">zIndex的值为500</tiny-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button
|
||||
},
|
||||
methods: {
|
||||
btnClick() {
|
||||
Modal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-button @click="value1 = !value1" :reset-time="0">窗口缩放时触发事件</tiny-button>
|
||||
<tiny-modal v-model="value1" type="confirm" resize show-footer @zoom="zoomClick">
|
||||
<template #default>
|
||||
<p>test</p>
|
||||
</template>
|
||||
</tiny-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyModal: Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value1: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
zoomClick() {
|
||||
Modal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Notice"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 基本用法
|
||||
|
||||
可通过 `Modal.alert` 方法设置弹出框，通过 `Modal.confirm` 方法设置确认弹出框。
|
||||
|
||||
<nova-demo-view link="modal/base"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
<nova-attributes link="modal"></nova-attributes>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 模态框弹出表单
|
||||
|
||||
模态框弹出表单，关闭模态框的时候，默认重置表单，设置 `is-form-reset` 为false,则关闭模态框的时候不重置表单
|
||||
|
||||
<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 自动关闭延时
|
||||
|
||||
可通过 `duration` 属性设置自动关闭的延迟时间，只对 type=message 有效。
|
||||
|
||||
<nova-demo-view link="modal/duration"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 按 Esc 键关闭弹出框
|
||||
|
||||
可通过 `esc-closable` 属性设置是否允许按 Esc 键关闭窗口，默认为 `false`。
|
||||
|
||||
<nova-demo-view link="modal/esc-closable"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 取消按钮事件
|
||||
|
||||
点击取消按钮时触发 `cancel` 事件。
|
||||
|
||||
<nova-demo-view link="modal/cancel-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 关闭按钮事件
|
||||
|
||||
点击关闭按钮时会触发 `close` 事件。
|
||||
|
||||
<nova-demo-view link="modal/close-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 确定按钮事件
|
||||
|
||||
点击确定按钮时会触发 `confirm` 事件。
|
||||
|
||||
<nova-demo-view link="modal/confirm-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 窗口关闭事件
|
||||
|
||||
窗口关闭时会触发 `hide` 事件。
|
||||
|
||||
<nova-demo-view link="modal/hide-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 窗口显示事件
|
||||
|
||||
在窗口显示时会触发 `show` 事件。
|
||||
|
||||
<nova-demo-view link="modal/show-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 窗口缩放事件
|
||||
|
||||
窗口缩放时会触发 `zoom` 事件。
|
||||
|
||||
<nova-demo-view link="modal/zoom-event"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 最大化显示
|
||||
|
||||
可通过 `fullscreen` 属性设置是否最大化显示。
|
||||
|
||||
<nova-demo-view link="modal/fullscreen"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 防止重复提示
|
||||
|
||||
如果不想窗口重复点击，可以设置唯一的 `id` 防止重复提示，只对 type=message 有效。
|
||||
|
||||
<nova-demo-view link="modal/id"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 自动关闭延时
|
||||
|
||||
Modal嵌套表单使用时，关闭弹窗时，重置表单数据.设置 `is-form-reset` 为 `false`,则关闭弹窗是不重置表单
|
||||
|
||||
<nova-demo-view link="modal/is-form-reset"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 锁住滚动条
|
||||
|
||||
可通过 `lock-scroll` 属性设置是否锁住滚动条，不允许页面滚动。
|
||||
|
||||
<nova-demo-view link="modal/lock-scroll"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 锁住页面
|
||||
|
||||
可通过 `lock-view` 属性设置是否锁住页面，不允许窗口之外的任何操作。
|
||||
|
||||
<nova-demo-view link="modal/lock-view"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 点击遮罩层关闭窗口
|
||||
|
||||
可通过 `mask-closable` 属性设置是否允许点击遮罩层关闭窗口。
|
||||
|
||||
<nova-demo-view link="modal/mask-closable"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 显示遮罩层
|
||||
|
||||
可通过 `mask` 属性设置是否显示遮罩层，默认为 `true`。
|
||||
|
||||
<nova-demo-view link="modal/lock-view"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 自定义内容
|
||||
|
||||
可通过 `message` 属性设置窗口的内容。
|
||||
|
||||
<nova-demo-view link="modal/message"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 调整窗口大小
|
||||
|
||||
可通过和`width`和`height`设置窗口的宽高，而通过 `resize` 设置是否允许拖动调整窗口大小。
|
||||
|
||||
<nova-demo-view link="modal/resize"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 调整窗口大小后窗口显示的最小宽度
|
||||
|
||||
配置 `resize` 可拖拽属性为 `true`后，可通过 `min-width` 属性设置拖拽后窗口的最小宽度。
|
||||
|
||||
<nova-demo-view link="modal/min-width"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 调整窗口大小后窗口显示的最小高度
|
||||
|
||||
配置 `resize` 可拖拽属性为 `true`后，可通过 `min-height` 属性设置拖拽后窗口的最小高度。
|
||||
|
||||
<nova-demo-view link="modal/min-height"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 不显示底部
|
||||
|
||||
可通过 `showFooter` 属性设置是否显示底部，默认为 `true`。
|
||||
|
||||
<nova-demo-view link="modal/showFooter"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 不显示头部
|
||||
|
||||
可通过 `showHeader` 属性设置是否显示头部，默认为 `true`。
|
||||
|
||||
<nova-demo-view link="modal/showHeader"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
|
||||
</div>
|
||||
|
||||
### 默认插槽
|
||||
|
||||
可通过 `templete` 设置默认插槽。
|
||||
|
||||
<nova-demo-view link="modal/value"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 底部插槽
|
||||
|
||||
可通过 `slot="footer"` 设置底部插槽。
|
||||
|
||||
<nova-demo-view link="modal/footer-slot"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
||||
### 嵌套 grid
|
||||
|
||||
可通过插槽嵌套 grid
|
||||
|
||||
<nova-demo-view link="modal/grid"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 消息状态
|
||||
|
||||
可通过 `status` 属性设置消息状态，可选值有 `info | success | warning | error | loading`。
|
||||
|
||||
<nova-demo-view link="modal/status"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 标题
|
||||
|
||||
可通过 `title` 属性设置窗口的标题。
|
||||
|
||||
<nova-demo-view link="modal/title"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 距离顶部的位置
|
||||
|
||||
可通过 `top` 属性设置消息距离顶部的位置，只对 type=message 有效。
|
||||
|
||||
<nova-demo-view link="modal/top"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 窗口类型
|
||||
|
||||
可通过 `type` 属性设置窗口类型，可选值 `alert | confirm | message`。
|
||||
|
||||
<nova-demo-view link="modal/type"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 绑定值
|
||||
|
||||
可通过 `value/v-model` 属性绑定值。
|
||||
|
||||
<nova-demo-view link="modal/value"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="demo-header">
|
||||
<p class="overviewicon">
|
||||
<span class="wapi-tips-messagebox"/>
|
||||
</p>
|
||||
|
||||
## Modal 模态框
|
||||
|
||||
<nova-uxlink widget-name="Modal"></nova-uxlink>
|
||||
</div>
|
||||
|
||||
### 自定义堆叠顺序
|
||||
|
||||
可通过 `zIndex` 属性设置自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）。
|
||||
|
||||
<nova-demo-view link="modal/zIndex"></nova-demo-view>
|
||||
|
||||
<br>
|
||||
|
|
@ -867,6 +867,92 @@
|
|||
"name": "加载不同样式"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/modal",
|
||||
"name": "Modal 反馈弹框",
|
||||
"children": [
|
||||
{
|
||||
"path": "/modal/modal-fullscreen",
|
||||
"name": "最大化显示"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-esc-closable",
|
||||
"name": "按 Esc 键关闭窗口"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-duration",
|
||||
"name": "自动关闭延时"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-id",
|
||||
"name": "防止重复提示"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-lock-scroll",
|
||||
"name": "锁住滚动条"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-lock-view",
|
||||
"name": "锁住页面"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-mask",
|
||||
"name": "显示遮罩层"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-mask-closable",
|
||||
"name": "点击遮罩层关闭窗口"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-message",
|
||||
"name": "自定义内容"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-resize",
|
||||
"name": "调整窗口大小"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-showFooter",
|
||||
"name": "不显示底部"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-showHeader",
|
||||
"name": "不显示头部"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-title",
|
||||
"name": "标题"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-top",
|
||||
"name": "距离顶部的位置"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-type",
|
||||
"name": "窗口类型"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-value",
|
||||
"name": "绑定值"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-zIndex",
|
||||
"name": "自定义堆叠顺序"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-is-form-reset",
|
||||
"name": "关闭弹窗是否重置表单数据"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-event",
|
||||
"name": "事件"
|
||||
},
|
||||
{
|
||||
"path": "/modal/modal-slots",
|
||||
"name": "插槽"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -1018,7 +1104,8 @@
|
|||
"name": "插槽"
|
||||
}
|
||||
]
|
||||
},{
|
||||
},
|
||||
{
|
||||
"path": "/mobile-popover",
|
||||
"name": " Popover 气泡",
|
||||
"children": [
|
||||
|
|
|
|||
|
|
@ -1204,6 +1204,111 @@ const router = [
|
|||
path: 'table',
|
||||
meta: { title: 'table 表格组件 - 类型', lang: 'zh-CN' },
|
||||
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/table/base.md')
|
||||
},
|
||||
{
|
||||
path: 'modal',
|
||||
meta: { title: 'modal 反馈弹窗组件 - 类型', lang: 'zh-CN' },
|
||||
component: () => import(/* webpackChunkName: "mobileComp" */ './docs/mobile/modal/basic-usage.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-fullscreen',
|
||||
meta: { title: '模态框组件-最大化显示', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-fullscreen.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-esc-closable',
|
||||
meta: { title: '模态框组件-按 Esc 键关闭窗口', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-esc-closable.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-duration',
|
||||
meta: { title: '模态框组件-自动关闭延时', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-duration.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-id',
|
||||
meta: { title: '模态框组件-防止重复提示', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-id.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-lock-scroll',
|
||||
meta: { title: '模态框组件-锁住滚动条', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-lock-scroll.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-lock-view',
|
||||
meta: { title: '模态框组件-锁住页面', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-lock-view.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-mask',
|
||||
meta: { title: '模态框组件-显示遮罩层', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-mask.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-mask-closable',
|
||||
meta: { title: '模态框组件-点击遮罩层关闭窗口', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-mask-closable.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-message',
|
||||
meta: { title: '模态框组件-自定义内容', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-message.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-resize',
|
||||
meta: { title: '模态框组件-拖动调整窗口大小', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-resize.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-showHeader',
|
||||
meta: { title: '模态框组件-不显示头部', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-showHeader.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-showFooter',
|
||||
meta: { title: '模态框组件-不显示底部', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-showFooter.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-status',
|
||||
meta: { title: '模态框组件-消息状态', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-status.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-title',
|
||||
meta: { title: '模态框组件-标题', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-title.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-top',
|
||||
meta: { title: '模态框组件-距离顶部的位置', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-top.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-type',
|
||||
meta: { title: '模态框组件-窗口类型', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-type.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-value',
|
||||
meta: { title: '模态框组件-绑定值', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-value.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-zIndex',
|
||||
meta: { title: '模态框组件-自定义堆叠顺序', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-zIndex.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-event',
|
||||
meta: { title: '模态框组件-事件', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-event.md')
|
||||
},
|
||||
{
|
||||
path: 'modal/modal-slots',
|
||||
meta: { title: '模态框组件-插槽', lang: 'zh-CN', sign: 'component' },
|
||||
component: () => import(/* webpackChunkName: 'v3-modal' */ './docs/zh-CN/modal/modal-slots.md')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
*/
|
||||
import { createComponent, setupComponent } from '@opentiny/vue-common'
|
||||
import { MsgQueue } from '@opentiny/vue-renderless/modal'
|
||||
import TINYModal from './src/index.vue'
|
||||
import '@opentiny/vue-theme/modal/index.css'
|
||||
import TINYModal from './src/index'
|
||||
|
||||
TINYModal.version = process.env.COMPONENT_VERSION
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
import { $props, $prefix, $setup } from '@opentiny/vue-common'
|
||||
import PCTemplate from './pc'
|
||||
import MobileTemplate from './mobile'
|
||||
|
||||
const template = (mode) => {
|
||||
if (process.env.TINY_MODE === 'pc') return PCTemplate
|
||||
else if (process.env.TINY_MODE === 'mobile') return MobileTemplate
|
||||
else return mode === 'mobile' ? MobileTemplate : PCTemplate
|
||||
}
|
||||
|
||||
const $constants = {
|
||||
MODAL_STATUS: {
|
||||
INFO: 'info',
|
||||
SUCCESS: 'success',
|
||||
WARNING: 'warning',
|
||||
ERROR: 'error',
|
||||
LOADING: 'loading'
|
||||
},
|
||||
NODAL_TYPE: {
|
||||
ALERT: 'alert',
|
||||
CONFIRM: 'confirm',
|
||||
MESSAGE: 'message'
|
||||
},
|
||||
STATUS_MAPPING_CLASSS: {
|
||||
INFO: 'tiny-modal-svg__info',
|
||||
SUCCESS: 'tiny-modal-svg__success',
|
||||
WARNING: 'tiny-modal-svg__warning',
|
||||
ERROR: 'tiny-modal-svg__error',
|
||||
LOADING: 'tiny-modal-svg__refresh roll'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: $prefix + 'Modal',
|
||||
componentName: 'Modal',
|
||||
props: {
|
||||
...$props,
|
||||
_constants: {
|
||||
type: Object,
|
||||
default: () => $constants
|
||||
},
|
||||
animat: { type: Boolean, default: () => true },
|
||||
beforeClose: Function,
|
||||
duration: { type: [Number, String], default: () => 3000 },
|
||||
escClosable: Boolean,
|
||||
events: Object,
|
||||
fullscreen: Boolean,
|
||||
height: [Number, String],
|
||||
id: String,
|
||||
isFormReset: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lockScroll: Boolean,
|
||||
lockView: { type: Boolean, default: () => true },
|
||||
marginSize: { type: [Number, String], default: 10 },
|
||||
mask: { type: Boolean, default: () => true },
|
||||
maskClosable: Boolean,
|
||||
message: [String, Function, Object],
|
||||
minHeight: { type: [Number, String], default: () => 200 },
|
||||
minWidth: { type: [Number, String], default: () => 340 },
|
||||
modelValue: Boolean,
|
||||
resize: Boolean,
|
||||
showFooter: Boolean,
|
||||
showHeader: { type: Boolean, default: true },
|
||||
status: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
title: String,
|
||||
top: { type: [Number, String], default: 15 },
|
||||
type: { type: String, default: 'alert' },
|
||||
vSize: String,
|
||||
width: [Number, String],
|
||||
zIndex: [Number, String],
|
||||
mode: null
|
||||
},
|
||||
setup(props, context) {
|
||||
return $setup({ props, context, template })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<!--
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
-->
|
||||
<script>
|
||||
import { props, setup, h } from '@opentiny/vue-common'
|
||||
import { renderless, api } from '@opentiny/vue-renderless/modal/vue'
|
||||
import Button from '@opentiny/vue-button'
|
||||
import { iconFullscreenLeft, iconMinscreenLeft } from '@opentiny/vue-icon'
|
||||
import '@opentiny/vue-theme-mobile/modal/index.css'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
...props,
|
||||
'_constants',
|
||||
'animat',
|
||||
'beforeClose',
|
||||
'duration',
|
||||
'escClosable',
|
||||
'events',
|
||||
'fullscreen',
|
||||
'height',
|
||||
'id',
|
||||
'isFormReset',
|
||||
'lockScroll',
|
||||
'lockView',
|
||||
'marginSize',
|
||||
'mask',
|
||||
'maskClosable',
|
||||
'message',
|
||||
'minHeight',
|
||||
'minWidth',
|
||||
'modelValue',
|
||||
'resize',
|
||||
'showFooter',
|
||||
'showHeader',
|
||||
'title',
|
||||
'top',
|
||||
'type',
|
||||
'vSize',
|
||||
'width',
|
||||
'zIndex'
|
||||
],
|
||||
components: {
|
||||
Button
|
||||
},
|
||||
provide() {
|
||||
return { dialog: this }
|
||||
},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
},
|
||||
render() {
|
||||
let { state, scopedSlots, vSize, type, resize, animat, showHeader } = this
|
||||
let { showFooter, title, message, lockScroll, lockView, mask, t } = this
|
||||
let { zoomLocat, visible, contentVisible, modalTop, isMsg } = state
|
||||
let defaultSlot = scopedSlots.default
|
||||
let footerSlot = scopedSlots.footer
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: [
|
||||
'tiny-mobile-modal',
|
||||
'tiny-mobile-modal__wrapper',
|
||||
`type__${type}`,
|
||||
{
|
||||
[`size__${vSize}`]: vSize,
|
||||
is__animat: animat,
|
||||
lock__scroll: lockScroll,
|
||||
lock__view: lockView,
|
||||
is__mask: mask,
|
||||
is__maximize: zoomLocat,
|
||||
is__visible: contentVisible,
|
||||
active: visible
|
||||
}
|
||||
],
|
||||
style: {
|
||||
zIndex: this.state.modalZindex,
|
||||
top: modalTop ? `${modalTop}px` : null
|
||||
},
|
||||
on: {
|
||||
click: this.selfClickEvent
|
||||
}
|
||||
},
|
||||
[
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'tiny-mobile-modal__box',
|
||||
ref: 'modalBox'
|
||||
},
|
||||
[
|
||||
showHeader
|
||||
? h(
|
||||
'div',
|
||||
{
|
||||
class: 'tiny-mobile-modal__header',
|
||||
on: {
|
||||
mousedown: this.mousedownEvent
|
||||
}
|
||||
},
|
||||
[
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'tiny-mobile-modal__title'
|
||||
},
|
||||
title || t('ui.alert.title')
|
||||
),
|
||||
resize
|
||||
? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
|
||||
class: ['tiny-mobile-modal__zoom-btn', 'trigger__btn'],
|
||||
on: {
|
||||
click: this.toggleZoomEvent
|
||||
}
|
||||
})
|
||||
: null
|
||||
]
|
||||
)
|
||||
: null,
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'tiny-mobile-modal__body'
|
||||
},
|
||||
[
|
||||
isMsg
|
||||
? h('div', {
|
||||
class: 'tiny-mobile-modal__status-wrapper'
|
||||
})
|
||||
: null,
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
class: 'tiny-mobile-modal__content'
|
||||
},
|
||||
defaultSlot
|
||||
? defaultSlot.call(this, { $modal: this }, h)
|
||||
: [h('div', { class: 'tiny-mobile-modal__text' }, typeof message === 'function' ? message.call(this, h) : message)]
|
||||
)
|
||||
]
|
||||
),
|
||||
showFooter
|
||||
? h(
|
||||
'div',
|
||||
{
|
||||
class: 'tiny-mobile-modal__footer'
|
||||
},
|
||||
footerSlot
|
||||
? footerSlot.call(this, { $modal: this, beforeClose: this.beforeClose }, h)
|
||||
: [
|
||||
type === 'confirm'
|
||||
? h(
|
||||
Button,
|
||||
{
|
||||
props: {
|
||||
class: ['tiny-mobile-button', 'tiny-mobile-button--default']
|
||||
},
|
||||
on: {
|
||||
click: this.cancelEvent
|
||||
}
|
||||
},
|
||||
t('ui.button.cancel')
|
||||
)
|
||||
: null,
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
props: {
|
||||
type: 'primary',
|
||||
class: ['tiny-mobile-button', type !== 'confirm' ? 'tiny-mobile-button__single' : '']
|
||||
},
|
||||
on: {
|
||||
click: this.confirmEvent
|
||||
}
|
||||
},
|
||||
t('ui.button.confirm')
|
||||
)
|
||||
]
|
||||
)
|
||||
: null,
|
||||
!isMsg && resize
|
||||
? h(
|
||||
'span',
|
||||
{
|
||||
class: 'tiny-mobile-modal__resize'
|
||||
},
|
||||
['wl', 'wr', 'swst', 'sest', 'st', 'swlb', 'selb', 'sb'].map((type) =>
|
||||
h('span', {
|
||||
class: `${type}-resize`,
|
||||
attrs: { 'data-type': type },
|
||||
on: { mousedown: this.dragEvent }
|
||||
})
|
||||
)
|
||||
)
|
||||
: null
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
*
|
||||
-->
|
||||
<script>
|
||||
import { $prefix, setup, h } from '@opentiny/vue-common'
|
||||
import { props, setup, h } from '@opentiny/vue-common'
|
||||
import { renderless, api } from '@opentiny/vue-renderless/modal/vue'
|
||||
import Button from '@opentiny/vue-button'
|
||||
import {
|
||||
|
|
@ -24,71 +24,41 @@ import {
|
|||
iconFullscreenLeft,
|
||||
iconMinscreenLeft
|
||||
} from '@opentiny/vue-icon'
|
||||
|
||||
const $constants = {
|
||||
MODAL_STATUS: {
|
||||
INFO: 'info',
|
||||
SUCCESS: 'success',
|
||||
WARNING: 'warning',
|
||||
ERROR: 'error',
|
||||
LOADING: 'loading'
|
||||
},
|
||||
NODAL_TYPE: {
|
||||
ALERT: 'alert',
|
||||
CONFIRM: 'confirm',
|
||||
MESSAGE: 'message'
|
||||
},
|
||||
STATUS_MAPPING_CLASSS: {
|
||||
INFO: 'tiny-modal-svg__info',
|
||||
SUCCESS: 'tiny-modal-svg__success',
|
||||
WARNING: 'tiny-modal-svg__warning',
|
||||
ERROR: 'tiny-modal-svg__error',
|
||||
LOADING: 'tiny-modal-svg__refresh roll'
|
||||
}
|
||||
}
|
||||
import '@opentiny/vue-theme/modal/index.css'
|
||||
|
||||
export default {
|
||||
name: $prefix + 'Modal',
|
||||
props: {
|
||||
_constants: {
|
||||
type: Object,
|
||||
default: () => $constants
|
||||
},
|
||||
animat: { type: Boolean, default: () => true },
|
||||
beforeClose: Function,
|
||||
duration: { type: [Number, String], default: () => 3000 },
|
||||
escClosable: Boolean,
|
||||
events: Object,
|
||||
fullscreen: Boolean,
|
||||
height: [Number, String],
|
||||
id: String,
|
||||
isFormReset: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lockScroll: Boolean,
|
||||
lockView: { type: Boolean, default: () => true },
|
||||
marginSize: { type: [Number, String], default: 10 },
|
||||
mask: { type: Boolean, default: () => true },
|
||||
maskClosable: Boolean,
|
||||
message: [String, Function],
|
||||
minHeight: { type: [Number, String], default: () => 200 },
|
||||
minWidth: { type: [Number, String], default: () => 340 },
|
||||
modelValue: Boolean,
|
||||
resize: Boolean,
|
||||
showFooter: Boolean,
|
||||
showHeader: { type: Boolean, default: true },
|
||||
status: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
title: String,
|
||||
top: { type: [Number, String], default: 15 },
|
||||
type: { type: String, default: 'alert' },
|
||||
vSize: String,
|
||||
width: [Number, String],
|
||||
zIndex: [Number, String]
|
||||
},
|
||||
props: [
|
||||
...props,
|
||||
'_constants',
|
||||
'animat',
|
||||
'beforeClose',
|
||||
'duration',
|
||||
'escClosable',
|
||||
'events',
|
||||
'fullscreen',
|
||||
'height',
|
||||
'id',
|
||||
'isFormReset',
|
||||
'lockScroll',
|
||||
'lockView',
|
||||
'marginSize',
|
||||
'mask',
|
||||
'maskClosable',
|
||||
'message',
|
||||
'minHeight',
|
||||
'minWidth',
|
||||
'modelValue',
|
||||
'resize',
|
||||
'showFooter',
|
||||
'showHeader',
|
||||
'status',
|
||||
'title',
|
||||
'top',
|
||||
'type',
|
||||
'vSize',
|
||||
'width',
|
||||
'zIndex'
|
||||
],
|
||||
components: {
|
||||
Button
|
||||
},
|
||||
|
|
@ -96,7 +66,7 @@ export default {
|
|||
return { dialog: this }
|
||||
},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api, mono: true })
|
||||
return setup({ props, context, renderless, api })
|
||||
},
|
||||
render() {
|
||||
let { state, scopedSlots, vSize, type, resize, animat, status, showHeader } = this
|
||||
Loading…
Reference in New Issue