|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <view class="canvas"> | 
|---|
|  |  |  | <view class="canvas flex-center" v-show="show"> | 
|---|
|  |  |  | <view class="main"> | 
|---|
|  |  |  | <view class="titles"> | 
|---|
|  |  |  | <view class="titles flex-center"> | 
|---|
|  |  |  | {{title}} | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | <view class="decs"> | 
|---|
|  |  |  | <slot></slot> | 
|---|
|  |  |  | <view class="decs flex-center"> | 
|---|
|  |  |  | <uni-number-box v-model="num" :max="max" :min="min"></uni-number-box> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | <view class="operation"> | 
|---|
|  |  |  | {{title}} | 
|---|
|  |  |  | <view class="operation flex-center"> | 
|---|
|  |  |  | <button size="mini" @click="confrim">确认</button> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | 
|---|
|  |  |  | type: [String,Number], | 
|---|
|  |  |  | default: 'title' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // num: { | 
|---|
|  |  |  | //    type: Number, | 
|---|
|  |  |  | //    default: 0 | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | max: { | 
|---|
|  |  |  | type: Number, | 
|---|
|  |  |  | default: 100 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | min: { | 
|---|
|  |  |  | type: Number, | 
|---|
|  |  |  | default: 0 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | show: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | watch: { | 
|---|
|  |  |  | // num(num) { | 
|---|
|  |  |  | //    this.num = num | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | show(show) { | 
|---|
|  |  |  | this.show = show | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | num: 0, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | confrim() { | 
|---|
|  |  |  | this.show = false | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | .flex-center { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .canvas { | 
|---|
|  |  |  | height: 100vh; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .main { | 
|---|
|  |  |  | width: 80%; | 
|---|