Skip to content

web-framework-temp / vue-cli3-vt-template-master

Go to a project
Toggle navigation
Toggle navigation pinning
b61611dc by simon
Options

模板更新

1 parent 7e8d4779
Inline Side-by-side
Showing 11 changed files with 254 additions and 98 deletions
export default {
name: "demo-item",
props: [],
data() {
return {
key: 'value',
}
},
computed: {},
methods: {
onHide() {
this.$emit('hide');
},
},
mounted() {},
}
\ No newline at end of file
<template>
<div class="comp">
demo-item
</div>
</template>
<script src="./demo-item.js"></script>
<style lang="scss" scoped>
@import "./demo-item.scss";
</style>
......@@ -16,14 +16,17 @@ import {
import 'amfe-flexible/index.js'
import vant from '@/utils/vant-util'
// import '@/styles/index.scss' // global css
import '@/styles/index.scss' // global css
import '@/styles/fonticon.scss' // 图标字体
import '@/assets/fonts/font.scss' // 字体引入
// import '@styles/utils.scss' /*引入公共样式*/
Vue.config.productionTip = false
import {
Dialog,
Toast
} from "vant";
// 原app节点请通过 document.getElementById('app') 获取
......@@ -88,12 +91,23 @@ Vue.config.productionTip = false
// }
// initVue();
let util = require('@/utils/utils');
let func = require('@/utils/func');
// let Toast = vant.Toast;
// let Dialog = vant.Dialog;
let app = new Vue({
router,
store,
data: {
isInit: false,
globalData: {
ui: {
colorUI: "#409EFF",
colorDanger: "#EE0A24"
},
},
},
render: h => h(VueApp)
}).$mount('#app')
......@@ -105,4 +119,10 @@ app.get = httpGet;
app.post = httpPost;
app.uploadFile = formdata;
app.router = router;
app.util = util;
app.func = func;
app.vant = {
Dialog,
Toast
}
window.app = app;
\ No newline at end of file
......
......@@ -6,14 +6,10 @@ export default {
},
components: {},
methods: {
toLottery() {
app.router.push({
name: "lottery"
});
},
initData() {},
async initData() {},
},
mounted() {},
created() {
}
mounted() {
this.initData();
},
created() {}
}
\ No newline at end of file
......
......@@ -6,7 +6,7 @@
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
<div @click="toLottery">Index</div>
Index
</div>
</div>
</div>
......
......@@ -23,21 +23,6 @@ div {
margin: 20px;
}
.app__title {
font-size: $fontSize;
line-height: $fontSize + 4px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 0.5px solid #eeeeee;
}
.app__desc {
font-size: $fontSizeSmaller;
line-height: $fontSizeSmaller + 2px;
margin-bottom: 20px;
color: $colorGray;
}
.app__bgc {
position: fixed;
......@@ -63,3 +48,16 @@ div {
.app__content {
position: relative;
}
.box {
@extend .bb;
@extend .shadow;
position: relative;
width: $contentWid;
margin: 24px auto;
position: relative;
background-color: #fff;
border-radius: 10px;
padding: 28px 24px;
}
\ No newline at end of file
......
......@@ -70,6 +70,9 @@
pointer-events: none;
}
.shadow {
box-shadow: 0 2px 12px 0 rgba(100, 101, 102, 0.12);
}
.ell {
@include ellipsis(1);
......
$fontSizeFix:0px; // 用于整体字号放大
// Font 文字
// 大标题 Medium 26pt 34H 500
......@@ -7,7 +9,7 @@ $fontSizeTitleLarger: 52px;
$fontSizeTitleLarge: 40px;
// 标准标题 Medium 18pt 24H 500
$fontSizeTitle: 36rpx;
$fontSizeTitle: 36px;
// 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400
$fontSizeNavLarge: 34px;
......@@ -38,7 +40,9 @@ $fontSizeData: 16px;
$color: #323233; // 文字色，指主文字1
$colorText: #646566; // 文字色，指主文字2
$colorLight: #969799; // 文字色，指辅助、说明文字
$colorTips: #969799; // 文字色，指 disable、提示文字等
$colorDesc: #969799; // 文字色，指 disable、提示文字等
$colorTips: #999; // 文字色，指 disable、提示文字等
$colorDisable: #bbb; // 文字色，指 disable、提示文字等
$colorBorder: #DCDEE0; // 边框、线色
$colorBorderLight: #EBEDF0; // 边框、线色
$colorBg: #F2F3F5; // 深色背景
......@@ -48,11 +52,13 @@ $colorBlack: #000000; // 黑色
$colorWhite: #ffffff; // 白色
// 功能色
$colorGray: #969799;
$colorGrayLight: #C8C9CC;
$colorLink:#576B95; // 文字链颜色
$colorSuccess: #07C160; // 成功色
$colorDanger: #EE0A24; // 报错色
$colorDanger: #ee0a24; // 报错色
$colorWarning: #ED6A0C; // 通知消息中的文本颜色
$colorWarning: #FFFBE8; // 通知消息中的背景颜色
$colorInfo: #FAAB0C; // 文字辅助颜色
......@@ -81,7 +87,9 @@ $paddingSmall: 16px;
$paddingSmaller: 8px;
// 页面样式
$pageBottom: 160px; // 页面底部
$pageBottomTabBar: 160px; // 页面底部
$pageBottom: 40px; // 页面底部
$popupWid: 610px; //内容宽度 （由间距为8的倍数所得）
$contentWid: 690px; //内容宽度 （由间距为8的倍数所得）
$contentWidth: 710px; //内容宽度 （由间距为8的倍数所得）
$screenWidth: 750px; // 屏幕宽度
$screenWidth: 750px; // 屏幕宽度
\ No newline at end of file
......
File mode changed
// 正在表达式
export const REGEXPS = {
"mobile": /^1\d{10}$/
// 验证手机 以1开头的11位数字
export function checkMobile(str) {
var pattern = /^1\d{10}$/;
return pattern.test(str);
}
// 验证手机
export function checkMobile(str) {
return REGEXPS.mobile.test(str);
// 验证邮箱
export function checkEmail(email) {
var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return pattern.test(email);
}
// 判断是否微信环境
export function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
......@@ -40,6 +44,107 @@ export function param2Obj(url) {
/**
* 分转元
* @param {*} fen
* @returns
*/
export function regFenToYuan(fen) {
var num = fen;
num = fen * 0.01;
num += '';
var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
num = num.replace(reg, '$1');
num = toDecimal2(num)
return num
};
/**
* 元转分
* @param {*} yuan
* @param {*} digit
* @returns
*/
export function regYuanToFen(yuan, digit = 100) {
var m = 0,
s1 = yuan.toString(),
s2 = digit.toString();
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
/**
* 强制保留2位小数，如：2，会在2后面补上00.即2.00
* @param {*} x
* @returns
*/
export function toDecimal2(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
// 格式化星期几
export function formatWeek(week) {
let result = "";
switch (week) {
case 1:
result = "一";
break;
case 2:
result = "二";
break;
case 3:
result = "三";
break;
case 4:
result = "四";
break;
case 5:
result = "五";
break;
case 6:
result = "六";
break;
case 0:
result = "日";
break;
default:
break;
}
return result;
}
// 数组去重
export function uniqueArr(arr, key) {
let obj = {};
let newArr = arr.reduce((cur, next) => {
obj[next[key]] ? "" : obj[next[key]] = true && cur.push(next);
return cur;
}, [])
return newArr
}
/**
* 从数组中获取 key未value的对象
* @param {*} value
* @param {*} key
......@@ -211,62 +316,61 @@ export function formatDate(date, fmt) {
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
let debounceTimeout;
export function debounce(func, wait, immediate) {
return function () {
let context = this;
let args = arguments;
if (debounceTimeout) clearTimeout(debounceTimeout);
if (immediate) {
var callNow = !debounceTimeout;
debounceTimeout = setTimeout(() => {
debounceTimeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
debounceTimeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}();
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
* 时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
*/
let throttleTimeout;
let throttlePrevious;
export function throttle(func, wait, type) {
if (type === 1) {
throttlePrevious = 0;
} else if (type === 2) {
throttleTimeout = 0;
}
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - throttlePrevious > wait) {
func.apply(context, args);
throttlePrevious = now;
}
} else if (type === 2) {
if (!throttleTimeout) {
throttleTimeout = setTimeout(() => {
throttleTimeout = null;
func.apply(context, args)
}, wait)
}
}
}();
}
\ No newline at end of file
let debounceTimeout;
export function debounce(func, wait, immediate) {
return function () {
let context = this;
let args = arguments;
if (debounceTimeout) clearTimeout(debounceTimeout);
if (immediate) {
var callNow = !debounceTimeout;
debounceTimeout = setTimeout(() => {
debounceTimeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
debounceTimeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}();
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
* 时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
*/
let throttleTimeout;
let throttlePrevious;
export function throttle(func, wait, type) {
if (type === 1) {
throttlePrevious = 0;
} else if (type === 2) {
throttleTimeout = 0;
}
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - throttlePrevious > wait) {
func.apply(context, args);
throttlePrevious = now;
}
} else if (type === 2) {
if (!throttleTimeout) {
throttleTimeout = setTimeout(() => {
throttleTimeout = null;
func.apply(context, args)
}, wait)
}
}
}();
}
\ No newline at end of file
......