fix:Modify style panel background image

opentiny · Jan 8, 2025 · a460bbe · a460bbe
1 parent 4552aa3
commit a460bbe
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="background-row line">
-    <label class="image-label top">背景图</label>
-    <div class="image-content">
+    <label class="image-label">背景图</label>
+    <!-- <div class="image-content">
       <div class="image-wrap">
         <div class="image-inner"></div>
       </div>
@@ -15,7 +15,8 @@
       <div class="choose-image">
         <span>选择图片</span>
       </div>
-    </div>
+    </div> -->
+    <tiny-input v-model="state.imgUrl" placeholder="请输入图片URL" @change="handleChangeImg"></tiny-input>
   </div>
   <div class="background-row line">
     <label class="size-label">大小</label>
@@ -73,7 +74,8 @@
 
 <script setup>
 import { reactive, defineProps, defineEmits, onMounted } from 'vue'
-import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+// import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { Input as TinyInput } from '@opentiny/vue'
 import { TabsGroupConfigurator } from '@opentiny/tiny-engine-configurator'
 import PositionOrigin from './PositionOrigin.vue'
 import InputSelect from '../inputs/InputSelect.vue'
@@ -104,6 +106,7 @@ const emit = defineEmits(['updateStyle'])
 
 const state = reactive({
   checked: false,
+  imgUrl: '',
   sizeSelected: 'custom',
   repeat: 'no-repeat',
   fixedSelected: 'scroll',
@@ -117,16 +120,21 @@ const updateStyle = (property) => {
   emit('updateStyle', property)
 }
 
-const imageSizeChange = (val) => {
-  state.width = val ? '125' : 'Auto'
-  state.widthSuffix = val ? 'px' : 'auto'
-  state.height = 'Auto'
-  state.heightSuffix = 'auto'
-  val
-    ? updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: '125px' })
-    : updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: null })
+const handleChangeImg = (value) => {
+  state.imgUrl = value
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `url(${value})` })
 }
 
+// const imageSizeChange = (val) => {
+//   state.width = val ? '125' : 'Auto'
+//   state.widthSuffix = val ? 'px' : 'auto'
+//   state.height = 'Auto'
+//   state.heightSuffix = 'auto'
+//   val
+//     ? updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: '125px' })
+//     : updateStyle({ [BACKGROUND_PROPERTY.BackgroundSize]: null })
+// }
+
 const selectSize = (value) => {
   if (value !== 'auto') {
     state.width = 'Auto'
@@ -199,6 +207,8 @@ const selectFixed = (value) => {
 
 onMounted(() => {
   const { styleObj } = props.style
+  const backgroundImageStr = styleObj[BACKGROUND_PROPERTY.BackgroundImage]
+  state.imgUrl = backgroundImageStr.substring(4, backgroundImageStr.length - 1)
   state.fixedSelected = styleObj[BACKGROUND_PROPERTY.BackgroundAttachment]
   state.repeat = styleObj[BACKGROUND_PROPERTY.BackgroundRepeat]
   const sizeKeyword = ['cover', 'contain']