手机选择国际电话区号怎么input | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

由来

前几天UI给了张新图，里边手机的输入框居然可以选择手机号归属地！（之前设计的时候没考虑到这个）

之前设计的input组件基本思路和结构是这样：小程序input | 青训营笔记 - 掘金 (juejin.cn)，这个手机号归属地的话，当时想到的是新建一个组件，过去好几天了，现在来写文章突然想到好像也可以用插槽试试，这样组件就少写一个嘿嘿，之后再实现一下插槽，先记录一下手机号input组件的实现

实现思路

图标部分，我用的是之前文章里提到过的base64字符串组成json文件去引入实现类似icon效果的方式,小程序知识点复盘——科技成果转换小程序（一） - 掘金 (juejin.cn)

跟之前input组件类似，利用isfocus实现输入状态下边框加深颜色 其实就简单使用一下uni-data-select组件就好了,uni-app官网 (dcloud.net.cn)

输入框跟之前类似，不展开细说实现，看我上边的链接

关于组件的事件，有两个——变更手机号归属地和变更手机号，所以有两个

phoneCountryList: [
        {
          text: "中国大陆",
          value: 86,
        },
        {
          text: "中国台湾",
          value: 886,
        },
        {
          text: "中国香港",
          value: 852,
        },
        {
          text: "中国澳门",
          value: 853,
        },
        {
          text: "新加坡",
          value: 65,
        },
        {
          text: "日本",
          value: 81,
        },
        {
          text: "韩国",
          value: 82,
        },
      ],

changeValue(e) {
      let index = this.index;
      this.$emit("valueChange", {
        index,
        value: e.detail.value,
      });
    },
    changePhoneCountry(e) {
      console.log(e);
      this.$emit("phoneCountryChange",{
        value:e
      })
    },

还有就是样式也改一下就行

最终效果

感觉这个还是简单了些