<style> .custom-input input { color: red !important; } </style> <el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>这段代码红色字体没效果
时间: 2024-03-13 08:42:50 浏览: 101
这段代码应该是 Vue.js 模板语法,其中的样式是被 scoped 限制的,所以在全局样式中无法直接修改。
如果您想要修改这段代码中的颜色,可以在组件样式中增加一个非 scoped 的样式来覆盖掉原来的样式,例如:
```
<style scoped>
.custom-input input {
color: red !important;
}
.custom-input >>> .el-input__inner { /* 用 >>> 来穿透 scoped */
color: red !important;
}
</style>
<template>
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>
</template>
```
这里分别给 `.custom-input input` 和 `.custom-input >>> .el-input__inner` 添加了一个红色的 `color` 样式。注意第二个选择器中使用了 `>>>` 来穿透 scoped。
相关问题
<div class="line"> <el-row> <el-col :span="1.5"> <div class="font">用户签名:</div> </el-col> <el-col :span="1.5"> <el-input :disabled="disableFlag" class="input" placeholder="请输入签名" v-model="userSelfSign" ></el-input> </el-col> <el-col :span="1.5"> <div class="font">电话号码:</div> </el-col> <el-col :span="4"> <el-input :disabled="disableFlag" class="input" placeholder="请输入电话号码" v-model="tel"></el-input> </el-col> </el-row> </div>
这是一段Vue.js代码,使用了Element UI库中的el-row、el-col、el-input组件,用于渲染一个表单。表单中包含了用户签名和电话号码两个输入框,其中用户签名输入框的值绑定到了Vue实例的userSelfSign属性上,电话号码输入框的值绑定到了tel属性上。此外,还有一个disableFlag属性用于控制输入框是否可编辑。
<template> <div> <div class="login"> <h4 style="text-align: center">登录</h4> <el-divider></el-divider> <div> <el-tag size="mini">账号</el-tag> <el-input v-model="account"></el-input> </div> <div> <el-tag size="mini">密码</el-tag> <el-input v-model="password" type="password"></el-input> </div> <div style="margin-top: 10px"> <el-button :disabled="account.trim() == '' || password.trim() == ''" @click="logins" type="primary" style="width: 100%" block >登录</el-button > </div> </div> </div> </template> <script> import axios from "axios"; export default { data: function () { return { account: "", password: "", }; }, methods: { logins() { axios .post("https://api.test.jiangdaye.cn/api/User/logins", { account: this.account, password: this.password, }) .then((res) => { if (res.data.result === 0) { this.$router.push("/"); } else { this.$message.error(res.data.message); } }); }, }, mounted: function () { console.log(this.$route.params.id); }, }; </script> <style> .login { width: 350px; margin: 0 auto; border: 1px solid #eee; padding: 15px; border-radius: 2px; background-color: #fff; } </style>有什么问题吗
这段代码主要是一个登录页面的模板,包含了一个账号输入框、一个密码输入框以及一个登录按钮。在点击登录按钮时,会通过axios发送一个post请求到指定的API接口,将账号和密码作为参数传递给后端进行验证。如果验证通过,则会跳转到首页,否则会弹出一个错误提示框。
从代码上看,没有明显的问题。但是需要注意的是,这段代码中使用了第三方库axios,需要在使用前确保已经安装并引入该库。另外,需要根据实际情况修改API接口的地址和参数。
阅读全文