Skip to content

U
uview-ui
Commit 2bfded3d authored by PC-20180318CEYD\Administrator's avatar PC-20180318CEYD\Administrator
Browse files
Options

Merge branch 'xiaokonglong' into yiruiwen

parents 6c95f5b1 c61a470d
Show whitespace changes
Inline Side-by-side
Showing with 810 additions and 711 deletions
main.js
View file @ 2bfded3d
/*
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 15:18:39
*/
import Vue from 'vue'
import App from './App'
......@@ -6,18 +12,19 @@ Vue.config.productionTip = false
App.mpType = 'app'
// 此处为演示Vue.prototype使用，非uView的功能部分
Vue.prototype.vuePrototype = '枣红';
Vue.prototype.vuePrototype = '枣红'
// 引入全局uView
import uView from "@/uview";
Vue.use(uView);
// Vue.prototype.openShare = true // 是否开启全局分享
import uView from '@/uview'
Vue.use(uView)
// 此处为演示vuex使用，非uView的功能部分
import store from '@/store';
import store from '@/store'
// 引入uView提供的对vuex的简写法文件
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore)
const app = new Vue({
store,
......
pages/componentsC/countTo/index.vue
View file @ 2bfded3d
......@@ -4,23 +4,33 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">
如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明
</view>
<view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
<view class="count-to-demo">
<u-count-to class="count-to" :useEasing="useEasing" ref="uCountTo" :autoplay="autoplay"
:startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals"
@end="end"></u-count-to>
<u-count-to
class="count-to"
:useEasing="useEasing"
ref="uCountTo"
:autoplay="autoplay"
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:fontWeight="fontWeight"
@end="end"
></u-count-to>
</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
<u-subsection
vibrateShort
:current="current"
:list="['启动', '暂停', '继续', '重置']"
@change="statusChange"
></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">目标值</view>
......@@ -34,6 +44,15 @@
<view class="u-item-title">显示小数</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体加粗</view>
<u-subsection
vibrateShort
current="1"
:list="['normal', 'bold', 'bolder','lighter']"
@change="fontWidthChange"
></u-subsection>
</view>
</view>
</view>
</template>
......@@ -44,13 +63,14 @@ export default {
return {
startVal: 0,
endVal: 608,
separator: ',',
separator: ",",
decimals: 0,
duration: 2000,
autoplay: false,
useEasing: true,
current: 3,
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
fontWeight: 400
};
},
methods: {
......@@ -62,16 +82,20 @@ export default {
durationChange(index) {
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
},
fontWidthChange(index) {
let arr = ["normal", "bold", "bolder", "lighter"];
this.fontWeight = arr[index];
},
decimalsChange(index) {
this.decimals = index == 0 ? 2 : 0;
},
statusChange(index) {
this.current = index;
if(index == 0) {
if (index == 0) {
this.start();
} else if(index == 1) {
} else if (index == 1) {
this.stop();
} else if(index == 2){
} else if (index == 2) {
this.resume();
} else {
this.reset();
......@@ -80,9 +104,9 @@ export default {
end() {
this.current = 3;
this.$refs.uToast.show({
type: 'warning',
title: '滚动结束'
})
type: "warning",
title: "滚动结束"
});
},
start() {
this.current = 0;
......@@ -93,15 +117,15 @@ export default {
this.$refs.uCountTo.stop();
},
resume() {
if(!this.isStop) {
if (!this.isStop) {
this.$refs.uToast.show({
type: 'error',
title: '请开始并暂停后才能继续'
})
type: "error",
title: "请开始并暂停后才能继续"
});
this.$nextTick(() => {
this.current = 3;
})
return ;
});
return;
}
this.$refs.uCountTo.resume();
},
......
pages/componentsC/gap/index.vue
View file @ 2bfded3d
<!--
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 18:33:28
-->
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-gap :bg-color="bgColor" :height="height"></u-gap>
<u-gap :bg-color="bgColor" :height="height" :margin="margin"></u-gap>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">背景颜色</view>
<u-subsection vibrateShort :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection>
<u-subsection
vibrateShort
:list="['default', 'primary', 'error', 'warning', 'success']"
@change="bgColorChange"
></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">高度</view>
<u-subsection vibrateShort :list="['30', '50', '70']" @change="heightChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">上下外边距</view>
<u-subsection vibrateShort :list="['30', '50', '70']" @change="marginChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
export default {
data() {
return {
height: 30,
margin: 0,
bgColor: this.$u.color.bgColor
}
};
},
methods: {
bgColorChange(index) {
let color = index == 0 ? 'default' : index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
this.bgColor = color == 'default' ? this.$u.color['bgColor'] : this.$u.color[color];
let color =
index == 0
? "default"
: index == 1
? "primary"
: index == 2
? "error"
: index == 3
? "warning"
: "success";
this.bgColor =
color == "default" ? this.$u.color["bgColor"] : this.$u.color[color];
},
heightChange(index) {
this.height = index == 0 ? 30 : index == 1 ? 50 : 70;
},
marginChange(index) {
this.margin = index == 0 ? 30 : index == 1 ? 50 : 70;
}
}
}
};
</script>
<style lang="scss" scoped>
.wrap {
.wrap {
padding: 24rpx;
}
}
</style>
uview/components/u-count-to/u-count-to.vue
View file @ 2bfded3d
<template>
<view class="u-count-num" :style="{
<view
class="u-count-num"
:style="{
fontSize: fontSize + 'rpx',
fontWeight:fontWeight,
color: color
}">
{{ displayValue }}
</view>
}"
>{{ displayValue }}</view>
</template>
<script>
......@@ -44,23 +46,28 @@ export default {
// 十进制分割
decimal: {
type: [Number, String],
default: '.'
default: "."
},
// 字体颜色
color: {
type: String,
default: '#303133'
default: "#303133"
},
// 字体大小
fontSize: {
type: [Number, String],
default: 50
},
// 字体粗细
fontWeight: {
type: [Number, String],
default: 400
},
// 千位分隔符，类似金额的分割(￥23,321.05中的",")
separator: {
type: String,
default: ''
},
default: ""
}
},
data() {
return {
......@@ -152,27 +159,47 @@ export default {
this.remaining = this.localDuration - progress;
if (this.useEasing) {
if (this.countDown) {
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
this.printVal =
this.localStartVal -
this.easingFn(
progress,
0,
this.localStartVal - this.endVal,
this.localDuration
);
} else {
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
this.printVal = this.easingFn(
progress,
this.localStartVal,
this.endVal - this.localStartVal,
this.localDuration
);
}
} else {
if (this.countDown) {
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
this.printVal =
this.localStartVal -
(this.localStartVal - this.endVal) *
(progress / this.localDuration);
} else {
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
this.printVal =
this.localStartVal +
(this.endVal - this.localStartVal) *
(progress / this.localDuration);
}
}
if (this.countDown) {
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
this.printVal =
this.printVal < this.endVal ? this.endVal : this.printVal;
} else {
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
this.printVal =
this.printVal > this.endVal ? this.endVal : this.printVal;
}
this.displayValue = this.formatNumber(this.printVal);
if (progress < this.localDuration) {
this.rAF = this.requestAnimationFrame(this.count);
} else {
this.$emit('end');
this.$emit("end");
}
},
// 判断是否数字
......@@ -181,14 +208,14 @@ export default {
},
formatNumber(num) {
num = num.toFixed(Number(this.decimals));
num += '';
const x = num.split('.');
num += "";
const x = num.split(".");
let x1 = x[0];
const x2 = x.length > 1 ? this.decimal + x[1] : '';
const x2 = x.length > 1 ? this.decimal + x[1] : "";
const rgx = /(\d+)(\d{3})/;
if (this.separator && !this.isNumber(this.separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
x1 = x1.replace(rgx, "$1" + this.separator + "$2");
}
}
return x1 + x2;
......
uview/components/u-gap/u-gap.vue
View file @ 2bfded3d
<!--
* @Desc: --- ----
* @Date: 2020-04-22 12:29:22
* @LastEditors: 王
* @LastEditTime: 2020-04-22 18:31:36
-->
<template>
<view class="u-gap" :style="[gapStyle]">
</view>
<view class="u-gap" :style="[gapStyle]"></view>
</template>
<script>
export default {
export default {
props: {
bgColor: {
type: String,
default: '#f3f4f6' // 也即：rgb(243, 244, 246)
default: "#f3f4f6" // 也即：rgb(243, 244, 246)
},
// 高度
height: {
type: [String, Number],
default: 30
},
margin: {
type: [String, Number],
default: 0
}
},
computed: {
gapStyle() {
return {
backgroundColor: this.bgColor,
height: this.height + 'rpx'
}
}
height: this.height + "rpx",
marginTop: this.margin + "rpx",
marginBttom: this.margin + "rpx"
};
}
}
};
</script>
<style>
......
uview/components/u-search/u-search.vue
View file @ 2bfded3d
<template>
<view class="u-search">
<view class="u-content" :style="{
<view
class="u-content"
:style="{
backgroundColor: bgColor,
borderRadius: shape == 'round' ? '100rpx' : '10rpx',
border: borderStyle,
height: height + 'rpx'
}">
}"
>
<view class="u-icon-wrap">
<u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon>
</view>
<input confirm-type="search" @blur="blur" :value="value" @confirm="search" @input="inputChange" :disabled="disabled" @focus="getFocus" :focus="focus"
placeholder-class="u-placeholder-class" :placeholder="placeholder" class="u-input" type="text" :style="{
<input
confirm-type="search"
@blur="blur"
:value="value"
@confirm="search"
@input="inputChange"
:disabled="disabled"
@focus="getFocus"
:focus="focus"
placeholder-class="u-placeholder-class"
:placeholder="placeholder"
class="u-input"
type="text"
:style="{
textAlign: inputAlign
}" />
}"
/>
<view class="u-close-wrap" v-if="keyword && clearabled && focused" @touchstart="clear">
<u-icon class="u-clear-icon" name="close" :size="16" color="#fff" @touchstart="clear"></u-icon>
</view>
</view>
<view :style="[actionStyle]" class="u-action" :class="[showActionBtn || show ? 'u-action-active' : '']" @tap="custom">
{{actiontext}}
</view>
<view
:style="[actionStyle]"
class="u-action"
:class="[showActionBtn || show ? 'u-action-active' : '']"
@tap="custom"
>{{actionText}}</view>
</view>
</template>
<script>
export default {
export default {
props: {
// 搜索框形状，round-圆形，square-方形
shape: {
type: String,
default: 'round'
default: "round"
},
// 搜索框背景色，默认值#f2f2f2
bgColor: {
type: String,
default: '#f2f2f2'
default: "#f2f2f2"
},
// 占位提示文字
placeholder: {
type: String,
default: '请输入关键字'
default: "请输入关键字"
},
// 是否启用清除控件
clearabled: {
......@@ -60,18 +79,18 @@
actionStyle: {
type: Object,
default() {
return {}
return {};
}
},
// 取消按钮文字
actiontext: {
actionText: {
type: String,
default: '搜索'
default: "搜索"
},
// 输入框内容对齐方式，可选值为 left|center|right
inputAlign: {
type: String,
default: 'left'
default: "left"
},
// 是否启用输入框
disabled: {
......@@ -86,12 +105,12 @@
// 边框颜色，只要配置了颜色，才会有边框
borderColor: {
type: String,
default: 'none'
default: "none"
},
// 输入框的初始化内容
value: {
type: String,
default: ''
default: ""
},
// 搜索框高度，单位rpx
height: {
......@@ -101,21 +120,21 @@
},
data() {
return {
keyword: '',
keyword: "",
showClear: false, // 是否显示右边的清除图标
show: false,
// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
focused: this.focus,
focused: this.focus
// 绑定输入框的值
// inputValue: this.value
}
};
},
watch: {
keyword(nVal) {
// 双向绑定值，让v-model绑定的值双向变化
this.$emit('input', nVal)
this.$emit("input", nVal);
// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
this.$emit('change', nVal)
this.$emit("change", nVal);
},
value: {
immediate: true,
......@@ -131,8 +150,8 @@
},
// 样式，根据用户传入的颜色值生成，如果不传入，默认为none
borderStyle() {
if(this.borderColor) return `1px solid ${this.borderColor}`;
else return 'none';
if (this.borderColor) return `1px solid ${this.borderColor}`;
else return "none";
}
},
methods: {
......@@ -143,17 +162,17 @@
// 清空输入
// 也可以作为用户通过this.$refs形式调用清空输入框内容
clear() {
this.keyword = '';
this.keyword = "";
},
// 确定搜索
search() {
this.$emit('search', this.keyword);
this.$emit("search", this.keyword);
// 收起键盘
uni.hideKeyboard();
},
// 点击右边自定义按钮的事件
custom() {
this.$emit('custom', this.keyword);
this.$emit("custom", this.keyword);
// 收起键盘
uni.hideKeyboard();
},
......@@ -169,37 +188,37 @@
this.show = false;
}
}
}
};
</script>
<style lang="scss" scoped>
.u-search {
.u-search {
display: flex;
align-items: center;
flex: 1;
}
}
.u-content {
.u-content {
display: flex;
align-items: center;
padding: 0 18rpx;
flex: 1;
}
}
.u-clear-icon {
.u-clear-icon {
display: flex;
align-items: center;
}
}
.u-input {
.u-input {
flex: 1;
font-size: 28rpx;
line-height: 1;
margin: 0 10rpx;
color: $u-tips-color;
}
}
.u-close-wrap {
.u-close-wrap {
width: 34rpx;
height: 34rpx;
display: flex;
......@@ -207,13 +226,13 @@
justify-content: center;
background-color: rgb(200, 203, 204);
border-radius: 50%;
}
}
.u-placeholder-class {
.u-placeholder-class {
color: $u-tips-color;
}
}
.u-action {
.u-action {
font-size: 28rpx;
color: $u-main-color;
width: 0;
......@@ -221,10 +240,10 @@
transition: all 0.3s;
white-space: nowrap;
text-align: center;
}
}
.u-action-active {
.u-action-active {
width: 80rpx;
margin-left: 10rpx;
}
}
</style>
uview/index.js
View file @ 2bfded3d
// 引入全局mixin
import mixin from '@/uview/libs/mixin/mixin.js'
import wxshare from '@/uview/libs/mixin/wxshare.js'
// 全局挂载引入http相关请求拦截插件
import http from "@/uview/libs/request";
import http from '@/uview/libs/request'
function wranning(str) {
function wranning (str) {
// 开发环境进行信息输出,主要是一些报错信息
// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
// https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
if (process.env.NODE_ENV === 'development') {
console.warn(str);
console.warn(str)
}
}
......@@ -23,63 +23,41 @@ function wranning(str) {
// }
// post类型对象参数转为get类型url参数
import {
queryParams
} from '@/uview/libs/function/queryParams.js';
import { queryParams } from '@/uview/libs/function/queryParams.js'
// 路由封装
import {
route
} from '@/uview/libs/function/route.js';
import { route } from '@/uview/libs/function/route.js'
// 时间格式化
import {
timeFormat
} from '@/uview/libs/function/timeFormat.js';
import { timeFormat } from '@/uview/libs/function/timeFormat.js'
// 时间戳格式化,返回多久之前
import {
timeFrom
} from '@/uview/libs/function/timeFrom.js';
import { timeFrom } from '@/uview/libs/function/timeFrom.js'
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
import {
colorGradient,
hexToRgb,
rgbToHex
} from '@/uview/libs/function/colorGradient.js';
} from '@/uview/libs/function/colorGradient.js'
// 生成全局唯一guid字符串
import {
guid
} from '@/uview/libs/function/guid.js';
import { guid } from '@/uview/libs/function/guid.js'
// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
import {
color
} from '@/uview/libs/function/color.js';
import { color } from '@/uview/libs/function/color.js'
// 根据type获取图标名称
import {
type2icon
} from '@/uview/libs/function/type2icon.js';
import { type2icon } from '@/uview/libs/function/type2icon.js'
// 打乱数组的顺序
import {
randomArray
} from "@/uview/libs/function/randomArray.js";
import { randomArray } from '@/uview/libs/function/randomArray.js'
// 规则检验
import test from "@/uview/libs/function/test.js";
import test from '@/uview/libs/function/test.js'
// 随机数
import {
random
} from "@/uview/libs/function/random.js";
import { random } from '@/uview/libs/function/random.js'
// 去除空格
import {
trim
} from "@/uview/libs/function/trim.js";
import { trim } from '@/uview/libs/function/trim.js'
// toast提示，对uni.showToast的封装
import {
toast
} from "@/uview/libs/function/toast.js";
import { toast } from '@/uview/libs/function/toast.js'
// 配置信息
import config from "@/uview/libs/config/config.js";
import config from '@/uview/libs/config/config.js'
// 各个需要fixed的地方的z-index配置文件
import zIndex from "@/uview/libs/config/zIndex.js";
import zIndex from '@/uview/libs/config/zIndex.js'
const $u = {
queryParams,
......@@ -104,24 +82,28 @@ const $u = {
http,
toast,
config, // uView配置信息相关，比如版本号
zIndex,
zIndex
}
const install = (Vue) => {
Vue.mixin(mixin);
const install = Vue => {
Vue.mixin(mixin)
console.log(Vue.prototype.openShare)
if (Vue.prototype.openShare) {
Vue.mixin(wxshare)
}
// Vue.mixin(vuexStore);
// 时间格式化，同时两个名称，date和timeFormat
Vue.filter('timeFormat', (timestamp, format) => {
return timeFormat(timestamp, format);
return timeFormat(timestamp, format)
})
Vue.filter('date', (timestamp, format) => {
return timeFormat(timestamp, format);
return timeFormat(timestamp, format)
})
// 将多久以前的方法，注入到全局过滤器
Vue.filter('timeFrom', (timestamp, format) => {
return timeFrom(timestamp, format);
return timeFrom(timestamp, format)
})
Vue.prototype.$u = $u;
Vue.prototype.$u = $u
}
export default {
......
uview/libs/mixin/mixin.js
View file @ 2bfded3d
module.exports = {
data() {
data () {
return {}
},
onLoad() {
// getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
this.$u.getRect = this.$uGetRect;
// 设置默认的转发参数
this.$u.mpShare = {
title: '', // 默认为小程序名称
path: '', // 默认为当前页面路径
imageUrl: '' // 默认为当前页面的截图
};
},
onShareAppMessage() {
return this.$u.mpShare;
},
methods: {
// 查询节点信息
$uGetRect(selector, all) {
$uGetRect (selector, all) {
return new Promise(resolve => {
uni.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
uni
.createSelectorQuery()
.in(this)
[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect);
resolve(rect)
}
if (!all && rect) {
resolve(rect);
resolve(rect)
}
})
.exec();
});
},
.exec()
})
}
},
onReachBottom() {
uni.$emit('uOnReachBottom');
onReachBottom () {
uni.$emit('uOnReachBottom')
}
}
uview/libs/mixin/wxshare.js 0 → 100644
View file @ 2bfded3d
module.exports = {
onLoad () {
// getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
this.$u.getRect = this.$uGetRect
// 设置默认的转发参数
this.$u.mpShare = {
title: '', // 默认为小程序名称
path: '', // 默认为当前页面路径
imageUrl: '' // 默认为当前页面的截图
}
},
onShareAppMessage () {
return this.$u.mpShare
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment