index.vue 948 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <el-card shadow="hover">
  3. <div class="flex flex-justify-between flex-center mb-10">
  4. <div class="font-16 bold-500 flex-justify-start flex">
  5. {{ title }}
  6. </div>
  7. <el-button
  8. type="primary"
  9. icon="Edit"
  10. v-if="editBtn"
  11. size="small"
  12. @click="change"
  13. >{{ btnText }}</el-button
  14. >
  15. </div>
  16. <el-divider />
  17. <slot></slot>
  18. </el-card>
  19. </template>
  20. <script>
  21. export default {
  22. props: {
  23. title: {
  24. type: String,
  25. default: ''
  26. },
  27. editBtn: {
  28. type: Boolean,
  29. default: false
  30. }
  31. },
  32. data() {
  33. return {
  34. btnText: '编 辑'
  35. }
  36. },
  37. methods: {
  38. change() {
  39. if (this.btnText == '保 存') {
  40. this.$emit('save')
  41. }
  42. this.btnText = this.btnText === '编 辑' ? '保 存' : '编 辑'
  43. this.$emit('change', this.btnText === '编 辑')
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss" scoped></style>