blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-05-02 15:56:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

RayIcon新增depth属性

Browse Source
This commit is contained in:
ray_wuhao 2023-02-17 15:13:01 +08:00
parent 646066b918
commit 6c73a0612b
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/RayIcon/index.scss
View File

@ -1,13 +1,14 @@
.ray-icon { .ray-icon {
position: relative;
width: var(--ray-icon-width); width: var(--ray-icon-width);
height: var(--ray-icon-height); height: var(--ray-icon-height);
border: none; border: none;
outline: none; outline: none;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
position: relative;
fill: currentColor; fill: currentColor;
transform: translateZ(0); transform: translateZ(0);
opacity: var(--ray-icon-depth);
& svg[rayIconAttribute="ray-icon"] { & svg[rayIconAttribute="ray-icon"] {
width: var(--ray-icon-width); width: var(--ray-icon-width);

9
src/components/RayIcon/index.tsx
View File

@ -39,9 +39,15 @@ const RayIcon = defineComponent({
default: 0, default: 0,
}, },
customClassName: { customClassName: {
/** 自定义 class name */
type: String, type: String,
default: '', default: '',
}, },
depth: {
/** 图标深度 */
type: Number,
default: 1,
},
}, },
setup(props) { setup(props) {
const modelColor = computed(() => props.color) const modelColor = computed(() => props.color)
@ -51,9 +57,10 @@ const RayIcon = defineComponent({
'--ray-icon-width': props.width '--ray-icon-width': props.width
? props.width + 'px' ? props.width + 'px'
: props.size + 'px', : props.size + 'px',
'--ray-icon-height': props.width '--ray-icon-height': props.height
? props.height + 'px' ? props.height + 'px'
: props.size + 'px', : props.size + 'px',
'--ray-icon-depth': props.depth,
} }
return cssVar return cssVar