自定义样式

本节将详细介绍 SunlightImage 组件的自定义样式功能，包括如何通过 wrapperStyle 属性来自定义组件的外观。

基本用法

通过 wrapperStyle 属性可以自定义组件的样式，包括边框颜色、背景色、阴影等。

示例

自定义样式

自定义组件边框、背景等样式

自定义背景色

深色背景

<template>
  <div>
    <h3>自定义样式</h3>
    <p>自定义组件边框、背景等样式</p>
    <div class="custom-background-example">
      <h4>自定义背景色</h4>
      <SunlightImage
        v-model:imageUrl="customStyleImageUrl"
        :api="uploadApi"
        :wrapperStyle="{
          borderColor: '#c0c4cc',
          focusBorderColor: '#67c23a',
          backgroundColor: '#f0f9eb',
          boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
        }"
      />
    </div>
    <div class="custom-background-example">
      <h4>深色背景</h4>
      <SunlightImage
        v-model:imageUrl="darkStyleImageUrl"
        :api="uploadApi"
        :wrapperStyle="{
          borderColor: '#409eff',
          focusBorderColor: '#66b1ff',
          backgroundColor: '#ecf5ff',
          boxShadow: '0 2px 12px 0 rgba(64, 158, 255, 0.2)',
        }"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImage } from "sunlight-ui";

const customStyleImageUrl = ref("");
const darkStyleImageUrl = ref("");

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
.custom-background-example {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fafafa;
}

.custom-background-example h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}
</style>

隐藏源代码

配置说明

属性名	类型	默认值	说明
wrapperStyle	object	{}	组件样式配置
wrapperStyle.borderColor	string	'#dcdfe6'	边框颜色
wrapperStyle.focusBorderColor	string	'#409eff'	聚焦/悬停时边框颜色
wrapperStyle.focusBoxShadow	string	undefined	聚焦/悬停时阴影
wrapperStyle.backgroundColor	string	undefined	背景颜色
wrapperStyle.boxShadow	string	undefined	阴影
width	string	'150px'	组件宽度
height	string	'150px'	组件高度
borderRadius	string	'8px'	组件边框圆角

示例代码

<template>
  <div class="demo-container">
    <h3>自定义样式</h3>
    <SunlightImage
      v-model:imageUrl="customStyleImageUrl"
      :api="uploadApi"
      :height="'200px'"
      :width="'300px'"
      :borderRadius="'12px'"
      :wrapperStyle="{
        borderColor: '#c0c4cc',
        focusBorderColor: '#67c23a',
        backgroundColor: '#f0f9eb',
        boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
      }"
    />
    <div class="demo-info">
      <p>当前图片地址: {{ customStyleImageUrl || "未上传" }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const customStyleImageUrl = ref("");

// 上传 API
const uploadApi = async formData => {
  try {
    // 使用指定的接口 `https://jsonplaceholder.typicode.com/posts/`
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });

    // 模拟返回图片URL，实际项目中根据接口返回格式调整
    const data = await response.json();
    return {
      data: {
        fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
      },
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
.demo-container {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #ffffff;
}

.demo-info {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}
</style>

高级用法

多种样式组合

你可以根据需要组合多种样式属性，创建不同风格的上传组件。

示例

多种样式组合

展示不同样式的图片上传组件

默认样式

绿色边框

红色边框

带阴影

<template>
  <div>
    <h3>多种样式组合</h3>
    <p>展示不同样式的图片上传组件</p>

    <div class="styles-container">
      <!-- 样式 1：默认样式 -->
      <div class="style-item">
        <h4>默认样式</h4>
        <SunlightImage v-model:imageUrl="defaultStyleUrl" :api="uploadApi" />
      </div>

      <!-- 样式 2：绿色边框 -->
      <div class="style-item">
        <h4>绿色边框</h4>
        <SunlightImage
          v-model:imageUrl="greenStyleUrl"
          :api="uploadApi"
          :wrapperStyle="{
            borderColor: '#67c23a',
            focusBorderColor: '#85ce61',
          }"
        />
      </div>

      <!-- 样式 3：红色边框 -->
      <div class="style-item">
        <h4>红色边框</h4>
        <SunlightImage
          v-model:imageUrl="redStyleUrl"
          :api="uploadApi"
          :wrapperStyle="{
            borderColor: '#f56c6c',
            focusBorderColor: '#f78989',
          }"
        />
      </div>

      <!-- 样式 4：带阴影 -->
      <div class="style-item">
        <h4>带阴影</h4>
        <SunlightImage
          v-model:imageUrl="shadowStyleUrl"
          :api="uploadApi"
          :wrapperStyle="{
            boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
            focusBoxShadow: '0 2px 12px 0 rgba(64, 158, 255, 0.2)',
          }"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SunlightImage } from "sunlight-ui";

const defaultStyleUrl = ref("");
const greenStyleUrl = ref("");
const redStyleUrl = ref("");
const shadowStyleUrl = ref("");

const uploadApi = async formData => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return {
      fileUrl: `https://picsum.photos/300/300?random=${data.id}`,
    };
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
.styles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.style-item {
  flex: 1;
  min-width: 150px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fafafa;
}

.style-item h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}
</style>

隐藏源代码