自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(227)
  • 收藏
  • 关注

原创 使用Swiper制作3d旋转木马轮播图

<style> * { padding: 0; margin: 0; } .swiper-container { width: 800px; height: 400px; border: 1px solid #...

2019-09-20 11:11:02 913

原创 uni-app海报(合成图片)demo

<template> <view class='page'> <input type="text" value="" class="input" v-model="text" placeholder="请输入需要添加的文字" maxlength="5" /> <button type="primary" @click='copyFn'>生...

2019-07-25 17:21:37 4725

原创 uni-app(图片裁剪插件)

<template> <view class="page page-fill"> <view class="page-body uni-content-info"> <view class='cropper-content'> <view v-if="isShowI...

2019-07-16 13:40:53 2303

原创 uni-app(跨端兼容)

#ifdef XXX 表示仅在某平台存在#endif 都要以 #endif 结尾 #ifndef xxx 表示除了某平台其他的均存在#endif 都要以 #endif 结尾

2019-07-03 10:58:43 1550

原创 微信分享

export const defaultWxshare = (shareImg,shareDesc,shareTitle) => { let LocUrl = encodeURIComponent(location.href.split("#")[0]); LocUrl = LocUrl.replace(/\&/g, "%26"); axios .get(`ht...

2019-06-28 14:58:39 93

原创 弹性布局(flex)总结

父元素身上的属性1:flex-direction --控制子元素的排列方式flex-direction: row | row-reverse | column | column-reverse;/* row(从左到右) --默认 row-reverse(从右到左) column(从上到下) column-reverse(从下到上)*/2:flex-wrap --控制...

2019-06-27 15:36:55 193

转载 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/";以上代码利用了正则表达式和三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.bai...

2019-06-19 10:04:11 304

原创 数字滚动效果(number-flip)

<script src='./number-flip.min.js'></script><div id="demo"></div><script> var demo = new Flip({ node: document.getElementById("demo"), from: 0, //开...

2019-06-18 18:19:14 806

原创 异步适应屏幕宽度的正方形图片防抖设置

当一个正方形的图片,要适配各种手机的宽的的时候,由于是异步获取的图片,所以会存在抖动问题。css设置.image-header { position: relative; width: 100%; height: 0; padding-top: 100%; img { position: absolute;...

2019-06-06 16:17:12 62

原创 vue-跟随屏幕位置改变的半场动画

定义小球(如果当前页面有其他的动画效果的定义,不要用默认的v-enter...,要重新定义name,用name-enter,用此方式覆盖污染)<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <span class="smball" v-show="bal...

2019-05-30 17:37:12 249

原创 细线表格

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;"> <tr> <td>1.1</td> <td>1.2</td> &lt...

2019-05-24 10:21:30 78

转载 js点击按钮唤醒app

<a onclick="openApp()">点击唤醒app</a> var download_schema = 'taobao://'; //app的协议有安卓同事提供,这里是用的淘宝var universal_link = 'ios下载地址';//ios下载地址var getVersionUrl = 'Android下载地址';//Android移动端下载地...

2019-05-22 17:24:03 1723

原创 scss-mixin的基本(手机1px边框适配)

$border-poses:top,right,bottom,left;$color:#333;@mixin border-1px($color, $pos) { position: relative; &::after { content: ''; display: block; position: absolute; width: ...

2019-05-20 15:59:14 441

原创 scss/sass在vue的使用

在vue的css样式中,使用@import和@include可以导入和使用外部的scss/sass就是在.talk这个类中使用外层scss中定义好的mixin方法;scss的全局使用如果想要全局定义使用某个scss文件时,除了scss的2个依赖(sass-loader和node-sass)外,还需要现在(sass-resources-loader)这个依赖npmsass-r...

2019-05-20 14:09:33 143

原创 兼容ios和安卓的复制插件(clipboard.js)

首先js的引入<script src='./clipboard.min.js'></script>2个元素的复制呼应<div class='copydiv'> <p>链接:<span id='urlSpan'>http://www.10pinping.com/vote...</span></p&...

2019-05-16 17:42:51 659

原创 sticky footer布局

到页面内容铺不满页面时候,下方div始终定在下面;当页面内容多余一屏的时候,下方的div会被顶到下面去 <div id="main"> <div class="main_top clearfix"> <div class="main_top_content"> 发烧友和飞机开...

2019-05-16 10:59:20 97

原创 怎么在手机端是实现1px的边框

单边像素边.scale-1px { position: relative; border: none; } .scale-1px:after { content: ""; position: absolute; bottom: 0; /*这边的top、bottom、left、right是用来定义那个边的*/ background: #000; w...

2019-05-15 11:26:56 155

原创 vue-router路由

路由的按需加载{ path: '/home', name:'home', component: resolve => require(['@/components/home'], resolve),},添加name后,可以在路由出使用name跳转<router-link :to="{name:'home' , query:{id:'999'}}">&lt...

2019-04-24 10:38:58 53

原创 vue总结

1.vue的初始化let vm = new Vue({ el: '#app', //指定操作的dom data: { //定义属性 msg: 1231, msg2: '' }, methods: { //定义方法 show() { ...

2019-04-23 19:06:34 121

原创 vuex

vuex是用来保存组件之间的共享数据,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过props和emit来进行传值安装 npm i vuex -s在main.js引入并使用import vuex from 'vuex'vue.use(vuex);创建const store =new Vuex.Store( { state : { ...

2019-04-19 14:11:17 75

原创 编程式导航(网页的跳转)

js中使用 window.location.href="xxxx"来进行跳转在vue中,使用this. $router.push(''xxxx'')来进行跳转注意:this.$route.query....是用来获取url的信息,this.$router.push...是来跳转网页的...

2019-04-16 18:41:11 283

原创 图片缩略图插件(vue-preview)

npm i vue-preview -simport VuePreview from 'vue-preview'Vue.use(VuePreview)<div class="imgContent"> <vue-preview :slides="imgArr" @close="handleClose"></vue-preview>&lt...

2019-04-16 15:47:59 679

原创 vue时间过滤器(moment)

安装npm i moment -s引入import moment from 'moment';配置Vue.filter('dateFormat',function (dataStr,pattern='YYYY-MM-DD HH:mm:ss') { return moment(dataStr).format(pattern)})使用<span&gt...

2019-04-12 15:36:12 97

原创 axios的使用

安装npm i axios vue-axios -s引用import axios from 'axios'import vueAxios from 'vue-axios'Vue.use(vueAxios,axios)配置axios.defaults.baseURL = 'https://api.example.com'; //前缀名axios.defaults.h...

2019-04-12 15:31:02 299

原创 vue-cli中使用swiper

npm i vue-awesome-swiper -s在main.js中import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper);在所需要的页面中import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } fr...

2019-04-09 18:29:48 268

原创 纯c3实现动态省略号

<style> .loading { font-family: simsun; } :root .loading { display: inline-block; width: 1.5em; vertical-align: bottom; overflow: hidden; } @-...

2019-04-04 10:26:24 173

原创 mint-ui使用

npm i mint-ui -s1、全局导入使用--main.js中import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)然后就可以直接使用css的封装组件了,如果要使用js的组件的话,需要按需加载需要的组件,官方文档都有2、按需加载导入使用npm install b...

2019-04-03 16:24:47 320

原创 webpack+vue路由的配置与分离

因为要使用路由,所以先下载npm i vue-router -s然后在main.js中导入与使用它import VueRouter from 'vue-router'Vue.use(VueRouter);路由的分离,是新建一个js文件(router.js)然后在里面进行配置import VueRouter from 'vue-router' 配置路由要先引入路由imp...

2019-04-03 10:00:33 238

原创 导入和暴露用法

node中的导入为var 名称=require('模块的标识符')、暴露为module.exports和exportses6 中的导入为import、暴露为export default和exportexport default { name:'zs', age:55}export var ex1 = {name:'ex1',age:99}export var ex2 = {...

2019-04-02 17:58:28 181

原创 vue中的script/css配置

在.vue文件中,有3部分:在css中scoped表示作用域,加上表示只作用于此组件上; 如果想用less、scss等来编写,可以加 lang="scss" ...

2019-04-02 17:47:43 363

原创 webpack中vue组件的识别与应用

webpack打包无法处理.vue后缀的文件,所以需要先下载npm i vue-loader vue-template-compiler -d如果然后安装的vue-loader是15.x.x以上的需要配置webpack.config.jsconst VueloaderPlugin=require('vue-loader/lib/plugin')new VueloaderPlu...

2019-04-02 16:47:00 173

原创 webpack导入vue

在项目中安装vue并使用npm i vue -s然后在main.jsimport Vue from 'vue';var vm=new Vue({ el:'#app', data: { msg:123, }})打包后发现会报错,因为vue在webpack中使用的是vue.common.js然不是完整的vue.js,所以如果想要使用实例化这种的vue方法需要...

2019-04-02 15:04:15 203

原创 webpack的js转化工具babel配置

在js中写一些高级的es6的语法,进行打包处理会报错,因为会不识别,所以需要安装转化工具-babel//安装babel的转化工具,这里的babel-loader要安装版本7,高版本8,则需要更改其他的安装项npm i babel-core babel-loader@7 babel-plugin-transform-runtime -d//安装语法字典npm i babel-preset...

2019-04-02 11:28:43 135

原创 webpack打包处理字体文件

//如果在node_modules中找包的话,可以直接这样写import 'bootstrap/dist/css/bootstrap.css'然后在webpack.config.js中进行配置{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}...

2019-04-01 17:31:39 1865

原创 webpack打包处理img

一般情况下,webpack无法处理css中的url地址(背景图片、字体等),所以需要使用插件来进行处理npm i url-loader -dnpm i file-loader -d //基于url-loader的依赖然后在webpack.config.js进行配置修改 {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?...

2019-04-01 11:31:38 436

原创 webpack打包处理less/scss文件

less配置:npm i less -dnpm i less-loader -dsass/scs配置:npm i node-sass -dnpm i sass-loader -d然后修改webpack.config.js的配置文件:{test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}...

2019-03-29 18:45:55 753

原创 webpack打包css文件(loader)

因为webpack默认只能打包处理js类型的文件,如果需要处理非js类的文件,我们需要手动安装一些合适的第三方 loader 加载器1.下载所需要的依赖npm i style-loader -d //先安装两个依赖npm i css-loader -d2.修改webpack.config.js的配置文件{test: /\.css$/, use: ['style-lo...

2019-03-29 17:49:55 89

原创 html-webpack-plugin插件的使用和配置

特点:1.自动在内存中根据所配置的指定页面生成一个内存的页面;2.自动把打包好的js文件追加到页面当中。npm i html-webpack-plugin -d //在项目中来进行安装然后在在webpack.config.js中进行配置new htmlWebpackPlugin({ template: path.join(__dirname,'./src/...

2019-03-29 15:57:00 254

原创 webpack-dev-server的指令与配置项

1、修改项目中的package.json来实现自动打开网页,修改端口等操作"dev" : "webnpack-dev-server --open" //npm run dev后自动打开网页"dev" : "webnpack-dev-server --open --port 3000" //npm run dev后自动打开网页并且端口为3000"dev": "webpack-dev-s...

2019-03-29 14:36:27 302

原创 webpack修改代码后自动打包(webpack-dev-server)

需要安装 webpack-dev-servernpm i webpack-dev-server -d //安装到本地依赖(只需要装到本地项目中,不需要-g)因为webpack-dev-server是依赖于本地的webpack和webpack-cli的,所以,如果本地中没有安装。则需要先安装,才能使用npm i webpack -dnpm i webpack-cli -d如果不...

2019-03-29 12:07:35 742

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除