| | |
| | | import { computed, defineComponent } from 'vue' |
| | | import { computed, defineComponent, ref } from 'vue' |
| | | import parse from 'style-to-object' |
| | | export default defineComponent({ |
| | | name: '图标', |
| | | props: { |
| | |
| | | type: Number, |
| | | default: 12, |
| | | }, |
| | | draggable: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | cursor: { |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | class: { |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | style: { |
| | | type: [Object, String], |
| | | default: () => ({}), |
| | | }, |
| | | }, |
| | | emits: ['click'], |
| | | setup(props, { attrs, slots, emit }) { |
| | | const VITE_STATIC_URL = process.env.VITE_STATIC_URL || '' |
| | | const imgUrl = computed(() => { |
| | | const imgName = props.icon |
| | | return new URL(`../../assets/images/${imgName}.png`, import.meta.url).href |
| | | let imgName = props.icon |
| | | if (!imgName) return '' |
| | | let baseDir = 'images' |
| | | if (imgName.includes('files/')) { |
| | | baseDir = 'files' |
| | | imgName = imgName.split('/')[1] |
| | | } |
| | | return `${VITE_STATIC_URL}/resources/assets/${baseDir}/${imgName}.png` |
| | | }) |
| | | const style = computed(() => { |
| | | if (typeof props.style === 'string') { |
| | | return parse(props.style) |
| | | } |
| | | return props.style |
| | | }) |
| | | |
| | | return () => { |
| | | if (imgUrl.value.includes('undefined')) return null |
| | | |
| | | return ( |
| | | <img |
| | | onClick={(evt: Event) => emit('click', evt)} |
| | | width={props.width} |
| | | height={props.height} |
| | | src={imgUrl.value} |
| | | style={{ cursor: props.cursor, ...style.value }} |
| | | class={props.class} |
| | | {...attrs} |
| | | /> |
| | | ) |