插件及UI框架开发问题解决
插件及UI框架开发问题解决
Juliet_xmj
我只是一个小前端
展开
-
uniapp + uviewui —— u-tabbar的使用
uniapp + uviewui —— u-tabbar的使用。原创 2023-04-18 11:08:17 · 1368 阅读 · 1 评论 -
uniapp + uviewui —— 表单正则校验
uniapp + uviewui —— 表单正则校验。原创 2023-04-18 09:35:54 · 1374 阅读 · 0 评论 -
echarts —— 显隐切换图表显示有误
解决echarts切换显隐显示问题原创 2022-12-02 10:18:26 · 980 阅读 · 0 评论 -
vue —— 火狐浏览器不支持时间格式
问题描述vue项目中出现路由跳转param传值,传的时间字符串,但是页面使用时this.$route.params取出时间字符串时,获得内容NAN,以为是火狐浏览器params传值不行,换成query传值也是不行的原因火狐浏览器时间字符串只支持yyyy/mm/dd格式,而我传的字符串是yyyy.mm.dd格式...原创 2021-12-14 14:22:51 · 1160 阅读 · 0 评论 -
vue —— 调用浏览器复制方法
vue —— 调用浏览器复制方法原生<el-button type="text" @click="copy(‘里面传想要复制的内容’)">复制</el-button>// 复制 info 为传入的内容 copy (info) { let createInput = document.createElement('input') createInput.value = info document.body.appendChild(createInpu原创 2021-10-25 14:48:46 · 579 阅读 · 0 评论 -
swiper——异形swiper中最后一个元素无法使用点击事件
swiper——异性swiper中最后一个元素无法使用点击事件1.原因swiper异性中使用了loop:true属性,循环,但是元素总共就那几个,swiper循环时会复制前后元素,但是只复制元素,不复制事件,导致最后一个元素渲染成功,但是无法使用事件表现在:点击左边这个圆圈其实是切换到了最后一个轮播元素,点击事件失效,但是向右点击到该轮播元素点击事件正常2.解决因为渲染的元素存在,可以将事件绑定在dom节点上,而我使用的方法是比较笨的一种,但是很有效果,点击事件要加在图中按钮中,内容比较隐私,没什原创 2021-09-16 11:55:20 · 1566 阅读 · 0 评论 -
swiper——vue页面配合显示隐藏渲染两个轮播插件
swiper——vue页面配合显示隐藏渲染两个轮播插件问题:显示隐藏项目中使用vue v-show控制轮播盒子不同渲染,但是会出现第一次点击,轮播插件显示出现错误,具体表现为轮播子元素只剩下一个,且为缩小状态,需要多次切换显示轮播才能正常显示解决: this.$nextick()1.注意两个轮播盒子要使用不同的父元素,swiper-container不能用做最外层盒子2.切换显示隐藏方法需要调用加载swiper方法3.使用this.$nextTick()方法防止swiper方法初始化出现问题原创 2021-09-13 17:03:41 · 735 阅读 · 0 评论 -
element——vue封装弹窗及注意事项
element——vue封装弹窗及注意事项可在每页写单独样式或在封装文件中写统一样式1. 弹窗脚部取消按钮可隐藏,2. 按钮可实现loading效果,3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义第一种方法弊端:弹窗插件点击确定会默认调取弹窗右上角关闭事件,所以有时候关闭方法中的内容会替换确定方法中的内容,导致确定方法中调取接口时数据错误1.1 封装<template> <div class="all-dialog2"> <el-dia原创 2021-09-08 10:41:02 · 1744 阅读 · 2 评论 -
PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证描述:照官网写的引入方式引入vue报错 AWSC is not define解决:.html文件引入script标签后<!-- 阿里滑块 --><script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>在使用滑块的页面中需要再引入一遍script,大概是在页面内容之前要先加载该功能的资源吧<script type原创 2021-03-26 15:06:25 · 1433 阅读 · 0 评论 -
swiper——轮播slider最后一个元素显示不全
轮播slider最后一个元素显示不全,能拖出来,松手弹回去slidesPerView: ‘auto’,重要的属性设置,有的人说要给slider元素设置宽高,或者去掉所有的padding,但是slidesPerView: 'auto’设置过后会使轮播元素长度呈现一行无限滑动效果,最终在轮播初始化中设置固定宽度width,这个宽度要自己调试的,可能不是铺满。const swiper = new Swiper('.swiper-container', { slidesPerView: 'aut原创 2021-02-20 16:36:54 · 2934 阅读 · 0 评论 -
element——表单的复杂数组渲染
element——表单的数组渲染及校验(vue)常见表单渲染及校验<template> <div class='test'> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="活动名称" prop='name'> <el-input v-model="form.name"></el-input> </e原创 2021-02-08 16:31:41 · 768 阅读 · 0 评论 -
element——时间选择器当天之后,后一选择器时间不超过前时间选择器
element——时间选择器当天之后,后一选择器时间不超过前时间选择器 <el-date-picker type="date" placeholder="请选择" v-model="startTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker> <el-date-picker type="date" placeholder="请选择"原创 2021-01-21 13:21:48 · 752 阅读 · 0 评论 -
elementui——带建议的输入框远程搜索
```javascript<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete><script> export default { data() { return { restaurants: [],.原创 2021-01-14 17:24:57 · 1101 阅读 · 0 评论 -
Vue+阿里矢量图
Vue+阿里矢量图一、注册账号(没有注册的)可以通过微博登录或者GitHub账号登录二、搜索想要的图标有时候搜到的图标很少,要重新点一遍全部(红色按钮)就可以了,点击添加购物车三、添加项目点击购物车查看添加图标,点击添加项目,如果没有,这个按钮右边会出现添加新项目,点就行了四、Vue中解压后的文件复制到VUE项目中的assets/icon文件夹(icon是自己创建的)main.js(要放在UI框架后面)打开浏览器中Vue组件中使用iconfont 必须要带,后面的一个原创 2020-08-14 16:28:25 · 363 阅读 · 0 评论