一个点击 图片选中,改变图片样式, 传数据到后台的一个例子

这是一个展示如何在用户点击图片后,实现图片选中效果,并将数据发送到后台的实例。通过这样的功能,可以实现每日逐步提升的交互体验。
摘要由CSDN通过智能技术生成

一个点击 图片选中,改变图片样式, 传数据到后台的一个例子,每天进步一点点微笑吐舌头


<p class="details_title" style="font-size:20px">货况反馈:</p>

      <%= form_tag '' do %>
         <div id="nav">
         <%= hidden_field_tag "status",value: "1" %>
         <table cellspacing="100">
           <tr>
             <td value="1" height="50px">
               <img class="1" value="1" src="/image/shipment_status/warehouse.png" width="100" height="100" />
要修改ElementUI多选框的选中状态样式一个图片,可以通过以下步骤实现: 1. 在项目中引入需要的图片资源文件。 2. 使用CSS样式覆盖ElementUI中默认的多选框样式,将选中状态的样式修改为需要的图片。 例如,可以使用以下CSS代码: ```css .el-checkbox__input.is-checked+.el-checkbox__label { background-image: url(../images/selected.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } ``` 其中,`.el-checkbox__input.is-checked+.el-checkbox__label`是ElementUI多选框选中状态的样式选择器,`background-image`属性设置背景图片的路径,`background-repeat`属性设置背景图片不重复,`background-position`属性设置背景图片位置为居中,`background-size`属性设置背景图片大小为contain。 3. 将修改后的样式应用到需要的多选框组件上。 例如,在Vue组件中,可以使用以下代码: ```vue <template> <el-checkbox-group v-model="checkedList"> <el-checkbox label="Option 1"></el-checkbox> <el-checkbox label="Option 2"></el-checkbox> <<!-- more checkboxes... --> </el-checkbox-group> </template> <script> export default { data() { return { checkedList: [] } } } </script> <style> .el-checkbox__input.is-checked+.el-checkbox__label { background-image: url(../images/selected.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } </style> ``` 这样,多选框选中状态的样式就会变成指定的图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值