- 博客(23)
- 收藏
- 关注
RSS订阅原创 vue ElementUI中修改el-input__inner样式不同版本修改样式不生效
最近遇到一个比较少见的bug el-input样式修改之后 在个别浏览器和电脑上显示效果不同，仔细看控制台发现 标签结构不同。为了兼容两种格式的标签 样式修改成功，代码上做一些调整。相同的样式，不同的类名，兼容两种情况。
2023-04-03 16:54:35
1331
原创 uniapp使用字体包，更换个性化字体
1、将字体的包体存入在static文件夹下2、在app.js中引入@font-face { font-family: my-font; src: url('~@/static/Times New Roman.ttf');}3、最后在页面中正常使用就行了.content { overflow: hidden; position: relative; background: url(../../static/bg.png); background-size: 1
2021-11-25 17:44:48
3034
原创 uniapp中使用svga格式图片
npm安装npm install svgaplayerweb --save下载svga.min.js文件：https://github.com/svga/SVGAPlayer-Web存放于文件夹中，在使用的页面引入import SVGA from '../../data/svga.min.js';在页面需要的地方写入逻辑onReady(){ //svga的播放情况 const player = new SVGA.Player('#svgaBox'); var
2021-11-25 17:28:03
4230
9
原创 vue 随机生成uuid
1、安装npm install uuid2、在需要使用的页面引入入口文件import { uuid } from 'vue-uuid'; 3、最后就是使用了localStorage.setItem('uuid',uuid.v1()) 直接取uuid.v1 就OK了
2021-08-23 17:42:03
3233
原创 vue 项目打npm run build 压缩文件损坏第三方SDK解决方案
1、首先将main.js或者引入三方链接的入口注释掉// import AgoraRTC from "agora-rtc-sdk-ng"// Vue.prototype.AgoraRTC = AgoraRTC;此处已经注释掉引入三方的入口2、在vue的index.html文件，引入第三方的网络地址<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta.
2021-08-23 17:30:51
335
原创 uniapp vue-i18n国际化语言随机切换
uniapp vue-i18n国际化语言随机切换npm安装npm install vue-i18n --save在main.js中引入import Vue from 'vue';import App from './App';import VueI18n from 'vue-i18n' import messages from './commom/lang.js'Vue.use(VueI18n) Vue.config.productionTip = false;const i1
2021-05-06 17:21:57
523
原创 js 跳转外部页面的方式
js 跳转外部页面的方式普通跳转不需要携带参数的跳转window.location='http://supermatchusa.com/activity/turntable/#/pages/index/rule'window.location.href="bloomer://recharge/coins"以上两种情况是指普通跳转外部链接且不需要携带参数的情况下边这一种是携带参数的跳转方式var url= encodeURIComponent("{\"name\":\"Turntable\"
2021-05-06 16:43:14
618
原创 jq dom操作中新增class 移除class 移除某个元素的方法
为某个元素新增一个class$('#egg').addClass("eggsImg");移除某个不用的class$('#egg').removeClass("egg");新增元素$('body').prepend(str);移除元素$('.bg-mask').remove();
2021-04-02 15:18:03
918
原创 js路由跳转以及获取路由参数
原生js路由跳转方式：后边跟上要跳转的地址就可以了window.location.href="bloomer://recharge/coins"页面跳转过来之后，获取参数var sum = getQueryVariable("deviceId"); function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&
2021-04-02 11:00:33
1215
原创 js 设立一个简单定时器
设立一个简单的定时器setTimeout(function(){ console.log("哈哈哈") },1000);每个2分钟调用一次接口setInterval(alertLogin(),1200000)setTimeout 和 setInterval的区别就是前者执行一次 后者定时执行一次
2021-04-02 10:47:43
374
原创 jq 后台数据赋值到页面
现在使用习惯了vue的双向绑定之后 对原生赋值有一点生疏 每次遇到都回去查 索性写下来 让自己记住这里是html代码<div class="prizeExhibition"></div>这里便是从后台获取的数据之后的赋值处理data.data.giftInfo.forEach(item=>{ var str= '' str += '<div class="prizeBox">' str += '<img src="'+item
2021-04-02 10:37:57
469
原创 css 背景透明，文字不透明写法
css 背景透明 文字不透明的方法html代码如下：<div class="prizeNum"> <p class="prizeNameTitle">name</p></div>css 代码如下：.prizeNum{ color: #fff; font-size: 12px; background-color: rgba(0,0,0,0.5); width: 67%; height: 45px; border-radius.
2021-04-01 17:37:06
263
原创 web端和移动端样式自适应（媒体查询响应式布局）
web端和移动端样式自适应（媒体查询响应式布局）在遇到需要适应多端情况是，可以选择使用媒体查询响应式布局，简单好用首先适应最小机型，例如你要在最小机型的某一个div加上边框 那么如下写法 再把机型切换小 就可以看到效果了@media screen and (max-width:360px){ .rule{ border: 1px solid #FF5A5A; }}这里是适应比如ipad这种宽度机型的，同上也是切换机型就可以看到效果@media screen and (max-
2021-04-01 17:15:24
1047
原创 父子组件之间相互传参
vue 父子组件之间的相互传参首先创建子组件的文件夹在父组件的components中引入子组件的文件夹 components: { Chat: () => import('@/components/Chat.vue'), },在父组件中使用组件 <Chat ref="zy_chat" @sendMsg="sendMsg" :chatInfoEn="chatInfoEn"></Chat> //通过v-bind后绑定的这个值 传递参数但是注意是要
2020-12-22 11:22:55
359
原创 uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图点击右上角的购物车添加到项目这里有坑 首先你不选中在线链接 你是看不到@font-face { font-family: 'iconfont'; /* project id 1987983 */ src: url('//at.alicdn.com/t/font_1987983_jodk4yx0hq.eot'); src: url('//at.alicdn.com/t/font_198
2020-08-06 13:45:47
5435
1
原创 vue 回到顶部
html代码 这里样式就忽略吧 只是一个简单的上箭头图标这里记得绑定点击事件 <div @click="backTop"> <i class="iconfont icon-shangjiantou"></i> <p>顶部</p> </div>在methods中写上回到顶部的方法 // 点击图片回到顶部方法，加计时器是为了过渡顺滑 backTop () {
2020-07-03 14:25:00
393
原创 vue 时间戳转日期格式的过滤器
在main.js中手写一个简单的过滤器 挂载在vue 实例上// 将时间戳转日期格式的过滤器Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr); function timeAdd0(str) { if (str < 10) { str = '0' + str; } return str } var y
2020-07-03 14:19:15
586
原创 js 点击切换显示隐藏状态
html代码首先创建需要点击的 div 这里我用的是 li 标签<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/dz_center.css"> </head&
2020-07-03 10:57:09
1029
原创 uniapp 仿微信的右边下拉选择弹出框
在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单这里首先用一个单独的页面存放这个组件<template>//这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arrivalSearchInpu
2020-07-02 11:59:56
5172
2
原创 uniapp 请求微信登录授权 判断是否授权 授权成功并登录
首先在button 上加上open-type=“getUserInfo” 来调用模拟授权框<view > <button class="loginWeChatBtn" open-type="getUserInfo" @getuserinfo="wechatLogin">微信一键登录</button></view>在methods方法中获取用户名 获取性别 获取头像 获取js_code去换取后台返回的openID wechatLogin(){
2020-07-02 11:16:39
11155
1
原创 vue uniapp 动态设置页面背景图
在uniapp中的背景图需要动态变换 一般结合后台返回数据渲染很简单 但是每次都记不住 自己写写加深印象这里是简单的html 代码<view class="loginBg" :style="{backgroundImage: 'url(' + imageURL + ')', 'background-repeat':'no-repeat', backgroundSize:'100% 100%'}"> </view>这里需要在data中定义一下expo
2020-07-02 10:51:54
8502
原创 uniapp 封装网络请求 公用组件
首先在项目的根目录创建一个util.js文件，在js文件中写入当前封装请求的方法let apiReq={ req(obj){ var method = obj.method ; // 请求方式,默认为GET var url = 'http://192.168.0.122:8080'+obj.url; // 请求路径 var data = obj.data||undefined; // 请求数据 var header = obj.header; // 请求头 var success
2020-07-02 10:34:26
1214
原创 css手绘三角形
.a{width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent #0099CC transparent transparent;transform: rotate(90deg); /顺时针旋转90°/}
2020-07-02 10:17:47
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人