| | |
|---|
| | | <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" /> |
|---|
| | | |
|---|
| | | <!-- 如果是 SVG 图标，进行改造 --> |
|---|
| | | <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners" :style="svgStyle"> |
|---|
| | | <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners" > |
|---|
| | | <!-- |
|---|
| | | :xlink:href 动态绑定图标ID |
|---|
| | | 注意：这里假设你的图标ID是 "icon-" + iconFileName |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import config from "@/assets/js/config"; |
|---|
| | | export default { |
|---|
| | | name: 'SvgIcon', |
|---|
| | | props: { |
|---|
| | |
|---|
| | | type: String, |
|---|
| | | required: true |
|---|
| | | }, |
|---|
| | | // 新增一个 color prop，用于接收颜色 |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | // 默认值设为 'inherit'，它会继承父元素的文字颜色 |
|---|
| | | default: 'inherit' |
|---|
| | | }, |
|---|
| | | // 可选：增加尺寸控制 |
|---|
| | | size: { |
|---|
| | | type: String, |
|---|
| | | default: '1em' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 使用计算属性来动态生成样式 |
|---|
| | | svgStyle() { |
|---|
| | | return { |
|---|
| | | fontSize: this.size, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | console.log(config.activeBook.bookThemeColor, "987654"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
