阿里小图标
1.创建font文件夹,将阿里小图标下载放入此
2.main.js中引入
import './assets/font/iconfont.css'复制代码
3.直接使用即可
<i class="iconfont icon-fanhui"></i>复制代码
移动端rem布局
1.创建rem.js
2.rem.js内容
! function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 720 && (n = 720);
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
复制代码
3.main.js中引入
import './rem'复制代码
4.直接使用
.header {
width: 100%;
height: .6rem;
display: flex;
}复制代码
v-touch 移动端划动事件
1.安装 vue-touch
npm install vue-touch@next --save
2. main.js中引入
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})复制代码
3.用v-touch标签包裹
swiperleft左划事件,swiperright右划事件
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div>
需要划动的板块
</div>
</v-touch>复制代码
4.调用事件
methods: {
swiperleft(){
elert("hello");
},
},复制代码