修改el-select 右侧图标样式和边框颜色

需求:elementui 下拉框修改边框颜色 和右侧图标样式

1、修改后效果
在这里插入图片描述

/*右侧图标样式  \e790下箭头图标*/
.el-select .el-input .el-select__caret.el-input__icon::before {
  content: "| \e790";  
  color: #FD724E;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*如果不设置图标下拉时是反的*/
.el-select .el-input .el-select__caret {
  transform: rotateZ(0deg);
}
<template> <div class="container"> <el-input v-model="text" type="textarea" :rows="5" placeholder="输入要转换的文本" /> <el-select v-model="selectedVoice" placeholder="选择发音人" class="mt-20" > <el-option v-for="voice in voices" :key="voice.name" :label="voice.name" :value="voice" /> </el-select> <div class="sliders mt-20"> <div class="slider-item"> <span>语速 ({{ rate }}x)</span> <el-slider v-model="rate" :min="0.5" :max="2" :step="0.1"/> </div> <div class="slider-item"> <span>音调 ({{ pitch }})</span> <el-slider v-model="pitch" :min="0" :max="2" :step="0.1"/> </div> <div class="slider-item"> <span>音量 ({{ volume }})</span> <el-slider v-model="volume" :min="0" :max="1" :step="0.1"/> </div> </div> <el-button type="primary" class="mt-20" @click="generateSpeech" > 生成语音 </el-button> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' const text = ref('') const selectedVoice = ref(null) const rate = ref(1) const pitch = ref(1) const volume = ref(1) const voices = ref([]) onMounted(() => { // 加载可用语音列表 speechSynthesis.addEventListener('voiceschanged', () => { voices.value = speechSynthesis.getVoices() }) }) const generateSpeech = () => { if (!text.value) return const utterance = new SpeechSynthesisUtterance(text.value) utterance.voice = selectedVoice.value utterance.rate = rate.value utterance.pitch = pitch.value utterance.volume = volume.value speechSynthesis.speak(utterance) } </script> <style scoped> .container { max-width: 800px; margin: 20px auto; padding: 20px; } .mt-20 { margin-top: 20px; } .slider-item { margin: 15px 0; } </style>生成语言按钮放在文本输入框的右下角,并且是一个三角播放按钮
03-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值