- 博客(15)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue 自定义消息通知组件
Vue 自定义消息通知组件阅读前阅读后话不多说上代码<template> <div class="myCollect pageBg"> <div class="deleteall" @click="readall"> <span>全部已读</span> <!-- <span class="icons icon-yuedu" />--> </div>
2020-05-27 08:50:48
2246
1
原创 VUE 给自定义的组件绑定点击事件
VUE 给自定义的组件绑定点击事件在做项目中我们往往会封装许多的组件，来减少代码的重复性，提高代码的可利用性，有时候也会给组件绑定事件，但是经常会失效。先给cardinfo这个组件绑定一个点击事件 <cardinfo :content="content" :from="from" :ProPortrait="ProPortrait" />一般都是这样给点击事件，可是有时候这个事件是没用的，因为这个事件是引用组件页面的事
2020-05-26 10:30:20
11526
原创 Vue 在标签中，按照条件添加样式
Vue 在标签中，按照条件添加样式使用``在里面进行判断,默认都拥有fonts的样式，如果read为true则显示isread的样式，如果为false则不显示 <div :class="`fonts ${read && 'isread'}`">123</div>
2020-05-21 14:08:20
4526
原创 Vue 按照创建时间和当前时间显示（刚刚，几小时前，几天前。。。）
Vue 按照创建时间和当前时间显示（刚刚，几小时前，几天前）在methods中创建方法showtime，传入要跟当前时间要对比的时间 showtime(time) { let date = typeof time === "number" ? new Date(time) : new Date((time || "").replace(/-/g, "/")); let diff = (new Date().getTim
2020-05-20 10:07:38
5007
1
原创 Vant 组件中event中事件的使用方法
Vant 组件中event中事件的使用方法拿Vant组件中的NoticeBar 通知栏组件来说它有三个Event事件方法我使用其中的close事件，点击关闭图标时，出现弹框 <van-notice-bar wrapable :scrollable="false" @close="clickmessage" left-icon="volume-o" mode="closeable" >
2020-05-19 10:01:53
10679
原创 VUE 自定义组件，调用组件
VUE 自定义组件，调用组件在做项目的过程中我们会遇到很多重复性的功能或者页面布局，我们可以把这些可以进行多次使用的代码进行封装，变成组件。这是一个头部卡片组件在制作页面时经常会用到类似这种的卡片头部样式，可能参数不同，但是排布，样式是一样的<template> <div class="title"> <div class="heda"> <img v-if="userPortrait" class="
2020-05-18 10:16:12
1683
原创 CSS 适应页面宽度（防止页面宽度溢出或左右扩张）
CSS 适应页面宽度在制作页面时我们会遇到页面宽度溢出或者向左右扩张的问题，其中一个愿意是宽度没有设置，还有一种原因是用了padding导致页面宽度发生变化，在不同的分辨率中显示的样式可能是不一样的。在这里给大家推荐一个CSS的样式calc。按照你所需的宽度，减去你左右扩张的宽度。这个样式可以防止你的宽度溢出，让页面按照这个宽度自适应。 width: calc(100% - 40px); padding: 0 20px；...
2020-05-16 13:43:38
3408
原创 CSS 标签左右分布的多种方法
CSS 标签左右发布的多种方法第一种用flex布局（推荐）第二种浮动（不推荐）第三种position定位（不推荐）总结第一种用flex布局（推荐）改变justify-content样式属性有不同的发布，有兴趣的可以试试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title><style>.flexs{ display:
2020-05-13 15:52:05
4805
原创 ES6 扩展运算符练习Demo——鼠标触碰每个字符显示动画
ES6 扩展运算符练习Demo鼠标触碰每个字符显示动画代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title><style> .completed{ color: blue; } .completed span{ cursor: pointer; display: inline-block;
2020-05-12 08:47:16
275
1
原创 Vue Vant Uploader文件上传组件
Vue Vant Uploader文件上传组件 <div> <van-uploader v-model="fileList" multiple :max-count="1" :after-read="beforeRead"> <div class="imgsrc"> <span class="icons icon-zhaoxiangji" /> </div&
2020-05-09 15:09:25
3941
原创 Vue v-for遍历数组方式
Vue v-for遍历数组方式方法一适用于数组中只有值而没有对象的遍历<div class="view-member"> <span v-for="(name, index) in info" :key="index"> {{ name}} </span></div>info:["张三","李四"]方法二适用于数组中有多个对象的遍历<div v-for="item in listData" :key="item.
2020-05-09 14:04:14
3289
原创 Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择
Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择<template> <div> <div class="from_item"> <van-cell title="出生年月" input-align="right" :value="...
2020-05-08 14:34:03
1079
2
原创 Vant Vue用Popup自定义选择联系人功能
Vant 用Popup自定义选择联系人功能<template> <div> <van-cell @click="showPopup"> <div class="serachuser" v-if="iscell"> <van-button icon="add" class="add" ...
2020-05-08 13:12:08
1159
原创 Vant van-button去除边框，自定义样式，改变组件自带的样式属性
van-button去除边框，自定义样式基本语法<van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><va...
2020-05-06 16:13:39
22062
原创 第五章 ES6扩展运算符
ES6扩展运算符扩展运算符简介扩展运算符练习扩展运算符在函数中的使用对象字面量的扩展扩展运算符简介const youngers=['jack','mike','jorry']; const olders=['Marry','bob','john','limi']; const munber=[...youngers,...olders,'123']; const current=mun...
2020-05-01 16:21:45
194
vue3+vite 实现cesium绘制图形
2024-08-26
微前端qiankun在子应用中引入百度地图时无法显示，如何解决？
2022-06-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人