Skip to content
This repository was archived by the owner on Oct 27, 2021. It is now read-only.

Commit

Permalink
fix(modal):fix modal bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
yue.peng committed Aug 6, 2020
1 parent a39cce5 commit f060117
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 96 deletions.
145 changes: 74 additions & 71 deletions packages/taro-ui-vue-demo/src/pages/action/modal/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,72 @@
<template>
<view class='page'>
<DocsHeader title='Modal 模态框' />
<view class="page">
<DocsHeader title="Modal 模态框" />

<view class='doc-body'>
<view class="doc-body">
<!-- 基础模态框 -->
<view class='panel'>
<view class='panel__title'>基础模态框</view>
<view class='panel__content'>
<view class='example-item'>
<AtButton :onClick="handleClick.bind(this, 1)">
<view class="panel">
<view class="panel__title">
基础模态框
</view>
<view class="panel__content">
<view class="example-item">
<AtButton :on-click="handleClickShow(1)">
打开基础模态框
</AtButton>
</view>
</view>
</view>

<!-- 单个按钮 -->
<view class='panel'>
<view class='panel__title'>单个按钮</view>
<view class='panel__content'>
<view class='example-item'>
<AtButton :on-click="handleClick.bind(this, 2)">
<view class="panel">
<view class="panel__title">
单个按钮
</view>
<view class="panel__content">
<view class="example-item">
<AtButton :on-click="handleClickShow(2)">
打开单个按钮模态框
</AtButton>
</view>
</view>
</view>

<!-- 无标题 -->
<view class='panel'>
<view class='panel__title'>无标题</view>
<view class='panel__content'>
<view class='example-item'>
<AtButton :on-click="handleClick.bind(this, 3)">
<view class="panel">
<view class="panel__title">
无标题
</view>
<view class="panel__content">
<view class="example-item">
<AtButton :on-click="handleClickShow(3)">
打开无标题模态框
</AtButton>
</view>
</view>
</view>

<!-- 简化使用 -->
<view class='panel'>
<view class='panel__title'>简化使用</view>
<view class='panel__content'>
<view class='example-item'>
<AtButton :on-click="handleClick.bind(this, 4)">
<view class="panel">
<view class="panel__title">
简化使用
</view>
<view class="panel__content">
<view class="example-item">
<AtButton :on-click="handleClickShow(4)">
打开简化使用模态框
</AtButton>
</view>
</view>
</view>

<!-- 城市索引 -->
<view class='panel'>
<view class='panel__title'>城市索引</view>
<view class='panel__content'>
<view class='example-item'>
<AtButton :on-click="handleClick.bind(this, 5)">
<view class="panel">
<view class="panel__title">
城市索引
</view>
<view class="panel__content">
<view class="example-item">
<AtButton :on-click="handleClickShow(5)">
打开城市索引
</AtButton>
</view>
Expand All @@ -66,92 +76,92 @@

<!-- 基础模态框 -->
<AtModal
:isOpened="state.isOpened1"
:on-close="closeModal.bind(this, 1, 'Modal被关闭了')"
:is-opened="state.isOpened1"
:on-close="closeModal(1, 'Modal被关闭了')"
>
<AtModalHeader>标题</AtModalHeader>
<AtModalContent>
<view class='modal-content'>
<view class="modal-content">
这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室
</view>
</AtModalContent>
<AtModalAction>
<AtButton :onClick="closeModal(1, '点击了取消')">
<button :on-click="closeModal(1, '点击了取消')">
取消
</AtButton>
<AtButton :onClick="closeModal(1, '点击了确定')">
</button>
<button :on-click="closeModal(1, '点击了确定')">
确定
</AtButton>
</button>
</AtModalAction>
</AtModal>

<!-- 单个按钮 -->
<AtModal
:isOpened="state.isOpened2"
<!-- <AtModal
:is-opened="state.isOpened2"
:on-close="closeModal.bind(this, 2, 'Modal被关闭了')"
>
<AtModalHeader>标题</AtModalHeader>
<AtModalContent>
<view class='modal-content'>
<view class="modal-content">
这里是正文内容，欢迎加入京东凹凸实验室
</view>
</AtModalContent>
<AtModalAction>
<AtButton :onClick="closeModal.bind(this, 2, '点击了确定')">
<Button :on-click="closeModal.bind(this, 2, '点击了确定')">
确定
</AtButton>
</Button>
</AtModalAction>
</AtModal>
</AtModal> -->

<!-- 无标题 -->
<AtModal
<!-- <AtModal
:key="3"
:isOpened="state.isOpened3"
:is-opened="state.isOpened3"
content="这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室"
:on-close="closeModal.bind(this, 3, 'Modal被关闭了')"
:on-cancel="closeModal.bind(this, 3, '点击了取消')"
:on-confirm="closeModalConfirm.bind(this, 3, '点击了确认')"
cancelText='取消'
confirmText='确认'
></AtModal>
cancel-text="取消"
confirm-text="确认"
/> -->

