En primer lugar, resolví este problema por un día, pero resultó que es un problema pequeño. No pierda su tiempo aquí, y dé la solución directamente: elimine el atributo readonly del cuadro desplegable . Si comprende, lo comprenderá. El plan específico se puede ver al final, y el proceso puede serle útil.
<el-select placeholder="请选择产品花型"
filterable
id="fuck"
v-model="flower">
<el-option v-for="(item,index) in flowerArr"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>Mire primero el código anterior, se ve así cuando se convierte en un componente
Aquí hay una respuesta general sobre cómo Baidu muestra el teclado virtual:
¿Aparecerá el teclado virtual cuando el componente de entrada esté enfocado? ? ?
fnndp！
No es tan simple, lo que dijiste es una tontería cuando el novato recién está aprendiendo. Busqué por un día, y estaba buscando maneras de enfocar la entrada, aunque pensé que la entrada estaba enfocada desde el principio, todavía la busqué por un día.
Para que aparezca el teclado virtual, existen muchas condiciones además de la entrada para enfocar. ! ! ! ! ! !
Soy demasiado vago para encontrar las condiciones específicas, pero descubrí que hay dos situaciones en las que el teclado virtual no aparece cuando se ingresa
El primer tipo: input es un cuadro desplegable, pero el cuadro desplegable de element-ui lo crea usted mismo. Es un cuadro de entrada de tipo de texto. Puede ver la captura de pantalla para esto.
El segundo tipo: la entrada tiene un atributo de solo lectura y el teclado virtual no aparecerá (conjetura personal, no aparecerá la desactivación, pruebe usted mismo).
El cuadro de búsqueda de elment-ui pertenece a esta situación. Tiene un readonly por defecto. No sé lo que piensa el autor, pero ahora solo necesito eliminar este readonly para buscar. El código es el siguiente :
document.getElementById('fuck').removeAttribute('readOnly')
Por supuesto que no es tan simple. Este componente agrega readonly back cuando se desenfoca, por lo que tiene que quitar readonly cuando se desenfoca. ¿Cómo va? Ya no es tan simple. Después de verificar el código fuente del componente seleccionado, descubrí que hay un retraso de 50 milisegundos al desenfocar. La experiencia del usuario está optimizada. Por lo tanto, su operación de eliminación debe ser una operación asincrónica para eliminar solo lectura. El código fuente es el siguiente:
La solución final es la siguiente, simplemente escriba este código en la carpeta pública
Array.from(document.getElementsByClassName('el-select')).forEach((item) => {
item.children[0].children[0].removeAttribute('readOnly')
item.children[0].children[0].onblur = function () {
let _this = this
setTimeout(() => {
_this.removeAttribute('readOnly')
}, 200)
}
})————————————————————————————
Finalmente, echemos un vistazo a cómo elment-ui maneja esto de solo lectura. El código fuente es el siguiente
He enviado un correo electrónico al personal oficial para preguntar sobre el significado de esto de solo lectura, esperando una respuesta. . .