vue 案例使用

el-switch 按键的使用

复制代码
   <el-switch
     class="switchStyle"     
     v-model="boolValue" 
     :active-value="1" 
     :inactive-value="0" 
     active-text="ON" 
     inactive-text="OFF" 
     active-color="#13ce66" 
     inactive-color="#ff4949">
 </el-switch>

另外一个按键效果:

复制代码
<el-switch v-model="boolValue"  active-text="启用" inactive-text="关闭" style="zoom: 1.2"> </el-switch>

运行效果:

点击小眼睛时看密码:

加上show-password就行

复制代码
           <el-form-item label="无线密码" prop="key">
            <el-input v-model="form.key" show-password style="width: 300px" />
          </el-form-item>

运行效果:

相关推荐
jin12332213 分钟前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88212 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1362 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠2 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
2601_949833392 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
珑墨2 小时前
【Turbo】使用介绍
前端
军军君013 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9224 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...4 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
qq_177767374 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos