setting.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!--
  2. * @description: 外链
  3. * @Date: 2022-09-01 15:26:34
  4. * @Author: xingheng
  5. -->
  6. <template>
  7. <div>
  8. <el-form
  9. ref="form"
  10. label-width="100px"
  11. label-position="left"
  12. :model="config"
  13. class="bs-el-form"
  14. >
  15. <SettingTitle>标题</SettingTitle>
  16. <div class="setting-wrap">
  17. <el-form-item
  18. label="标题"
  19. label-width="100px"
  20. >
  21. <el-input
  22. v-model="config.title"
  23. placeholder="请输入标题"
  24. />
  25. </el-form-item>
  26. </div>
  27. <SettingTitle>位置</SettingTitle>
  28. <div class="setting-wrap">
  29. <PosWhSetting :config="config" />
  30. </div>
  31. <SettingTitle v-if="config.border">边框</SettingTitle>
  32. <div class="lc-field-body">
  33. <BorderSetting
  34. v-if="config.border"
  35. label-width="100px"
  36. :config="config.border"
  37. />
  38. </div>
  39. <SettingTitle>基础</SettingTitle>
  40. <div class="setting-wrap">
  41. <el-form-item
  42. label="URL"
  43. label-width="100px"
  44. >
  45. <el-input
  46. v-model="config.url"
  47. type="textarea"
  48. rows="4"
  49. placeholder="请输入URL地址"
  50. />
  51. </el-form-item>
  52. </div>
  53. </el-form>
  54. </div>
  55. </template>
  56. <script>
  57. import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
  58. import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
  59. import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
  60. export default {
  61. name: 'IframeChartSetting',
  62. components: {
  63. PosWhSetting,
  64. SettingTitle,
  65. BorderSetting
  66. },
  67. data () {
  68. return {
  69. }
  70. },
  71. computed: {
  72. config: {
  73. get () {
  74. return this.$store.state.bigScreen.activeItemConfig
  75. },
  76. set (val) {
  77. this.$store.state.bigScreen.activeItemConfig = val
  78. }
  79. }
  80. },
  81. watch: {
  82. },
  83. mounted () {},
  84. methods: {
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. @import "../../assets/style/settingWrap.scss";
  90. .setting-wrap{
  91. padding: 12px 16px;
  92. }
  93. </style>