64 lines
1.1 KiB
Vue
64 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<view @click.stop="switchCheckbox">
|
||
|
|
<view class="checkbox" :style="{backgroundColor: selectable? '#fff': '#d0d0d0'}">
|
||
|
|
<view :class="{'checked': checked}" :style="{color: selectable? '#007aff': '#a2a2a2'}" v-show="checked">√</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
name: 'MyCheckBox',
|
||
|
|
props: {
|
||
|
|
value: Boolean,
|
||
|
|
selectable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
checked: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
value:{
|
||
|
|
immediate:true,
|
||
|
|
handler(val){
|
||
|
|
// if(val){
|
||
|
|
this.checked = val
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
switchCheckbox(){
|
||
|
|
if(this.selectable){
|
||
|
|
this.checked = !this.checked
|
||
|
|
this.$emit('input', this.checked)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.checkbox{
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border: solid lightgray 1px;
|
||
|
|
position: relative;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checked{
|
||
|
|
font: normal normal normal 14px/1 uni;
|
||
|
|
/* content: "\EA08"; */
|
||
|
|
font-size: 22px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%,-48%) scale(.73);
|
||
|
|
-webkit-transform: translate(-50%,-48%) scale(.73);
|
||
|
|
}
|
||
|
|
</style>
|