写个基于uView2的科技风格页面弹窗,点击原页面一个按钮后弹出内容有个标题、下拉列表、步进器、确认按钮,
时间: 2023-11-26 19:06:47 浏览: 86
好的,我可以为您提供一个基于 uView2 的科技风格页面弹窗的示例代码,具体实现如下:
1. 在页面中添加一个按钮,点击该按钮后弹出弹窗:
```html
<template>
<view>
<button @click="showDialog">显示弹窗</button>
</view>
<u-dialog v-model="show" :title="title" :ok-text="okText" :cancel-text="cancelText" @ok="onOk" @cancel="onCancel">
<u-select v-model="selected" :options="options" />
<u-stepper v-model="number" :min="min" :max="max" :step="step" />
</u-dialog>
</template>
```
2. 在 Vue 实例中添加必要的数据和方法:
```javascript
<script>
export default {
data() {
return {
show: false,
title: '弹窗标题',
okText: '确认',
cancelText: '取消',
options: ['选项1', '选项2', '选项3'],
selected: '选项1',
number: 1,
min: 1,
max: 10,
step: 1
}
},
methods: {
showDialog() {
this.show = true
},
onOk() {
// 确认按钮点击事件
this.show = false
// TODO: 处理确认操作
},
onCancel() {
// 取消按钮点击事件
this.show = false
}
}
}
</script>
```
3. 在 App.vue 中引入 uView2 组件和自定义的弹窗组件:
```html
<template>
<view>
<my-dialog />
</view>
</template>
<script>
import uView from 'uview-ui'
import MyDialog from './components/MyDialog.vue'
export default {
components: {
uView,
MyDialog
}
}
</script>
```
4. 在 components/MyDialog.vue 中定义弹窗组件:
```html
<template>
<u-dialog v-model="show" :title="title" :ok-text="okText" :cancel-text="cancelText" @ok="onOk" @cancel="onCancel">
<u-select v-model="selected" :options="options" />
<u-stepper v-model="number" :min="min" :max="max" :step="step" />
</u-dialog>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: '弹窗标题'
},
okText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
}
},
data() {
return {
options: ['选项1', '选项2', '选项3'],
selected: '选项1',
number: 1,
min: 1,
max: 10,
step: 1
}
},
methods: {
onOk() {
// 确认按钮点击事件
this.$emit('ok')
},
onCancel() {
// 取消按钮点击事件
this.$emit('cancel')
}
}
}
</script>
```
这样,当用户点击页面上的按钮时,就会弹出一个包含标题、下拉列表、步进器和确认按钮的弹窗,用户可以在弹窗中进行操作,并通过确认或取消按钮来关闭弹窗。
阅读全文