精华内容
下载资源
问答
  • 2.但是在使用uni-app的弹框组件uni-popup-dialog时候,当点击父组件打开弹框时候,子组件弹框是打开了,但此时既不触发created(),也不触发onLoad(); 在H5浏览器页面,点击打开按钮,是正常触

    项目需求:点击页面的 品牌型号 按钮,打开弹框,将 车架号码 参数传入接口获取到对应的 品牌型号列表,在进行选择后关闭弹框。

    实际开发中,我在父组件里面引入了弹框子组件;诡异的事情发生了:
    在小程序页面有两个问题1.已开始进入到父组件时候,就自动触发了子组件弹框的created()事件;2.但是在使用uni-app的弹框组件uni-popup-dialog时候,当点击父组件打开弹框时候,子组件弹框是打开了,但此时既不触发created(),也不触发onLoad();
    在H5浏览器页面,点击打开按钮,是正常触发created(),但是也不触发onload();

    此时我就不知道在小程序的什么位置写打开弹框调用接口事件了;

    H5解决方法:就是通过正常的created()即可: 暂未书写

    小程序的解决办法通过refs解决: 如下
    在这里插入图片描述

    在这里插入图片描述

    1.父组件A代码:
    1.1打开弹框的按钮和事件

    		<view v-if="!typeval" @click="changeCarnum" class="libox">
                <uni-icons type="arrowright" color="#ddd" />
                <text class="t1" v-if="formData.car_model_no">{{car_model_noInfo}}</text>
                <text class="t2" v-else>请选择</text>
              </view>
    
        changeCarnum() {
          console.log('点击打开');
          this.$refs.dialogCarnum.open()
          console.log(this.$refs);//打印发现当前页的所有弹框
          console.log(this.$refs.dialogSonName);//自己的ref
          console.log(this.$refs.dialogCarnum);
          /* #ifdef MP-WEIXIN */
          // 只兼容微信小程序的弹框触发事件
          this.$refs.dialogSonName.first()//调用自己的接口方法
          /* #endif */
        },
    

    1.2父组件A中引入的弹框代码子组件(注意点:原来uni-app只会给uni-popup加ref,但是这里需要同时给引入的子组件加上自己的ref,既ref=“dialogSonName”)

    	<!-- 车辆型号弹框 -->
        <uni-popup id="dialogCarnum" ref="dialogCarnum" type="dialog" @change="change">
          <mycarnum ref="dialogSonName" mode="input" :frame_no='formData.frame_no' :car_model_no="formData.car_model_no" :value="inputValue" @close="dialogCloseCarnum" @confirm="dialogInputConfirmCarnum"></mycarnum>
        </uni-popup>
    

    **2.自己的子组件B代码:**引入了接口方法和uni-app弹框的popup.js文件,子组件内存在first()方法,每次打开弹框都会触发first();其实就相当于自己的created()效果;如果想要做一些初始化就在first()方法内调用既可以。

    <template>
      <view class="uni-popup-dialog">
    
        <view v-if="mode === 'base'" class="uni-dialog-content">
          <slot>
            <text class="uni-dialog-content-text">{{content}}</text>
          </slot>
        </view>
        <view v-else class="uni-dialog-content">
          <view class="allbox">
            <view class="top">
              <view @click="changeNum(1)" :class="{bgblue:indexNum == 1}" class="l">用车架号码搜索</view>
              <view @click="changeNum(2)" :class="{bgblue:indexNum == 2}" class="r">用品牌型号搜索</view>
            </view>
            <view class="bot">
              <view class="all">
                <uni-easyinput v-if="indexNum == 1" class="myinput" prefixIcon="search" v-model="searchval" :placeholder="placeholder1"></uni-easyinput>
                <uni-easyinput v-if="indexNum == 2" class="myinput" prefixIcon="search" v-model="searchval2" :placeholder="placeholder1"></uni-easyinput>
                <text class="sreachbtn" @click="scan">搜索</text>
    
              </view>
              <!-- <view class="searbox">搜索</view> -->
            </view>
            <scroll-view class="listbox" scroll-y="true">
              <view @click="selectInfo(item)" class="li" v-for="(item ,index) in listArr" :key="index">
                {{item.description}}
              </view>
            </scroll-view>
          </view>
        </view>
        <view v-if="point" class="uni-dialog-content-point">
          <view>提示:{{point}}</view>
        </view>
        <view class="uni-dialog-button-group">
          <view class="uni-dialog-button delbtn" @click="closeDialog">
            <uni-icons class="uni-dialog-button-text" type="close" size="25" color="#fff" />
          </view>
          <!-- <view class="uni-dialog-button uni-border-left" @click="onOk">
            <text class="uni-dialog-button-text uni-button-color">保存</text>
          </view> -->
        </view>
    
      </view>
    </template>
    
    <script>
    import { etCarModelNoInfo } from "@/pages/api/add-car"
    import popup from '../../uni-popup/popup.js'
    /**
     * PopUp 弹出层-对话框样式
     * @description 弹出层-对话框样式
     * @tutorial https://ext.dcloud.net.cn/plugin?id=329
     * @property {String} value input 模式下的默认值
     * @property {String} placeholder input 模式下输入提示
     * @property {String} type = [success|warning|info|error] 主题样式
     *  @value success 成功
     * 	@value warning 提示
     * 	@value info 消息
     * 	@value error 错误
     * @property {String} mode = [base|input] 模式、
     * 	@value base 基础对话框
     * 	@value input 可输入对话框
     * @property {String} content 对话框内容
     * @property {Boolean} beforeClose 是否拦截取消事件
     * @event {Function} confirm 点击确认按钮触发
     * @event {Function} close 点击取消按钮触发
     */
    
    export default {
      name: "uniPopupDialog",
      mixins: [popup],
      props: {
        car_model_no: {
          type: [String, Number],
          default: ''
        },
        frame_no: {
          type: [String, Number],
          default: ''
        },
        value: {
          type: [String, Number],
          default: ''
        },
        placeholder: {
          type: [String, Number],
          default: '请输入内容'
        },
        type: {
          type: String,
          default: 'error'
        },
        mode: {
          type: String,
          default: 'base'
        },
        title: {
          type: String,
          default: '提示'
        },
        point: {
          type: String,
          default: ''
        },
        content: {
          type: String,
          default: ''
        },
        beforeClose: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          searchval: '',
          searchval2: '',
          dialogType: 'error',
          focus: false,
          val: "",
          indexNum: 1,
          placeholder1: '输入车架号',
          infObj: {},
          listArr: [
          ]
        }
      },
      watch: {
        // frame_no(val) {
        //   console.log('车架号码frame_no ', val);
        // },
        type(val) {
          this.dialogType = val
        },
        mode(val) {
          if (val === 'input') {
            this.dialogType = 'info'
          }
        },
        value(val) {
          this.val = val
        }
      },
      onLoad() {
        console.log('弹框的onloaa');
        uni.$on('eventfirst', this.first())
    
        // // 对话框遮罩不可点击
        // this.popup.disableMask()
        // // this.popup.closeMask()
        // if (this.mode === 'input') {
        //   this.dialogType = 'info'
        //   this.val = this.value
        // } else {
        //   this.dialogType = this.type
        // }
        // if (this.indexNum == 1) {
        //   this.searchval = this.frame_no || ''
        // } else if (this.indexNum == 2) {
        //   this.searchval2 = this.car_model_no || ''
        // }
        // this.getlist()
      },
      created() {
        console.log('弹框的created');
    
        // // 对话框遮罩不可点击
        // this.popup.disableMask()
        // // this.popup.closeMask()
        // if (this.mode === 'input') {
        //   this.dialogType = 'info'
        //   this.val = this.value
        // } else {
        //   this.dialogType = this.type
        // }
        // if (this.indexNum == 1) {
        //   this.searchval = this.frame_no || ''
        // } else if (this.indexNum == 2) {
        //   this.searchval2 = this.car_model_no || ''
        // }
        // this.getlist()
      },
      mounted() {
        this.focus = true
      },
      methods: {
        first() {
          console.log('父组件触发子组件的first方法');
          // 对话框遮罩不可点击
          this.popup.disableMask()
          // this.popup.closeMask()
          if (this.mode === 'input') {
            this.dialogType = 'info'
            this.val = this.value
          } else {
            this.dialogType = this.type
          }
          // if (this.indexNum == 1) {
          this.searchval = this.frame_no || ''
          // } else if (this.indexNum == 2) {
          this.searchval2 = this.car_model_no || ''
          // }
    
          this.getlist()
        },
        scan() {
          console.log('点击搜搜');
    
          this.getlist()
        },
        confirm(e) {
          console.log(e.detail.value);
        },
        getlist() {
          let params = {}
    
          if (this.indexNum == 1) {
            params = {
              query_type: 'FRAME_NO',
              frame_no: this.searchval,
            }
          } else if (this.indexNum == 2) {
            params = {
              query_type: 'CAR_MODEL_NO',
              car_model_no: this.searchval2,
            }
          }
          etCarModelNoInfo(params).then(res => {
            this.listArr = res.data
            if (res.return_code == '-1') {
              uni.showToast({
                title: res.return_message,
                duration: 1500,
                icon: 'none'
              });
            }
          })
        },
        changeNum(num) {
          this.indexNum = num
          if (num == 1) {
            this.placeholder1 = '输入车架号'
          } else if (num == 2) {
            this.placeholder1 = '输入品牌型号的部分英文和数字'
          }
          this.getlist()
        },
        iconClick(type) {
          uni.showToast({
            title: `点击了${type === 'prefix' ? '左侧' : '右侧'}的图标`,
            icon: 'none'
          })
        },
        selectInfo(item) {
          console.log(item);
          this.infObj = item
          this.onOk()
        },
        /**
         * 点击确认按钮
         */
        onOk() {
          if (this.mode === 'input') {
            this.$emit('confirm', this.infObj)
          } else {
            this.$emit('confirm')
          }
          // 这个是真正的关闭弹框操作
          // if (this.beforeClose) return
          // this.popup.close()
        },
        /**
         * 点击取消按钮
         */
        closeDialog() {
          this.$emit('close')
          if (this.beforeClose) return
          this.popup.close()
        },
        close() {
          this.popup.close()
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .bgblue {
      height: 86rpx;
      color: #108ee9 !important;
      border-bottom: 2px solid #108ee9 !important;
      box-sizing: border-box !important;
    }
    .uni-popup-dialog {
      width: 300px;
      border-radius: 15px;
      background-color: #fff;
    }
    
    .uni-dialog-title {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      justify-content: center;
      padding-top: 15px;
      padding-bottom: 5px;
    }
    
    .uni-dialog-title-text {
      font-weight: 700;
      font-family: PingFangSC-Regular;
      font-size: 36rpx;
      color: #000 !important;
      letter-spacing: 0;
      text-align: center;
      line-height: 36rpx;
    }
    
    .uni-dialog-content {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 5px 15px 15px 15px;
    }
    
    .uni-dialog-content-text {
      font-size: 14px;
      color: #6e6e6e;
    }
    .uni-dialog-content-point {
      color: #f86e21;
      padding: 0 15px 15px 15px;
      view {
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #f86e21;
        letter-spacing: -0.58px;
      }
    }
    
    /deep/.uni-dialog-button-group {
      /* #ifndef APP-NVUE */
      display: flex;
    
      /* #endif */
      flex-direction: row;
      border-top-color: #f5f5f5;
      border-top-style: solid;
      border-top-width: 1px;
      border-top: none !important;
      position: relative !important;
    }
    // 自定义样式
    .delbtn {
      position: absolute !important;
      top: 50rpx !important;
      transform: translate(-50%, 0) !important;
      margin-left: 50% !important;
    }
    // 自定义样式
    .uni-border-left {
      border-left: none !important;
    }
    
    .uni-dialog-button {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
    
      flex: 1;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 45px;
    }
    
    .uni-border-left {
      border-left-color: #f0f0f0;
      border-left-style: solid;
      border-left-width: 1px;
    }
    
    .uni-dialog-button-text {
      font-family: PingFangSC-Regular;
      font-size: 36rpx;
      color: #108ee9;
      letter-spacing: 0;
      text-align: center;
      line-height: 36rpx;
    }
    
    .uni-button-color {
      color: #007aff;
    }
    
    .uni-dialog-input {
      flex: 1;
      font-size: 14px;
      border-top: 1px #eee solid;
      height: 40px;
      padding: 0 10px;
      color: #555;
    }
    
    .uni-popup__success {
      color: #4cd964;
    }
    
    .uni-popup__warn {
      color: #f0ad4e;
    }
    
    .uni-popup__error {
      color: #dd524d;
    }
    
    .uni-popup__info {
      color: #909399;
    }
    //
    .uni-dialog-content {
      width: 100% !important;
      padding: 0 !important;
    }
    .allbox {
      width: 100% !important;
      height: 750rpx;
      .top {
        height: 84rpx;
        line-height: 84rpx;
        overflow: hidden;
        .l,
        .r {
          text-align: center;
          float: left;
          width: 50%;
          border-bottom: 1px solid #ddd;
          font-family: PingFangSC-Regular;
          font-size: 30rpx;
          color: #303030;
        }
      }
      .bot {
        padding: 30rpx;
        display: flex;
        .all {
          width: 100%;
    
          // /deep/.uni-navbar__header-btns-left {
          //   display: none !important;
          // }
          /deep/.myinput {
            // flex: 1;
            width: 80%;
            display: inline-block;
            border-radius: 20px !important;
          }
          .sreachbtn {
            width: 15%;
            padding-left: 5%;
            display: inline-block;
            color: #108ee9;
          }
        }
        /deep/.uni-easyinput__content {
          border-radius: 20px !important;
        }
        .searbox {
          width: 70rpx;
          line-height: 70rpx;
          text-align: center;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #108ee9;
        }
      }
      .listbox {
        width: 100%;
        // padding: 0 30rpx!important;
        height: 500rpx;
        overflow: scroll;
        .li {
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #212121;
          letter-spacing: 0;
          line-height: 40rpx;
          padding: 30rpx 30rpx;
          border-bottom: 1px solid #ccc;
        }
      }
    
      .input-view {
        /* #ifndef APP-PLUS-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex: 1;
        background-color: #f8f8f8;
        height: 30px;
        border-radius: 15px;
        padding: 0 15px;
        flex-wrap: nowrap;
        margin: 7px 0;
        line-height: 30px;
      }
    
      .input-uni-icon {
        line-height: 30px;
      }
    
      .nav-bar-input {
        height: 30px;
        line-height: 30px;
        /* #ifdef APP-PLUS-NVUE */
        width: 370rpx;
        /* #endif */
        padding: 0 5px;
        font-size: 14px;
        background-color: #f8f8f8;
      }
    
      .example-body {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        padding: 0;
      }
    }
    </style>
    
    
    展开全文
  • uni-popup 弹出层引入 基于 uni-app 的 UI 组件库 <!-- 选择项目弹框 -->...view class="popup-project"> <view class="title"><text>选择项目</text></view> <view class=

    uni-popup 弹出层引入

    基于 uni-app 的 UI 组件库

    <!-- 选择项目弹框 -->
    		<uni-popup ref="popup" type="center" :maskClick="false">
    		    <view class="popup-project">
    				<view class="title"><text>选择项目</text></view>
    				<view class="checkboxgroupBox">
    					<scroll-view class="scroll-view_H" scroll-y="true">
    						<checkbox-group name="checkbox" @change="checkboxChange">
    							
    							<view  v-for="(item,index) in deptProjectList" :key="index">
    								<view class="proList uni-flex uni-row" @click="checkProject(item)">
    									<checkbox :value="item.projectId" :checked="item.checked" /><text class="tite">{{item.projectName}}</text>
    								</view>
    								
    							</view>
    						
    							
    						</checkbox-group>
    					</scroll-view>
    				</view>
    				<view class="uni-flex uni-row buttonBox">
    					<button type="default" plain="true" size="mini" @tap="cancelPopup">取消</button>
    					<button type="primary" plain="true" size="mini" @tap="okPopup">确认</button>
    				</view>
    			</view>
    		</uni-popup>
    

    点击弹出层按钮:

    //添加项目弹框
    addProject () {
    	//this.showTextArea = false;
    	this.$refs['popup'].open();
    	
    	//每次弹框都把是否选中状态设置为false
    	let initProjectList = this.deptProjectList;
    	if(initProjectList.length > 0){
    		for (let item of initProjectList) {
    			item.checked = false;
    		}
    	}
    	//与日报已经关联的项目列表,也就是之前选中过的,这里使用两层循环一 一比对进行回显
    	let projectListAlready = this.reportDetails.tableData.dailyProjectList;
    	for (let projectAlready of projectListAlready) {   // let ... of遍历出的结果是value, let ... in遍历出的结果是key
    
    		for (let deptProject of initProjectList) {
    			if(projectAlready.projectId == deptProject.projectId){
    			
    				deptProject.checked = true;  //已经与日报关联的项目 这里默认选中  
    				break;
    			}
    		}
    	}
    	
    },
    

    勾选复选框事件处理方法:
    在这里插入图片描述
    复选框选中后,点击确认:
    在这里插入图片描述

    // 确认
    okPopup: function() {
    
        //选中的item列表
    	let selectedProject = [];
    	for (let project of this.deptProjectList) {   // let ... of遍历出的结果是value, let ... in遍历出的结果是key
    		if(project.checked){
    			selectedProject.push(project);
    		}
    	}
    
    	//this.reportDetails.tableData.dailyProjectList = selectedProject;  浅拷贝 会引发问题
    	// 这里把实际最后选中的这些items赋值给data里面对应的属性
    	this.reportDetails.tableData.dailyProjectList = JSON.parse(JSON.stringify(selectedProject));
    	this.cancelPopup();
    },
    

    部分样式:

    .uni-checkbox .uni-checkbox-input{
    	width: 30upx;
    	height: 30upx;
    }
    
    .addProject{
    		font-size: 32upx;
    		color: #363636;
    		padding: 20upx 0 20upx 30upx;
    		align-items: center;
    		.iconfont{
    			margin-right: 10upx;
    		}
    	}
    	
    	.project-list{
    		.list{
    			padding: 20upx 30upx;
    			align-items: center;
    			justify-content: space-between;
    			color: #363636;
    			text{
    				font-size: 32upx;
    			}
    		}
    		.progectname{
    			align-items: center;
    			font-size: 32upx;
    			.iconfont{
    				font-size: 32upx;
    				margin-right: 10upx;
    				color: red;
    			}
    		}
    		.title{
    			font-weight: bold;
    			border-bottom: 2upx solid #f5f5f5;
    		}
    		.procon{
    			border-bottom: 2upx solid #f5f5f5;
    		}
    	}
    	
    	
    	.popup-project{
    		background: #fff;
    		width: 600upx;
    		height: 800upx;
    		position: relative;
    		border-radius: 16upx;
    		box-shadow: 0 0 20upx #5d5d5d;
    		overflow-y: auto;
    		.title{
    			border-bottom: 2upx solid #f5f5f5;
    			width: 100%;
    			position: absolute;
    			height: 80upx;
    			line-height: 80upx;
    			background-color: #fff;
    			z-index: 10;
    			text{
    				font-size: 32upx;
    				color: #363636;
    				padding-left: 40upx;
    			}
    		}
    		.checkboxgroupBox{
    			padding-top: 80upx;
    			height: 600upx;
    			overflow-y: auto;
    			.scroll-view_H{
    				width: 100%;
    				height: 100%;
    			}
    		}
    		.proList{
    			padding: 20upx 30upx;
    			align-items: center;
    			.tit{
    				font-size: 32upx;
    				color: #363636;
    			}
    		}
    		.buttonBox{
    			position: absolute;
    			background-color: #fff;
    			z-index: 10;
    			bottom: 0;
    			left: 0;
    			width: 100%;
    			padding-bottom: 20upx;
    		}
    	}
    
    展开全文
  • 学习之路uni-popup

    千次阅读 2021-02-23 10:28:16
    uni-popup 初次接触uniapp时用原生的js来实现弹出遮罩层的,之后了解到uni-app提供了插件uni-app 学习下来之后 着实方便很多 在components中导入uni-popup组件 在需要弹出层的页面中引入uni-popup 使用unipopup时...

    uni-popup

    初次接触uniapp时用原生的js来实现弹出遮罩层的,之后了解到uni-app提供了插件uni-app 学习下来之后 着实方便很多

    在components中导入uni-popup组件

    在这里插入图片描述

    在需要弹出层的页面中引入uni-popup

    在这里插入图片描述

    • 使用unipopup时要在内部嵌套view 在当前view上设置弹出层的尺寸 直接在uni-popup上设置不生效
    • 在这里插入图片描述

    uni-popup属性

    • 在这里插入图片描述
    展开全文
  • -- 引入uni-popup,这个需要插件市场直接引入项目 --> <uni-popup ref="showWeight"> <PrintWeight @onClickConfirm="onClickConfirm" @onClickCancel="onClickCancel"></PrintWeight> </...

    自定义弹出输入框


    效果:
    在这里插入图片描述

    • 主页面,定义和使用
    <!-- 引入uni-popup,这个需要插件市场直接引入项目 -->
    <uni-popup ref="showWeight">
    	<PrintWeight @onClickConfirm="onClickConfirm" @onClickCancel="onClickCancel"></PrintWeight>
    </uni-popup>
    
    <!--使用-->
    <script>
    	// 根据自己项目,在某个事件触发弹框弹出,注意!!!$refs后面直接跟[],不需要.
    	onClickShow() {
    		this.$refs['showWeight'].open()
    }
    	// 点击确定按钮,弹出框隐藏 
    	onClickConfirm() {
    		self.$refs['showWeight'].close()
    }
    	// 取消按钮,弹出框隐藏
    	self.$refs['showWeight'].close()
    </script>
    
    • 抽离弹框页面为组件PrintWeight
    <template>
    	<view v-if="isShowModal">
    		<view class="masking" v-if="showMasking" :style="{'background-color': bgColor}"></view>
    		<view class="model-wraper">
    			<view class="modal-title" v-if="modalTitle !== ''">
    				{{modalTitle}}
    			</view>
    			<view class="modal-body">
    				<input v-model="inputSerialNum" style="padding: 10rpx;font-size: 30rpx;" class="uni-input" focus placeholder="设备序列号" />
    			</view>
    			<view>
    				<view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel">{{cancelText}}</view>
    				<view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm">{{confirmText}}</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		props: {
    			// 是否显示蒙层
    			showMasking: {
    				type: Boolean,
    				default: true
    			},
    			// 蒙层背景色
    			bgColor: {
    				type: String,
    				default: 'rgba(0,0,0,.6)'
    			},
    			// 模态框标题
    			modalTitle: {
    				type: String,
    				default: ''
    			},
    			// 取消按钮文字
    			cancelText: {
    				type: String,
    				default: '取消'
    			},
    			// 确定按钮文字
    			confirmText: {
    				type: String,
    				default: '确定'
    			},
    			// 取消按钮文字颜色
    			cancelTextColor: {
    				type: String,
    				default: '#666'
    			},
    			// 确定按钮文字颜色
    			confirmTextColor: {
    				type: String,
    				default: '#5999FF'
    			}
    		},
    		data() {
    			return {
    				isShowModal: false,
    				inputSerialNum: null
    			}
    		},
    		methods: {
    			showModal() {
    				this.isShowModal = true
    			},
    			handleCancel() {
    				this.isShowModal = false
    				this.$emit('onClickCancel', 'cancel')
    			},
    			handleConfirm() {
    				this.isShowModal = false
    				this.$emit('onClickConfirm', this.inputSerialNum)
    			}
    		}
    	}
    </script>
    
    <style scoped>
    	.masking {
    		height: 100vh;
    		width: 100vw;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 999;
    	}
    
    	.model-wraper {
    		width: 600rpx;
    		background-color: #fff;
    		border-radius: 16rpx;
    		position: absolute;
    		z-index: 1000;
    		top: 50%;
    		left: 50%;
    		margin-top: -161rpx;
    		margin-left: -300rpx;
    		box-shadow: #dcdcdc 0px 0px 20rpx;
    	}
    
    	.modal-title {
    		height: 90rpx;
    		line-height: 90rpx;
    		width: 100%;
    		text-align: center;
    		font-size: 32rpx;
    		color: #666;
    	}
    
    	.modal-body {
    		padding: 30rpx 30rpx 80rpx 30rpx;
    	}
    
    	.btn {
    		width: 300rpx;
    		height: 90rpx;
    		text-align: center;
    		line-height: 90rpx;
    		font-size: 32rpx;
    		float: left;
    		border-top: 1rpx solid #ddd;
    	}
    
    	.btn.cancel {
    		width: 299rpx;
    		border-right: 1rpx solid #dcdcdc;
    	}
    </style>
    
    展开全文
  • uni-popup-dialog踩过的坑

    2021-07-30 11:21:05
    使用uni-app 弹出框这个组件的时候,记住要引用uni-app示例中的uni-popup-dialog组件, 如果你是从插件市场(https://ext.dcloud.net.cn/plugin?id=329)导入的,就会出现问题, 主要问题是获取不到弹出框中input的...
  • <!-- 底部 弹出层开始--> <uni-popup :show="showPopupBottom" :type="popType" @hidePopup="hidePopup"> <view class="popupItem"> <view class="popupTitle"&...
  • uniapp中uni-popup出现TypeError: this[this.config[newVal]] is not a function。 在使用uniapp自带的uni-popup弹出层的时候。默认自动补全时type选项自动填补为middle。但其实没有middle选择。所以会产生这个报错...
  • uniapp组件-uni-popup弹出层

    万次阅读 2021-03-03 12:11:23
    目录 一、基本用法 二、自定义弹出层(dialog + message) 示例 三、提交信息 (input + 延迟关闭) 四、底部分享示例 官方示例:uni-popup 弹出层 - DCloud 插件市场 弹出层组件用于弹出一个覆盖到页面上的内容,使用...
  • 最近公司在做物管小程序项目,用到的组件是uni-app,官方文档给出的答案是在hbuilder下载完插件后,直接在template里面引用,但是怎么都查找不到。 报错显示如图 解决思路 碰到这个问题,首先我会看自己是否成功...
  • 叉号手动关闭;... class="auth-popup" mode="center" width="600rpx" height="770rpx" :closeable="true" close-icon-color="#010101" :mask-close-able="false" close-icon-size="42" bo
  • 官方uni-popup使用说明 https://ext.dcloud.net.cn/plugin?id=329 uni-app组件使用 https://www.npmjs.com/package/@dcloudio/uni-ui uni-app插件市场(有人脸识别) ...app前端模板 ...
  • 出现问题的原因在uni-popup上:@touchmove.stop.prevent="clear" uni-popup组件默认是阻止了默认事件的冒泡 因为我整个项目中只用到了这一处弹出层组件,所以 解决办法直接修改un-popup组件,去掉@to...
  • uni-popup 弹出层报错

    2021-06-21 18:01:25
  • 改成:mask-click="false"就可以生效了
  • 1.具体配置参考uni-pop组件,这里仅使用 <template> <view> <!--点击图片弹出 --> <view class="chooise-icon" @click="toggle('center')"> <image src="../../../../static/img...
  • 就是这个uniapp拓展组件不能出现 ="popup" type="bottom" background-color="white" safe-area="true">
  • ">点击弹出text> view> <uni-popup ref="popup" background-color="#fff"> <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"> ;"> 这是一个弹窗 view> ;" @click=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 994
精华内容 397
关键字:

uni-popup