bijiDialog.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <div>
  3. <el-dialog :class="type==='Delete'? 'response-tip-dialog' :'response-small-dialog'"
  4. :close-on-click-modal="false"
  5. :show="show"
  6. :title="title"
  7. :visible.sync="visible"
  8. center>
  9. <div v-if="type==='Edit'">
  10. <el-input :autosize="{ minRows: 6, maxRows: 10}" type="textarea" v-model="data.content"></el-input>
  11. </div>
  12. <div v-else-if="type==='Delete'">
  13. 是否删除此条笔记?
  14. </div>
  15. <div v-else-if="type==='Add'">
  16. <el-input
  17. :autosize="{ minRows: 6, maxRows: 10}"
  18. placeholder="请输入内容"
  19. type="textarea"
  20. v-model="addDialogConent">
  21. </el-input>
  22. </div>
  23. <span class="dialog-footer" slot="footer">
  24. <el-button @click="closeFun">取 消</el-button>
  25. <el-button :disabled="isDisable" @click="confirmFun" type="primary">确 定</el-button>
  26. </span>
  27. </el-dialog>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. name: 'biji',
  33. props: {
  34. title: {
  35. type: String,
  36. default: '提示',
  37. },
  38. data: {
  39. type: Object,
  40. },
  41. type: {
  42. type: String,
  43. required: true,
  44. },
  45. show: {
  46. type: Boolean,
  47. default: false
  48. }
  49. },
  50. data() {
  51. return {
  52. visible: this.show,
  53. addDialogConent: '',
  54. isDisable: false,
  55. timer: null,
  56. };
  57. },
  58. watch: {
  59. show () {
  60. this.visible = this.show;
  61. }
  62. },
  63. methods: {
  64. closeFun(){
  65. console.log('show'+this.type);
  66. this.$emit('update:show', false)
  67. },
  68. confirmFun(){
  69. let opt = {
  70. conent:this.addDialogConent
  71. }
  72. this.isDisable = true
  73. this.timer = setTimeout(() => {
  74. this.isDisable = false
  75. }, 1000);
  76. this.$emit('confirmBtn'+this.type, this.data|| opt)
  77. },
  78. clearTime(){
  79. clearTimeout(this.timer)
  80. },
  81. },
  82. created() {
  83. },
  84. };
  85. </script>
  86. <style lang="scss">
  87. </style>