Skip to content

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

解决冲突

parent f21fbd7c
Show whitespace changes
Inline Side-by-side
Showing with 463 additions and 251 deletions
.gitignore
View file @ 240accf9
/unpackage/dist/*
/node_modules/*
/.idea/*
uview/components/u-badge/u-badge.vue
View file @ 240accf9
......@@ -12,6 +12,23 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
* @tutorial https://www.uviewui.com/components/badge.html
* @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
* @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
* @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
* @property {String Number} overflow-count 展示封顶的数字值（默认99）
* @property {String} type 使用预设的背景颜色（默认error）
* @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
* @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
* @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
* @property {String} color 字体颜色（默认#ffffff）
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
* @example <u-badge type="error" count="7"></u-badge>
*/
export default {
props: {
// primary,warning,success,error,info
......
uview/components/u-count-down/u-count-down.vue
View file @ 240accf9
......@@ -52,6 +52,28 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
* @tutorial https://www.uviewui.com/components/countDown.html
* @property {String Number} timestamp 倒计时，单位为秒
* @property {Boolean} autopaly 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
* @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
* @property {String Number} separator-size 分隔符的字体大小，单位rpx（默认30）
* @property {String} separator-color 分隔符的颜色（默认#303133）
* @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
* @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
* @property {String} border-color 数字边框的颜色（默认#303133）
* @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
* @property {String} color 倒计时数字的颜色（默认#303133）
* @property {String} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
* @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
* @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）
* @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true）
* @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true）
* @event {Function} end 倒计时结束
* @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
*/
export default {
props: {
// 倒计时的时间，秒为单位
......
uview/components/u-count-to/u-count-to.vue
View file @ 240accf9
......@@ -12,6 +12,22 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
* @tutorial https://www.uviewui.com/components/countTo.html
* @property {String Number} start-val 开始值
* @property {String Number} end-val 结束值
* @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000）
* @property {Boolean} autoplay 是否自动开始滚动（默认true）
* @property {String Number} decimals 要显示的小数位数，见官网说明（默认0）
* @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
* @property {String} separator 千位分隔符，见官网说明
* @property {String} color 字体颜色（默认#303133）
* @property {String Number} font-size 字体大小，单位rpx（默认50）
* @event {Function} end 数值滚动到目标值时触发
* @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
*/
export default {
props: {
// 开始的数值，默认从0增长到某一个数
......
uview/components/u-divider/u-divider.vue
View file @ 240accf9
......@@ -15,6 +15,20 @@
</template>
<script>
/**
* alertTips 提示
* @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
* @tutorial https://www.uviewui.com/components/divider.html
* @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
* @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
* @property {String} color 文字颜色（默认#909399）
* @property {String Number} fontSize 字体大小，单位rpx（默认26）
* @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
* @property {String Number} height 整个divider的高度，单位rpx（默认40）
* @property {String} type 将线条设置主题色（默认primary）
* @event {Function} click divider组件被点击时触发
* @example <u-divider color="#fa3534">长河落日圆</u-divider>
*/
export default {
props: {
// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
......
uview/components/u-gap/u-gap.vue
View file @ 240accf9
<!--
* @Desc: --- ----
* @Date: 2020-04-22 12:29:22
* @LastEditors: 王
* @LastEditTime: 2020-04-22 18:31:36
-->
<template>
<view class="u-gap" :style="[gapStyle]"></view>
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
* @tutorial https://www.uviewui.com/components/gap.html
* @property {String} bg-color 背景颜色（默认#f3f4f6）
* @property {String Number} height 分割槽高度，单位rpx（默认30）
* @example <u-gap height="80" bg-color="#bbb"></u-gap>
*/
export default {
props: {
bgColor: {
type: String,
default: "#f3f4f6" // 也即：rgb(243, 244, 246)
default: '#f3f4f6' // 也即：rgb(243, 244, 246)
},
// 高度
height: {
......@@ -29,14 +31,13 @@ export default {
gapStyle() {
return {
backgroundColor: this.bgColor,
height: this.height + "rpx",
marginTop: this.margin + "rpx",
marginBttom: this.margin + "rpx"
height: this.height + 'rpx',
marginTop: this.margin + 'rpx',
marginBttom: this.margin + 'rpx'
};
}
}
};
</script>
<style>
</style>
<style></style>
uview/components/u-grid/u-grid.vue
View file @ 240accf9
......@@ -3,6 +3,16 @@
</template>
<script>
/**
* alertTips 提示
* @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
* @tutorial https://www.uviewui.com/components/grid.html
* @property {String Number} col 宫格的列数（默认3）
* @property {Boolean} border 是否显示宫格的边框（默认true）
* @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
* @event {Function} click 点击宫格触发
* @example <u-grid :col="3" @click="click"></u-grid>
*/
export default {
props: {
// 分成几列
......
uview/components/u-lazy-load/u-lazy-load.vue
View file @ 240accf9
......@@ -16,6 +16,26 @@
</template>
<script>
/**
* alertTips 提示
* @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
* @tutorial https://www.uviewui.com/components/lazyLoad.html
* @property {String Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片
* @property {String} image 图片路径
* @property {String} loading-img 预加载时的占位图
* @property {String} error-img 图片加载出错时的占位图
* @property {String} threshold 触发加载时的位置，见上方说明，单位 rpx（默认300）
* @property {String Number} duration 图片加载成功时，淡入淡出时间，单位ms（默认）
* @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
* @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
* @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
* @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
* @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
* @event {Function} click 点击图片时触发
* @event {Function} load 图片加载成功时触发
* @event {Function} error 图片加载失败时触发
* @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
*/
// observer最终赋值的是个对象，不能放到data中，vue会报错（浏览器），也不能在用到的地方let定义，某些安卓也报错……
let observer = {};
export default {
......
uview/components/u-loadmore/u-loadmore.vue
View file @ 240accf9
......@@ -16,6 +16,22 @@
</template>
<script>
/**
* alertTips 提示
* @description 此组件一般用于标识页面底部加载数据时的状态。
* @tutorial https://www.uviewui.com/components/loadMore.html
* @property {String} status 组件状态（默认loadmore）
* @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
* @property {Boolean} icon 加载中时是否显示图标（默认true）
* @property {String} icon-type 加载中时的图标类型（默认circle）
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
* @property {String} color 字体颜色（默认#606266）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Object} load-text 自定义显示的文字，见上方说明示例
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
*/
export default {
name: "loadMore",
props: {
......
uview/components/u-message-input/u-message-input.vue
View file @ 240accf9
......@@ -33,6 +33,24 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
* @tutorial https://www.uviewui.com/components/messageInput.html
* @property {String Number} maxlength 输入字符个数（默认4）
* @property {Boolean} dot-fill 是否用圆点填充（默认false）
* @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
* @property {String Number} value 预置值
* @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
* @property {Boolean} focus 是否自动获取焦点（默认false）
* @property {Boolean} bold 字体和输入横线是否加粗（默认true）
* @property {String Number} font-size 字体大小，单位rpx（默认60）
* @property {String} active-color 当前激活输入框的样式（默认#2979ff）
* @property {String} focus 非激活输入框的样式，文字颜色同此值（默认#606266）
* @event {Function} change 输入内容发生改变时触发，具体见官网说明
* @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
* @example <u-message-input mode="bottomLine"></u-message-input>
*/
export default {
props: {
// 最大输入长度
......
uview/components/u-navbar/u-navbar.vue
View file @ 240accf9
......@@ -27,6 +27,28 @@
</template>
<script>
/**
* alertTips 提示
* @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
* @tutorial https://www.uviewui.com/components/navbar.html
* @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
* @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
* @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
* @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
* @property {String} back-text 返回图标右边的辅助提示文字
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
* @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
* @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
* @property {String} title-color 标题的颜色（默认#606266）
* @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
* @property {String Number} z-index 固定在顶部时的z-index值（默认980）
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
* @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
* @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
* @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
* @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
*/
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
......
uview/components/u-notice-bar/u-notice-bar.vue
View file @ 240accf9
......@@ -45,6 +45,33 @@
</view>
</template>
<script>
/**
* alertTips 提示
* @description 该组件用于滚动通告场景，有多种模式可供选择
* @tutorial https://www.uviewui.com/components/noticeBar.html
* @property {Array} list 滚动内容，数组形式，见上方说明
* @property {String} type 显示的主题（默认warning）
* @property {Boolean} volume-icon 是否显示小喇叭图标（默认true）
* @property {Boolean} more-icon 是否显示右边的向右箭头（默认false）
* @property {Boolean} close-icon 是否显示关闭图标（默认false）
* @property {Boolean} autoplay 是否自动播放（默认true）
* @property {String} color 文字颜色
* @property {String Number} bg-color 背景颜色
* @property {String} mode 滚动模式（默认horizontal）
* @property {Boolean} show 是否显示（默认true）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
* @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
* @property {String} play-state 播放状态，paly - 播放，paused - 暂停（默认paly）
* @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true）
* @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
* @event {Function} close 点击右侧关闭图标触发
* @event {Function} getMore 点击右侧向右图标触发
* @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
* @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
*/
export default {
props: {
// 显示的内容，数组
......
uview/components/u-search/u-search.vue
View file @ 240accf9
......@@ -9,9 +9,7 @@
height: height + 'rpx'
}"
>
<view class="u-icon-wrap">
<u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon>
</view>
<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"
......@@ -33,32 +31,50 @@
<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>
/**
* alertTips 提示
* @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
* @tutorial https://www.uviewui.com/components/search.html
* @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
* @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
* @property {String} border-color 边框颜色，配置了颜色，才会有边框
* @property {String} placeholder 占位文字内容（默认“请输入关键字”）
* @property {Boolean} clearabled 是否启用清除控件（默认true）
* @property {Boolean} focus 是否自动获得焦点（默认false）
* @property {Boolean} show-action 是否显示右侧控件（默认true）
* @property {String} action-text 右侧控件文字（默认“搜索”）
* @property {Object} action-style 右侧控件的样式，对象形式
* @property {String} input-align 输入框内容水平对齐方式（默认left）
* @property {Boolean} disabled 是否启用输入框（默认false）
* @property {Boolean} animation 是否开启动画，见上方说明（默认false）
* @property {String} value 输入框初始值
* @property {String Number} height 输入框高度，单位rpx（默认64）
* @event {Function} change 输入框内容发生变化时触发
* @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
* @event {Function} custom 用户点击右侧控件时触发
* @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
*/
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: {
......@@ -85,12 +101,12 @@ export default {
// 取消按钮文字
actionText: {
type: String,
default: "搜索"
default: '搜索'
},
// 输入框内容对齐方式，可选值为 left|center|right
inputAlign: {
type: String,
default: "left"
default: 'left'
},
// 是否启用输入框
disabled: {
......@@ -105,12 +121,12 @@ export default {
// 边框颜色，只要配置了颜色，才会有边框
borderColor: {
type: String,
default: "none"
default: 'none'
},
// 输入框的初始化内容
value: {
type: String,
default: ""
default: ''
},
// 搜索框高度，单位rpx
height: {
......@@ -120,7 +136,7 @@ export default {
},
data() {
return {
keyword: "",
keyword: '',
showClear: false, // 是否显示右边的清除图标
show: false,
// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
......@@ -132,9 +148,9 @@ export default {
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,
......@@ -151,7 +167,7 @@ export default {
// 样式，根据用户传入的颜色值生成，如果不传入，默认为none
borderStyle() {
if (this.borderColor) return `1px solid ${this.borderColor}`;
else return "none";
else return 'none';
}
},
methods: {
......@@ -162,17 +178,17 @@ export default {
// 清空输入
// 也可以作为用户通过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();
},
......
uview/components/u-section/u-section.vue
View file @ 240accf9
......@@ -19,6 +19,19 @@
</template>
<script>
/**
* alertTips 提示
* @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
* @tutorial https://www.uviewui.com/components/section.html
* @property {String} title 左边主标题
* @property {String} sub-title 右边副标题（默认更多）
* @property {Boolean} right 是否显示右边的内容（默认true）
* @property {String Number} font-size 主标题的字体大小（默认28）
* @property {Boolean} bold 主标题是否加粗（默认true）
* @property {String} color 主标题颜色（默认#303133）
* @event {Function} click 组件右侧的内容被点击时触发，用于跳转"更多"
* @example <u-section title="今日热门" :right="false"></u-section>
*/
export default {
props: {
// 标题信息
......
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