wordpress建立外贸网站/网页设计与制作

wordpress建立外贸网站,网页设计与制作,响应式网站制作教程,最专业的礼品网站实例Area 省市区选择,省市区选择组件通常与 弹出层 组件配合使用。 areaList 格式 areaList 为对象结构,包含 province_list、city_list、county_list 三个 key。 每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两…

Area 省市区选择,省市区选择组件通常与 弹出层 组件配合使用。
areaList 格式
areaList 为对象结构,包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11,以 0 补足 6 位,为 110000。

Vant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。

1. 省市区数据引入

npm i @vant/area-data

安装后,使用@vant下面的路径无法引用成功
在这里插入图片描述
我们新建一个用来引入文件的文件夹node_Files,放在pages下面,把@vant中的 area-data 整个进行拷贝,把dist里面的index.cjs.js文件名改为data.js,index.d.ts文件名改为data.d.ts。
在这里插入图片描述
引入链接

//省市区数据引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";

2. 封装组件

在这里插入图片描述
address-option.wxml

<!--components/address-option.wxml-->
<van-field value="{{ fieldValue }}" readonly clearable input-align="{{inputAlign}}" label="{{label}}" placeholder="请选择地区" bind:tap="onClick" required is-link />
<van-action-sheet show="{{ show }}"><van-area area-list="{{ areaList }}" title="地区选择" bind:confirm="onConfirm" bind:cancel="onClose" />
</van-action-sheet>

addressOption.js

// components/addressOption/addressOption.js
//省市区数据引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";Component({/*** 组件的属性列表*/properties: {label: {type: String,value: "地区"},inputAlign: {type: String,value: "left"},optionValue: {type: String,value: ""},mustFillIn: {type: String,value: false}},/*** 组件的初始数据*/data: {areaList,show:false},/*** 组件的方法列表*/methods: {onClick() {this.setData({show: true,});},onConfirm(e){console.log("确定省市区:",e)var address=""e.detail.values.forEach(element => {address=address+element.name});this.setData({address: address,show: false,})this.handleTap()console.log("省市区为:",address)},handleTap() {let value = this.data.addressconsole.log("fieldValue 地址:", value)this.triggerEvent("addressTab", value)},onClose() {this.setData({show: false,});},},observers: {optionValue: function (e) {this.setData({fieldValue: e})}},
})

address-option.json

{"component": true,"usingComponents": {"van-field": "@vant/weapp/field/index","van-action-sheet": "@vant/weapp/action-sheet/index","van-area": "@vant/weapp/area/index"}
}

3. 页面使用省市区

3.1. 引入组件

address.json

"usingComponents": {"address-option": "/components/address-option/address-option"}

3.2. 调用组件

address.wxml

<address-option bind:addressTab="onAddress"></address-option>

3.3. 接收子组件传过来的值

address.js

