我的文档库

Appearance

  1. cu-modal 和 cu-dialog 为模态框必选值，所有模态框的大体框架都是 cu-modal 包裹 cu-dialog

  2. cu-dialog 内部填充操作部分和信息展示部分，操作部分可以用 cu-bar 操作条来布局，信息展示就直接写

  3. 弹框的显示隐藏是通过添加或移除类名 show 来实现的，示例中隐藏弹框是绑定 tap 调用 hideModal 事件，hideModal 函数内执行的语句就是将变量 modalName 赋值为 null，从而移除类名 show，你想让用户点击哪里隐藏弹框，就可以把 hideModal 事件绑定在哪里（比如设置点击遮罩层隐藏弹框，就把 hideModal 事件绑定在有类名 cu-modal 的标签上）

普通窗口 ​

  1. 就是 cu-modal 包裹 cu-dialog，只做信息的展示，没有交互效果
html
<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>

底部窗口 ​

  1. cu-modal 结合 bottom-modal 实现底部弹窗
html
<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>

对话窗口 ​

  1. 对话窗口相较于普通窗口底部多了一些用户交互的操作
html
//示例一
<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>

图片窗口 ​

  1. cu-dialog 里放置图片，也可自定义
html
<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>

单选窗口 ​

  1. 就是普通窗口内部结合 radio 标签编写的
html
<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>

多选窗口 ​

  1. 配合 grid 布局自定义的
vue
<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>
<script>
	export default {
		data() {
			return {
				modalName: null,
				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
			},
			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>

侧边抽屉 ​

  1. cu-modal 结合 drawer-modal，由 justify-start 和 justify-end决定抽屉方向
html
//左侧抽屉
<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
	<view class="cu-dialog basis-lg" @tap.stop="">
		<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="" >
		<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>

模态框相关class ​

class说明可选值
cu-modal模态框必选值——
cu-dialog模态框子元素——
bottom-modal底部弹框——
drawer-modal侧边弹框——
show显示弹框——

Released under the MIT License.

Copyright © 2022-present tensent