modalTip.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view class="cu-modal " @touchmove.stop.prevent="moveBoxingHandle">
  3. <view class="cu-bind-modal">
  4. <view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
  5. <image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;" src="/static/modelBg.png"></image>
  6. </view>
  7. <view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
  8. <view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
  9. <view style="width: 80rpx;height: 2rpx;border-radius: 2px; background-color: #cbcdcf;"></view>
  10. <view class="make-text-bPurple" style=" font-size: 20px;">{{title}}</view>
  11. <view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
  12. </view>
  13. <view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">{{context}}</view>
  14. <view class="flex justify-around align-center" style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
  15. <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;" @tap="hideModalTip">取消</view>
  16. <view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
  17. <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;" @tap="confirmModalTip">确定</view>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. },
  27. data() {
  28. return {
  29. title:'提示',
  30. context:'',
  31. //当前传入操作的item
  32. operationItem: null,
  33. type:'none'
  34. };
  35. },
  36. created() {
  37. },
  38. methods: {
  39. setShowData(data){
  40. let {title,context,operationItem,type} = data;
  41. this.title = title;
  42. this.context = context;
  43. this.operationItem = operationItem;
  44. this.type = type;
  45. },
  46. hideModalTip(){
  47. this.$emit('hide')
  48. },
  49. confirmModalTip(){
  50. this.$emit('confirm',{type:this.type,operationItem:this.operationItem})
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss">
  56. </style>