精华内容
下载资源
问答
  • uniapp弹出框
    2020-10-10 11:53:24
    <view class="isaddress" v-if="addressisfo">
    			<view class="zhe" @click="addflase"></view>
    			<view class="address-add">
    				<view class="addradd-tit">{{$t('index.tjiaxinlxr')}}</view>
    				<view class="addradd-close" @click="addflase">
    					<image class="img" src="../../../static/img/sot/close_icon.png" mode=""></image>
    				</view>
    				<view class="addradd-item">
    					<view class="additem-title">{{$t('index.shouhren')}}</view>
    					<view class="additem-txt"><input type="text" maxlength="20" v-model="data.resgoods" :placeholder="$t('index.shouhourname')" /></view>
    				</view>
    				<view class="addradd-item">
    					<view class="additem-title">{{$t('index.sjhphone')}}</view>
    					<view class="additem-txt"><input type="number" v-model="data.resphone" maxlength="11" :placeholder="$t('index.shouhrsphoen')" /></view>
    				</view>
    				<view class="addradd-item">
    					<view class="additem-title">{{$t('index.diqusak')}}</view>
    					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
    						<view class="reg-item">
    							<view class="reg-item-input">
    								<input class="veibns" v-model="regionName" :placeholder="$t('index.qingxuanzediqu')" placeholder-style=""
    								 disabled />
    							</view>
    						</view>
    					</pick-regions>
    					<!-- 	<view class="additem-txt">点击选择</view>
    					<view class="additem-right"><image src="../../../../static/img/sot/right_icon.png" mode=""></image></view> -->
    				</view>
    				<view class="addradd-item">
    					<view class="additem-title">{{$t('index.xxdeatlisadress')}}</view>
    					<view class="additem-txt"><input type="text" v-model="data.detaliaddress" :placeholder="$t('index.rhsajdnskax')" /></view>
    				</view>
    				<view class="addradd-btn" @click="addaddress">
    					<button type="default">{{$t('index.tradebaocun')}}</button>
    				</view>
    			</view>
    		</view>
    
    	.zhe {
    		width: 100%;
    		height: 100%;
    		background-color: #0e0e12;
    		opacity: 0.8;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 0;
    	}
    	
    	.address-add {
    		position: relative;
    		width: 80%;
    		height: auto;
    		position: fixed;
    		z-index: 1;
    		top: 19%;
    		left: 10%;
    		background-color: #31364c;
    		border-radius: 10rpx;
    	}
    	
    	.additem-right image {
    		width: 14rpx;
    		height: 26rpx;
    	}
    	
    	.addradd-tit {
    		font-size: 36rpx;
    		color: #FFFFFF;
    		font-weight: bold;
    		text-align: center;
    		padding: 40rpx 0;
    	}
    	
    	.addradd-close {
    		width: 50rpx;
    		height: 50rpx;
    		position: fixed;
    		top: 20%;
    		right: calc(10% + 10rpx);
    	}
    	
    	.addradd-item {
    		display: flex;
    		align-items: center;
    		padding: 20rpx 40rpx;
    	}
    	
    	.additem-title {
    		font-size: 30rpx;
    		color: #FFFFFF;
    		width: 150rpx;
    		letter-spacing: 2rpx;
    	}
    	
    	.additem-txt {
    		font-size: 26rpx;
    		flex: 1;
    		color: #a2a5b4;
    	}
    	
    	.additem-txt input {
    		font-size: 30rpx;
    		color: #fff;
    	}
    	
    	.additem-txt input::-webkit-input-placeholder {
    		font-size: 24rpx;
    		color: #a2a5b4;
    	}
    	
    	.addradd-btn {
    		padding: 80rpx;
    	}
    	
    	.addradd-btn button {
    		height: 80rpx;
    		line-height: 80rpx;
    		background-color: #fec11a;
    		font-size: 36rpx;
    		color: #000000;
    		border-radius: 80rpx;
    		letter-spacing: 10rpx;
    		font-weight: bold;
    	}
    
    更多相关内容
  • 超好用的uniapp弹出

    千次阅读 2020-12-31 06:29:06
    分享到{{item.content}}取消export default {props: {},data() {return {shareList: [{image: '/static/temp/share_wechat.png', content: '微信'},{image: '/static/temp/share_moment.png', content: '朋友圈'}],...

    分享到

    { {item.content}}

    取消

    export default {

    props: {

    },

    data() {

    return {

    shareList: [

    {image: '/static/temp/share_wechat.png', content: '微信'},

    {image: '/static/temp/share_moment.png', content: '朋友圈'}

    ],

    shareState: false,

    };

    },

    methods: {

    // 显示分享

    handleShowShare () {

    this.shareState = true;

    },

    // 隐藏分享

    handleHiddenShare () {

    this.shareState = false;

    }

    }

    }

    .share {

    width: 100%;

    height: 100%;

    }

    .share-box {

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;

    background-color: rgb

    展开全文
  • uniapp pop弹出框组件

    千次阅读 2020-11-24 14:41:02
    组件库的组件用着不习惯,自己写了个uniapp弹出框组件 分顶部,底部,右侧,左侧弹出 可在弹框中加样式 也可在组件内容使用按显示和关闭弹窗 只写了弹窗 <template> <view class="box"> <!-- 组件...

    组件库的组件用着不习惯,自己写了个uniapp弹出框组件
    分顶部,底部,右侧,左侧弹出
    可在弹框中加样式
    也可在组件内容使用按显示和关闭弹窗
    只写了弹窗

    <template>
    	<view class="box">
    		<!-- 组件内关闭 -->
    		<button type="default" @click="popBtn()" v-show="bodyBtn == true">底部弹出</button>
    		<!--  -->
    		<!-- 遮罩层 -->
    		<view class="mask" v-show="tag==true || Uptag == true" @click="close()"></view>
    		<!-- 插槽 -->
    		<slot></slot>
    		<!-- 弹窗 -->
    		<view class="window-top all-transition" :style="direction=='top' ? objDirection : ''" v-show="direction=='top'">
    			顶部弹出
    		</view>
    		<view class="window all-transition" :style="direction=='bottom' ? objDirection : ''" v-show="direction=='bottom'">
    			<view style="text-align: center;font-size: 35rpx;height: 90rpx;border-bottom: 1rpx solid #1B2126;line-height: 90rpx;">
    				底部弹出
    			</view>
    			<button type="default" class="bottom-btn" @tap="close">取消</button>
    		</view>
    		<view class="window-right all-transition" :style="direction=='right' ? objDirection : ''" v-show="direction=='right'">
    			右侧弹出
    		</view>
    		<view class="window-left all-transition" :style="direction=='left' ? objDirection : ''" v-show="direction=='left'">
    			左侧弹出
    		</view>
    	</view>
    </template>
    
    <script>
    	// 1.如果先要在组件内部控制显示与隐藏设置bodyBtn为true即可
    	// 2.
    	export default {
    		props: {
    			direction: String, //方向
    			Uptag: Boolean, //判断点击事件
    			bodyBtn: Boolean //组件内容控制显示隐藏
    		},
    		data() {
    			return {
    				tag: false //组件内关闭的变量
    			}
    		},
    		computed: {
    			//计算函数
    			objDirection() {
    				if (this.direction == 'bottom') {
    					if (this.tag||this.Uptag == true) {
    						return "transform: translateY(0);"
    					} else {
    						return "transform: translateY(100%);"
    					}
    				} else if (this.direction == 'right') {
    					if (this.tag||this.Uptag == true) {
    						return "transform: translateX(0);"
    					} else {
    						return "transform: translateX(100%);"
    					}
    				} else if (this.direction == 'left') {
    					if (this.tag||this.Uptag == true) {
    						return "transform: translateX(0);"
    					} else {
    						return "transform: translateX(-100%);"
    					}
    				} else if (this.direction == 'top') {
    					if (this.tag || this.Uptag == true) {
    						return "transform: translateY(0);"
    					} else {
    						return "transform: translateY(-100%);"
    					}
    				}
    			}
    		},
    		methods: {
    			popBtn() {
    				this.tag = !this.tag
    			},
    			//关闭事件
    			close() {
    				if (this.tag == true) this.tag = false //组件内关闭事件
    				this.$emit('close', false) //组件外关闭事件
    			}
    		}
    	}
    </script>
    
    <style>
    	.mask {
    		position: fixed;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		width: 100%;
    		height: 100%;
    		background-color: rgba(0,0,0,0.2);
    		z-index: 1;
    	}
    	.all-transition {
    		position: absolute;
    		transition: all 0.3s;
    		-moz-transition: all 0.3s; /* Firefox 4 */
    		-webkit-transition: all 0.3s; /* Safari and Chrome */
    		-o-transition: all 0.3s;
    		background-color: #FFFFFF;
    		z-index: 999;
    	}
    	.window {
    		bottom: 0;
    		left: 50%;
    		margin-left: -300rpx;
    		width: 600rpx;
    		height: 500rpx;
    		border-radius: 40rpx 40rpx 0 0;
    	}
    	.window-right {
    		/* 如果不想让右侧全屏占满,将top值删掉就可 */
    		top: 0;
    		right: 0;
    		width: 200rpx;
    		height: 100%;
    		border-radius: 15rpx 0 0 15rpx;
    	}
    	.window-left {
    		/* 如果不想让右侧全屏占满,将top值删掉就可 */
    		top: 0;
    		left: 0;
    		width: 200rpx;
    		height: 100%;
    		border-radius: 0 15rpx 15rpx 0;
    	}
    	.window-top {
    		left: 50%;
    		margin-left: -300rpx;
    		/* 如果不想让右侧全屏占满,将top值删掉就可 */
    		top: 0;
    		width: 600rpx;
    		height: 500rpx;
    		border-radius: 0 0 15rpx 15rpx;
    	}
    	.bottom-btn {
    		margin-top: 100rpx;
    		width: 200rpx;
    		height: 80rpx;
    		background-color: pink;
    	}
    </style>
    
    

    使用

    <template>
    	<view>
    		<button type="default" @click="show">点击弹出框</button>
    		<switchEdit :direction="direction" @close="Close" :Uptag="Uptag" :bodyBtn="true">
    			<!-- 插槽 -->
    			<view class="sitch-box" v-show="Uptag==true">
    				<view class="top">
    					
    				</view>
    				<view class="bottom">
    					
    				</view>
    			</view>
    		</switchEdit>
    	</view>
    </template>
    
    <script>
    	import switchEdit from '@/components/switch/switch.vue'
    	export default {
    		components: {
    			switchEdit
    		},
    		data() {
    			return {
    			//必写
    				//弹出方向
    				direction: 'bottom',
    				//弹出标志
    				Uptag: false
    			}
    		},
    		methods: {
    			//打开弹框
    			show() {
    				this.Uptag = !this.Uptag
    			},
    			//关闭按钮
    			Close(data) {
    				this.Uptag = data
    			}
    		}
    	}
    </script>
    
    <style>
    	button {
    		width: 300rpx;
    		height: 60rpx;
    		line-height: 60rpx;
    		font-size: 30rpx;
    	}
    	.sitch-box {
    		/* 为了控制位置 */
    		position: absolute;
    		top: 200rpx;
    		left: 50%;
    		margin-left: -250rpx;
    		width: 500rpx;
    		height: 200rpx;
    		background-color: #FFFFFF;
    		border-radius: 20rpx;
    		/* ,其中最主要的功能是层叠顺序 */
    		z-index: 999;
    	}
    	.top,
    	.bottom {
    		width: 100%;
    		height: 100rpx;
    	}
    	.top {
    		border-bottom: 1rpx solid #1B2126;
    	}
    </style>
    
    

    在这里插入图片描述

    展开全文
  • 主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • uniapp自定义弹出框

    千次阅读 2021-09-13 16:42:35
    布局 <!-- 弹框 --> <view v-show="show"> <view class="popup-info"> <view class="tankuang1"> <view class="tankuang1-text"> 确认上报班值信息吗?....pop

    布局

    <!-- 弹框 -->
    		<view v-show="show">
    			<view class="popup-info">
    				<view class="tankuang1">
    					<view class="tankuang1-text">
    						确认上报班值信息吗?
    					</view>
    				</view>
    			</view>
    		</view>
    

    样式

    .popup-info {
    		position: fixed;
    		width: 100%;
    		height: 100%;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		font-size: 30upx;
    		padding: 40upx;
    		border-radius: 20upx;
    		background-color: #0000008a;
    		z-index: 9999;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    
    		.tankuang1 {
    			border-radius: 10upx;
    			width: 590upx;
    			height:614upx;
    			background: #FFFFFF;
    			display: flex;
    			flex-direction: column;
    			justify-content: center;
    			align-items: center;
    			position: relative;
    		}
    	}
    
    展开全文
  • 上述功能弹出框是以组件的开发方式,引入到父页面的。在弹出框进行操作后,回调父组件的方法进行动作操作。 一、父页面代码 <template> <view class="content"> <view class="box"> <...
  • uniapp 弹出框二次封装

    2021-09-11 16:49:55
    近期一直在做uniapp,所以自己封装了几个组件,是在uniapp提供组件的基础上进行的二次封装,感觉还是挺实用的,先贴个弹出框的,上代码: /** * 弹窗组件 made by jidzh * * 最后修改时间:2021-03-18 * * 传入...
  • uniapp底部弹出框效果

    千次阅读 2021-04-16 10:43:36
    <template>...卖</text> </view> <view class="share"> <view :class="{'box': share}" @click="display"> </view> <view class="share-ite
  • 仿分享的底部弹出框,运用gridview实现item的动态添加,可以自适应布局,简单实用
  • uniapp 微信小程序 弹出框 带输入框 带html

    千次阅读 热门讨论 2021-04-23 20:04:52
    uniapp 微信小程序 弹出框 带输入框 带html 代码分享 ????记得点赞哦 ???? ????大佬请看???? html: <modal v-if="showModal" class="showModal" title=" " confirm-text="确定" cancel-text="取消" @cancel=...
  • uni-app 弹出框插件 模态框 超级好用记得刚毕业上班的时候感觉代码越多越牛,脑子里没有什么优化的概念,现在真的感觉用越少的代码实现功能才是牛人。上一篇uni-app 拨打电话功能这里面实用的弹出框,不是我自己写的...
  • uniapp弹窗/弹出

    千次阅读 2020-12-20 11:04:35
    普通弹出层 uni.showToast(OBJECT) uni.showToast(OBJECT). uni.showToast({ title: '标题', duration: 2000 }); 弹出对话框uni.showModal(OBJECT) uni.showModal(OBJECT). uni.showModal({ title: '...
  • uniapp弹出窗口编写

    2022-04-03 16:17:05
    <template> <view class="box"> <!-- 组件内关闭 -->...底部弹出</button> <!-- --> <!-- 遮罩层 --> <view class="mask" v-show="tag==true || Uptag == tr.
  • uniapp自定义简单弹窗组件

    千次阅读 2020-12-22 17:01:35
    2.0(2019-08-31)船新版本的信息弹窗组件可以弹出很多条信息,并单独控制消失时间、点击消失。用循环来生成很多个弹窗,用this.$refs来传值,并添加数组。1.布局{{ items.content }}2.js具体流程。需要一个弹窗,基本...
  • 用cover-view标签包裹住弹出层,但是cover-view标签里的所有标签都要用cover-类的标签,所有对于比较复杂的弹出层,不推荐这种方式。 解决方法2: 用view代替input,点击view标签,切换成input标签并获取焦点,当...
  • uniapp弹出层组件的使用

    千次阅读 2020-08-08 13:34:44
    下面我来说的一uniapp中的弹出层组件,这个组件可以用在一些消息提示,confirm 等情况,自已自定义开发,界面可以自已写,不像uni.showToast 等,界面不能更改, 首先我们在创建uniapp项目时,生成一套官方含有 ui...
  • uniapp中使用弹出层后,控制高德地图显隐一、获取高德地图key二、下载高德地图的微信小程序sdk三、定义template模板四、定义data样式及相关方法五、相关样式 在uniapp中或者在微信小程序中,map、video等组件的...
  • 主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 具体的官网插件使用方法:uni-popup 弹出层 - DCloud 插件市场 Popup 组件,提供常用的弹层https://ext.dcloud.net.cn/plugin?id=329 我这里根据官网案例只提供了一个输入框的交互窗口, 点击按钮,弹出窗口, ...
  • 将三个插件做了一些改动,写在了一个文件里面,使用时配合uniapp插件市场上的文档进行实际开发=》参考官方网站:https://ext.dcloud.net.cn/
  • uni-app点击按钮弹出提示,选择确定和取消 以下是在写app页面时,遇到的感觉比较好用的弹框效果,仅以此记录,一个是弹框效果-uni.showModal(OBJECT),一个是跳转页面uni.navigateTo({}),大家有需要的可以参考...
  • 性别、班级、日期
  • uniapp自定义弹框

    千次阅读 2021-11-05 10:19:43
    uniapp自定义弹框,适用所有类型效果原理创建一个vue页面(内容如下)pages.json配置一般tabbar中间按钮点击出现弹框 效果原理 利用透明页面,点击进入当前页面,内容根据自己需求去实现,随便自定义,出来的效果就是...
  • uni-app 弹框组件

    千次阅读 2020-12-22 17:03:23
    model_concent,cancelVal,confirmVal,confirmColor,cancelColor,delCancel,align}) //#endif } //生成提示view creatView(style,opa,clickEvent,modelInfo){ style = { left:'0px', width:'100%', ...style } let ...
  • uniapp-弹框

    2022-01-08 14:58:44
    询问 uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { ...询问 - 示例 ...加载
  • uniapp底部弹框效果

    千次阅读 2020-08-03 20:48:04
    有时候我们在做项目的时候,很多时候会碰到这种效果,今天我们就来实现它! 这样就大功告成啦!,有其他方法的可以一起探讨哈~~~
  • 类似于alert的那种提示,一般都是提交表单的时候,提交成功弹出的提示。 uni.showToast({ title: '提交成功', duration: 2000 }); 二、加载 uni.showLoading({ title: '加载中' }); ...
  • Uni-app中几种常用的提示

    万次阅读 多人点赞 2020-10-07 15:13:50
    Uni-app中几种常用的提示:成功提示,加载,去掉图标只显示文字提示,模态弹窗。
  • uni-app实现弹窗遮罩

    千次阅读 2020-12-22 17:01:35
    {{content}}import Utils from‘@/common/js/center.js‘;exportdefault{props: [‘content‘],data() {return{isShowDialog:false, //整个弹窗isShowMaskContent: false, //白色填充区域}},methods: {dialogClose()...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,338
精华内容 535
关键字:

uniapp弹出框

友情链接: CourseDesign_StepMotor.zip