Dialog.vue
<template>
<div class="container" v-show="dialogVisble">
<div class="content">
<div @click="close" class="close-text pointer">关闭</div>
<div>
<input
type="text"
v-model="number"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</div>
<div v-show="String(number)" class="mg-t">双倍数量:{{ number * 2 }}</div>
<div class="button-list mg-t">
<button @click="clear">清空</button>
<button @click="confirm">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
dialogVisble: {
type: Boolean,
default: false,
},
},
data() {
return {
number: "",
};
},
methods: {
resetNumber(){
this.number=""
},
close() {
this.$emit("update:dialogVisble", false);
this.resetNumber();
},
clear() {
this.number = "";
},
confirm() {
this.$emit("updateCount", Number(this.number));
this.resetNumber();
},
},
};
</script>
<style scoped>
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 200px;
background: #ffffff;
border-radius: 20px;
padding: 10px;
}
.close-text {
float: right;
margin-right: 5px;
}
.button-list {
display: flex;
justify-content: space-around;
}
.mg-t{
margin-top: 15px;
}
.pointer{
cursor: pointer;
}
</style>
Dome.vue
<template>
<div>
<div>总数:{{count}}</div>
<div><button @click="popDialog">弹出弹窗并添加</button></div>
<Dialog @updateCount="updateCount" :dialogVisble.sync="dialogVisble"/>
</div>
</template>
<script>
import Dialog from "./Dialog.vue"
export default {
name: 'HelloWorld',
components:{Dialog},
data(){
return {
count:0,
dialogVisble:false,
}
},
methods:{
popDialog(){
this.dialogVisble=true;
},
updateCount(val){
this.count+=val;
this.dialogVisble=false;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
App.vue
<template>
<div id="app">
<Dome msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import Dome from './components/Dome.vue'
export default {
name: 'App',
components: {
Dome
}
}
</script>
<style>
</style>