|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <view v-if="showPopup" class="y-popup-mask"> | 
|---|
|  |  |  | <view v-if="!showPopup" class="y-popup-mask"> | 
|---|
|  |  |  | <uni-transition key="1" mode-class="fade" :styles="maskClass" :show="show" @click="onTap"/> | 
|---|
|  |  |  | <uni-transition key="2" :styles="transClass" :show="showTrans"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <view style="height: 70rpx;background-color: aliceblue;">title</view> | 
|---|
|  |  |  | <uni-transition key="2" :styles="transClass" :show="showTrans" mode-class="fade" :duration="duration"> | 
|---|
|  |  |  | <view style="height: 70rpx;background-color: aliceblue;">{{titleText}}</view> | 
|---|
|  |  |  | <scroll-view scroll-y class="scroll-Y"> | 
|---|
|  |  |  | <view style="width: 500rpx;height: 300rpx;background-color: aqua;"> | 
|---|
|  |  |  | <slot /> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | <slot> | 
|---|
|  |  |  | <input type="text"> | 
|---|
|  |  |  | </slot> | 
|---|
|  |  |  | </scroll-view> | 
|---|
|  |  |  | <view> | 
|---|
|  |  |  | <button size="mini">按钮</button> | 
|---|
|  |  |  | <button size="mini" @click="close">按钮</button> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </uni-transition> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'y-popup', | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | title: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | titleText() { | 
|---|
|  |  |  | return this.title || t("uni-popup.title") | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | show:false, | 
|---|
|  |  |  | showPopup:false, | 
|---|
|  |  |  | showTrans: false, | 
|---|
|  |  |  | duration: 300, | 
|---|
|  |  |  | duration: 500, | 
|---|
|  |  |  | ani: [], | 
|---|
|  |  |  | maskClass: { | 
|---|
|  |  |  | position: 'fixed', | 
|---|