<!-- 简化使用 -->
<AtModal
:isOpened="state.isOpened4"
title='标题'
cancelText='取消'
confirmText='确认'
<!-- <AtModal
:is-opened="state.isOpened4"
title="标题"
cancel-text="取消"
confirm-text="确认"
content="`欢迎加入京东凹凸实验室\n欢迎加入京东凹凸实验室`"
:on-close="closeModal.bind(this, 4, 'Modal被关闭了')"
:on-cancel="closeModal.bind(this, 4, '点击了取消')"
:on-confirm="closeModalConfirm.bind(this, 4, '点击了确认')"
/>
/> -->

<AtModal :isOpened="state.isOpened5">
<!-- <AtModal :is-opened="state.isOpened5">
<AtModalContent>
<AtIndexes
:list="mockData"
topKey='Top'
:customStyle="{ height: '400px' }"
top-key="Top"
:custom-style="{ height: '400px' }"
>
<view class='custom-area'>用户自定义内容</view>
<view class="custom-area">
用户自定义内容
</view>
</AtIndexes>
</AtModalContent>
</AtModal>
</AtModal> -->
</view>
</template>

<script>
import Taro from '@tarojs/taro'
import setStateMixin from '../../../mixins/setStateMixin'
import mockData from '../../navigation/indexes/mock-data'
export default {
name: 'ModalPage',
mixins: [setStateMixin],
data() {
return {
mockData,
Expand All @@ -165,27 +175,20 @@ export default {
}
},
methods: {
handleClick(type) {
this.setState({
[`isOpened${type}`]: true
})
handleClickShow(type) {
console.log(type)
this.state[`isOpened${type}`] = true
},
closeModal(type, msg) {
this.setState({
[`isOpened${type}`]: false
})
this.state[`isOpened${type}`] = false
Taro.showToast({
icon: 'none',
title: msg
})
},
closeModalConfirm(type, msg) {
this.setState({
[`isOpened${type}`]: false
})
this.state[`isOpened${type}`] = false
Taro.showToast({
icon: 'none',
title: msg
Expand Down
2 changes: 1 addition & 1 deletion packages/taro-ui-vue/src/components/modal/action/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<view :class="rootClass">
<view class="at-modal__action">
<slot></slot>
<slot />
</view>
</view>
</template>
Expand Down
7 changes: 5 additions & 2 deletions packages/taro-ui-vue/src/components/modal/content/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<view scrollY :class="rootClass">
<slot></slot>
<view
scroll-y
:class="rootClass"
>
<slot />
</view>
</template>
<script>
Expand Down
44 changes: 27 additions & 17 deletions packages/taro-ui-vue/src/components/modal/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
:class="rootClass"
>
<view
@tap="handleClickOverlay"
class="at-modal__overlay"
class="at-modal__overlay"
@tap="handleClickOverlay"
/>
<view class="at-modal__container">
<ModalHeader v-if="title">
Expand All @@ -16,33 +16,45 @@
<view class="content-simple">
<view
v-if="isWEB"
v-html="content.replace(/\n/g, '<br/>')">
v-html="content.replace(/\n/g, '<br/>')"
/>
<view v-else>
{{ content }}
</view>
<view v-else>{{ content }}</view>
</view>
</ModalContent>
<ModalAction v-if="cancelText || confirmText" isSimple>
<AtButton
<ModalAction
v-if="cancelText || confirmText"
is-simple
>
<button
v-if="cancelText"
@tap="handleCancel"
@click="handleCancel"
>
{{ cancelText }}
</AtButton>
<AtButton
</button>
<button
v-if="confirmText"
@tap="handleConfirm"
@click="handleConfirm"
>
{{ confirmText }}
</AtButton>
</button>
</ModalAction>
</view>
</view>
<view v-else @touchmove="handleTouchMove" :class="rootClass">
<view class='at-modal__overlay' @tap="handleClickOverlay" />
<view class='at-modal__container'>
<slot></slot>
<view
v-else
:class="rootClass"
@touchmove="handleTouchMove"
>
<view
class="at-modal__overlay"
@tap="handleClickOverlay"
/>
<view class="at-modal__container">
<slot />
</view>
</view>
</view>
Expand All @@ -52,16 +64,14 @@
import ModalAction from './action/index.vue'
import ModalContent from './content/index.vue'
import ModalHeader from './header/index.vue'
import AtButton from '../button/index.vue'
import AtModal from './index'
export default {
name: 'AtModal',
mixins: [AtModal],
components: {
ModalAction,
ModalContent,
ModalHeader,
AtButton
}
},
mixins: [AtModal]
}
</script>
Loading

0 comments on commit f060117

Please # to comment.