index.vue 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="box-data">
  3. <Nav title="首页"></Nav>
  4. <view class="border-item"></view>
  5. <enInput v-model="text" label="姓名"></enInput>
  6. <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
  7. <enCheckbox v-model="type" label="爱好" :checkboxData="checkboxData"></enCheckbox>
  8. <enRadio v-model="sex" label="性别" :radioData="radioData"></enRadio>
  9. <enSwitch v-model="status" label="状态" ></enSwitch>
  10. <enTextarea v-model="content" label="个人简介"></enTextarea>
  11. </view>
  12. </template>
  13. <script>
  14. import enInput from "components/en-input/en-input"
  15. import enSend from "components/en-send/en-send"
  16. import enCheckbox from "components/en-checkbox/en-checkbox"
  17. import enRadio from "components/en-radio/en-radio"
  18. import enSwitch from "components/en-switch/en-switch"
  19. import enTextarea from "components/en-textarea/en-textarea"
  20. export default {
  21. components: {
  22. enTextarea,
  23. enSwitch,
  24. enRadio,
  25. enCheckbox,
  26. enInput,
  27. enSend
  28. },
  29. data() {
  30. return {
  31. phone:'13900139001',
  32. text:'来自火星的你',
  33. content:'你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?你会火星语吗?',
  34. type:['1'],
  35. sex:'1',
  36. status:1,
  37. // checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'},{'id':'4','name':'羽毛球'},{'id':'5','name':'乒乓球'},{'id':'6','name':'铅球'},{'id':'7','name':'棒球'},{'id':'8','name':'冰球'},{'id':'9','name':'网球'},{'id':'10','name':'乒乓球'}]
  38. checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'}],
  39. radioData:[{'id':'1','name':'男'},{'id':'2','name':'女'}]
  40. }
  41. },
  42. watch:{
  43. 'content':function (){
  44. console.log('new--------content',this.content)
  45. },
  46. 'type':function (){
  47. console.log('new--------type',this.type)
  48. },
  49. 'phone':function (){
  50. console.log('new--------'+this.phone)
  51. },
  52. 'text':function (){
  53. console.log('new--------'+this.text)
  54. },
  55. 'status':function (){
  56. console.log('new--------'+this.status)
  57. }
  58. },
  59. mounted() {
  60. },
  61. methods: {
  62. getCode(){
  63. console.log('---------------------asdsa')
  64. this.text='abc'
  65. this.$refs.enSendObj.setCodeNum()
  66. },
  67. },
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .border-item{
  72. border-bottom: 2rpx solid #F0F0F0;
  73. }
  74. .box-data{
  75. padding: 32rpx 32rpx 0;
  76. background-color: #fff;
  77. }
  78. </style>