ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
![](https://img.kancloud.cn/5f/4e/5f4e082155d0feadd983d419749aa459_638x914.png) <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> ``` ```