vant——可输入文字的弹出框
想实现点击按钮,出现一个弹出框,可以进行输入。并且有确定和取消事件。在我们需要操作的VUE界面上,放置控件://这是一个按钮,赋予click事件<van-button type="default" :icon="require ('../../assets/main/approving.png') " @click="onClick">正在审批</van-button>//
·
想实现点击按钮,出现一个弹出框,可以进行输入。并且有确定和取消事件。
在我们需要操作的VUE界面上,放置控件:
<!--这是一个按钮,赋予click事件-->
<van-button type="default" :icon="require ('../../assets/main/approving.png') " @click="onClick">正在审批</van-button>
<!--弹出框,赋予chargeBtn事件-->
<van-dialog
v-model="show"
title="弹出框"
show-cancel-button
:beforeClose="chargeBtn"
>
<!--输入框-->
<van-field
v-model="message"
rows="1"
autosize
label="留言"
type="textarea"
placeholder="请输入留言"
/>
</van-dialog>
<script>
import Vue from 'vue';
import { Dialog,Field } from 'vant';
Vue.use(Dialog);
Vue.use(Field);
export default {
data() {
return {
show: false,
message: '',
};
},
methods: {
onClick() {
//当点击按钮时,显示弹出框
this.show = true;
},
chargeBtn(action, done) {//确认or取消
if (action === 'cancel') {//取消按钮
done();
} else if (action === 'confirm') {//确定按钮
//向后端传值并关闭dialog弹出框
this.show = false;
};
this.message='';
done();
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)