vue 图标选择器
来源：http://www.ruoyi.vip/import Vue from \'vue\'import SvgIcon from \'@/components/SvgIcon\'// svg component// register globallyVue.component(\'svg-icon\', SvgIcon)const req = require.context(\'./svg\', false, /\.svg$/)const requireAll = requireContext => r...
2024-01-10
vue 级联选择器
如何使用Element_UI 组件中的Cascader 级联组件，使用起来很简单，但是有的项目不会引用Element_UI，而是使用 Vuetify，是没有级联组件的，我今天记录一下，我实现的方法。 点击此输入框，会弹出级联信息，可以选择，也可以自己搜索<v-row> <div style="position: absolute; width: 100%; ...
2024-01-10
vue层级选择器多选
来了一个需求，需要层级多选器，二级需要多选，自己造的时候花了半天没造出来，给的时间有限呀，确实不好造，造了一半很多bug。结果google一把发现有一个开源的，写的挺不错的，所以将此番分享，真的节约了很多时间，毕竟公司就我一个人呀~分享他人封装的插件如下~ 结合element一致1. 层级选...
2024-01-10
基于vue的颜色选择器
1、安装依赖npm install vcolorpicker -S2、在main.js中引入插件并注入main.jsimport vcolorpicker from ‘vcolorpicker’Vue.use(vcolorpicker)3、在项目中使用在项目中使用 vcolorpicker可以添加颜色变化事件change颜色值改变的时候触发...
2024-01-10
vue css 深度选择器
在我们想穿透的选择器前边添加>>> 或者 /deep/ 或者 ::v-deep。官方地址：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors 官方还说 >>> 可能存在问题，建议用后两者，我们用的scss，就选择 ::v-deep...
2024-01-10
Vue组件之极简的地址选择器的实现
一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。GitHub地址：Vue-location_Select二、需要学习的地方（1）...
2024-01-10
vue 仿IOS 滚轮选择器
大家好，由于最近从事的是微信公众号和APP内嵌 H5开发，避免不了开发一些和native相同的操作功能，就如接下来说的 仿IOS滚轮选择器。github源码链接 https://github.com/zhangKunUserGit/vue-component大家可以下载运行先来个截图：先来屡一下需求：1.移动端用户手上下滑动，内容上下移动，用户手离开数字按照...
2024-01-10基于vue2.0实现的级联选择器
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况：单个级联 (下拉选择框，单选)单个级联 (多项选择)二级联动 （省份和城市联动）三级联动 (省市区联动)在jquery中有很多好用的插件，比如select2, 单选，...
2024-01-10Vue编写多地区选择组件
看看效果图：效果图功能点:支持不限城市,不限地区(这个东西的实现..真心死磕了挺久) – 左右两边数据的同步地区一次性多选,若是选择了所有地区会自动转为不限地区数据迁移箭头的判断..选中数据才会有对应的按钮可以点击已选位置的数据同步响应调用的地方,当然也可以外部传入…(新增传出...
2024-01-10
vue中能穿透组件的css选择器
如果父组件style设置了scoped，除了全局样式与子组件内部修改样式以外不受外部样式的影响，但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢？这种情况可以使用带穿透功能的css选择器 >>>，如：<style scoped>.nav >>> .component{ color: #f1f1f1;}>>> .comp...
2024-01-10
团队vue基础镜像选择思考
前端镜像可以考虑使用nginx或者openresty;镜像大小说明nginx:1.20.2-alpine8.41 MB最小最新版本nginx:1.21.450.95 MB最新版本nginx:stable 1.20.252.27 MB稳定版本openresty/openresty:1.19.9.1-4-alpine33.14 MB最小最新版本openresty/openresty:1.19.9.1-4-alpine-fat109.68 MB最小最新功能最全版本vue工程分阶段打包脚本：...
2024-01-10vue实现城市列表选择功能
成果展示最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍准备工作： 引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考...
2024-01-10vue实现移动端省市区选择
本文实例为大家分享了vue实现移动端省市区选择的具体代码，供大家参考，具体内容如下效果：安装：npm install v-distpicker --save组件代码：<template><div><li > <div class="left"> <span>所在地区</span> </div> <div class="right r"> <div class="city" @click="toAddress">{{city}}</div> <i class="arrow-r"> </i> </div></l...
2024-01-10Flutter实现仿京东地址选择组件
Flutter实现仿京东地址选择组件,省市区三级级联选择器,数据为模拟数据,可根据真实接口数据改造,也可扩展成为省市区街道四级选择,下载地址:https://download.csdn.net/dow...效果图如下:主要实现代码如下:// 省TabView _provinceTabView() {return ListView.builder( itemBuilder: (BuildContext context, int index) { return InkWell( ...
2024-01-10
茶园地选择
茶叶产地的环境条件直接影响到茶叶质量。从发展无公害茶叶生产的要求出发，选择茶树产地的首要条件是周围不存在污染源，在确定茶叶生产基地前，一般要对产地的大气、水质和土壤的环境质量进行监测，监测结果要符合无公害茶叶生产环境标准，附近不能有工业“三废”排放，而且要远离交通主...
2024-01-10
vue--组件性别选择器和仿百度搜索栏
目录实现原理性别选择器实现代码使用方法：效果如下仿百度搜索栏实现代码使用方法效果图注意项实现原理主要参考vue官网上的自定义事件，父组件v-bind给子...
2024-01-10vue实现手机端省市区区域选择
本文实例为大家分享了vue实现手机端省市区区域选择的具体代码，供大家参考，具体内容如下1 后端接口获取城市信息2 先获取省 根据用户点击的省获取市3 再根据用户点击的市获取区 组件代码：<template> <div class="city"> <!-- 点击此处 省市区选择出现 --> <div class="chooseCity" @click="clickCity">{{chooseCity...
2024-01-10设置Vuetify选择器的样式
选择器的Vuetify组件是：<v-select:items="items"label="Standard"></v-select>但是，当选择器处于活动状态时，会出现许多嵌套组件（在检查时），例如，下拉菜单本身menu__content。我将如何设计样式？对于“可见”的Vuetify组件v-select，我可以手动添加一个类，然后直接在CSS中设置其样式。但是，我无法对隐藏的...
2024-01-10
vue 局部样式使用深度作用选择器没有用
样式没有起作用回答你要这样用 /deep/.father { /deep/ .child{ // xxxx }} .el-tooltip__popper 插入到了 body 下面了吧？你看是否支持 custom-class， 支持的话，就在全局加个 custom-class...
2024-01-10
Vue组件之高德地图地址选择功能的实例代码
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api一、效果图二、组件要实现的功能1. 如果有传入坐标点，则定位到坐标点2. 如果没有传入坐标点，则定位到当前所在位置3. 定位成功要在右侧显示经纬度和地址4. 可以通过拖动 标记 来调整定...
2024-01-10
vue+elementUI 时间范围选择器
1、引入组件<div> <el-date-picker type="date" placeholder="选择开始日期" :picker-options="pickerOptionsStart" v-model="startTime" @change="startTimeChang"></el-date-picker> <el-date-picker type="date" placeholder="选择结束日期" :picker-options="pickerOptionsOver" v-model=...
2024-01-10
antd vue 日期选择器怎么指定日期格式
此时day输出的是'2021-06-05T01:29:59.054Z' 怎么输出'2021-06-05' 第一次用查文档很久没找到，谢谢 <a-form-model-item label="客户生日"> <a-date-picker v-model="form.day" /> </a-form-model-item>回答：<a-date-picker v-model="form.day...
2024-03-06vue操作下拉选择器获取选择的数据的id方法
实际项目中我们获取选择的数据的id；这时候 需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性<template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</option> </select> <p>您选择的名字的Id是：{{select}}</p> </div><...
2024-01-10
