记录mpvue+vant-weapp的使用（六）：mpvue下面怎么做小程序登录 和 获取van-field的值

1、目前小程序登录是需要主动点击按钮触发的，vant-weapp有两种弹窗可以使用，Popup 弹出层和Dialog 弹出框。我感觉Popup 弹出层容易修改一点，所以我这里用的是这个。

给默认头像那里给个点击事件，控制弹窗的隐藏显示。这里也可以直接给“点击登录”添加点击事件。

<van-popup :show="show" @close="onClose">
      <div class="padding-20 is-login">
        <p class="padding-10" style="font-weight: 600;">欢迎来到朝花夕拾</p>
        <p class="padding-10">为提供更优质的服务，我们需要获取以下信息：</p>
        <p class="desc padding-10">你的公开信息（昵称、头像等）</p>
        <div class="margin-t30">
          <van-button class="margin-r20" type="default" @click="cancleLogin()">取 消</van-button>
          <van-button open-type="getUserInfo" type="primary" @click="confirmLogin()">确 认</van-button>
        </div>
      </div>
    </van-popup>

 

vant-weapp的button按钮是是支持微信开放能力的：

所以这里的操作和小程序的button的操作是差不多的，然后获取授权和用户信息使用小程序的原生接口即可。

获取用户信息和登录的方法，直接使用微信提供的api即可。

2、van-field本身是不支持双向绑定的，所以获取input的值，需要添加绑定事件，和小程序差不多，。

我这里使用的是bind:input：

<van-popup :show="show2" @close="onClose2">
      <div class="padding-20 is-login">
        <van-field
            :value="signature"
            placeholder="请输入签名"
            border="false"
            @input="onInput"
          />
          <div class="margin-t30">
            <van-button class="margin-r20" type="default" @click="cancleEdit()">取 消</van-button>
            <van-button @click="confirmEdit()" type="primary" >确 认</van-button>
          </div>
      </div>

值得注意的是van-field这里本身的bind:input要改成@input ，不然会报错。

onInput(val){
      console.log(val.mp.detail)
    },

2020-7-21前来补充。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

我发现vant-weapp里面的van-field有坑。。。。。无论是使用@input还是@change，都会出现一种情况：当你手机按键比较快的时候，会有延迟和丢失数据。

所以这里最终弃用van-field，改用小程序原生的input和textarea，因为mpvue里面是支持双向绑定的，直接使用v-model就可以了。

<textarea
    class="van-cell my-textarea2"
    placeholder="请填写圈子简介"
    maxlength="300"
    v-model="form.intro"
    ></textarea>

<input
          class="field-index--van-field  my-input"
          style="border: none;width: 100%;"
          v-model="form.gName"
          placeholder="请填写圈子名称(不超过8个字)"
          maxlength="8"
          type="text">