问题遇到的现象和发生背景
vuetify的Text Fields在3.0版本中只能显示filled样式的,在codepen中测试却可以。codepen链接,本地的3.0
用代码块功能插入代码,请勿粘贴截图。
<v-app>
<v-container>
<v-form class="register_input">
<v-text-field
v-model="user_name"
label="用户名"
clearable
outlined
color="blue"
counter=10
:rules="name_rules"
></v-text-field>
<v-text-field
v-model="user_password"
outlined
:append-icon="password_show ? 'mdi-eye' : 'mdi-eye-off'"
:rules="passworld_rules"
:type="password_show ? 'text' : 'password'"
label="密码"
color="blue"
@click:append="password_show = !password_show"
></v-text-field>
</v-form>
</v-container>
</v-app>
data: () => ({
user_name: null,
user_password: null,
name_rules: [
v => !!v || '此处必须填写',
v => v.length <= 10 || '用户名必须≤10个字',
v => v.length >= 2 || '用户名必须≥2个字',
],
passworld_rules: [
v => !!v ||'此处必须填写',
v => v.length >= 8 || '密码必须>8个字',
],
})
.register_input{
width=80%;
}
我的解答思路和尝试过的方法
我尝试了codepen,codepen正常,我想让outlined能在3.0中显示