Skip to content

Commit

Permalink
feat: dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@yang1206
yang1206 committed Jun 12, 2023
1 parent 2fe21ca commit 80494b3
Show file tree
Hide file tree
Showing 39 changed files with 1,659 additions and 65 deletions.
4 changes: 4 additions & 0 deletions example/src/components.d.ts
View file
Expand Up @@ -13,6 +13,10 @@ declare module '@vue/runtime-core' {
NutButton: typeof import('uniapp-nutui/components/button/button.vue')['default']
NutCell: typeof import('uniapp-nutui/components/cell/cell.vue')['default']
NutCellGroup: typeof import('uniapp-nutui/components/cellgroup/cellgroup.vue')['default']
NutCountdown: typeof import('uniapp-nutui/components/countdown/countdown.vue')['default']
NutDialog: typeof import('uniapp-nutui/components/dialog/dialog.vue')['default']
NutIcon: typeof import('uniapp-nutui/components/icon/icon.vue')['default']
NutOverlay: typeof import('uniapp-nutui/components/overlay/overlay.vue')['default']
NutPopup: typeof import('uniapp-nutui/components/popup/popup.vue')['default']
}
}
6 changes: 5 additions & 1 deletion example/src/demo/basic/pages/button/index.vue
View file
Expand Up @@ -9,6 +9,10 @@ function changeLoading() {
isLoading.value = false
}, 3000)
}
function click(val) {
console.log(val)
}
</script>

