- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue 封装自己的步骤条
注意 ：1. props 传入的值不能直接改变，用computed监听2. scss @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。*Scss 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。 *3.$作为变量的标志4.& 父选择器标识符...
2024-09-12 22:15:56
133
原创 防抖节流总结
// 防抖 防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout// 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖// 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖// 文本编辑器实时保存，当无任何更改操作一秒后进行保存export function debounce(fn, duration = 100) { let timer = null return
2022-04-23 16:29:29
308
原创 VueDraggableNext实现简单表格拖拽
下载依赖npm install vue-draggable-next//oryarn add vue-draggable-next引入import { VueDraggableNext } from 'vue-draggable-next'components: { draggable: VueDraggableNext,},使用 <div class="app-container"> <table class="tableD...
2022-02-17 21:14:34
2787
2
原创 vue动态改变video视频source标签的src 的坑
source标签src属性赋值成功，但浏览器去获得相应的视频。动态插入source标签，触发浏览器进行重排v-html 指令 可以输出HTML<div v-html="idVideoShowUrl"></div>watch:{ idVideoShowUrl(n){//监听变化idVideoShowUrl动态插入标签 return n }}//返回要插入的标签 方法appendVideo(video_url){ let sHtml if(video_url
2021-07-02 15:58:55
4763
4
原创 vue 插槽
父组件 <slotTemp> <template v-slot:topSlot>topSlot</template> <template v-slot:leftSlot="slotLeftFather"><div>{{slotLeftFather.slotChild.userName}}</div></template> <template v-slot:rightSlot=
2021-06-13 21:45:53
120
2
原创 vue+element 表单验证
<div class="formValidator"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" > <el-form-item label="用户名" prop="userName"> <el-input v-model="ruleForm.userName...
2021-06-13 16:45:09
184
原创 vue父子组件传参
父组件<div class="home"> <child :faterToChild="faterToChildData" @childToFather="getChildData" /> {{childToFatherData}} </div>import child from '../components/child.vue'components:{child}, data(){ return{ faterToChi
2021-01-17 13:31:46
105
原创 vue+js 实现tab选项卡
布局 <div class="tabsWrap"> <div v-for="(item,index) in tabs" :key="index" :class="cur == index?'groupsBox':'shopsBox'" @click="changeTabs(index)">{{item.name}}</div> </div> <div class="showBox" v-show="cur==0">
2021-01-16 21:41:03
171
原创 vue + element插件Popover弹出框
方法一 使用自定义指令v-popover指向 Popover 的索引ref<el-popover ref="popover1" width="200" trigger="click" placement="top" content="这是一段内容1"> </el-popover> <el-button v-popover:popover1>click 激活1</el-button>
2021-01-13 22:11:17
4176
原创 前端Vue+Element使用xlsx上传excel格式文件
1.安装插件 npm install xlsximport xlsx from 'xlsx'//:action:'' :auto-upload="false" 不传给后端 accept=".xlsx"限制格式 //:on-change="onChange"文件状态改变时触发事件<el-upload :action="" accept=".xlsx" :on-change="onChange" :auto-upload="false"></el-upload>me
2021-01-05 13:15:33
1756
原创 textarea显示字数
页面布局 <view class="textareaBox"> <textarea class="textarea" maxlength="100" bindinput="bindinputTextArea" placeholder="请输入需要分析的话" /> <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> .
2020-12-11 11:27:55
1926
原创 实现聊天页面
页面布局<!-- 主页面 --><view class="page-deLovely"> <scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="dialogWrap" style='height: {{scrollHeight}}'> <view wx:for="{{msgList}}" wx:key="unique" class=".
2020-12-02 16:35:53
404
原创 小程序实现单选效果
实现点击小圆出现边框以及小勾布局 <view class="subtitleColor"> <view class="item" wx:for='{{FontColorArr}}' data-index="{{item.index}}" bindtap="setFontColor" wx:key='index'> <view class="box {{currentFontTab==item.index?'boxBorder':''}}" style
2020-11-24 12:25:18
294
原创 githup上部署静态页面
步骤一New repository步骤二创建创库步骤三 设置静态页面显示点击Settings 选好后点Save 出现地址https://lingyuelianxin.github.io/StaticPages.githup.io/.
2020-11-19 13:54:31
175
原创 css实现超出显示省略号
css实现…省略样式单行<view class="text2">瓜兮兮邀请你一起玩游戏，请在<text>5</text>分钟内确认//css部分.text2{ width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }css实现…省略样式多行 // 多行超出省略 wi
2020-10-28 14:10:27
118
原创 vscode里less转化.wxss
文件===》首选项 ===》设置在setting.json里添加{ "less.compile": { "outExt": ".wxss" },}
2020-10-25 11:09:30
194
原创 vue引入css 与js
引入css<style lang="less" scoped> @import '../style/index.css';//引入css样式</style>引入js 、方法（export ）//js文件function test() { console.log("方法一")}export { test}//vue文件<button @click="test1">click</button><script>
2020-10-11 11:16:17
187
原创 css图片文字对齐
图片文字对齐 <view class="fail"> <image class="img" style="width: 22rpx; height: 22rpx;margin-right:9rpx;" src="../../images/exclamation-point.png" /> <text class="font">{{item.yuanyin}}
2020-10-10 13:56:59
263
原创 input去默认样式及placeholder居中
<input class="input" placeholder="请输入内容" v-model="input">css部分.input{ width: 160px; height: 32px; border-radius: 25px; border: none;//去掉默认样式 background-color: #f0f0f0; outline:none;//去掉默认样式 padding: 0 10px;}// 提示文字居中.input::-webki
2020-10-10 13:54:53
794
原创 vue父子组件数据、方法
父组件<template> <div> <navigationBar :listdata="list" :toIndex="Index"></navigationBar> </div></template>父组件要传递的 data() { return { list: [ { name: "导航一", url: "/login" }, { name: "
2020-09-24 17:58:46
212
原创 小程序wx:if 隐藏显示时频幕闪烁问题
小程序wx:if 隐藏显示时频幕闪烁问题根据后台返回的值判断该显示哪部分该隐藏哪部分页面结构<view wx:if="{{isInit}}"> //返回数组有值显示 <view wx:if="{{array.length>0}}" class="page-myOrder-wrap"> </view> //没有数据显示 <view wx:else class="default"> </view></view&
2020-09-23 14:20:40
1504
原创 水平、垂直居中
水平垂直居中HTML <div class="box"> <div class="item"></div> </div>方法一 .box { width: 500px; height: 500px; background-color: #eee; /* 方案一 结合 justify-c
2020-09-17 17:16:51
224
原创 小程序利用setData改变数组对象
小程序setData /** * 页面的初始数据 */ data: { QrcodeImage:'', array: [], }//改变页面数据QrcodeImagethis.setData({ QrcodeImage:res.resultData, })//给页面数据array赋值，页面数据与请求得到的数据key不一样//请求得到的数据let data = [ { orderCod
2020-09-11 17:15:27
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人