vue3+element-plus el-input 自动获取焦点

        虽然element有提供input的autofocus属性,但是当我们第二次进入页面就会发现autofocus已经不再生效,需要通过onMounted去触发input的focus解决这个问题。

1.先给el-input绑定一个ref:
<el-input ref="inputRef"  v-model="inpValue" clearable />

2.定义一个函数去触发这个input的focus:
const focusInput = () => {
        nextTick(() => {
                inputRef.value.focus()
        })
}

3.最后通过onMounted去触发这个函数:
onMounted(() => {
        focusInput()
})

整体代码就是:

<template>
  <div class="use_wrap">
    <div class="content">
      <el-input ref="inputRef" v-model="inputValue" placeholder="请输入" clearable />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
const inputRef = ref()
const inputValue = ref('')
onMounted(() => { focusInput() })
const focusInput = () => {
  nextTick(() => {
    inputRef.value.focus()
  })
}
</script>

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 Django Rest Framework (DRF)、Vue 3 和 Element Plus 搭建的前后端分离模板。 ### 后端 (Django Rest Framework) 1. 创建一个 Django 项目和应用程序: ``` $ django-admin startproject myproject $ cd myproject $ python manage.py startapp myapp ``` 2. 安装 DRF: ``` $ pip install djangorestframework ``` 3. 在 `myproject/settings.py` 中添加 DRF 和 CORS 的配置: ```python INSTALLED_APPS = [ # ... 'rest_framework', ] MIDDLEWARE = [ # ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework.authentication.TokenAuthentication', 'rest_framework.authentication.SessionAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), } CORS_ORIGIN_ALLOW_ALL = True ``` 4. 在 `myapp/views.py` 中定义一个视图: ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello(request): return Response({'message': 'Hello, world!'}) ``` 5. 在 `myproject/urls.py` 中添加路由: ```python from django.urls import path, include from myapp.views import hello urlpatterns = [ path('api/', include([ path('hello/', hello), ])), ] ``` 6. 运行服务器: ``` $ python manage.py runserver ``` 访问 `http://localhost:8000/api/hello/` 应该会返回 `{"message": "Hello, world!"}`。 ### 前端 (Vue 3 + Element Plus) 1. 使用 Vue CLI 创建一个新项目: ``` $ vue create myproject-frontend ``` 2. 安装 Element Plus: ``` $ npm install element-plus --save ``` 3. 在 `main.js` 中引入 Element Plus 和样式: ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App) .use(ElementPlus) .mount('#app') ``` 4. 在 `App.vue` 中添加一个按钮和一个文本框: ```vue <template> <div class="container"> <el-input v-model="name" placeholder="Enter your name"></el-input> <el-button type="primary" @click="sayHello">Say hello</el-button> <div class="result">{{ result }}</div> </div> </template> <script> import axios from 'axios' export default { name: 'App', data() { return { name: '', result: '' } }, methods: { sayHello() { axios.get('/api/hello/', { headers: { 'Authorization': 'Token ' + sessionStorage.getItem('token') } }) .then(response => { this.result = response.data.message }) .catch(error => { console.error(error) }) } } } </script> <style> .container { max-width: 800px; margin: 0 auto; padding: 20px; } .result { margin-top: 20px; font-weight: bold; } </style> ``` 5. 运行服务器: ``` $ npm run serve ``` 访问 `http://localhost:8080/` 应该会显示一个文本框和一个按钮。在文本框中输入你的名字,然后点击按钮,应该会显示 `Hello, world!`。 这是一个简单的模板,你可以根据自己的需要进行扩展和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值