main.vue 986 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="v-radio center"
  3. :style="{
  4. 'border-color':vValue ? activeBorderColor : borderColor,
  5. 'background-color': vValue ? activeColor : color
  6. }"
  7. :class="['v-radio-'+size]"
  8. @click="toggle"
  9. >
  10. <text v-show="vValue" class="iconfont iconfont-check v-radio-check"></text>
  11. </view>
  12. </template>
  13. <script>
  14. import props from './props';
  15. export default {
  16. name: "v-radio",
  17. data(){
  18. return {
  19. vValue:false
  20. }
  21. },
  22. watch:{
  23. value(){
  24. return this.setValue(this.value);
  25. }
  26. },
  27. methods:{
  28. setValue(value){
  29. if (this.vValue !== value) {
  30. this.vValue = value;
  31. if (this.value !== value) {
  32. return this.$emit('input',value);
  33. }
  34. }
  35. },
  36. toggle(){
  37. if (this.disabled) return ;
  38. return this.setValue(!this.vValue);
  39. }
  40. },
  41. created(){
  42. this.setValue(this.value);
  43. },
  44. props
  45. }
  46. </script>
  47. <style scoped lang="scss" src="./style.scss">
  48. </style>