Zyl_CN-CSDN博客

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

2019-09-20 11:11:02 2297

原创 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 7461 1

原创 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 4082 2

原创 uni-app(跨端兼容)

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

2019-07-03 10:58:43 1921

原创微信分享

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 197

原创弹性布局（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 528

转载简单的利用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 433

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

2019-06-18 18:19:14 1857

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

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

2019-06-06 16:17:12 142

原创 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 424

原创细线表格

<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 229

转载 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 2162

原创 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 743

原创 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 272

原创兼容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 1015

原创 sticky footer布局

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

2019-05-16 10:59:20 200

原创怎么在手机端是实现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 311

原创 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 125

原创 vue总结

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

2019-04-23 19:06:34 267

原创 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 175

原创编程式导航（网页的跳转）

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

2019-04-16 18:41:11 709

原创图片缩略图插件(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 1478

原创 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 208

原创 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 400

原创 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 539

原创纯c3实现动态省略号

2019-04-04 10:26:24 403

原创 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 443

原创 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 449

原创导入和暴露用法

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 656

原创 vue中的script/css配置

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

2019-04-02 17:47:43 827

原创 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 436

原创 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 436

原创 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 255

原创 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 2906

原创 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 721

原创 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 1066

原创 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 202

原创 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 468

原创 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 496

原创 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 1071

空空如也

空空如也