1. 修复1.1.3在uni.scss中引入基础样式导致微信小程序打包变大的问题

2. 给upload上传组件添加"on-list-change"、"reUplad"、"clear"事件和方法
3. 将gap间隔槽默认背景改为透明色"transparent"
4. 由于uni.scss中引入的样式会被注入到每一个页面,导致最终包变大,uView在1.1.4版本对此作出变更,
5. 将基础方式放到main.js中,由于scss变量只能在unis.scss引入,故将变量部分放到uni.scss,本次升级需要修改两行代码,详见说明
6. 文档增加countDown倒计时组件获取当前剩余时间的事件和说明
parent 6948b1ff
......@@ -2,7 +2,7 @@
export default {
// 此处globalData为了演示其作用,不是uView框架的一部分
globalData: {
username: '11'
username: '白居易'
},
onLaunch() {
// 1.1.0版本之前关于http拦截器代码,已平滑移动到/common/http.interceptor.js中
......@@ -13,7 +13,7 @@
}
</script>
<style>
<style lang="scss">
/*每个页面公共css */
/* H5的时候,隐藏滚动条 */
/* #ifdef H5 */
......
......@@ -16,6 +16,8 @@ Vue.prototype.vuePrototype = '枣红'
// 引入全局uView
import uView from '@/uview'
import "@/uview/index.scss";
Vue.use(uView)
// 此处为演示vuex使用,非uView的功能部分
......
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsA/slider/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
}]
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsA/slider/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......
......@@ -61,7 +61,5 @@
</script>
<style lang="scss" scoped>
.wrap {
padding: 24rpx;
}
.u-demo {}
</style>
......@@ -15,12 +15,14 @@
</view>
</view>
<u-upload ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
:show-progress="showProgress" :deletable="deletable" :max-count="maxCount">
:show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange">
<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
</view>
</u-upload>
<u-button style="margin-top: 20rpx;" @click="upload">上传</u-button>
<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
<u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button>
</view>
</view>
<view class="u-config-wrap">
......@@ -76,6 +78,12 @@
this.uUpload = this.$refs.uUpload;
},
methods: {
reUpload() {
this.$refs.uUpload.reUpload();
},
clear() {
this.$refs.uUpload.clear();
},
autoUploadChange(index) {
this.autoUpload = index == 0 ? true : false;
},
......@@ -127,6 +135,9 @@
},
onUploaded(lists) {
console.log('onUploaded', lists);
},
onListChange(lists) {
console.log('onListChange', lists);
}
}
}
......
......@@ -5,7 +5,7 @@
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-count-down class="count-down-demo" :timestamp="timestamp" :separator="separator" :showBorder="showBorder"
:separator-color="separatorColor" :showDays="showDays" :fontSize="fontSize"
:separator-color="separatorColor" :showDays="showDays" :fontSize="fontSize" @change="change" ref="uCountDown"
:border-color="borderColor" :color="color" @end="end" bg-color="rgb(250, 250, 250)"></u-count-down>
</view>
</view>
......@@ -82,6 +82,12 @@ export default {
title: '倒计时结束',
type: 'warning'
})
},
change(timestamp) {
// console.log(timestamp);
},
getSeconds() {
// console.log(this.$refs.uCountDown.seconds);
}
}
};
......
......@@ -3,4 +3,4 @@
* 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
* uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
*/
@import '@/uview/index.scss';
@import '@/uview/theme.scss';
\ No newline at end of file
......@@ -72,6 +72,7 @@
* @property {Boolean} show-minutes 是否显示倒计时的"分"部分(默认true)
* @property {Boolean} show-seconds 是否显示倒计时的"秒"部分(默认true)
* @event {Function} end 倒计时结束
* @event {Function} change 每秒触发一次,回调为当前剩余的倒计秒数
* @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
*/
export default {
......@@ -167,7 +168,8 @@ export default {
h: '00', // 小时的默认值
i: '00', // 分钟的默认值
s: '00', // 秒的默认值
timer: null // 定时器
timer: null ,// 定时器
seconds: 0, // 记录不停倒计过程中变化的秒数
};
},
computed: {
......@@ -204,14 +206,16 @@ export default {
// 倒计时
start() {
if (this.timestamp <= 0) return;
let seconds = Number(this.timestamp);
this.formatTime(seconds);
this.seconds = Number(this.timestamp);
this.formatTime(this.seconds);
this.timer = setInterval(() => {
seconds--;
if (seconds < 0) {
this.seconds--;
// 发出change事件
this.$emit('change', this.seconds);
if (this.seconds < 0) {
return this.end();
}
this.formatTime(seconds);
this.formatTime(this.seconds);
}, 1000);
},
// 格式化时间
......
......@@ -18,7 +18,7 @@ export default {
props: {
bgColor: {
type: String,
default: '#f3f4f6' // 也即:rgb(243, 244, 246)
default: 'transparent ' // 背景透明
},
// 高度
height: {
......
......@@ -5,7 +5,7 @@
</view>
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
:class="{ 'u-show-more': showMore }"
:style="[shadowStyle]"
:style="[innerShadowStyle]"
>
<text class="u-readmore-btn" :style="{
fontSize: fontSize + 'rpx',
......@@ -84,6 +84,11 @@
computed: {
paramsChange() {
return `${this.toggle}-${this.showHeight}`;
},
// 展开后无需阴影,收起时才需要阴影样式
innerShadowStyle() {
if(this.showMore) return {};
else return this.shadowStyle
}
},
data() {
......
......@@ -201,6 +201,16 @@
}
},
methods: {
// 清除列表
clear() {
this.lists = [];
// 如果是清空形式的话,发出"on-list-change"事件
this.$emit('on-list-change', this.lists);
},
// 重新上传队列中上传失败的所有文件
reUpload() {
this.uploadFile();
},
// 选择图片
selectFile() {
if (this.disabled) return;
......@@ -211,7 +221,7 @@
const newMaxCount = maxCount - lists.length;
// 设置为只选择图片的时候使用 chooseImage 来实现
chooseFile = new Promise((resolve, reject) => {
wx.chooseImage({
uni.chooseImage({
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
sourceType: sourceType,
sizeType,
......@@ -240,6 +250,8 @@
progress: 0,
error: false
});
// 列表发生改变,发出事件,第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
})
// 每次图片选择完,抛出一个事件,并将当前内部选择的图片数组抛出去
......@@ -351,6 +363,8 @@
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.showToast('移除成功');
// 列表发生改变,发出事件
this.$emit('on-list-change', this.lists);
}
}
});
......
......@@ -41,6 +41,8 @@
type: String,
default: '重新获取'
},
// 是否在H5中,即使刷新也保存当前的倒计时
// 暂不处理,看需求而定
},
data() {
return {
......
/* 颜色定义文件 */
@import './libs/css/color.scss';
// 基础css定义文件
@import './libs/css/common.scss';
// 引入公共基础类
@import "@/uview/libs/css/common.scss";
@import "@/uview/libs/css/color.scss";
page {
color: $u-main-color;
......
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
.u-type-primary-light {
color: $u-type-primary-light!important;
}
......
......@@ -8,6 +8,7 @@
.u-font-md {
font-size: 28rpx;
color: $u-content-color;
}
.u-font-lg {
......@@ -99,8 +100,9 @@
}
}
// 定义内外边距
// 定义内外边距,历遍1-80
@for $i from 1 through 80 {
// 只要双数和能被5除尽的数
@if $i % 2 == 0 or $i % 5 == 0 {
// 得出:u-margin-30或者u-m-30
.u-margin-#{$i}, .u-m-#{$i} {
......@@ -112,29 +114,27 @@
padding: $i + rpx;
}
// 完整版,结果如:u-margin-left-30
@each $dirction in left, top, right, botttom {
@each $short, $long in l left, t top, r right, b botttom {
// 缩写版,结果如: u-m-l-30
// 定义外边距
.u-margin-#{$dirction}-#{$i} {
margin: $i + rpx;
.u-m-#{$short}-#{$i} {
margin-#{$long}: $i + rpx;
}
// 定义内边距
.u-padding-#{$dirction}-#{$i} {
padding: $i + rpx;
}
.u-p-#{$short}-#{$i} {
padding-#{$long}: $i + rpx;
}
// 缩写版,结果如: u-m-l-30
@each $dirction in l, t, r, b {
// 完整版,结果如:u-margin-left-30
// 定义外边距
.u-m-#{$dirction}-#{$i} {
margin: $i + rpx;
.u-margin-#{$long}-#{$i} {
margin-#{$long}: $i + rpx;
}
// 定义内边距
.u-p-#{$dirction}-#{$i} {
padding: $i + rpx;
.u-padding-#{$long}-#{$i} {
padding-#{$long}: $i + rpx;
}
}
}
......
// 此文件为uView的主题变量,这些变量目前只能通过uni.scss引入才有效,另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中,造成微信程序包太大,
// 故uni.scss只建议放scss变量名相关样式,其他的样式可以通过main.js或者App.vue引入
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;
$u-type-warning: #ff9900;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;
$u-type-warning-light: #fdf6ec;
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
$u-type-error: #fa3534;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;
$u-type-error-light: #fef0f0;
$u-type-info: #909399;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;
$u-type-info-light: #f4f4f5;
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