van-area组件的封装

<template><van-popup v-model="isShow"  v-bind="popupOption"><van-areav-bind="pickerOption"@confirm="handleConfirm"@cancel="handleCancel"/></van-popup>
</template><script>
import { areaList } from '@vant/area-data'export default {inheritAttrs: false,props: {value: {type: Boolean,default: false},// 默认选中的值defaultValue: {type: String,default: ''},popupConfig: {type: Object,default: () => ({})},// onConfirm 和 onSubmit都是点击完成按钮时触发onConfirm: {type: Function,default: () => { }},onSubmit: {type: Function,default: () => { }}},data() {return {popupOption: {position: 'bottom'},pickerOption: {areaList: { ...areaList },showToolbar: true,// 默认选中的值value: this.defaultValue}}},computed: {isShow: {get() {return this.value},set(v) {this.$emit('input', v)}}},watch: {isShow: {handler: 'handleShow',immediate: true}},mounted() {},methods: {handleShow(val) {if (val) {const { popupConfig } = this.$propspopupConfig && Object.assign(this.popupOption, popupConfig)this.pickerOption = Object.assign({ }, this.pickerOption, this.$attrs)}},// 确认按钮handleConfirm(areaList) {const currentValue = areaList.filter((item) => !!item).map((item) => item.name).join('/')this.onConfirm(currentValue, areaList)this.onSubmit(currentValue, areaList)this.handleCancel()},// 取消按钮handleCancel() {this.isShow = false}}
}
</script>

van-area组件的封装相关推荐

ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1.效果展示 2.容 ...
ES6公用分页组件的封装及应用举例
ES6公用分页组件的封装及应用举例,以下源码使用到JQuery.Sass,重要的是方法,不合适可以根据自己的需要改改. 分页类以下为pagination.js源码 import './paginat ...
小程序 --- Tab组件的封装
1. Tabs组件的封装 1.1 组件的引入使用自定义的组件很简单,只需在使用组件的页面的配置文件.json文件中配置. // pages/goods_list/index.json {" ...
vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
微信小程序|area组件使用的地址数据文件plus
area组件使用的地址数据文件前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意前言实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...
微信小程序|area组件使用的地址数据文件
area组件使用的地址数据文件前言 1.area组件使用的地址文件结构 2.腾讯的全球地址数据文件结构 3.两个数据结构的融合 3.1 fastjson 解析复杂嵌套json字符串 3.2 判断js ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
vue之vue的生命周期、swiper、自定义组件的封装、自定义指令、过滤器、单文件组件及vue-cli
文章目录 1.vue的生命周期 1.1.8个生命周期函数 2.swiper 3.自定义组件的封装 4.自定义指令 4.1.定义 4.2.基本使用 4.3.利用自定义指令传入指定参数修改背景色 5.过滤 ...
基于log4net的日志组件扩展封装，实现自动记录交互日志 XYH.Log4Net.Extend（微服务监控）...
背景: 随着公司的项目不断的完善,功能越来越复杂,服务也越来越多(微服务),公司迫切需要对整个系统的每一个程序的运行情况进行监控,并且能够实现对自动记录不同服务间的程序调用的交互日志,以及通一个服务或 ...

van-area组件的封装

van-area组件的封装

van-area组件的封装相关推荐

最新文章

热门文章