Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 6accb0c6 编写于 作者: richard_1015's avatar richard_1015
1 浏览文件
操作

feat(dialog): add props footer-direction

上级 51446ce5
隐藏空白更改
内联 并排
Showing with 139 addition and 108 deletion
src/packages/__VUE/dialog/demo.vue
浏览文件 @ 6accb0c6
......@@ -4,8 +4,9 @@
<nut-cell title="基础弹框" @click="baseClick"></nut-cell>
<nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
<nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
<nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
</nut-cell-group>
<nut-cell-group title="标签式调用">
<nut-cell-group title="标签式使用">
<nut-cell title="组件调用" @click="componentClick"></nut-cell>
<nut-dialog
teleport="#app"
......@@ -14,14 +15,20 @@
v-model:visible="visible"
>
</nut-dialog>
<nut-cell title="底部按钮 垂直使用" @click="componentvVrticalClick"></nut-cell>
<nut-dialog
footer-direction="vertical"
teleport="#app"
title="组件调用"
content="如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。"
v-model:visible="visible1"
>
</nut-dialog>
</nut-cell-group>
<nut-cell-group title="teleport 使用，挂载到指定节点">
<nut-cell title="body 节点下" @click="teleportClick('body')"></nut-cell>
<nut-cell title="#app 节点下" @click="teleportClick('#app')"></nut-cell>
<nut-cell
title="demo class 元素节点下"
@click="teleportClick('.demo')"
></nut-cell>
<nut-cell title="demo class 元素节点下" @click="teleportClick('.demo')"></nut-cell>
</nut-cell-group>
</div>
</template>
......@@ -34,6 +41,7 @@ import { Dialog } from '@/packages/nutui.vue';
export default createDemo({
setup() {
const visible = ref(false);
const visible1 = ref(false);
const onCancel = () => {
console.log('event cancel');
......@@ -66,10 +74,22 @@ export default createDemo({
onOk
});
};
const verticalClick = () => {
Dialog({
title: '温馨提示',
content: '支持底部按钮纵向排列。',
footerDirection: 'vertical',
onCancel,
onOk
});
};
const componentClick = () => {
visible.value = true;
};
const componentvVrticalClick = () => {
visible1.value = true;
};
const teleportClick = (teleport: string) => {
Dialog({
......@@ -83,10 +103,13 @@ export default createDemo({
return {
visible,
visible1,
baseClick,
noTitleClick,
componentClick,
componentvVrticalClick,
tipsClick,
verticalClick,
teleportClick
};
}
......
src/packages/__VUE/dialog/doc.md
浏览文件 @ 6accb0c6
......@@ -35,6 +35,12 @@ Dialog({
content: '支持函数调用和组件调用两种方式。',
noCancelBtn: true,
});
Dialog({
title: '温馨提示',
content: '支持底部按钮纵向排列。',
footerDirection:"vertical"
});
```
......@@ -73,7 +79,10 @@ setup(){
## 标签式组件使用
```html
<nut-dialog :title="title" :close-on-click-overlay="false" :content="content" v-model:visible="visible"></nut-dialog>
<nut-cell title="标签式使用使用" @click="componentClick"></nut-cell>
<nut-cell title="底部按钮垂直使用" @click="componentvVrticalClick"></nut-cell>
<nut-dialog title="标签式使用" :close-on-click-overlay="false" content="内容" v-model:visible="visible"></nut-dialog>
<nut-dialog title="标签式使用" footer-direction="vertical" :close-on-click-overlay="false" content="内容" v-model:visible="visible1"></nut-dialog>
```
``` javascript
......@@ -82,10 +91,14 @@ import { Dialog } from '@nutui/nutui';
export default {
setup() {
const visible = ref(true);
const title = '标签式使用';
const content = '内容';
return { visible,title,content };
const visible1 = ref(true);
const componentClick = () => {
visible.value = true;
};
const componentvVrticalClick = () => {
visible1.value = true;
};
return { visible,visible1,componentClick,componentvVrticalClick };
},
};
```
......@@ -115,23 +128,23 @@ export default {
## Props
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|---------------------------------------|---------|----------|
| title | 标题 | String | - |
| content | 内容，支持HTML | String | - |
| teleport | 指定挂载节点 | String | "body" |
| close-on-click-overlay | 点击蒙层是否关闭对话框 | Boolean | false |
| no-footer | 是否隐藏底部按钮栏 | Boolean | false |
| no-ok-btn | 是否隐藏确定按钮 | Boolean | false |
| no-cancel-btn | 是否隐藏取消按钮 | Boolean | false |
| cancel-text | 取消按钮文案 | String | ”取消“ |
| ok-text | 确定按钮文案 | String | ”确 定“ |
| ok-btn-disabled | 禁用确定按钮 | Boolean | false |
| cancel-auto-close | 取消按钮是否默认关闭弹窗 | Boolean | true |
| text-align | 文字对齐方向，可选值同css的text-align | String | "center" |
| close-on-popstate | 是否在页面回退时自动关闭 | Boolean | false |
| lock-scroll | 背景是否锁定 | Boolean | false |
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------|---------|------------|
| title | 标题 | String | - |
| content | 内容，支持HTML | String | - |
| teleport | 指定挂载节点 | String | "body" |
| close-on-click-overlay | 点击蒙层是否关闭对话框 | Boolean | false |
| no-footer | 是否隐藏底部按钮栏 | Boolean | false |
| no-ok-btn | 是否隐藏确定按钮 | Boolean | false |
| no-cancel-btn | 是否隐藏取消按钮 | Boolean | false |
| cancel-text | 取消按钮文案 | String | ”取消“ |
| ok-text | 确定按钮文案 | String | ”确 定“ |
| ok-btn-disabled | 禁用确定按钮 | Boolean | false |
| cancel-auto-close | 取消按钮是否默认关闭弹窗 | Boolean | true |
| text-align | 文字对齐方向，可选值同css的text-align | String | "center" |
| close-on-popstate | 是否在页面回退时自动关闭 | Boolean | false |
| lock-scroll | 背景是否锁定 | Boolean | false |
| footer-direction | 使用横纵方向 可选值 horizontal、vertical | string | horizontal |
## Events
......
src/packages/__VUE/dialog/doc.taro.md
浏览文件 @ 6accb0c6
......@@ -27,6 +27,9 @@ app.use(Dialog);
<nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
<nut-dialog no-cancel-btn title="温馨提示" content="这是提示弹框。" v-model:visible="visible3" @cancel="onCancel" @ok="onOk" />
<nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
<nut-dialog footer-direction="vertical" teleport="#app" title="温馨提示" content="这是提示弹框。" v-model:visible="visible5" />
<nut-cell title="异步关闭" @click="componentClick"></nut-cell>
<nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
```
......@@ -39,6 +42,7 @@ export default {
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
const closeContent = ref('');
const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
const countDown = (second: number) => `倒计时 ${second} 秒`;
......@@ -82,11 +86,17 @@ export default {
visible4.value = true;
};
const verticalClick = () => {
visible5.value = true;
};
return {
visible1,
visible2,
visible3,
visible4,
visible5,
onCancel,
onOk,
closeContent,
......@@ -94,7 +104,8 @@ export default {
baseClick,
noTitleClick,
componentClick,
tipsClick
tipsClick,
verticalClick
};
}
};
......@@ -103,22 +114,23 @@ export default {
## Props
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|---------------------------------------|---------|----------|
| title | 标题 | String | - |
| content | 内容，支持HTML | String | - |
| teleport | 指定挂载节点 | String | "body" |
| close-on-click-overlay | 点击蒙层是否关闭对话框 | Boolean | false |
| no-footer | 是否隐藏底部按钮栏 | Boolean | false |
| no-ok-btn | 是否隐藏确定按钮 | Boolean | false |
| no-cancel-btn | 是否隐藏取消按钮 | Boolean | false |
| cancel-text | 取消按钮文案 | String | ”取消“ |
| ok-text | 确定按钮文案 | String | ”确 定“ |
| ok-btn-disabled | 禁用确定按钮 | Boolean | false |
| cancel-auto-close | 取消按钮是否默认关闭弹窗 | Boolean | true |
| text-align | 文字对齐方向，可选值同css的text-align | String | "center" |
| close-on-popstate | 是否在页面回退时自动关闭 | Boolean | false |
| lock-scroll | 背景是否锁定 | Boolean | false |
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------|---------|------------|
| title | 标题 | String | - |
| content | 内容，支持HTML | String | - |
| teleport | 指定挂载节点 | String | "body" |
| close-on-click-overlay | 点击蒙层是否关闭对话框 | Boolean | false |
| no-footer | 是否隐藏底部按钮栏 | Boolean | false |
| no-ok-btn | 是否隐藏确定按钮 | Boolean | false |
| no-cancel-btn | 是否隐藏取消按钮 | Boolean | false |
| cancel-text | 取消按钮文案 | String | ”取消“ |
| ok-text | 确定按钮文案 | String | ”确 定“ |
| ok-btn-disabled | 禁用确定按钮 | Boolean | false |
| cancel-auto-close | 取消按钮是否默认关闭弹窗 | Boolean | true |
| text-align | 文字对齐方向，可选值同css的text-align | String | "center" |
| close-on-popstate | 是否在页面回退时自动关闭 | Boolean | false |
| lock-scroll | 背景是否锁定 | Boolean | false |
| footer-direction | 使用横纵方向 可选值 horizontal、vertical | string | horizontal |
## Events
......
src/packages/__VUE/dialog/index.scss
浏览文件 @ 6accb0c6
......@@ -34,6 +34,23 @@
width: 100%;
justify-content: space-around;
&.horizontal {
}
&.vertical {
flex-direction: column;
.nut-button {
min-width: 100%;
margin: 0;
&.nut-dialog__footer-cancel {
border: 0;
}
&.nut-dialog__footer-ok {
margin-top: 10px;
}
}
}
.nut-button {
min-width: 100px;
}
......
src/packages/__VUE/dialog/index.taro.vue
浏览文件 @ 6accb0c6
......@@ -19,7 +19,7 @@
<view v-else v-html="content"></view>
</view>
<view class="nut-dialog__footer" v-if="!noFooter">
<view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
<slot v-if="$slots.footer" name="footer"></slot>
<template v-else>
<nut-button
......@@ -106,37 +106,16 @@ export default create({
type: String,
default: 'center'
},
onOk: {
type: Function,
default: null
},
onCancel: {
type: Function,
default: null
},
onClose: {
type: Function,
default: null
},
onClosed: {
type: Function,
default: null
},
closeOnPopstate: {
type: Boolean,
default: false
},
footerDirection: {
type: String,
default: 'horizontal' //vertical
}
},
emits: [
'update',
'update:visible',
'ok',
'cancel',
'open',
'opened',
'close',
'closed'
],
emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
setup(props, { emit }) {
const showPopup = ref(props.visible);
onMounted(() => {
......
src/packages/__VUE/dialog/index.vue
浏览文件 @ 6accb0c6
......@@ -19,7 +19,7 @@
<view v-else v-html="content"></view>
</view>
<view class="nut-dialog__footer" v-if="!noFooter">
<view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
<slot v-if="$slots.footer" name="footer"></slot>
<template v-else>
<nut-button
......@@ -106,25 +106,13 @@ export default create({
type: String,
default: 'center'
},
onOk: {
type: Function,
default: null
},
onCancel: {
type: Function,
default: null
},
onClose: {
type: Function,
default: null
},
onClosed: {
type: Function,
default: null
},
closeOnPopstate: {
type: Boolean,
default: false
},
footerDirection: {
type: String,
default: 'horizontal' //vertical
}
},
emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
......
src/sites/mobile-taro/vue/src/feedback/pages/dialog/index.vue
浏览文件 @ 6accb0c6
<template>
<div class="demo">
<nut-cell title="基础弹框" @click="baseClick"></nut-cell>
<nut-dialog
title="基础弹框"
content="这是基础弹框。"
v-model:visible="visible1"
@cancel="onCancel"
@ok="onOk"
/>
<nut-dialog title="基础弹框" content="这是基础弹框。" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />
<nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
<nut-dialog
content="这是无标题弹框。"
v-model:visible="visible2"
@cancel="onCancel"
@ok="onOk"
/>
<nut-dialog content="这是无标题弹框。" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />
<nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
<nut-dialog
......@@ -27,14 +16,17 @@
@ok="onOk"
/>
<nut-cell title="异步关闭" @click="componentClick"></nut-cell>
<nut-cell title="底部按钮 垂直使用" @click="verticalClick"></nut-cell>
<nut-dialog
title="异步关闭"
:content="closeContent"
:visible="visible4"
@cancel="onCancel"
@ok="onOkAsync"
footer-direction="vertical"
teleport="#app"
title="温馨提示"
content="这是提示弹框。"
v-model:visible="visible5"
/>
<nut-cell title="异步关闭" @click="componentClick"></nut-cell>
<nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
</div>
</template>
<script lang="ts">
......@@ -45,6 +37,7 @@ export default {
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
const closeContent = ref('');
const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
const countDown = (second: number) => `倒计时 ${second} 秒`;
......@@ -88,11 +81,16 @@ export default {
visible4.value = true;
};
const verticalClick = () => {
visible5.value = true;
};
return {
visible1,
visible2,
visible3,
visible4,
visible5,
onCancel,
onOk,
closeContent,
......@@ -100,7 +98,8 @@ export default {
baseClick,
noTitleClick,
componentClick,
tipsClick
tipsClick,
verticalClick
};
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或