vue国家区号下拉组件 vue-country-code-selector

37 篇文章 3 订阅

vue国家区号下拉组件 vue-country-code-selector

地址

https://github.com/CherryLeee/vue-country-code-selector

npm安装使用

安装

npm install vue-country-code-selector

使用

<template>
  <div class="tel-container">
    <country-code-selector :countryCode.sync="value"></country-code-selector>
    <input type="text" v-model="value">
    <p>这是国际区号{{value}}</p>
  </div>
</template>

<script>
  import countryCodeSelector from 'vue-country-code-selector'
  export default {
    name: 'VueTelInput',
    components: {
      countryCodeSelector
    },
    data () {
      return {
        // 这里是对应国家的国际区号,这里是必填项,例如中国是86
        value: 86
      }
    }
  }
</script>

<style scoped>
  .tel-container{
    display: flex;
    align-items: center;
  }
  input {
    height: 20px;
  }
  p {
    margin-left: 20px;
  }
</style>

如果需要自己定义样式或者修改数据建议直接下载源码拷贝到自己的项目中去。

我修改后的组件:https://download.csdn.net/download/qq_43548590/74739558
国家区号数据库:https://download.csdn.net/download/qq_43548590/74739160

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
作为一款前端MVVM框架,Vue能够方便地创建复杂的UI组件。在Vue的丰富生态中,有许多可用的扩展组件库,可以大大减轻开发者的开发难度。其中,一个非常实用的组件下拉表格组件,也称为combo grid。在这里,我们介绍一个基于Vue下拉表格组件el-combo-grid。 简介 el-combo-grid是一个基于Vue下拉表格组件,它可以方便地实现下拉选择和表格展示的功能。使用el-combo-grid,我们可以将表格数据作为下拉列表的选项,用户可以通过下拉列表选择一行数据,也可以通过表格展示更多的数据信息。同时,el-combo-grid还支持简单的分页和过滤功能,可以更好地展示大量数据。 特性 - 支持下拉选择和表格展示两种模式 - 支持分页和过滤功能 - 支持自定义模板和样式 - 支持异步数据加载 安装 el-combo-grid可以通过npm安装: npm install el-combo-grid 引入 在vue组件中引入el-combo-grid: import ElComboGrid from 'el-combo-grid'; Vue.component('el-combo-grid', ElComboGrid); 使用 el-combo-grid的使用非常简单,只需要将数据作为props传入即可。以下是一个简单的例子: <template> <div> <el-combo-grid v-model="selected" :data="data" :columns="columns"></el-combo-grid> </div> </template> <script> export default { data() { return { selected: {}, data: [ {id: 1, name: 'apple', price: 5.99}, {id: 2, name: 'banana', price: 2.99}, {id: 3, name: 'orange', price: 3.99}, {id: 4, name: 'pear', price: 4.99}, ], columns: [ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'price', title: 'Price'}, ], }; }, }; </script> 在这个例子中,我们将一个包含4行数据的数组作为数据传入el-combo-grid组件中。同时,我们定义了3列字段,用于展示id、name、price三个属性。在页面上,我们可以通过下拉列表选择一行数据,也可以通过表格展示所有的数据。当用户选择数据时,会将选择的数据绑定到selected变量中。 总结 el-combo-grid是一个非常实用的下拉表格组件,可以方便地实现下拉选择和表格展示的功能。它支持分页和过滤功能,也支持自定义模板和样式。如果你需要在Vue项目中使用下拉表格组件,不妨试试el-combo-grid。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值