<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这两个插件没有。
若无安装,请搜索 "插件市场" 将上述被标红插件名输入搜索即可