H5APP中使用vue拨打用户电话

简单粗暴调用函数

直接调用这个函数就可以了，

//拨打电话
        GetPhone(){
          if (window.plus) {
            plus.device.dial(‘要拨打的电话号’, true);
          }
        },

这个弹窗是基于vux，要用弹窗的话可以下载vux,不要的话不用往下看了，手机号我也不知道谁的，看见了别乱打。。。。。

npm install vux --save

在build/webpack.base.conf.js要进行修改的代码

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

咳咳

<p @click="Call">拨打电话</p>




    <popup v-model="isDetail" height="1.34rem">
      <div class="Img">
        <p>拨打电话</p>
        <span>确认要拨打电话{{Mobile}}吗?</span>
        <div class="qu" @click="GetPhone">确定</div>
        <div class="CloseT" @click="CloseT">关闭</div>
      </div>
    </popup>

函数调用：

 
<script>
  import { Swiper,Popup} from 'vux'
    export default {
      components: {
        Swiper,Popup
      },
        name: "about",
      data(){
          return{
            isDetail:false,
            Mobile:''
          }
      },
      methods:{
        //拨打电话
        GetPhone(){
          if (window.plus) {
            plus.device.dial(this.Mobile, true);
          }
        },
        //隐藏电话弹窗
        CloseT(){
          this.isDetail = false
        },
        //展示电话弹窗
        ShowK(){
          this.isDetail = true
        },
      },
    }
</script>

css

    .vux-popup-dialog{
      width: 2.8rem;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -1.4rem;
      margin-top:-0.67rem;
      .Img{
        position: relative;
        background: #fff;
        width: 2.8rem;
        height: 1.34rem;
        overflow: hidden;
        p{
          font-size: .2rem;
          text-align: center;
          color: #414141;
          line-height: .5rem;
        }
        span{
          color: #666;
          display: block;
          font-size: .14rem;
          text-align: center;
        }
        .qu{
          width: .9rem;
          font-size: .14rem;
          text-align: center;
          line-height: .3rem;
          color: #fff;
          height: .3rem;
          position: absolute;
          background: #37dcc9;
          left: .25rem;
          bottom: .2rem;
        }
        .CloseT{
          width: .9rem;
          font-size: .14rem;
          text-align: center;
          line-height: .3rem;
          color: #fff;
          height: .3rem;
          position: absolute;
          background: #999999;
          right: .25rem;
          bottom: .2rem;
        }
      }
    }

我是一个很菜的前端美工！！！！！完毕！