- 博客(24)
- 收藏
- 关注
RSS订阅原创 web移动端常见的适配方案
单个静态页面布局，需要手动将px单位换成rem单位，有些不需要动态缩放的元素依旧使用px.2.2 vue3中使用postcss-px-to-viewport 适配屏幕。px-to-viewport-ignore */ —> 当前行不进行转换。通过css的@media媒体查询设置不同的样式，实现不同屏幕的适配。2.1 安装插件postcss-px-to-viewport。1，安装viewport-units-buggyfill。3，在css中使用，手动添加content代码。css样式表中的媒体查询。
2023-02-24 16:25:20
1644
原创 css网格布局案例
1，使用grid-template-areas指定网格区域划分。左边一个大模块，右边两个小模块垂直排列。2，单个项目设置区间范围属性。
2023-02-22 18:24:58
157
原创 text-stroke，text-fill-color等文字属性应用案例
实现简单的一键换肤效果，让所有颜色都继承祖先元素的color色值，在想要换肤的时候，只要容器元素改变color属性值就可以了。
2023-02-22 17:46:30
281
原创 vue过滤器的使用
1，双括号插值{{message | init}}2，v-bind绑定：<div v-bind:id="rawId | formatId"></div>多个函数全局定义过滤器：1，一个js文件写入多个函数2，全局定义：main.js文件：引入：import * as filters from './filters'全局定义过滤器：Object.k...
2019-07-30 14:18:04
158
原创 发送短信验证码组件
用vue+vant实现一个发送短信验证码组件<template> <van-button type="primary" :disabled="disabled" @click.stop="startCountDown">{{message || initTip}}</van-button></template><script>...
2019-07-28 19:16:02
544
原创 vue项目中实现剪切板的功能
1，使用vue-clipboard2第一步：安装npm install vue-clipboard2 --save第二步引用：在需要使用剪切板功能的组件中引用import VueClipboard from "vue-clipboard2";Vue.use(VueClipboard);import { Toast } from 'vant';第三步实现：<van-field...
2019-07-25 16:45:19
565
转载 es6解构和扩展运算符
一、数组解构1，数组解构赋值var arr = [1,2,3]var [a,b,c] = arr2,嵌套数组结构赋值var arr = [ [a,b,[c,d]],e,f ],var [[d, e, [f, g]], h, i] = arr;3,函数传参解构var arr = ['this is a string', 2, 3];function fn1([a, b, c]...
2019-07-21 14:54:04
158
原创 vue 父组件和子组件传值/传递事件/调用事件
父子组件关系总结：prop向下传递，事件向上传递。父组件通过prop向子组件下发数据，子组件通过事件向父组件发送信息。每个vue实例都实现了事件接口：通过on(eventName)监听事件。使用on(eventName)监听事件。使用on(eventName)监听事件。使用emit(eventName,optionalPayload)触发事件。父组件可以在使用子组件的地方直接用v-on来监听子组...
2019-07-21 13:34:33
993
转载 MVVM
MVVM：模型-视图-视图模型的简称，模型指后端传过来的数据，视图指所看到的页面。视图模型是连接view和model的桥梁。1，将模型转换为视图。后端传过来的数据转换为所看到的页面，实现数据渲染。实现方式：数据绑定。2，是将视图转换为模型。将所看到的页面转换为后端数据。实现方式：DOM事件监听。这两个方向都实现称为数据的双向绑定。总结：视图和模型不能直接通信。它们通过ViewModel来通信，V...
2019-07-20 17:53:29
176
原创 vue$route和$router的区别
1,router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象。包含所有的路由，对象和属性。2，route是一个跳转的路由对象，每个路由都有一个路由对象。是一个局部对象。可以获取路由的params,path,name等属性。...
2019-07-20 12:13:10
154
原创 vue v-on绑定多个方法
1，v-on绑定多个方法：<p v-on="{click:dbClick,mousemove:MouseClick}"></p>一个事件绑定多个函数：<p @click="one(),two()">点击</p>
2019-07-18 16:22:33
11674
原创 css3笔记
div{ /*水平阴影位置允许负数 垂直阴影位置允许负数 模糊距离 阴影尺寸 阴影颜色 外部阴影inset 内部阴影inset*/ /*box-shadow: h-shadow v-shadow blur spread color inset;*/ } /*-webkit-background-origin: ;*/ /*规定背景图像的定位区域 背景图片可以放置于 c...
2019-07-17 11:01:52
153
原创 一些不常用的css总结
p{ /*文本缩进*/ text-indent: 5px; /*改变字间隔*/ word-spacing:5px; /*字母间隔*/ letter-spacing: 5px; /*字符转换 对首字母大写*/ text-transform: capitalize; /*转换为小写*/ /*text-transform: lowercas...
2019-07-17 09:59:22
159
转载 创建新的项目并上传到gitlab远端仓库
1.确认项目中隐藏文件夹.git文件删除2.进行命令 git init 这个目录变成git可以管理的仓库3.进行命令 git add . 把所有文件添加到暂存区里面去4.进行命令 git commit -m “init” ，把文件提交到仓库。引号内为提交说明。5.进行命令 git remote add origin git@gitlab.xxxx.com:Dev/xxx.git 为远...
2019-06-26 12:48:46
874
转载 vue中的事件修饰符运用
事件修饰符运用Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-o...
2019-06-20 17:20:17
163
转载 vue中watch监听属性详解
使用方法：watch:{ data(val, newval) { console.log(val) console.log(newval) }}（2）通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听）watch: { docData: { handler(n...
2019-06-20 09:48:28
285
转载 vue2.0路由跳转传参数
router-link<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', ...
2019-04-04 17:21:59
221
原创 前端网站实现图片放大功能
1,npm install v-viewer --save2,在main.js 中注册引用import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer);Viewer.setDefaults({ Options: { "inline": true, "b...
2019-02-27 16:36:00
2523
原创 时间转换器
//时间转换 getTime(time,sep){ var result = ""; if(time) { var d = new Date(); d.setTime(time); var ...
2019-02-27 16:30:12
348
转载 VUE+Element UI实现简单的表格行内编辑效果
VUE+Element UI实现简单的表格行内编辑效果原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示<el-table class="tb-edit" style="width: 100%" ...
2019-02-27 16:23:10
1212
转载 学习Markdown编辑器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-02-27 16:08:18
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人