| | |
| | | @click="myCheckboxClick(item)" |
| | | > |
| | | |
| | | <input |
| | | class="myCheckboxInput" |
| | | type="checkbox" |
| | | :disabled="rightFrom.usercode==='S001'" |
| | | :value="item.code" |
| | | :name="item.name" |
| | | :style="{color:item.isSelected2?'#42b983':'#fff'}" |
| | | @click="myCheckboxInputClick(item)" |
| | | >{{ item.name }} |
| | | <!-- <input--> |
| | | <!-- class="myCheckboxInput"--> |
| | | <!-- type="checkbox"--> |
| | | <!-- :disabled="rightFrom.usercode==='S001'"--> |
| | | <!-- :value="item.code"--> |
| | | <!-- :name="item.name"--> |
| | | <!-- :style="{color:item.isSelected2?'#42b983':'#fff'}"--> |
| | | <!-- @click="myCheckboxInputClick(item)"--> |
| | | <!-- >{{ item.name }}--> |
| | | |
| | | <!-- :style="{color:item.isSelected2?'#42b983':'#fff'}"--> |
| | | <!-- 父子点击事件不影响--> |
| | | <!-- onClick="event.cancelBubble = true"--> |
| | | <!--明天再看一下input和el-checkbox之间的区别--> |
| | | |
| | | <el-checkbox |
| | | :key="item.code" |
| | | v-model="item.isSelected2" |
| | | class="myCheckboxInput" |
| | | :value="item.code" |
| | | :name="item.name" |
| | | :disabled="rightFrom.usercode==='S001'" |
| | | >{{ item.name }} |
| | | </el-checkbox> |
| | | |
| | | :checked="item.isSelected2" |
| | | :label="item.name" |
| | | @change="myCheckboxInputClick(item)" |
| | | /> |
| | | <div class="myCheckboxInputLabel">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | <el-divider /> |
| | |
| | | }, |
| | | // 小盒子点击事件 |
| | | myCheckboxInputClick(val) { |
| | | console.log(val, 777777) |
| | | val.isSelected2 = !val.isSelected2 |
| | | val.isSelected2 = !!val.isSelected2 |
| | | |
| | | this.dialogFormRight.rightCurrentCode = val.code |
| | | |
| | | // 1.第一种情况 小盒子从没选中到选中 |
| | |
| | | //border: 1px solid $main_color; |
| | | border: 1px solid #eee; |
| | | display: flex; |
| | | min-width: 110px; |
| | | min-width: 100px; |
| | | padding: 10px; |
| | | margin: 10px 30px 0 0; |
| | | border-radius: 5px; |
| | | cursor: default; |
| | | position: relative; |
| | | |
| | | .myCheckboxInput { |
| | | margin: 1px 5px 0 0; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .myCheckboxInputLabel { |
| | | position: absolute; |
| | | left: 29px; |
| | | padding: 5px; |
| | | top: 6px; |
| | | color: transparent; |
| | | } |
| | | |
| | | } |
| | | |
| | | input[type=checkbox] { |