TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
uni-app弹窗,弹出层
4927
人阅读
2021/6/25 10:14
总访问:
3919282
评论:
0
收藏:
0
手机
分类:
移动开发
官方文档:https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html [TOC] ### 最简单的弹出一句话: 需要什么东西在内容里边加就行了 ``` <template> <view> <uni-popup ref="popup" background-color="#fff" > 士大夫大师傅 </uni-popup> <button type="default" @click="openView()">点击</button> </view> </template> <script> export default { data() { return { } }, methods: { openView() { this.$refs.popup.open(); } } } </script> <style> </style> ``` ### 弹出中加两个按钮: ``` <template> <view> <uni-popup ref="popup" background-color="#fff" > <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"> <button class="button popup-success" @click="toAddNoteHtml()"><text class="button-text success-text">html编辑器(app上推荐使用)</text></button> <button style="margin-top: 10px;" class="button popup-error" @click="toAddNoteMarkdown()"><text class="button-text error-text">markdown编辑器(临时简版)</text></button> </view> </uni-popup> <button type="default" @click="openView()">点击</button> </view> </template> <script> export default { data() { return { } }, methods: { openView() { this.$refs.popup.open(); } } } </script> <style> </style> ``` ### 弹出中添加表单元素: ``` <template> <view style="width: 100%;"> <uni-popup ref="popup" style="width: 100%;" background-color="#fff"> <view class="popupView"> <!-- 基础表单校验 --> <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top"> <uni-forms-item label="标题" style="margin-top: -8px;" required name="name"> <uni-easyinput v-model="valiFormData.name" placeholder="请输入标题" /> </uni-forms-item> <uni-forms-item label="类型" style="margin-top: -8px;" required name="type"> <uni-data-picker :localdata="items" :clearable="false"></uni-data-picker> </uni-forms-item> </uni-forms> <button type="primary" @click="submit('valiForm')">提交</button> </view> </uni-popup> <button type="default" @click="openView()">点击</button> </view> </template> <script> export default { data() { return { items: [{ text: "一年级", value: "1-0", children: [{ text: "1.1班", value: "1-1" }, { text: "1.2班", value: "1-2" } ] }, { text: "二年级", value: "2-0" }, { text: "三年级", value: "3-0" } ], // 校验表单数据 valiFormData: { name: '', type: '', }, // 校验规则 rules: { name: { rules: [{ required: true, errorMessage: '笔记标题不能为空' }] }, type: { rules: [{ required: true, errorMessage: '类型不能为空' }] } } } }, methods: { openView() { this.$refs.popup.open(); }, submit(ref) { this.$refs[ref].validate().then(res => { uni.showToast({ title: "功能开发中...", icon: "none" }) console.log(res); }).catch(err => { console.log('err', err); }) } } } </script> <style scoped> /deep/.uni-popup .uni-popup__wrapper { width: 80% !important; padding: 40rpx; } /* .popupView { width: 600rpx; padding: 40rpx; } */ </style> ``` ### 在vue3中的使用 #### 基本使用 页面上也是一样 ``` <uni-popup ref="classRankingPopup" type="bottom">班级排名</uni-popup> ``` 打开弹窗的地方这么写: ``` // 这里的名称保持和uni-popup上面的ref名称一致即可 let classRankingPopup =ref() const openClassRankingPopup = ()=>{ classRankingPopup.value.open() } ``` #### 弹窗里边加入一个组件 实现的效果: <img src="https://img.tnblog.net/arcimg/aojiancc2/1ba0d9d627a340af9cf854eb3258b99b.png" style="width:399px;height:auto;"> 组件的代码,圆角这些也是写到这个组件里边,相当于就是弹窗里边的内容,取名叫classSort ``` <template> <view class="container"> <scroll-view scroll-y="true" style=" height: 1099rpx;"> <view class="titleWrap"> <view class="title">班级排名</view> <view>×</view> </view> <view class="splitline"></view> <view class="sortWrap"> <view class="sortItem" :class="index>2?'simpleIndex':''" v-for="(item, index) in 9" v-bind:key="index"> <!-- 前三名使用图标展示 --> <view class="sortUserWrap" v-if="index<=2"> <image class="sort_img" :src="'../../static/sort_'+(index+1)+'.png'"> </image> <view class="userName">李美丽</view> </view> <view class="sortUserWrap" v-else> <view class="sortIndex">{{(index+1)}}</view> <view class="userName">李美丽{{(index+3)}}</view> </view> <view class="sortCompleteWrap"> <view class="scoreItem">健康:6</view> <view class="scoreItem">思维:6</view> <view class="scoreItem">技术:6</view> <view class="scoreItem">管理:6</view> <view class="scoreItem">总分:6</view> </view> </view> </view> </scroll-view> </view> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' </script> <style lang="scss" scoped> .container { height: 1099rpx; background-color: #fff; // border-radius: 10px; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; padding-left: 20rpx; padding-right: 20rpx; .sortWrap { margin-top: 39rpx; } .sortItem { display: flex; align-items: center; margin-top: 30rpx; .sortUserWrap { display: flex; align-items: center; width: 200rpx; // background-color: #ffabcd; //宽高比 0.765957 .sort_img{ width: 50rpx; height: 65.27rpx; } .sortIndex { background: #CFE4FF; color: #4E84FD; width: 50rpx; height: 50rpx; border-radius: 50%; text-align: center; line-height: 50rpx; } .userName { font-size: 31rpx; margin-left: 10rpx; color: #174A90; } } } .simpleIndex{ margin-top: 39rpx; } .sortCompleteWrap { display: flex; margin-left: 15rpx; color: #565A67; font-size: 30rpx; // background: #abcdff; justify-content: space-between; flex: 1; // .scoreItem { // margin-left: 7rpx; // } } } .titleWrap { display: flex; padding-top: 22rpx; justify-content: space-between; padding-left: 20rpx; padding-right: 20rpx; .title { color: #3A3B42; } } .splitline { // border: 1rpx solid #E6E6E6; margin-left: -20rpx; margin-right: -20rpx; margin-top: 30rpx; height: 1rpx; background: #f3f3f3; } </style> ``` **页面上的地方** ``` <uni-popup ref="classRankingPopup" type="bottom"> <classSort></classSort> </uni-popup> ``` js: ``` <script lang="ts" setup> import classSort from '@/pages/home/classSort.vue' let classRankingPopup = ref() const openClassRankingPopup = () => { classRankingPopup.value.open() } </script> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}