2025-04-04【arco design Vue】组件库使用技巧

1 使用虚拟节点创建组件库内的组件

先确定要创建的组件,例如加载动画图标,它的常规使用方法如下

<template>
  <a-spin />
</template>

但创建虚拟节点需要先引入组件,然后使用createVNode函数创建,所以需要先确定官方引入组件的名称:a-spin对应Spin,以此类推

import { Spin } from '@arco-design/web-vue'

再使用createVNode(Spin)即可

导入图标方法

有图标

<icon-exclamation-circle-fill />

导入

import {IconExclamationCircleFill} from '@arco-design/web-vue/es/icon';

2 向a-button插入SVG不显示

<a-button v-if="true" class="voice-listen-btn" shape="circle" @click="playAudio();processAudioData()" ref="audioBtn" :style="{
        width: '60px',
        height: '60px',
        border: 'none',
        background: 'blue',
        color: 'var(--olivine-450)',
        marginLeft: '10px'
  }">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm-1 6.75v6.5a.75.75 0 0 1-1.5 0v-6.5a.75.75 0 0 1 1.5 0zm6 0v6.5a.75.75 0 0 1-1.5 0v-6.5a.75.75 0 0 1 1.5 0zm-3 1.5v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 1.5 0zm-6 .5v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0z" fill="currentColor"></path></g></svg>
</a-button>

记得务必设置一下props变量shape就好了 ,然后再Ctrl + R 刷新一下

3 使用ref获取组件DOM元素失败

想要在发生某些变化时,获取组件的DOM元素,但使用ref.value获取到的是组件实例,而不是原生DOM元素,无法使用ref.value.style更改其样式,此时有两种解决方案:

  • 使用$el获取根元素
audioBtn.value.$el.style.color = 'var(--success-450)'
  • 使用动态类名 最推荐
:class="['voice-listen-btn', { 'playing': isPlaying }]"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容