Page({/*** 页面的初始数据*/data: {radio: '1',fieldValue: ""},onAddress(e){this.setData({fieldValue: e.detail})},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智驾感知「大破局」!新一轮混战开启

随着智能驾驶搭载率的攀升&#xff0c;舱外传感器赛道迎来新变局。 一方面&#xff0c;从近几年智驾传感器的配置变化来看&#xff0c;摄像头的主导地位显而易见。 12月10-12日&#xff0c;由德赛西威总冠名的2024&#xff08;第八届&#xff09;高工智能汽车年会暨年度金球奖…

Kibana8.17.0在mac上的安装

1、Kibana是什么 Kibana是与elasticsearch配套使用的数据分析与可视化工具&#xff0c;通过Kibana可以轻松与es中存储的数据进行高效的交互&#xff0c;包括数据写入、检索、删除等操作&#xff0c;并可以通过编写部分代码将数据做成各种报表&#xff0c;从而进行非常直观的统…

数字IC后端设计实现十大精华主题分享

今天小编给大家分享下吾爱IC社区星球上周十大后端精华主题。 Q1:星主&#xff0c;请教个问题&#xff0c;长tree的时候发现这个scan的tree 的skew差不多400p&#xff0c;我高亮了整个tree的schematic&#xff0c;我在想是不是我在这一系列mux前边打断&#xff0c;设置ignore p…

给bmp和png,设置BLENDFUNCTION的AlphaFormat不同参数的效果

BLENDFUNCTION是AlphaBlend用控制透明效果的重要参数。 选择一个32位的png图片&#xff0c;设置AlphaFormat 为 AC_SRC_ALPHA&#xff0c;效果如上图。 选择一个32位的png图片&#xff0c;设置AlphaFormat 为 0&#xff0c;效果如上图。 选择一个24位的bmp图片&#xff0c;设置…

ChildLife“童年时光杯”足球联赛启动 共促青少年健康成长

2024年12月21日至22日&#xff0c;由美国知名婴幼儿营养品牌ChildLife童年时光赞助的“童年时光杯”青少年足球联赛将在上海拉开帷幕。本次赛事U7/U8组别共有16支足球队参赛&#xff0c;包括上海幸运星足球俱乐部旗下的明星球队&#xff0c;以及其他青少年俱乐部的优秀队伍&…

MTK--mt7921 usb wifi debug

文章目录 1、代码编译2、配置文件修改3、Wifi设置命令4、Wifi debug 淘宝随便买个7921的usb wifi。 1、代码编译 export TEMPLATECONF${PWD}/meta/meta-mediatek-mt8518/conf/base/aud8518sp2-slc-32b-7921-c4a-user source meta/poky/oe-init-build-env bitbake mtk-image-au…

如何配置OSB连接数据连接/读取超时

1.Oracle DB OSB中的DBAdapter的查询超时参数配置没用&#xff0c;要解决接口超时问题&#xff0c;需要在console中的数据源配置超时参数&#xff1a; oracle.net.CONNECT_TIMEOUT30000 oracle.net.READ_TIMEOUT30000 添加图片注释&#xff0c;不超过 140 字&#xff08;可选…

一起学Git【第六节:查看版本差异】

git diff是 Git 版本控制系统中用于展示差异的强大工具。他可以用于查看文件在工作区、暂存区和版本库之间的差异、任意两个指定版本之间的差异和两个分支之间的差异等,接下来进行详细的介绍。 1.显示工作区与暂存区之间的差异 # 显示工作区和暂存区之间的差异,后面不加参数…

Python数据处理——re库与pydantic的使用总结与实战,处理采集到的思科ASA防火墙设备信息

目录 Python正则表达式re库的基本用法 引入re库 各函数功能 总结 使用方法举例 正则表达式语法与书写方式 正则表达式的常用操作符 思科ASA防火墙数据 数据1 数据2 书写正则表达式 Python中pydantic的使用 导入基础数据模板 根据数据采集目标定义Pydantic数据类型…

`we_chat_union_id IS NOT NULL` 和 `we_chat_union_id != ‘‘` 这两个条件之间的区别

文章目录 1、什么是空字符串&#xff1f;2、两个引号之间加上空格 好的&#xff0c;我们来详细解释一下 we_chat_union_id IS NOT NULL 和 we_chat_union_id ! 这两个条件之间的区别&#xff0c;以及它们在 SQL 查询中的作用&#xff1a; 1. we_chat_union_id IS NOT NULL 含…

如何利用AWS监听存储桶并上传到tg bot

业务描述&#xff1a; 需要监听aws的存储中的最新消息&#xff0c;发送新的消息推送到指定tg的频道。 主要流程&#xff1a; 1.上传消息到s3存储桶&#xff08;不做具体描述&#xff09; 2.通过aws的lambda监听s3存储桶的最新消息&#xff08;txt文件&#xff09; 3.将txt文件…

HarmonyOS NEXT 实战之元服务:静态案例效果---查看国内航班服务

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1完整代码案例如下&#xff1a; Index代码 import { authen…

Windows11家庭版启动Hyper-V

Hyper-V 是微软的硬件虚拟化产品&#xff0c;允许在 Windows 上以虚拟机形式运行多个操作系统。每个虚拟机都在虚拟硬件上运行&#xff0c;可以创建虚拟硬盘驱动器、虚拟交换机等虚拟设备。使用虚拟化可以运行需要较旧版本的 Windows 或非 Windows 操作系统的软件&#xff0c;以…

为什么深度学习和神经网络要使用 GPU?

为什么深度学习和神经网络要使用 GPU&#xff1f; 本篇文章的目标是帮助初学者了解 CUDA 是什么&#xff0c;以及它如何与 PyTorch 配合使用&#xff0c;更重要的是&#xff0c;我们为何在神经网络编程中使用 GPU。 图形处理单元 (GPU) 要了解 CUDA&#xff0c;我们需要对图…

图像处理-Ch7-快速小波变换和小波包

个人博客&#xff01;无广告观看&#xff0c;因为这节内容太多了&#xff0c;有点放不下&#xff0c;分了三节 文章目录 快速小波变换(The Fast Wavelet Transform)与两频段子带编译码系统的关系例&#xff1a;计算一维小波变换 一维快速小波反变换例&#xff1a;计算一维小波…

[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结

目录 编写http_server模块 1. 引入cpp-httplib到项目中 2. cpp-httplib的使用介绍 3. 正式编写http_server 九、添加日志到项目中 十、编写前端模块 十一. 详解传 gitee 十二、项目总结 项目的扩展 写在前面 [项目详解][boost搜索引擎#1] 概述 | 去标签 | 数据清洗 |…

xxl-job 简单的入门到实战

本文是参考官方文档自己实践一次&#xff0c;纯享版&#xff0c;大致也是作者边写博客边去跟着官方文档实现 一、前期准备 1、官网地址 GitHub地址&#xff1a; GitHub - xuxueli/xxl-job: A distributed task scheduling framework.&#xff08;分布式任务调度平台XXL-JOB&…

【教程】通过Docker运行AnythingLLM

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 官方教程&#xff1a;Local Docker Installation ~ AnythingLLM 1、先创建一个目录用于保存anythingllm的持久化文件&#xff1a; sudo mkdir /app su…

若依(RuoYi-Vue)+Flowable工作流前后端整合教程

此教程适合若依前后端分离项目&#xff0c;其他项目可以在扩展列表中进行查找。 近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能&#xff0c;当然这个重任也是落在了我的身上&#xff08;不然也不会有这篇文章&#xff09;&#xff0c;然后我在官网看…

ubuntu 网络管理--NetworkManager

ubuntu 网络管理--NetworkManager 1 介绍2 NetworkManager 命令2 nmcli 命令显示可用的wifi AP连接wifi检查网络连接 ?? 如何删除删除网络连接查看设备状态添加一个新的以太网连接设置静态 IP 地址启用并测试连接添加新的wifi连接 3 其他命令参考 1 介绍 NetworkManager 是标…