vue 利用extend 写confirm （小程序无法使用，没办法操作dom）

最新推荐文章于 2022-06-24 11:34:13 发布

终极ZLY

最新推荐文章于 2022-06-24 11:34:13 发布

阅读量479

点赞数 1

分类专栏： vue uni-app 文章标签： vue extend 自定义 confirm

本文链接：https://blog.csdn.net/zly_101/article/details/100661812

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

uni-app

1 篇文章 0 订阅

订阅专栏

组件：index.vue

<template>
	<view  v-if="isShow">
		<view class="z_confirm"></view>
		<view class="tips_box">
			<view class="title ellip_one line_bottom">
				{{title}}
			</view>
			<view class="content line_bottom">
				<input class="uni-input message" v-model="inputData" focus :placeholder="placeholder" />
				
			</view>
			<view class="bottom">
				<zButton size="small" @click='cancel'> 拒 绝 </zButton>
				<zButton type="danger" @click='confirm'> 确 认</zButton>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'confirm',
		props: {
			
		},
		data() {
			return {
				title:'标题',
				placeholder:'请输入',
				inputData:'',
				message:'',
				isShow:false,
				promiseStatus:null,
				resolve: '',
				reject: '',
				promise:'',
			}
		},
		mounted() {
			
		},
		methods: {
			// 初始化
			install(){
				let _this = this;
				return new Promise((resolve, reject) => {
					this.resolve = resolve;
					this.reject = reject;
				});
			},
			//取消按钮
			cancel(){
				this.isShow = false
				// this.promiseStatus && this.promiseStatus.resolve();
				this.reject('cancel')
			},
			// 确认按钮
			confirm(){
				this.isShow = false
				this.resolve(this.inputData)
				// this.promiseStatus && this.promiseStatus.resolve();
			},
		}
	}
</script>

<style lang="scss">
		.z_confirm {
			display: block;
			width: 100%;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: #000000;
			opacity: 0.4;
			filter: alpha(opacity=40);
			}
			.tips_box{
					position: fixed;
					left: 10%;
					top: 40%;
					width: 80%;
					height: auto;
					margin-left: -20upx;
					border-radius: 6upx;
					padding:20upx;
					background-color:#fff;
					opacity: 1;
					filter: alpha(opacity=100);
					.title{
						font-size: 30upx;
						height: 80upx ;
						line-height: 60upx;
						font-weight: 700;
						text-align: center;
					}
					.content{
						padding: 30upx 0;
						.message{
							border-radius: 8upx;
							background: #F1F1F1;
							padding: 10upx;
							
						}
					}
					.bottom{
						padding: 40upx 0 0;
						text-align: center;
						.z_button{
							width: 40%;
							margin: 0 5%;
							// font-size: 30upx;
							padding: 20upx 0;
						}
					}
				}
			
</style>

index.js

import Vue from 'vue'
var zConfirm = () => {
	let zConfirmBox = Vue.extend(require('./index.vue').default)
	let instance = new zConfirmBox();
	instance.$mount();
	let dom = document &&  document.body ? document.body : wx.createSelectorQuery().select('view')
	dom.appendChild(instance.$el);
	
	
	Vue.prototype.$zConfirm = ({title,placeholder}) =>{
		instance.isShow = true
		instance.placeholder = placeholder
		instance.title = title
		return instance.install()
		.then(val => {
			return Promise.resolve(val);
		})
		.catch(err =>{
			return Promise.reject(err);
		})
		
	}
	
}


export default zConfirm

main.js

import zConfirm from './components/elementBox/toast/index.js';
Vue.use(zConfirm);

使用：

this.$zConfirm({
	title:'标题',
		content:'CCC',
		placeholder:'请输入'
		
	}).then(( val ) => {
		console.log('确认')
	}).catch((err)=>{
		console.log('取消')
	})