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
Hide 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 Vue from 'vue'
import App from './App' import App from './App'
...@@ -6,21 +12,22 @@ Vue.config.productionTip = false ...@@ -6,21 +12,22 @@ Vue.config.productionTip = false
App.mpType = 'app' App.mpType = 'app'
// 此处为演示Vue.prototype使用，非uView的功能部分 // 此处为演示Vue.prototype使用，非uView的功能部分
Vue.prototype.vuePrototype = '枣红'; Vue.prototype.vuePrototype = '枣红'
// 引入全局uView // 引入全局uView
import uView from "@/uview"; // Vue.prototype.openShare = true // 是否开启全局分享
Vue.use(uView); import uView from '@/uview'
Vue.use(uView)
// 此处为演示vuex使用，非uView的功能部分 // 此处为演示vuex使用，非uView的功能部分
import store from '@/store'; import store from '@/store'
// 引入uView提供的对vuex的简写法文件 // 引入uView提供的对vuex的简写法文件
let vuexStore = require("@/store/$u.mixin.js"); let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore); Vue.mixin(vuexStore)
const app = new Vue({ const app = new Vue({
store, store,
...App ...App
}) })
app.$mount() app.$mount()
pages/componentsC/countTo/index.vue
View file @ 2bfded3d
<template> <template>
<view class="u-demo"> <view class="u-demo">
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here"> <view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明 <view class="count-to-demo">
</view> <u-count-to
<view class="count-to-demo"> class="count-to"
<u-count-to class="count-to" :useEasing="useEasing" ref="uCountTo" :autoplay="autoplay" :useEasing="useEasing"
:startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals" ref="uCountTo"
@end="end"></u-count-to> :autoplay="autoplay"
</view> :startVal="startVal"
</view> :endVal="endVal"
</view> :duration="duration"
<view class="u-config-wrap"> :decimals="decimals"
<view class="u-config-title u-border-bottom"> :fontWeight="fontWeight"
参数配置 @end="end"
</view> ></u-count-to>
<view class="u-config-item"> </view>
<view class="u-item-title">状态</view> </view>
<u-subsection vibrateShort :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection> </view>
</view> <view class="u-config-wrap">
<view class="u-config-item"> <view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-item-title">目标值</view> <view class="u-config-item">
<u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection> <view class="u-item-title">状态</view>
</view> <u-subsection
<view class="u-config-item"> vibrateShort
<view class="u-item-title">滚动时间</view> :current="current"
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection> :list="['启动', '暂停', '继续', '重置']"
</view> @change="statusChange"
<view class="u-config-item"> ></u-subsection>
<view class="u-item-title">显示小数</view> </view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection> <view class="u-config-item">
</view> <view class="u-item-title">目标值</view>
</view> <u-subsection vibrateShort :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
</view> </view>
<view class="u-config-item">
<view class="u-item-title">滚动时间</view>
<u-subsection vibrateShort current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
</view>
<view class="u-config-item">
<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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
startVal: 0, startVal: 0,
endVal: 608, endVal: 608,
separator: ',', separator: ",",
decimals: 0, decimals: 0,
duration: 2000, duration: 2000,
autoplay: false, autoplay: false,
useEasing: true, useEasing: true,
current: 3, current: 3,
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
}; fontWeight: 400
}, };
methods: { },
endValChange(index) { methods: {
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617; endValChange(index) {
this.reset(); this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
this.start(); this.reset();
}, this.start();
durationChange(index) { },
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000; durationChange(index) {
}, this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
decimalsChange(index) { },
this.decimals = index == 0 ? 2 : 0; fontWidthChange(index) {
}, let arr = ["normal", "bold", "bolder", "lighter"];
statusChange(index) { this.fontWeight = arr[index];
this.current = index; },
if(index == 0) { decimalsChange(index) {
this.start(); this.decimals = index == 0 ? 2 : 0;
} else if(index == 1) { },
this.stop(); statusChange(index) {
} else if(index == 2){ this.current = index;
this.resume(); if (index == 0) {
} else { this.start();
this.reset(); } else if (index == 1) {
} this.stop();
}, } else if (index == 2) {
end() { this.resume();
this.current = 3; } else {
this.$refs.uToast.show({ this.reset();
type: 'warning', }
title: '滚动结束' },
}) end() {
}, this.current = 3;
start() { this.$refs.uToast.show({
this.current = 0; type: "warning",
this.isStop = true; title: "滚动结束"
this.$refs.uCountTo.start(); });
}, },
stop() { start() {
this.$refs.uCountTo.stop(); this.current = 0;
}, this.isStop = true;
resume() { this.$refs.uCountTo.start();
if(!this.isStop) { },
this.$refs.uToast.show({ stop() {
type: 'error', this.$refs.uCountTo.stop();
title: '请开始并暂停后才能继续' },
}) resume() {
this.$nextTick(() => { if (!this.isStop) {
this.current = 3; this.$refs.uToast.show({
}) type: "error",
return ; title: "请开始并暂停后才能继续"
} });
this.$refs.uCountTo.resume(); this.$nextTick(() => {
}, this.current = 3;
reset() { });
this.$refs.uCountTo.reset(); return;
} }
} this.$refs.uCountTo.resume();
},
reset() {
this.$refs.uCountTo.reset();
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.count-to-demo { .count-to-demo {
text-align: center; text-align: center;
} }
</style> </style>
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> <template>
<view class="u-demo"> <view class="u-demo">
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <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> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
<view class="u-config-title u-border-bottom"> <view class="u-config-title u-border-bottom">参数配置</view>
参数配置 <view class="u-config-item">
</view> <view class="u-item-title">背景颜色</view>
<view class="u-config-item"> <u-subsection
<view class="u-item-title">背景颜色</view> vibrateShort
<u-subsection vibrateShort :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection> :list="['default', 'primary', 'error', 'warning', 'success']"
</view> @change="bgColorChange"
<view class="u-config-item"> ></u-subsection>
<view class="u-item-title">高度</view> </view>
<u-subsection vibrateShort :list="['30', '50', '70']" @change="heightChange"></u-subsection> <view class="u-config-item">
</view> <view class="u-item-title">高度</view>
</view> <u-subsection vibrateShort :list="['30', '50', '70']" @change="heightChange"></u-subsection>
</view> </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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
height: 30, height: 30,
bgColor: this.$u.color.bgColor margin: 0,
} bgColor: this.$u.color.bgColor
}, };
methods: { },
bgColorChange(index) { methods: {
let color = index == 0 ? 'default' : index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success'; bgColorChange(index) {
this.bgColor = color == 'default' ? this.$u.color['bgColor'] : this.$u.color[color]; let color =
}, index == 0
heightChange(index) { ? "default"
this.height = index == 0 ? 30 : index == 1 ? 50 : 70; : 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
padding: 24rpx; padding: 24rpx;
} }
</style> </style>
uview/components/u-count-to/u-count-to.vue
View file @ 2bfded3d
<template> <template>
<view class="u-count-num" :style="{ <view
class="u-count-num"
:style="{
fontSize: fontSize + 'rpx', fontSize: fontSize + 'rpx',
fontWeight:fontWeight,
color: color color: color
}"> }"
{{ displayValue }} >{{ displayValue }}</view>
</view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
// 开始的数值，默认从0增长到某一个数 // 开始的数值，默认从0增长到某一个数
startVal: { startVal: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
// 要滚动的目标数值，必须 // 要滚动的目标数值，必须
endVal: { endVal: {
type: [Number, String], type: [Number, String],
default: 0, default: 0,
required: true required: true
}, },
// 滚动到目标数值的动画持续时间，单位为毫秒（ms） // 滚动到目标数值的动画持续时间，单位为毫秒（ms）
duration: { duration: {
type: [Number, String], type: [Number, String],
default: 2000 default: 2000
}, },
// 设置数值后是否自动开始滚动 // 设置数值后是否自动开始滚动
autoplay: { autoplay: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 要显示的小数位数 // 要显示的小数位数
decimals: { decimals: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
// 是否在即将到达目标数值的时候，使用缓慢滚动的效果 // 是否在即将到达目标数值的时候，使用缓慢滚动的效果
useEasing: { useEasing: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 十进制分割 // 十进制分割
decimal: { decimal: {
type: [Number, String], type: [Number, String],
default: '.' default: "."
}, },
// 字体颜色 // 字体颜色
color: { color: {
type: String, type: String,
default: '#303133' default: "#303133"
}, },
// 字体大小 // 字体大小
fontSize: { fontSize: {
type: [Number, String], type: [Number, String],
default: 50 default: 50
}, },
// 千位分隔符，类似金额的分割(￥23,321.05中的",") // 字体粗细
separator: { fontWeight: {
type: String, type: [Number, String],
default: '' default: 400
}, },
}, // 千位分隔符，类似金额的分割(￥23,321.05中的",")
data() { separator: {
return { type: String,
localStartVal: this.startVal, default: ""
displayValue: this.formatNumber(this.startVal), }
printVal: null, },
paused: false, // 是否暂停 data() {
localDuration: Number(this.duration), return {
startTime: null, // 开始的时间 localStartVal: this.startVal,
timestamp: null, // 时间戳 displayValue: this.formatNumber(this.startVal),
remaining: null, // 停留的时间 printVal: null,
rAF: null, paused: false, // 是否暂停
lastTime: 0 // 上一次的时间 localDuration: Number(this.duration),
}; startTime: null, // 开始的时间
}, timestamp: null, // 时间戳
computed: { remaining: null, // 停留的时间
countDown() { rAF: null,
return this.startVal > this.endVal; lastTime: 0 // 上一次的时间
} };
}, },
watch: { computed: {
startVal() { countDown() {
this.autoplay && this.start(); return this.startVal > this.endVal;
}, }
endVal() { },
this.autoplay && this.start(); watch: {
} startVal() {
}, this.autoplay && this.start();
mounted() { },
this.autoplay && this.start(); endVal() {
}, this.autoplay && this.start();
methods: { }
easingFn(t, b, c, d) { },
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; mounted() {
}, this.autoplay && this.start();
requestAnimationFrame(callback) { },
const currTime = new Date().getTime(); methods: {
// 为了使setTimteout的尽可能的接近每秒60帧的效果 easingFn(t, b, c, d) {
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime)); return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
const id = setTimeout(() => { },
callback(currTime + timeToCall); requestAnimationFrame(callback) {
}, timeToCall); const currTime = new Date().getTime();
this.lastTime = currTime + timeToCall; // 为了使setTimteout的尽可能的接近每秒60帧的效果
return id; const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
}, const id = setTimeout(() => {
callback(currTime + timeToCall);
}, timeToCall);
this.lastTime = currTime + timeToCall;
return id;
},
cancelAnimationFrame(id) { cancelAnimationFrame(id) {
clearTimeout(id); clearTimeout(id);
}, },
// 开始滚动数字 // 开始滚动数字
start() { start() {
this.localStartVal = this.startVal; this.localStartVal = this.startVal;
this.startTime = null; this.startTime = null;
this.localDuration = this.duration; this.localDuration = this.duration;
this.paused = false; this.paused = false;
this.rAF = this.requestAnimationFrame(this.count); this.rAF = this.requestAnimationFrame(this.count);
}, },
// 暂定状态，重新再开始滚动；或者滚动状态下，暂停 // 暂定状态，重新再开始滚动；或者滚动状态下，暂停
reStart() { reStart() {
if (this.paused) { if (this.paused) {
this.resume(); this.resume();
this.paused = false; this.paused = false;
} else { } else {
this.stop(); this.stop();
this.paused = true; this.paused = true;
} }
}, },
// 暂停 // 暂停
stop() { stop() {
this.cancelAnimationFrame(this.rAF); this.cancelAnimationFrame(this.rAF);
}, },
// 重新开始(暂停的情况下) // 重新开始(暂停的情况下)
resume() { resume() {
this.startTime = null; this.startTime = null;
this.localDuration = this.remaining; this.localDuration = this.remaining;
this.localStartVal = this.printVal; this.localStartVal = this.printVal;
this.requestAnimationFrame(this.count); this.requestAnimationFrame(this.count);
}, },
// 重置 // 重置
reset() { reset() {
this.startTime = null; this.startTime = null;
this.cancelAnimationFrame(this.rAF); this.cancelAnimationFrame(this.rAF);
this.displayValue = this.formatNumber(this.startVal); this.displayValue = this.formatNumber(this.startVal);
}, },
count(timestamp) { count(timestamp) {
if (!this.startTime) this.startTime = timestamp; if (!this.startTime) this.startTime = timestamp;
this.timestamp = timestamp; this.timestamp = timestamp;
const progress = timestamp - this.startTime; const progress = timestamp - this.startTime;
this.remaining = this.localDuration - progress; this.remaining = this.localDuration - progress;
if (this.useEasing) { if (this.useEasing) {
if (this.countDown) { if (this.countDown) {
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration); this.printVal =
} else { this.localStartVal -
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration); this.easingFn(
} progress,
} else { 0,
if (this.countDown) { this.localStartVal - this.endVal,
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration); this.localDuration
} else { );
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration); } else {
} this.printVal = this.easingFn(
} progress,
if (this.countDown) { this.localStartVal,
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal; this.endVal - this.localStartVal,
} else { this.localDuration
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal; );
} }
this.displayValue = this.formatNumber(this.printVal); } else {
if (progress < this.localDuration) { if (this.countDown) {
this.rAF = this.requestAnimationFrame(this.count); this.printVal =
} else { this.localStartVal -
this.$emit('end'); (this.localStartVal - this.endVal) *
} (progress / this.localDuration);
}, } else {
// 判断是否数字 this.printVal =
isNumber(val) { this.localStartVal +
return !isNaN(parseFloat(val)); (this.endVal - this.localStartVal) *
}, (progress / this.localDuration);
formatNumber(num) { }
num = num.toFixed(Number(this.decimals)); }
num += ''; if (this.countDown) {
const x = num.split('.'); this.printVal =
let x1 = x[0]; this.printVal < this.endVal ? this.endVal : this.printVal;
const x2 = x.length > 1 ? this.decimal + x[1] : ''; } else {
const rgx = /(\d+)(\d{3})/; this.printVal =
if (this.separator && !this.isNumber(this.separator)) { this.printVal > this.endVal ? this.endVal : this.printVal;
while (rgx.test(x1)) { }
x1 = x1.replace(rgx, '$1' + this.separator + '$2'); this.displayValue = this.formatNumber(this.printVal);
} if (progress < this.localDuration) {
} this.rAF = this.requestAnimationFrame(this.count);
return x1 + x2; } else {
}, this.$emit("end");
destroyed() { }
this.cancelAnimationFrame(this.rAF); },
} // 判断是否数字
} isNumber(val) {
return !isNaN(parseFloat(val));
},
formatNumber(num) {
num = num.toFixed(Number(this.decimals));
num += "";
const x = num.split(".");
let x1 = x[0];
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");
}
}
return x1 + x2;
},
destroyed() {
this.cancelAnimationFrame(this.rAF);
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-count-num { .u-count-num {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }
</style> </style>
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> <template>
<view class="u-gap" :style="[gapStyle]"> <view class="u-gap" :style="[gapStyle]"></view>
</view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
bgColor: { bgColor: {
type: String, type: String,
default: '#f3f4f6' // 也即：rgb(243, 244, 246) default: "#f3f4f6" // 也即：rgb(243, 244, 246)
}, },
// 高度 // 高度
height: { height: {
type: [String, Number], type: [String, Number],
default: 30 default: 30
} },
}, margin: {
computed: { type: [String, Number],
gapStyle() { default: 0
return { }
backgroundColor: this.bgColor, },
height: this.height + 'rpx' computed: {
} gapStyle() {
} return {
} backgroundColor: this.bgColor,
} height: this.height + "rpx",
marginTop: this.margin + "rpx",
marginBttom: this.margin + "rpx"
};
}
}
};
</script> </script>
<style> <style>
......
uview/components/u-search/u-search.vue
View file @ 2bfded3d
<template> <template>
<view class="u-search"> <view class="u-search">
<view class="u-content" :style="{ <view
class="u-content"
:style="{
backgroundColor: bgColor, backgroundColor: bgColor,
borderRadius: shape == 'round' ? '100rpx' : '10rpx', borderRadius: shape == 'round' ? '100rpx' : '10rpx',
border: borderStyle, border: borderStyle,
height: height + 'rpx' height: height + 'rpx'
}"> }"
<view class="u-icon-wrap"> >
<u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon> <view class="u-icon-wrap">
</view> <u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon>
<input confirm-type="search" @blur="blur" :value="value" @confirm="search" @input="inputChange" :disabled="disabled" @focus="getFocus" :focus="focus" </view>
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 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 class="u-close-wrap" v-if="keyword && clearabled && focused" @touchstart="clear">
</view> <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"> </view>
{{actiontext}} <view
</view> :style="[actionStyle]"
</view> class="u-action"
:class="[showActionBtn || show ? 'u-action-active' : '']"
@tap="custom"
>{{actionText}}</view>
</view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
// 搜索框形状，round-圆形，square-方形 // 搜索框形状，round-圆形，square-方形
shape: { shape: {
type: String, type: String,
default: 'round' default: "round"
}, },
// 搜索框背景色，默认值#f2f2f2 // 搜索框背景色，默认值#f2f2f2
bgColor: { bgColor: {
type: String, type: String,
default: '#f2f2f2' default: "#f2f2f2"
}, },
// 占位提示文字 // 占位提示文字
placeholder: { placeholder: {
type: String, type: String,
default: '请输入关键字' default: "请输入关键字"
}, },
// 是否启用清除控件 // 是否启用清除控件
clearabled: { clearabled: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 是否自动聚焦 // 是否自动聚焦
focus: { focus: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 是否在搜索框右侧显示取消按钮 // 是否在搜索框右侧显示取消按钮
showAction: { showAction: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 右边控件的样式 // 右边控件的样式
actionStyle: { actionStyle: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
// 取消按钮文字 // 取消按钮文字
actiontext: { actionText: {
type: String, type: String,
default: '搜索' default: "搜索"
}, },
// 输入框内容对齐方式，可选值为 left|center|right // 输入框内容对齐方式，可选值为 left|center|right
inputAlign: { inputAlign: {
type: String, type: String,
default: 'left' default: "left"
}, },
// 是否启用输入框 // 是否启用输入框
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 开启showAction时，是否在input获取焦点时才显示 // 开启showAction时，是否在input获取焦点时才显示
animation: { animation: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 边框颜色，只要配置了颜色，才会有边框 // 边框颜色，只要配置了颜色，才会有边框
borderColor: { borderColor: {
type: String, type: String,
default: 'none' default: "none"
}, },
// 输入框的初始化内容 // 输入框的初始化内容
value: { value: {
type: String, type: String,
default: '' default: ""
}, },
// 搜索框高度，单位rpx // 搜索框高度，单位rpx
height: { height: {
type: [Number, String], type: [Number, String],
default: 64 default: 64
} }
}, },
data() { data() {
return { return {
keyword: '', keyword: "",
showClear: false, // 是否显示右边的清除图标 showClear: false, // 是否显示右边的清除图标
show: false, show: false,
// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件 // 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
focused: this.focus, focused: this.focus
// 绑定输入框的值 // 绑定输入框的值
// inputValue: this.value // inputValue: this.value
} };
}, },
watch: { watch: {
keyword(nVal) { keyword(nVal) {
// 双向绑定值，让v-model绑定的值双向变化 // 双向绑定值，让v-model绑定的值双向变化
this.$emit('input', nVal) this.$emit("input", nVal);
// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择 // 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
this.$emit('change', nVal) this.$emit("change", nVal);
}, },
value: { value: {
immediate: true, immediate: true,
handler(nVal) { handler(nVal) {
this.keyword = nVal; this.keyword = nVal;
} }
} }
}, },
computed: { computed: {
showActionBtn() { showActionBtn() {
if (!this.animation && this.showAction) return true; if (!this.animation && this.showAction) return true;
else return false; else return false;
}, },
// 样式，根据用户传入的颜色值生成，如果不传入，默认为none // 样式，根据用户传入的颜色值生成，如果不传入，默认为none
borderStyle() { borderStyle() {
if(this.borderColor) return `1px solid ${this.borderColor}`; if (this.borderColor) return `1px solid ${this.borderColor}`;
else return 'none'; else return "none";
} }
}, },
methods: { methods: {
// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化 // 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
inputChange(e) { inputChange(e) {
this.keyword = e.detail.value; this.keyword = e.detail.value;
}, },
// 清空输入 // 清空输入
// 也可以作为用户通过this.$refs形式调用清空输入框内容 // 也可以作为用户通过this.$refs形式调用清空输入框内容
clear() { clear() {
this.keyword = ''; this.keyword = "";
}, },
// 确定搜索 // 确定搜索
search() { search() {
this.$emit('search', this.keyword); this.$emit("search", this.keyword);
// 收起键盘 // 收起键盘
uni.hideKeyboard(); uni.hideKeyboard();
}, },
// 点击右边自定义按钮的事件 // 点击右边自定义按钮的事件
custom() { custom() {
this.$emit('custom', this.keyword); this.$emit("custom", this.keyword);
// 收起键盘 // 收起键盘
uni.hideKeyboard(); uni.hideKeyboard();
}, },
// 获取焦点 // 获取焦点
getFocus() { getFocus() {
this.focused = true; this.focused = true;
// 开启右侧搜索按钮展开的动画效果 // 开启右侧搜索按钮展开的动画效果
if (this.animation && this.showAction) this.show = true; if (this.animation && this.showAction) this.show = true;
}, },
// 失去焦点 // 失去焦点
blur() { blur() {
this.focused = false; this.focused = false;
this.show = false; this.show = false;
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-search { .u-search {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
} }
.u-content { .u-content {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 18rpx; padding: 0 18rpx;
flex: 1; flex: 1;
} }
.u-clear-icon {
display: flex;
align-items: center;
}
.u-input { .u-clear-icon {
flex: 1; display: flex;
font-size: 28rpx; align-items: center;
line-height: 1; }
margin: 0 10rpx;
color: $u-tips-color;
}
.u-close-wrap { .u-input {
width: 34rpx; flex: 1;
height: 34rpx; font-size: 28rpx;
display: flex; line-height: 1;
align-items: center; margin: 0 10rpx;
justify-content: center; color: $u-tips-color;
background-color: rgb(200, 203, 204); }
border-radius: 50%;
}
.u-placeholder-class { .u-close-wrap {
color: $u-tips-color; width: 34rpx;
} height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(200, 203, 204);
border-radius: 50%;
}
.u-action { .u-placeholder-class {
font-size: 28rpx; color: $u-tips-color;
color: $u-main-color; }
width: 0;
overflow: hidden; .u-action {
transition: all 0.3s; font-size: 28rpx;
white-space: nowrap; color: $u-main-color;
text-align: center; width: 0;
} overflow: hidden;
transition: all 0.3s;
.u-action-active { white-space: nowrap;
width: 80rpx; text-align: center;
margin-left: 10rpx; }
}
.u-action-active {
width: 80rpx;
margin-left: 10rpx;
}
</style> </style>
uview/index.js
View file @ 2bfded3d
// 引入全局mixin // 引入全局mixin
import mixin from '@/uview/libs/mixin/mixin.js' import mixin from '@/uview/libs/mixin/mixin.js'
import wxshare from '@/uview/libs/mixin/wxshare.js'
// 全局挂载引入http相关请求拦截插件 // 全局挂载引入http相关请求拦截插件
import http from "@/uview/libs/request"; import http from '@/uview/libs/request'
function wranning(str) { function wranning (str) {
// 开发环境进行信息输出,主要是一些报错信息 // 开发环境进行信息输出,主要是一些报错信息
// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见: // 这个环境的来由是在程序编写时候,点击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 // 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') { if (process.env.NODE_ENV === 'development') {
console.warn(str); console.warn(str)
} }
} }
// 尝试判断在根目录的/store中是否有$u.mixin.js，此文件uView默认为需要挂在到全局的vuex的state变量 // 尝试判断在根目录的/store中是否有$u.mixin.js，此文件uView默认为需要挂在到全局的vuex的state变量
...@@ -23,107 +23,89 @@ function wranning(str) { ...@@ -23,107 +23,89 @@ function wranning(str) {
// } // }
// post类型对象参数转为get类型url参数 // post类型对象参数转为get类型url参数
import { import { queryParams } from '@/uview/libs/function/queryParams.js'
queryParams
} from '@/uview/libs/function/queryParams.js';
// 路由封装 // 路由封装
import { import { route } from '@/uview/libs/function/route.js'
route
} from '@/uview/libs/function/route.js';
// 时间格式化 // 时间格式化
import { import { timeFormat } from '@/uview/libs/function/timeFormat.js'
timeFormat
} from '@/uview/libs/function/timeFormat.js';
// 时间戳格式化,返回多久之前 // 时间戳格式化,返回多久之前
import { import { timeFrom } from '@/uview/libs/function/timeFrom.js'
timeFrom
} from '@/uview/libs/function/timeFrom.js';
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制 // 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
import { import {
colorGradient, colorGradient,
hexToRgb, hexToRgb,
rgbToHex rgbToHex
} from '@/uview/libs/function/colorGradient.js'; } from '@/uview/libs/function/colorGradient.js'
// 生成全局唯一guid字符串 // 生成全局唯一guid字符串
import { import { guid } from '@/uview/libs/function/guid.js'
guid
} from '@/uview/libs/function/guid.js';
// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份 // 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
import { import { color } from '@/uview/libs/function/color.js'
color
} from '@/uview/libs/function/color.js';
// 根据type获取图标名称 // 根据type获取图标名称
import { import { type2icon } from '@/uview/libs/function/type2icon.js'
type2icon
} from '@/uview/libs/function/type2icon.js';
// 打乱数组的顺序 // 打乱数组的顺序
import { import { randomArray } from '@/uview/libs/function/randomArray.js'
randomArray
} from "@/uview/libs/function/randomArray.js";
// 规则检验 // 规则检验
import test from "@/uview/libs/function/test.js"; import test from '@/uview/libs/function/test.js'
// 随机数 // 随机数
import { import { random } from '@/uview/libs/function/random.js'
random
} from "@/uview/libs/function/random.js";
// 去除空格 // 去除空格
import { import { trim } from '@/uview/libs/function/trim.js'
trim
} from "@/uview/libs/function/trim.js";
// toast提示，对uni.showToast的封装 // toast提示，对uni.showToast的封装
import { import { toast } from '@/uview/libs/function/toast.js'
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配置文件 // 各个需要fixed的地方的z-index配置文件
import zIndex from "@/uview/libs/config/zIndex.js"; import zIndex from '@/uview/libs/config/zIndex.js'
const $u = { const $u = {
queryParams, queryParams,
route, route,
timeFormat, timeFormat,
date: timeFormat, // 另名date date: timeFormat, // 另名date
timeFrom, timeFrom,
colorGradient, colorGradient,
guid, guid,
color, color,
type2icon, type2icon,
randomArray, randomArray,
wranning, wranning,
get: http.get, get: http.get,
post: http.post, post: http.post,
hexToRgb, hexToRgb,
rgbToHex, rgbToHex,
test, test,
random, random,
trim, trim,
type: ['primary', 'success', 'error', 'warning', 'info'], type: ['primary', 'success', 'error', 'warning', 'info'],
http, http,
toast, toast,
config, // uView配置信息相关，比如版本号 config, // uView配置信息相关，比如版本号
zIndex, zIndex
} }
const install = (Vue) => { const install = Vue => {
Vue.mixin(mixin); Vue.mixin(mixin)
// Vue.mixin(vuexStore); console.log(Vue.prototype.openShare)
// 时间格式化，同时两个名称，date和timeFormat if (Vue.prototype.openShare) {
Vue.filter('timeFormat', (timestamp, format) => { Vue.mixin(wxshare)
return timeFormat(timestamp, format); }
}) // Vue.mixin(vuexStore);
Vue.filter('date', (timestamp, format) => { // 时间格式化，同时两个名称，date和timeFormat
return timeFormat(timestamp, format); Vue.filter('timeFormat', (timestamp, format) => {
}) return timeFormat(timestamp, format)
// 将多久以前的方法，注入到全局过滤器 })
Vue.filter('timeFrom', (timestamp, format) => { Vue.filter('date', (timestamp, format) => {
return timeFrom(timestamp, format); return timeFormat(timestamp, format)
}) })
Vue.prototype.$u = $u; // 将多久以前的方法，注入到全局过滤器
Vue.filter('timeFrom', (timestamp, format) => {
return timeFrom(timestamp, format)
})
Vue.prototype.$u = $u
} }
export default { export default {
install install
} }
uview/libs/mixin/mixin.js
View file @ 2bfded3d
module.exports = { module.exports = {
data() { data () {
return {} return {}
}, },
onLoad() { methods: {
// getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出 // 查询节点信息
this.$u.getRect = this.$uGetRect; $uGetRect (selector, all) {
return new Promise(resolve => {
// 设置默认的转发参数 uni
this.$u.mpShare = { .createSelectorQuery()
title: '', // 默认为小程序名称 .in(this)
path: '', // 默认为当前页面路径 [all ? 'selectAll' : 'select'](selector)
imageUrl: '' // 默认为当前页面的截图 .boundingClientRect(rect => {
}; if (all && Array.isArray(rect) && rect.length) {
}, resolve(rect)
onShareAppMessage() { }
return this.$u.mpShare; if (!all && rect) {
}, resolve(rect)
methods: { }
// 查询节点信息 })
$uGetRect(selector, all) { .exec()
return new Promise(resolve => { })
uni.createSelectorQuery() }
.in(this)[all ? 'selectAll' : 'select'](selector) },
.boundingClientRect(rect => { onReachBottom () {
if (all && Array.isArray(rect) && rect.length) { uni.$emit('uOnReachBottom')
resolve(rect); }
}
if (!all && rect) {
resolve(rect);
}
})
.exec();
});
},
},
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