单选框_vue实现单选框自定义样式
话不多说先看效果再看代码,后期推出多选和其他的代码
<style lang="less" scoped>
.CancelOrderCause-layout {font-family: PingFang SC;background: #f6f6f6;width: 100%;height: 100%;overflow-y: scroll;.cancel-list {width: 100%;height: auto;padding-bottom: 0.2rem;.cancel-title {background: #ffffff;margin-top: 0.2rem;width: 100%;height: 1.18rem;border-radius: 0.2rem 0.2rem 0 0;font-size: 0.36rem;font-stretch: normal;line-height: 0.98rem;box-sizing: border-box;padding-top: 0.2rem;padding-left: 0.32rem;letter-spacing: 0rem;color: #191f25;}.cancel-multiple-choice {.multiple-choice-list {width: 100%;height: 0.88rem;display: flex;// justify-content: center;align-items: center;position: relative;background-color: #ffffff;}.multiple-choice-img {width: 0.44rem;height: 0.44rem;margin-left: 0.24rem;margin-right: 0.4rem;}.multiple-choice-text {}.multiple-choice-line {position: absolute;height: 0.02rem;top: 0;left: 0.88rem;right: 0;background-color: #ededee;}}}
}
</style>
<template><div class="CancelOrderCause-layout"><div class="cancel-list"><h1 class="cancel-title">取消订单原因(必选)</h1><divclass="cancel-multiple-choice"v-for="(item, index) in arr":key="index"><div class="multiple-choice-list" @click="MultipleChoice(item, index)"><img :src="selects === index ? activeIcon : inactiveIcon" alt="" class="multiple-choice-img"/><span class="multiple-choice-text">选择{{ item }}</span><div class="multiple-choice-line"></div></div></div></div></div>
</template><script>
export default {name: 'Cance',data () {return {arr: [11, 22, 33, 44, 55, 66],activeIcon: '//image.greenplayer.cn/share/img/baoxian/icon_checked.svg',inactiveIcon: '//image.greenplayer.cn/share/img/baoxian/icon_unchecked.svg',selects: 100}},mounted () {document.title = '取消原因'},methods: {MultipleChoice (item, index) {this.selects = index}}
}
</script>
单选框_vue实现单选框自定义样式相关推荐
- ant-vue通知提醒框( Notification )实现自定义样式
需求:运用ant中通知提醒实现自定义的样式效果: 效果如下:点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h),我自己是用function(h)来实现的,想用vu ...
- Antd组件中单选框、复选框自定义样式的优雅实现
表单组件的样式控制算是antd组件使用的一大坑了. .以antd-mobile为例,checkbox选中与非选中状态是由Input包裹的父元素的'.am-checkbox-checked'来控制的 未 ...
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
- 你知道如何修改单选框、复选框、下拉框的默认样式吗
介绍 HTML 原生的单选框.复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融 ...
- 纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
- vue单选框选中_vue中单选框与多选框的实现与美化
我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...
- vue 复选框默认选中_vue 实现单选框设置默认选中值
vue 实现单选框设置默认选中值 vue中单选框的默认选中不同于传统方式设置checked,是通过在data中设置vulue来实现的 html部分是通过v-for取的后台的数据 生成后的代码就是 js ...
- 微信小程序实现多选框+自定义样式(checkbox)
1.实现效果 2.实现原理 小程序多选框 微信小程序为我们提供了checkbox-group,多项选择器,内部由多个checkbox组成. checkbox: 3.实现代码 <!--pages/ ...
- css美化单选款、复选框
一款美化单选款.复选框的样式 支持度: Chrome Firefox Safari Opera IE9 && IE9+ 代码: <!DOCTYPE html> <ht ...
最新文章
- SQL Server-创建表格、各种约束条件
- 【uniapp】swiper 添加click事件
- AUTOSAR解决方案 — INTEWORK-EAS-CP
- 程序员如何学习更好的知识_如何保持学习并成为更好的程序员
- Azure系列1.1.2 —— 用于 IntelliJ 的 Azure 工具包的登录说明
- dubbo指定服务提供者ip_使用指定IP调用Dubbo服务
- 如今,进北大要看脸了
- 一文搞懂前端对象的深拷贝与浅拷贝
- linux 测试网络端口通不通_能否使用一台矢量网络分析仪来控制多台 E5092A 以增加测试端口数?...
- FastDFS搭建文件服务器
- rpcbind结合nfs实现文件共享
- 怎么用Hypermesh划分球体网格
- android 骨骼动画教程,使用Spine骨骼动画丰富你的Android应用(一)
- Linux命令-su-用户
- 【已解决】terminate called after throwing an instance of ‘cv::Exception‘,已放弃 (核心已转储)
- SPARQL中常见的关键字含义(PREFIX,FILTER,OPTIONAL等)
- iOS后台运行机制1
- ntc温度控制程序 c语言,NTC热敏电阻温度计算以及C语言实现
- java 递归 尾递归_递归和尾递归
- 台电 x80 pro 双系统 刷win10最新家庭版
热门文章
- 高性能的JavaScript--加载和执行
- 判断CSS与JS是否加载完毕的方法
- jQuery使用blur()方法触发两次的解决方法
- IntelliJ IDEA的Maven项目在修改时报java.lang.OutOfMemoryError: PermGen space异常
- ubuntu linux下解决“no java virtual machine was found after searching the following locations:”的方法
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML
- 网站出现service unavailable的解决方法
- 滚动时背景ListView变为黑色
- yum工具安装Nginx
- css绝对定位如何在不同分辨率下的电脑正常显示定位位置?