Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修复了radio和checkbox的一些bug以及样式修改 #177

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
修复了radio和checkbox的一些bug以及样式修改
1.radio的样式改成圆点样式
2.checkbox改成原radio的样式
3.添加了一个空的set方法解决radio报错的问题
4.给input标签添加hidden属性解决当页面出现滚动条时点击单选框或多选框会跳回页面顶部的问题
zth committed Mar 28, 2018
commit 4d851bf8287cd1fa3a9809da611e04a934584da2
30 changes: 17 additions & 13 deletions src/components/checkbox/index.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
<template>
<div class="list list-ios von-checkbox">
<div class="item item-borderless item-icon-right"
v-for="(option, i) in options" @click="onClick(i)">
<div class="item item-borderless item-icon-left" v-for="(option, i) in options">
<hairline-top v-if="i > 0"></hairline-top>

<input type="checkbox" :name="checkboxName" :id="checkboxName + '-' + i" v-model="v" :value="i">
<input type="checkbox" :name="checkboxName" :id="checkboxName + '-' + i"
v-model="v" :value="i" @click="onClick(i)" hidden>
<span v-text="option"></span>
<i
<i class="icon ion-ios-checkmark"
:class="{
'icon ion-ios-checkmark-empty assertive': v.indexOf(i) > -1 && theme == 'assertive',
'icon ion-ios-checkmark-empty positive': v.indexOf(i) > -1 && theme == 'positive',
'icon ion-ios-checkmark-empty balanced': v.indexOf(i) > -1 && theme == 'balanced',
'icon ion-ios-checkmark-empty energized': v.indexOf(i) > -1 && theme == 'energized',
'icon ion-ios-checkmark-empty calm': v.indexOf(i) > -1 && theme == 'calm',
'icon ion-ios-checkmark-empty royal': v.indexOf(i) > -1 && theme == 'royal',
'icon ion-ios-checkmark-empty dark': v.indexOf(i) > -1 && theme == 'dark'
'grey': v.indexOf(i) <= -1,
'assertive': v.indexOf(i) > -1 && theme == 'assertive',
'positive': v.indexOf(i) > -1 && theme == 'positive',
'balanced': v.indexOf(i) > -1 && theme == 'balanced',
'energized': v.indexOf(i) > -1 && theme == 'energized',
'calm': v.indexOf(i) > -1 && theme == 'calm',
'royal': v.indexOf(i) > -1 && theme == 'royal',
'dark': v.indexOf(i) > -1 && theme == 'dark'
}"
>
</i>
@@ -51,8 +52,11 @@
},
computed: {
v: function () {
return this.value
v: {
get:function(){
return this.value
},
set:function(){}
}
},
30 changes: 17 additions & 13 deletions src/components/radio/index.vue
Original file line number Diff line number Diff line change
@@ -4,22 +4,23 @@
v-for="(option, i) in options" @click="onClick(i)"
>
<hairline-top v-if="i > 0"></hairline-top>
<input type="radio" :name="radioId" v-model="v" :value="i">
<input type="radio" :name="radioId" v-model="v" :value="i" @click="onClick(i)" hidden>
<span v-text="option"></span>
<i
class="icon ion-ios-checkmark"
class="icon"
:class="{
'grey': v != i,
'assertive': v == i && theme == 'assertive',
'positive': v == i && theme == 'positive',
'balanced': v == i && theme == 'balanced',
'energized': v == i && theme == 'energized',
'calm': v == i && theme == 'calm',
'royal': v == i && theme == 'royal',
'dark': v == i && theme == 'dark'
'ion-android-radio-button-off grey': v != i,
'ion-android-radio-button-on assertive': v == i && theme == 'assertive',
'ion-android-radio-button-on positive': v == i && theme == 'positive',
'ion-android-radio-button-on balanced': v == i && theme == 'balanced',
'ion-android-radio-button-on energized': v == i && theme == 'energized',
'ion-android-radio-button-on calm': v == i && theme == 'calm',
'ion-android-radio-button-on royal': v == i && theme == 'royal',
'ion-android-radio-button-on dark': v == i && theme == 'dark'
}"
>
</i>
<span v-text="option"></span>


<hairline-bottom v-if="i < options.length - 1"></hairline-bottom>
</div>
@@ -53,8 +54,11 @@
},
computed: {
v: function () {
return this.value
v: {
get:function(){
return this.value
},
set:function(){}
}
},
23 changes: 20 additions & 3 deletions src/scss/_checkbox.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
.von-checkbox {
padding-top: 2px;

.item-icon-right {
.item {
padding: 15px 15px 15px 30px;
font-size: 14px;
line-height: 20px;

&:first-of-type, &:last-of-type {
border: none;
}
}

.item-icon-left {
.icon {
font-size: 36px;
right: 5px;
font-size: 24px;
left: -6px;

&.grey {
color: #BBB;
}
}
}

.ion-ios-circle-outline {
color: #ccc;
}
input[type=checkbox] {
position: absolute;
top: -50000px;