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 }]"