mjz update
This commit is contained in:
mjz
@@ -5,10 +5,241 @@ permalink: /pages/component/modal
|
||||
article: false
|
||||
---
|
||||
|
||||
## 操作条
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/component/modal`
|
||||
```vue
|
||||
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| 显示弹框| ——|
|
||||
Reference in New Issue
Block a user