<route lang="json">
Expand All @@ -25,7 +29,7 @@ function changeLoading() {
按钮类型
</h2>
<div class="demo-button-row">
<nut-button type="primary">
<nut-button type="primary" @click="click">
主要按钮
</nut-button>
<nut-button type="info">
Expand Down
98 changes: 98 additions & 0 deletions example/src/demo/basic/pages/cell/index.vue
View file
@@ -0,0 +1,98 @@
<script setup lang="ts">
import { ref } from 'vue'
import { isH5 } from '@uni-helper/uni-env'
function testClick(event: Event) {
// console.log('点击事件');
}
const switchChecked = ref(true)
</script>

<route lang="json">
{
"style": {
"navigationBarTitleText": "Cell"
}
}
</route>

<template>
<div class="demo" :class="{ web: isH5 }">
<h2 class="title">
基础用法
</h2>
<nut-cell title="我是标题" desc="描述文字" />
<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字" />
<nut-cell title="点击测试" @click="testClick" />
<nut-cell title="圆角设置 0" round-radius="0" />

<h2 class="title">
尺寸设置 large
</h2>
<nut-cell size="large" title="我是标题" desc="描述文字" />
<nut-cell size="large" title="我是标题" sub-title="副标题描述" desc="描述文字" />

<h2 class="title">
直接使用插槽(slot)
</h2>

<nut-cell>
<div>自定义内容</div>
</nut-cell>

<h2 class="title">
直接使用插槽(slot title)
</h2>
<nut-cell desc="描述文字">
<template #title>
<span>Title <b style="color: red">1</b></span>
</template>
</nut-cell>

<nut-cell-group title="链接 | 分组用法">
<nut-cell title="链接" is-link />
<nut-cell
title="URL 跳转"
desc="https://jd.com"
is-link
url="https://jd.com"
/>
<nut-cell title="路由跳转 ’/‘ " to="/" />
</nut-cell-group>
<nut-cell-group title="自定义右侧箭头区域" desc="/Users/yangjunwei/Desktop/nutui/src/sites/mobile-taro/vue/src/basic/pages/overlay使用 nut-cell-group 支持 title desc slots">
<nut-cell title="Switch">
<template #link>
<!-- <nut-switch v-model="switchChecked" /> -->
</template>
</nut-cell>
</nut-cell-group>

<nut-cell-group title="自定义左侧 Icon 区域">
<nut-cell title="图片">
<template #icon>
<img
class="nut-icon"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
>
</template>
</nut-cell>
</nut-cell-group>

<h2 class="title">
展示图标
</h2>
<nut-cell title="姓名" icon="my" desc="张三" is-link>
<template #icon>
<nut-icon name="my" />
</template>
</nut-cell>
<h2 class="title">
只展示 desc ，可通过 desc-text-align 调整内容位置
</h2>
<nut-cell desc-text-align="left" desc="张三" />
<h2 class="title">
垂直居中
</h2>
<nut-cell center title="我是标题" sub-title="副标题描述" desc="描述文字" />
</div>
</template>
112 changes: 112 additions & 0 deletions example/src/demo/basic/pages/overlay/index.vue
View file
@@ -0,0 +1,112 @@
<script setup lang="ts">
import { ref } from 'vue'
import { isH5 } from '@uni-helper/uni-env'
const show = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const show6 = ref(false)
const overlayStyle = ref({
backgroundColor: 'rgba(0, 0, 0, .2)',
})
</script>

<template>
<div class="demo" :class="{ web: isH5 }">
<h2 class="title">
基础用法
</h2>
<nut-cell>
<nut-button type="primary" @click="show = true">
显示遮罩层
</nut-button>
<nut-overlay v-model:visible="show" />
</nut-cell>
<h2 class="title">
遮罩样式
</h2>
<nut-cell>
<nut-button type="primary" @click="show3 = true">
显示遮罩层
</nut-button>
<nut-overlay v-model:visible="show3" :z-index="2000" :overlay-style="overlayStyle" />
</nut-cell>
<h2 class="title">
设置动画时间
</h2>
<nut-cell>
<nut-button type="primary" @click="show4 = true">
设置动画时间
</nut-button>
<nut-overlay v-model:visible="show4" :duration="2500" />
</nut-cell>
<h2 class="title">
锁定背景滚动
</h2>
<nut-cell>
<nut-button type="primary" @click="show5 = true">
锁定背景滚动
</nut-button>
<nut-overlay v-model:visible="show5" lock-scroll />
</nut-cell>
<h2 class="title">
嵌套内容
</h2>
<nut-cell>
<nut-button type="success" @click="show2 = true">
嵌套内容
</nut-button>
<nut-overlay v-model:visible="show2" :z-index="2000">
<div class="wrapper">
<div class="content">
这里是正文
</div>
</div>
</nut-overlay>
</nut-cell>
<h2 class="title">
点击遮罩不关闭
</h2>
<nut-cell>
<nut-button type="primary" @click="show6 = true">
点击遮罩不关闭
</nut-button>
<nut-overlay v-model:visible="show6" lock-scroll :close-on-click-overlay="false">
<div class="wrapper">
<div class="content" @click.stop="show6 = false">
close
</div>
</div>
</nut-overlay>
</nut-cell>
</div>
</template>

<route lang="json">
{
"style": {
"navigationBarTitleText": "Overlay"
}
}
</route>

<style lang="scss">
.wrapper {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
.content {
display: flex;
width: 150px;
height: 150px;
background: #fff;
border-radius: 8px;
align-items: center;
justify-content: center;
color: red;
}
}
</style>
102 changes: 102 additions & 0 deletions example/src/demo/basic/pages/popup/index.vue
View file
@@ -0,0 +1,102 @@
<script lang="ts">
import { reactive, toRefs } from 'vue'
import { isH5 } from '@uni-helper/uni-env'
export default {
setup() {
const state = reactive({
showBasic: false,
showTop: false,
showBottom: false,
showLeft: false,
showRight: false,
showIcon: false,
showIconPosition: false,
showCloseIcon: false,
showRound: false,
showCombination: false,
showPop1: false,
showPop2: false,
showTeleport: false,
})
return { ...toRefs(state), isH5 }
},
}
</script>

<template>
<div class="demo" :class="{ web: isH5 }">
<h2 class="title">
基础用法
</h2>
<nut-cell title="展示弹出层" is-link @click="showBasic = true" />
<nut-popup v-model:visible="showBasic" pop-class="popclass" :z-index="100">
<div :style="{ padding: '30px 50px' }">
正文
</div>
</nut-popup>
<h2 class="title">
弹出位置
</h2>
<nut-cell title="顶部弹出" is-link @click="showTop = true" />
<nut-popup v-model:visible="showTop" position="top" :custom-style="{ height: '10%' }" />
<nut-cell title="底部弹出" is-link @click="showBottom = true" />
<nut-popup v-model:visible="showBottom" position="bottom" :custom-style="{ height: '20%' }" />
<nut-cell title="左侧弹出" is-link @click="showLeft = true" />
<nut-popup v-model:visible="showLeft" position="left" :custom-style="{ width: '20%', height: '100%' }" />
<nut-cell title="右侧弹出" is-link @click="showRight = true" />
<nut-popup v-model:visible="showRight" position="right" :custom-style="{ width: '20%', height: '100%' }" />
<h2 class="title">
关闭图标
</h2>
<nut-cell title="关闭图标" is-link @click="showIcon = true" />
<nut-popup v-model:visible="showIcon" position="bottom" closeable :custom-style="{ height: '20%' }" />
<nut-cell title="图标位置" is-link @click="showIconPosition = true" />
<nut-popup
v-model:visible="showIconPosition"
position="bottom"
closeable
close-icon-position="top-left"
:custom-style="{ height: '20%' }"
/>
<nut-cell title="自定义图标" is-link @click="showCloseIcon = true" />
<nut-popup
v-model:visible="showCloseIcon"
position="bottom"
closeable
close-icon-position="top-left"
:custom-style="{ height: '20%' }"
>
<template #close-icon>
<nut-icon name="heart" />
</template>
</nut-popup>
<h2 class="title">
圆角弹框
</h2>
<nut-cell title="圆角弹框" is-link @click="showRound = true" />
<nut-popup v-model:visible="showRound" position="bottom" closeable round :custom-style="{ height: '30%' }" />
<h2 class="title">
多层堆叠
</h2>
<nut-cell title="多层堆叠" is-link @click="showPop1 = true" />
<nut-popup v-model:visible="showPop1" :custom-style="{ padding: '30px 50px' }">
<div @click="showPop2 = true">
点击它
</div>
</nut-popup>
<nut-popup v-model:visible="showPop2" :custom-style="{ padding: '30px 50px' }">
正文
</nut-popup>
</div>
</template>

<route lang="json">
{
"style": {
"navigationBarTitleText": "Popup"
}
}
</route>

<style lang="scss"></style>

0 comments on commit 80494b3

Please sign in to comment.