UniApp弹窗uni-popup使用

<uni-popup ref="dialogInput" type="dialog">
	<view class="content">
		<text class="tips">添加才艺</text>
		<input class="input" type="text" placeholder="请输入要添加的才艺名称" 
v-model="talentName" />
		<text class="button" @click="addtalent(talentName,0)">确定添加</text>
    </view>
</uni-popup>

<script>
export default {
	data() {
			return {
				bdlLoading: true,
				talentName:'',
				
				mytalentList:[],//自身才艺列表
				Customizetalentlist:[],//默认才艺列表
			}
		},
    methods: {
			// 开启添加才艺弹窗  居中弹出
			confirmDialog() {
				this.talentName="";
                this.$refs.dialogInput.open() //和下面写法一样效果
                // this.$refs["dialogInput"].open()  
			},
            
    },
}
</script>
<style scoped>

	.content {
		width: 484rpx;
		height: 426rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		align-items: center;
	}

	.tips {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.input {
		width: 400rpx;
		height: 70rpx;
		margin-top: 52rpx;
		border-radius: 10rpx;
		background-color: #FBFBFB;
		font-size: 26rpx;
		padding: 10rpx;
		border: 1rpx solid #D3D3D3;
	}

	.button {
		background: linear-gradient(to right, #FF94ED, #FF79E7);
		width: 400rpx;
		height: 70rpx;
		color: #FFFFFF;
		margin-top: 82rpx;
		border-radius: 36rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
	}
</style>

为了使弹窗生效

请检查安装了 uniApp弹窗插件 uni-popup +uni-transition这两个插件没有。

若无安装，请搜索 "插件市场"  将上述被标红插件名输入搜索即可