diy-style-preview.php 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template id="diy-style-preview">
  2. <el-scrollbar class="dsp-contain">
  3. <diy-header :active-item="activeItem" @permis-change="permisChange" :all-permission="permission">
  4. <components :is="activeCompName" :active-item="activeItem" :other-page-data="otherPageData" @update="update" @updateother="updateOther"></components>
  5. </diy-header>
  6. </el-scrollbar>
  7. </template>
  8. <script>
  9. Vue.component('diy-style-preview', {
  10. name: "diy-style-preview",
  11. template: '#diy-style-preview',
  12. props: {
  13. activeItem: {
  14. type: Object,
  15. default () {
  16. return {}
  17. }
  18. },
  19. activeIndex: {
  20. type: Number,
  21. default () {
  22. return 0
  23. }
  24. },
  25. permission: {
  26. type: Array,
  27. default () {
  28. return []
  29. }
  30. },
  31. otherPageData: {
  32. type: Object,
  33. default () {
  34. return {}
  35. }
  36. }
  37. },
  38. computed: {
  39. activeCompName() {
  40. return this.getName(this.activeItem)
  41. }
  42. },
  43. data() {
  44. return {};
  45. },
  46. methods: {
  47. getName(target) {
  48. try {
  49. return target ? target.funcListItem.type + "-style" : ""
  50. } catch (e) {
  51. return ""
  52. }
  53. },
  54. update(item) {
  55. this.$emit('update', item, this.activeIndex)
  56. },
  57. updateOther(item) {
  58. this.$emit('updateother', item)
  59. },
  60. permisChange(arr) {
  61. this.activeItem.permission = arr
  62. this.$emit('update', this.activeItem)
  63. }
  64. }
  65. });
  66. </script>
  67. <style>
  68. .dsp-contain {
  69. position: relative;
  70. width: 467px;
  71. height: 100%;
  72. background: #FFFFFF;
  73. }
  74. </style>