<template>
<view>
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">模态窗口</block>
</cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 普通窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">Modal</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 底部窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="bottomModal">Bottom</button>
</view>
</view>
<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white">
<view class="action text-green">确定</view>
<view class="action text-blue" @tap="hideModal">取消</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 对话窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DialogModal1">Dialog</button>
<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DialogModal2">Dialog</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white justify-end">
<view class="action">
<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
</view>
</view>
</view>
</view>
<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-green " @tap="hideModal">
<text class="cuIcon-moneybag"></text>微信支付</view>
<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">确定</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 图片窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Image">Image</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='Image'?'show':''">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class="action" @tap="hideModal">
<text class="cuIcon-close "></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub solid-left" @tap="hideModal">我知道了</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 单选窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">Radio</button>
</view>
</view>
<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<radio-group class="block" @change="RadioChange">
<view class="cu-list menu text-left">
<view class="cu-item" v-for="(item,index) in 5" :key="index">
<label class="flex justify-between align-center flex-sub">
<view class="flex-sub">Item {{index +1}}</view>
<radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
:value="'radio' + index"></radio>
</label>
</view>
</view>
</radio-group>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 多选窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="ChooseModal">Choose</button>
</view>
</view>
<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
<view class="cu-dialog" @tap.stop="">
<view class="cu-bar bg-white">
<view class="action text-blue" @tap="hideModal">取消</view>
<view class="action text-green" @tap="hideModal">确定</view>
</view>
<view class="grid col-3 padding-sm">
<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
:data-value="item.value"> {{item.name}}
<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
</button>
</view>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="cuIcon-title text-orange "></text> 侧边抽屉
</view>
<view class="action">
<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">Left</button>
<button class="cu-btn bg-blue shadow margin-left" @tap="showModal" data-target="DrawerModalR">Right</button>
</view>
</view>
<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
<view class="cu-list menu text-left">
<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
<view class="content">
<view>Item {{index +1}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
CustomBar: this.CustomBar,
modalName: null,
radio: 'radio1',
checkbox: [{
value: 0,
name: '10元',
checked: false,
hot: false,
}, {
value: 1,
name: '20元',
checked: true,
hot: false,
}, {
value: 2,
name: '30元',
checked: true,
hot: true,
}, {
value: 3,
name: '60元',
checked: false,
hot: true,
}, {
value: 4,
name: '80元',
checked: false,
hot: false,
}, {
value: 5,
name: '100元',
checked: false,
hot: false,
}]
};
},
methods: {
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
RadioChange(e) {
this.radio = e.detail.value
},
ChooseCheckbox(e) {
let items = this.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
}
}
}
</script>
<style>
button .cu-tag {
position: absolute;
top: 8upx;
right: 8upx;
}
</style>
```
```
