利用axios拿到后台城市数据，定义两个数据，一个为右边索引栏的字母数组（大写），一个为索引和城市的对象数组先将右侧索引栏字母定义出来，遍历数据的拼音，取出首字母，排序，转大写再定义第二个数组，做一个双for循环，先循环索引的字母，将字母以对象的形式插入到空数组中，再循环数据中拼音的首字母大写，若找出数据中的首字母大写与索引的字母一样的话就进行插入，以对象的形式插入到刚刚的数组中，最后用v-for
在vue中实现级联选择器还是很简单，如果我们用到iview这个UI组件库，其中Cascader级联选择组件中对数据有较严格要求，每项数据至少包含 value、label 两项，子集为 children，以此类推。<template>
<Cascader :data="provs" v-model="city"></Cascader>
</templ
转载
2024-07-04 16:15:43
105阅读
我真的没想到这个会困扰到我。最开始以为，不就是直接找个简单的插件就实现了吗，jquery插件找了几个，都没有达到目的。需求是这样的：点击input框，弹出一个popup，然后可以滚动选择省，市，县。他们三者是联动的，同时也可以只选择省，或者省市，或者省市县。就是这个需求，感觉有点为难到我了。也可能是昨天感冒了，一天头都晕，又开各种会各种培训。。哈哈哈，不扯了。。。 数据哪里来？去下载一个
转载
2023-05-22 15:13:35
484阅读
最近在做一个省市区街道联动的功能，使用的是 Element 级联组件，现将自己的思路和问题记录一下，有对直辖市、港澳台数据的处理，大佬们有更好的建议可以留言哦! 话不多说，直接上菜。先看下效果?：⭐️ 接口数据，小伙伴们可以根据后端返回数据做相应处理。博主这边做的是全国的切换，数据量比较大，需要分级去获取，如下图所示： ? 了解了接口数据，那么接下来就是需要去做 Element 级联组件啦?!El
Element UI 项目分析讲过 vue 的插件开发原理，迫不及待的想要搭建一套自己的 插件库，那就从熟悉市面上最常用到的 vue UI 组件 ———— Element UI 开始吧。使用 vue init webpack-simple productName 初始化项目前提环境： node npm vue-cli# init
vue init webpack-simple my-project
转载
2024-06-02 17:09:52
520阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
setup 中实现响应式数据<template>
<img alt="Vue logo" src="./assets/logo.png">
<h2>a:{{a}}</h2>
<button @click="add">vue3</button>
</template>
<script>
im
文章目录组件介绍开发思路安装与使用组件代码参数说明事件关于dxui组件库 组件介绍“Dialog” 组件是一种用户界面元素，通常用于显示模态对话框或弹出窗口，以展示重要信息、提示、确认、表单填写或其他互动内容。这种组件提供了一种方式来引导用户的注意力，以进行特定任务或获取用户的响应。以下是关于 “Dialog” 组件的介绍和特点：模态对话框:“Dialog” 通常是模态的，这意味着在对话框打开时
目录前言一、构建项目二、引入mint-ui三、下载省/市/区的json数据四、省/市/区联动1、获取地址文件数据2、选择器组件化3、调用组件 前言最近在学习开发H5产品，想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例，要满足省/市/区三级联动的需求还需要做很多事情，也找了很多相关文档也没有一个比较系统的说明或demo。为此，在这
转载
2024-02-29 15:18:45
2053阅读
文章目录组件介绍开发思路组件安装与使用标准用法自定义背景色和字体颜色点击和关闭的回调组件代码参数说明事件关于dxui组件库 组件介绍“Tag” 组件是一种常见的用户界面元素，通常用于显示标签或标记，以标识或分类内容、数据、选项或元素。标签通常用于给用户提供快速的视觉参考，帮助他们理解、筛选、组织或分类信息。以下是关于 “Tag” 组件的介绍和特点：标签显示:“Tag” 组件通常以文本或小图标的形
1、组件上使用v-model
官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。
默认情况下，一个组件上的 v-model 会把 value 用作 prop
且把 input 用作 event，
但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。
使用 model 选项可以回避这些情况产生的冲突。
简单来讲就是
转载
2024-08-20 17:02:44
241阅读
一、vue-video-player1.安装cnpm install vue-video-player -S
cnpm install 'video.js' -S2.导入使用在main.js中导入：import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideo
转载
2024-09-24 14:36:45
417阅读
全国地区数据会很大,我们可以直接用这个地址 https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json实现的效果如下: 考虑到城市组件也会在项目其它地方使用,所以把城市组件定义成全局组件。来复习一下vue3.0中,将组件封装成全局的: 1.src/components 下新建.vue文件
转载
2024-02-28 10:17:14
1261阅读
前言最近刚刚结束项目，感觉收益颇多，因此记录一下，希望可以帮助到大家（我踩过的坑，大家就踩着我过去就行）背景本人java后端开发，公司临时需求需要弄一套权限管理系统，后端肯定没有问题，前端根据之前我使用的HTML,CSS感觉特别的繁琐和丑陋（主要本人不是专业前端），因此通过浏览相关资料，发现了vue+element+Admin(完美的后台前端解决方案)，它基于vue+elementui 实现，详细
转载
2024-04-16 11:13:16
155阅读
效果图：不多说奉上代码：//
// areaPickerView.m
// 省市选择器
//
// Created by iBokanwisdom on 15/8/31.
// Copyright (c) 2015年 pangLee. All rights reserved.
//
#import "areaPickerView.h"
@interface areaPickerView
本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读 ①简单来说： 就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 ②动态切换： 在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可。
upload组件的参数属性action必选参数，上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传的文件字段名string—filewith-credentials支持发送 cookie 凭证信息boolean—falseshow-file-list是否显示已上传文件列
转载
2024-07-11 20:50:01
286阅读
1：背景是一个web端的电商网站，根据点击的导航选项卡呈现不同得种类商品，首先这里说下我的路由结构是导航是一个
组件，选项卡的内容又是单独的一个
组件。这是导航
组件的内容，这里主要通过v-for循环生成导航，没什么好说的，需要注意的是，这因为选项卡需要知道用户所点击的是哪个模块，所以在数据中有个typeId属性，这里需要把该属性值传给选项卡
组件。<template>
<ul cl
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格
原创
2023-10-08 10:46:08
285阅读
一、vue中组件之间存在什么样的关系？我们可以Vue组件之间的关系为如下两类：1）父子组件之间通信。2）非父子组件之间通信(兄弟组件、隔代关系组件等)。二、Vue中的组件通信方式1）父子组件之间通信：1. pros / $emit父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。注意：props 只可以从上一级组件传递到下一级组件（父子组件），即所谓的
转载
2024-09-25 15:12:18
93阅读
