Skip to content

H
hello-uniapp

weixin_54239399 / hello-uniapp
与 Fork 源项目一致

从无法访问的项目Fork

通知 4
Star 1
Fork 0
H
hello-uniapp

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 d1267e29 编写于 作者: inkwalk's avatar inkwalk
浏览文件
操作

Merge branch 'dev' for uni-ui component support for pc

上级 8b5ae6f8 6129cb9d
隐藏空白更改
内联 并排
Showing with 767 addition and 360 deletion
components/uni-badge/uni-badge.vue
浏览文件 @ d1267e29
......@@ -84,6 +84,9 @@
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
padding: 0px 6px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-badge--inverted {
......
components/uni-card/uni-card.vue
浏览文件 @ d1267e29
......@@ -122,6 +122,9 @@
flex-direction: column;
border-radius: 5px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-border {
......
components/uni-col/uni-col.vue
浏览文件 @ d1267e29
<template>
<view :class="['uni-col', sizeClassList, pointClassList]" :style="{
<!-- #ifndef APP-NVUE -->
<view :class="['uni-col', sizeClass, pointClassList]" :style="{
paddingLeft:`${Number(gutter)}rpx`,
paddingRight:`${Number(gutter)}rpx`,
}">
<slot></slot>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<!-- 在nvue上，类名样式不生效，换为style -->
<!-- 设置right正值失效，设置 left 负值 -->
<view :class="['uni-col']" :style="{
paddingLeft:`${Number(gutter)}rpx`,
paddingRight:`${Number(gutter)}rpx`,
width:`${nvueWidth}rpx`,
position:'relative',
marginLeft:`${marginLeft}rpx`,
left:`${right === 0 ? left : -right}rpx`
}">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
......@@ -64,7 +80,13 @@
},
data() {
return {
gutter: 0
gutter: 0,
sizeClass: '',
parentWidth: 0,
nvueWidth: 0,
marginLeft: 0,
right: 0,
left: 0
}
},
created() {
......@@ -76,29 +98,34 @@
}
this.updateGutter(parent.gutter)
parent.$watch('gutter', (gutter) => {
this.updateGutter(gutter)
})
// #ifdef APP-NVUE
this.updateNvueWidth(parent.width)
parent.$watch('width', (width) => {
this.updateNvueWidth(width)
})
// #endif
},
computed: {
sizeClassList() {
let classList = [];
['span', 'offset', 'pull', 'push'].forEach(size => {
const curSize = this[size];
if ((curSize || curSize === 0) && curSize !== -1) {
classList.push(
size === 'span' ?
`${ComponentClass}-${curSize}` :
`${ComponentClass}-${size}-${curSize}`
)
}
});
// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
return classList.join(' ');
sizeList() {
let {
span,
offset,
pull,
push
} = this;
return {
span,
offset,
pull,
push
}
},
// #ifndef APP-NVUE
pointClassList() {
let classList = [];
......@@ -120,6 +147,7 @@
// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
return classList.join(' ');
}
// #endif
},
methods: {
updateGutter(parentGutter) {
......@@ -127,31 +155,80 @@
if (!isNaN(parentGutter)) {
this.gutter = parentGutter / 2
}
},
// #ifdef APP-NVUE
updateNvueWidth(width) {
// 用于在nvue端，span，offset，pull，push的计算
this.parentWidth = width;
['span', 'offset', 'pull', 'push'].forEach(size => {
const curSize = this[size];
if ((curSize || curSize === 0) && curSize !== -1) {
let RPX = 1 / 24 * curSize * width
RPX = Number(RPX);
switch (size) {
case 'span':
this.nvueWidth = RPX
break;
case 'offset':
this.marginLeft = RPX
break;
case 'pull':
this.right = RPX
break;
case 'push':
this.left = RPX
break;
}
}
});
}
// #endif
},
watch: {
sizeList: {
immediate: true,
handler(newVal) {
// #ifndef APP-NVUE
let classList = [];
for (let size in newVal) {
const curSize = newVal[size];
if ((curSize || curSize === 0) && curSize !== -1) {
classList.push(
size === 'span' ?
`${ComponentClass}-${curSize}` :
`${ComponentClass}-${size}-${curSize}`
)
}
}
// 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
this.sizeClass = classList.join(' ');
// #endif
// #ifdef APP-NVUE
this.updateNvueWidth(this.parentWidth);
// #endif
}
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
.uni-col {
/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU */
/* float: left; */
/* #endif */
/* #ifndef APP-NVUE */
float: left;
box-sizing: border-box;
/* #endif */
}
.uni-col-0 {
/* #ifndef APP-NVUE */
display: none;
/* #ifdef APP-NVUE */
width: 0;
height: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
display: none;
/* #endif */
}
......@@ -607,16 +684,7 @@
@media screen and (max-width: 767px) {
.uni-col-xs-0 {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
/* #endif */
}
.uni-col-xs-0 {
......@@ -1072,16 +1140,7 @@
@media screen and (min-width: 768px) {
.uni-col-sm-0 {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
/* #endif */
}
.uni-col-sm-0 {
......@@ -1537,16 +1596,7 @@
@media screen and (min-width: 992px) {
.uni-col-md-0 {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
/* #endif */
}
.uni-col-md-0 {
......@@ -2002,16 +2052,7 @@
@media screen and (min-width: 1200px) {
.uni-col-lg-0 {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
/* #endif */
}
.uni-col-lg-0 {
......@@ -2467,16 +2508,7 @@
@media screen and (min-width: 1920px) {
.uni-col-xl-0 {
/* #ifndef APP-NVUE */
display: none;
/* #endif */
/* #ifndef APP-NVUE */
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-width: 0px;
/* #endif */
}
.uni-col-xl-0 {
......@@ -2929,4 +2961,6 @@
left: 100%;
}
}
/* #endif */
</style>
\ No newline at end of file
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ d1267e29
<template>
<view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" class="uni-collapse-cell">
<view class="uni-collapse-cell__title" @click="onClick">
<view :class="{ 'uni-collapse-cell--disabled': disabled}" class="uni-collapse-cell__title" @click="onClick">
<image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
<text class="uni-collapse-cell__title-text">{{ title }}</text>
<!-- #ifdef MP-ALIPAY -->
......@@ -130,6 +130,9 @@
.uni-collapse-cell--disabled {
background-color: #f1f1f1;
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
.uni-collapse-cell--hide {
......@@ -155,6 +158,9 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-collapse-cell__title:active {
......
components/uni-combox/uni-combox.vue
浏览文件 @ d1267e29
......@@ -108,7 +108,7 @@
onBlur() {
setTimeout(() => {
this.showSelector = false
}, 50)
}, 153)
},
onSelectorClick(index) {
this.inputVal = this.filterCandidates[index]
......@@ -202,6 +202,7 @@
text-align: center;
border-bottom: solid 1px #DDDDDD;
margin: 0px 10px;
cursor: pointer;
}
.uni-combox__selector-empty:last-child,
......
components/uni-data-picker/uni-data-picker.vue
浏览文件 @ d1267e29
......@@ -2,22 +2,14 @@
<view class="uni-data-tree">
<view class="uni-data-tree-input" @click="handleInput">
<slot :options="options" :data="inputSelected" :error="errorMessage">
<!-- <view class="input-value">
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
</view> -->
<view v-if="errorMessage" class="input-value">
<text class="error-text">{{errorMessage}}</text>
</view>
<view v-else-if="loading && !isOpened" class="input-value">
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
</view>
<view v-else-if="inputSelected.length" class="input-value">
<view v-for="(item,index) in inputSelected" :key="index" class="input-value-item">
<view class="input-value">
<text v-if="errorMessage" class="error-text">{{errorMessage}}</text>
<uni-load-more v-else-if="loading && !isOpened" class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
<view v-else-if="inputSelected.length" v-for="(item,index) in inputSelected" :key="index" class="input-value-item">
<text>{{item.text}}</text><text v-if="index<inputSelected.length-1" class="input-split-line">/</text>
</view>
</view>
<view v-else class="input-value placeholder">
<text>{{placeholder}}</text>
<text v-else class="placeholder">{{placeholder}}</text>
<view class="input-arrow"></view>
</view>
</slot>
</view>
......@@ -45,7 +37,7 @@
* uni-data-picker
* @description uni-data-picker
* @tutorial https://uniapp.dcloud.net.cn/uniCloud/uni-data-picker
* @property {String} title 弹出窗口标题
* @property {String} popup-title 弹出窗口标题
* @property {Array} localdata 本地数据，参考
* @property {Boolean} preload = [true|false] 是否预加载数据
* @value true 开启预加载数据，点击弹出窗口后显示已加载数据
......@@ -55,9 +47,6 @@
* @value false 关闭分布查询，一次查询出所有数据
* @property {String|DBFieldString} self-field 分布查询当前字段名称
* @property {String|DBFieldString} parent-field 分布查询父字段名称
* @property {Boolean} array2tree = [true|false] 是否查询出树结构数据
* @value true
* @value false
* @property {String|DBCollectionString} collection 表名
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
* @property {String} orderby 排序字段及正序倒叙设置
......@@ -80,6 +69,10 @@
type: String,
default: '请选择'
},
heightMobile: {
type: String,
default: ''
},
options: {
type: [Object, Array],
default () {
......@@ -181,6 +174,9 @@
.uni-data-tree {
position: relative;
font-size: 14px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.error-text {
......@@ -207,7 +203,7 @@
flex-wrap: nowrap;
font-size: 14px;
line-height: 38px;
border: 1px #e5e5e5 solid;
border: 1px solid #e5e5e5;
border-radius: 5px;
padding: 0 5px;
}
......@@ -217,13 +213,24 @@
}
.placeholder {
opacity: .5;
color: grey;
}
.input-split-line {
opacity: .5;
}
.input-arrow {
margin-left: auto;
margin-right: 5px;
width: 7px;
height: 7px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
transform: rotate(-45deg);
transform-origin: 2px;
}
.uni-data-tree-cover {
position: fixed;
left: 0;
......
components/uni-dateformat/uni-dateformat.vue
浏览文件 @ d1267e29
......@@ -6,7 +6,7 @@
/**
* Dateformat 日期格式化
* @description 日期格式化组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
* @property {String} locale 格式化使用的语言
* @value zh 中文
......
components/uni-datetime-picker/uni-datetime-picker.vue
浏览文件 @ d1267e29
......@@ -209,6 +209,8 @@
},
clearTime() {
this.time = ''
this.formItem && this.formItem.setValue(this.time)
this.$emit('change', this.time)
this.tiggerTimePicker()
},
initTime() {
......
components/uni-fab/uni-fab.vue
浏览文件 @ d1267e29
<template>
<view>
<view class="uni-cursor-point">
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
'uni-fab--leftBottom': leftBottom,
'uni-fab--rightBottom': rightBottom,
......@@ -218,6 +218,12 @@
z-index: 10;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-fab--active {
opacity: 1;
}
......@@ -226,6 +232,7 @@
left: 5px;
bottom: 20px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px;
......@@ -235,6 +242,7 @@
left: 5px;
top: 30px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
top: calc(30px + var(--window-top));
/* #endif */
padding: 10px;
......@@ -244,6 +252,7 @@
right: 5px;
bottom: 20px;
/* #ifdef H5 */
right: calc(5px + var(--window-right));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px;
......@@ -253,6 +262,7 @@
right: 5px;
top: 30px;
/* #ifdef H5 */
right: calc(5px + var(--window-right));
top: calc(30px + var(--window-top));
/* #endif */
padding: 10px;
......@@ -276,6 +286,7 @@
left: 15px;
bottom: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
......@@ -284,6 +295,7 @@
left: 15px;
top: 40px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
top: calc(40px + var(--window-top));
/* #endif */
}
......@@ -292,6 +304,7 @@
right: 15px;
bottom: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
......@@ -300,6 +313,7 @@
right: 15px;
top: 40px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
top: calc(40px + var(--window-top));
/* #endif */
}
......
components/uni-forms-item/uni-forms-item.vue
浏览文件 @ d1267e29
......@@ -233,6 +233,7 @@
if (this.name) {
if (this.errMsg) this.errMsg = ''
this.form.formData[this.name] = this.form._getValue(this.name, value)
if (!this.formRules || (typeof(this.formRules) && JSON.stringify(this.formRules) === '{}')) return
this.triggerCheck(this.form._getValue(this.name, value))
}
},
......
components/uni-forms/uni-forms.vue
浏览文件 @ d1267e29
......@@ -113,9 +113,11 @@
this.inputChildrens = []
this.checkboxChildrens = []
this.formRules = []
// this.init(this.rules)
},
mounted() {
this.init(this.rules)
},
methods: {
init(formRules) {
// 判断是否有规则
......@@ -128,7 +130,6 @@
} else {
return
}
// 判断表单存在那些实例
for (let i in this.value) {
const itemData = this.childrens.find(v => v.name === i)
......@@ -422,7 +423,7 @@
* @param {Object} format
*/
type_filter(format) {
return format === 'int' || format === 'double' || format === 'number'
return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp'
}
}
}
......
components/uni-goods-nav/uni-goods-nav.vue
浏览文件 @ d1267e29
......@@ -144,6 +144,9 @@
align-items: center;
flex-direction: column;
margin: 0 10px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-tab__icon {
......@@ -170,6 +173,9 @@
flex: 1;
justify-content: center;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-tab__cart-button-right-text {
......
components/uni-grid-item/uni-grid-item.vue
浏览文件 @ d1267e29
......@@ -72,6 +72,9 @@
height: 100%;
display: flex;
/* #endif */
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-grid-item__box {
......
components/uni-indexed-list/uni-indexed-list-item.vue
浏览文件 @ d1267e29
......@@ -90,6 +90,9 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-indexed-list__item-border {
......
components/uni-indexed-list/uni-indexed-list.vue
浏览文件 @ d1267e29
......@@ -17,7 +17,7 @@
</cell>
</list>
<!-- #endif -->
<view :class="touchmove ? 'uni-indexed-list__menu--active' : ''" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd" class="uni-indexed-list__menu">
<view class="uni-indexed-list__menu" :class="touchmove ? 'uni-indexed-list__menu--active' : ''" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove" @mouseleave.stop="mouseleave">
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
</view>
......@@ -108,8 +108,9 @@
touchmove: false,
touchmoveIndex: -1,
scrollViewId: '',
touchmoveTimeout: '',
loaded: false
touchmovable: true,
loaded: false,
isPC: false
}
},
watch: {
......@@ -121,6 +122,9 @@
}
},
mounted() {
// #ifdef H5
this.isPC = this.IsPC()
// #endif
setTimeout(() => {
this.setList()
}, 50)
......@@ -174,7 +178,7 @@
},
touchStart(e) {
this.touchmove = true
let pageY = e.touches[0].pageY
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
let item = this.lists[index]
if (item) {
......@@ -189,7 +193,7 @@
},
touchMove(e) {
// #ifndef APP-PLUS
let pageY = e.touches[0].pageY
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
if (this.touchmoveIndex === index) {
return false
......@@ -208,6 +212,40 @@
this.touchmove = false
this.touchmoveIndex = -1
},
/**
* 兼容 PC @tian
*/
mousedown(e) {
if (!this.isPC) return
this.touchStart(e)
},
mousemove(e) {
if (!this.isPC) return
this.touchMove(e)
},
mouseleave(e) {
if (!this.isPC) return
this.touchEnd(e)
},
// #ifdef H5
IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
// #endif
onClick(e) {
let {
idx,
......@@ -273,6 +311,9 @@
flex: 1;
align-items: center;
justify-content: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-indexed-list__menu-text {
......
components/uni-list-item/uni-list-item.vue
浏览文件 @ d1267e29
......@@ -247,8 +247,12 @@
font-size: 16px;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-list-item--disabled {
......@@ -360,6 +364,7 @@
/* #endif */
height: 26px;
width: 26px;
marin-right: 10px;
}
.uni-icon-wrapper {
......
components/uni-nav-bar/uni-nav-bar.vue
浏览文件 @ d1267e29
......@@ -149,7 +149,6 @@
position: relative;
background-color: #ffffff;
overflow: hidden;
width: 750rpx;
}
.uni-navbar__content_view {
......@@ -179,6 +178,9 @@
padding: 0 6px;
justify-content: center;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-navbar__header-btns-left {
......
components/uni-notice-bar/uni-notice-bar.vue
浏览文件 @ d1267e29
<template>
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
<!-- #ifdef MP-ALIPAY -->
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" @click="close">
<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" @click="close">
<uni-icons type="closeempty" :color="color" size="12" />
</view>
<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
......@@ -9,7 +9,7 @@
</view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close" type="closeempty" :color="color" size="12" @click="close" />
<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" type="closeempty" :color="color" size="12" @click="close" />
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color" size="14" />
<!-- #endif -->
<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
......@@ -17,7 +17,7 @@
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}" :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
</view>
</view>
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point" @click="clickMore">
<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
<uni-icons type="arrowright" :color="moreColor" size="14" />
</view>
......@@ -279,6 +279,12 @@
margin-bottom: 10px;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-noticebar-close {
margin-right: 5px;
}
......
components/uni-number-box/uni-number-box.vue
浏览文件 @ d1267e29
<template>
<view class="uni-numbox">
<view @click="_calcValue('minus')" class="uni-numbox__minus">
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
</view>
<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
<view @click="_calcValue('plus')" class="uni-numbox__plus">
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
</view>
</view>
......@@ -58,6 +58,7 @@
inputValue(newVal, oldVal) {
if (+newVal !== +oldVal) {
this.$emit("change", newVal);
this.$emit("input", newVal);
}
}
},
......@@ -101,6 +102,7 @@
return scale;
},
_onBlur(event) {
this.$emit('blur', event)
let value = event.detail.value;
if (!value) {
// this.inputValue = 0;
......@@ -113,6 +115,9 @@
value = this.min;
}
this.inputValue = value;
},
_onFocus(event) {
this.$emit('focus', event)
}
}
};
......@@ -130,6 +135,12 @@
width: 120px;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-numbox__value {
background-color: #ffffff;
width: 40px;
......@@ -182,11 +193,14 @@
}
.uni-numbox--text {
font-size: 40rpx;
font-size: 20px;
color: #333;
}
.uni-numbox--disabled {
color: #c0c0c0;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
</style>
\ No newline at end of file
components/uni-pagination/uni-pagination.vue
浏览文件 @ d1267e29
......@@ -145,6 +145,9 @@
border-width: 1px;
border-style: solid;
border-color: #e5e5e5;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-pagination__child-btn {
......@@ -191,6 +194,9 @@
.uni-pagination--disabled {
opacity: 0.3;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.uni-pagination--hover {
......
components/uni-popup-dialog/uni-popup-dialog.vue
浏览文件 @ d1267e29
......@@ -15,7 +15,9 @@
<text class="uni-dialog-button-text uni-button-color">确定</text>
</view>
</view>
<view v-if="popup.isDesktop" class="uni-popup-dialog__close" @click="close">
<span class="uni-popup-dialog__close-icon "></span>
</view>
</view>
</template>
......@@ -150,7 +152,7 @@
<style scoped>
.uni-popup-dialog {
width: 300px;
border-radius: 15px;
border-radius: 5px;
background-color: #fff;
}
......@@ -203,6 +205,9 @@
justify-content: center;
align-items: center;
height: 45px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-border-left {
......@@ -239,4 +244,28 @@
.uni-popup__info {
color: #909399;
}
.uni-popup-dialog__close {
cursor: pointer;
position: absolute;
top: 9px;
right: 17px;
}
.uni-popup-dialog__close-icon {
display: inline-block;
width: 13px;
height: 1px;
background: #909399;
transform: rotate(45deg);
}
.uni-popup-dialog__close-icon::after {
content: '';
display: block;
width: 13px;
height: 1px;
background: #909399;
transform: rotate(-90deg);
}
</style>
\ No newline at end of file
components/uni-popup-message/uni-popup-message.vue
浏览文件 @ d1267e29
<template>
<view class="uni-popup-message" :class="'uni-popup__'+[type]">
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+[type]">
<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
</view>
</view>
</template>
......@@ -70,11 +72,31 @@
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
......
components/uni-popup/popup.js
浏览文件 @ d1267e29
import message from './message.js';
// 定义 type 类型:弹出类型：top/bottom/center
const config = {
// 顶部弹出
top:'top',
// 底部弹出
bottom:'bottom',
// 居中弹出
center:'center',
// 消息提示
message:'top',
// 对话框
dialog:'center',
// 分享
share:'bottom',
}
import message from './message.js';
// 定义 type 类型:弹出类型：top/bottom/center
const config = {
// 顶部弹出
top: 'top',
// 底部弹出
bottom: 'bottom',
// 居中弹出
center: 'center',
// 消息提示
message: 'top',
// 对话框
dialog: 'center',
// 分享
share: 'bottom',
}
export default {
data(){
return {
config:config
}
export default {
data() {
return {
config: config,
popupWidth: 0,
popupHeight: 0
}
},
mixins: [message],
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
}
},
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + windowTop
}
fixSize()
// #ifdef H5
window.addEventListener('resize', fixSize)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', fixSize)
})
// #endif
},
mixins: [message]
}
components/uni-popup/uni-popup.vue
浏览文件 @ d1267e29
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
<uni-transition v-if="maskShow" class="uni-mask--hook" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper-box" @click.stop="clear">
......@@ -67,6 +67,12 @@
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
this[this.config[this.type]]()
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
......@@ -99,7 +105,7 @@
},
maskShow: true,
mkclick: true,
popupstyle: 'top'
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
created() {
......@@ -163,7 +169,7 @@
* 顶部弹出样式处理
*/
top() {
this.popupstyle = 'top'
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
'position': 'fixed',
......@@ -217,6 +223,12 @@
/* #endif */
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.uni-popup__mask {
position: absolute;
top: 0;
......@@ -260,6 +272,10 @@
/* #endif */
}
.fixforpc-top {
top: 0;
}
.bottom {
bottom: 0;
}
......
components/uni-rate/uni-rate.vue
浏览文件 @ d1267e29
<template>
<view>
<view ref="uni-rate" class="uni-rate">
<view v-if="" class="uni-rate__icon" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseleave="mouseleave">
<view v-if="" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in stars" :key="index" @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown" @mousemove.stop="mousemove" @mouseleave="mouseleave">
<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
<!-- #ifdef APP-NVUE -->
<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
......@@ -319,6 +319,9 @@
line-height: 1;
font-size: 0;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-rate__icon {
......@@ -335,4 +338,10 @@
line-height: 1;
text-align: left;
}
.uni-cursor-not-allowed {
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
</style>
\ No newline at end of file
components/uni-row/uni-row.vue
浏览文件 @ d1267e29
......@@ -10,16 +10,18 @@
<script>
/**
* uni-row 布局-行
* @description 流式栅格系统，随着屏幕或视口，分为 24 份，可以迅速简便地创建布局。
* @description 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
* @tutorial https://ext.dcloud.net.cn/plugin?id=
*
* @property {gutter} type = Number 栅格间隔
* @property {justify} type = String flex 布局下的水平排列方式
* 可选 start/end/center/space-around/space-between start
* 默认嫩 start
* 默认值 start
* @property {align} type = String flex 布局下的垂直排列方式
* 可选 top/middle/bottom
* 默认嫩 top
* 默认值 top
* @property {width} type = String|Number nvue下需要自行配置宽度用于计算
* 默认值 750
*/
const ComponentClass = 'uni-row';
const modifierSeparator = '--';
......@@ -42,6 +44,11 @@
align: {
type: String,
default: 'top'
},
// nvue如果使用span等属性，需要配置宽度
width: {
type: [String, Number],
default: 750
}
},
created() {
......@@ -51,9 +58,11 @@
},
computed: {
marginValue() {
// #ifndef APP-NVUE
if (this.gutter) {
return -(this.gutter / 2);
}
// #endif
return 0;
},
typeClass() {
......@@ -71,11 +80,13 @@
<style scoped>
.uni-row {
position: relative;
flex-direction: row;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU */
/* #endif */
/* #ifndef APP-NVUE */
/* #endif */
/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
......
components/uni-search-bar/uni-search-bar.vue
浏览文件 @ d1267e29
......@@ -10,7 +10,7 @@
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" @click="clear">
<slot name="clearIcon">
<uni-icons color="#c0c4cc" class="" size="18" type="clear" />
<uni-icons color="#c0c4cc" size="18" type="clear" />
</slot>
</view>
</view>
......@@ -226,6 +226,9 @@
align-items: center;
line-height: 24px;
padding-left: 8px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-searchbar__text-placeholder {
......@@ -239,5 +242,8 @@
line-height: 36px;
font-size: 14px;
color: #333;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
</style>
\ No newline at end of file
components/uni-segmented-control/uni-segmented-control.vue
浏览文件 @ d1267e29
......@@ -88,6 +88,9 @@
flex-direction: row;
height: 36px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.segmented-control__item {
......
components/uni-status-bar/uni-status-bar.vue
浏览文件 @ d1267e29
......@@ -18,7 +18,6 @@
<style scoped>
.uni-status-bar {
width: 750rpx;
height: 20px;
}
</style>
\ No newline at end of file
components/uni-swiper-dot/uni-swiper-dot.vue
浏览文件 @ d1267e29
......@@ -143,12 +143,8 @@
width: 8px;
border-radius: 100px;
margin-left: 6px;
background-color: rgba(0, 0, 0, 0.4);
background-color: red;
cursor: pointer;
border-width: 5px 0;
border-style: solid;
border-color: transparent;
background-clip: padding-box;
}
.uni-swiper__dots-item:first-child {
......@@ -201,4 +197,4 @@
color: #fff;
font-size: 12px;
}
</style>
\ No newline at end of file
</style>
components/uni-tag/uni-tag.vue
浏览文件 @ d1267e29
......@@ -98,6 +98,9 @@
border-width: 1rpx;
border-style: solid;
border-color: #f8f8f8;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-tag--circle {
......@@ -113,6 +116,9 @@
.uni-tag--disabled {
opacity: 0.5;
/* #ifdef H5 */
cursor: not-allowed;
/* #endif */
}
.uni-tag--small {
......
components/uni-transition/uni-transition.vue
浏览文件 @ d1267e29
......@@ -220,6 +220,7 @@
transition-timing-function: ease;
transition-duration: 0.3s;
transition-property: transform, opacity;
z-index: 998;
}
.fade-in {
......
pages.json
浏览文件 @ d1267e29
......@@ -997,7 +997,7 @@
{
"path": "easyinput/easyinput",
"style": {
"navigationBarTitleText": "easyinput",
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
......@@ -1016,7 +1016,14 @@
}
},
{
"path": "layout/layout",
"path": "datetime-picker/datetime-picker",
"style": {
"navigationBarTitleText": "日期时间",
"enablePullDownRefresh": false
}
},
{
"path": "row/row",
"style": {
"navigationBarTitleText": "layout 布局",
"enablePullDownRefresh": false
......@@ -1310,4 +1317,4 @@
}
]
}
}
}
\ No newline at end of file
pages/extUI/datetime-picker/datetime-picker.nvue 0 → 100644
浏览文件 @ d1267e29
<template>
<view class="page">
<text class="example-info">可以同时选择日期和时间的选择器</text>
<uni-section :title="'基本用法：' + date" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker :value="date" @change="dateChange"></uni-datetime-picker>
</view>
<uni-section :title="'时间戳用法：' + timestamp" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker timestamp :value="timestamp" @change="timestampChange"></uni-datetime-picker>
</view>
<uni-section :title="'限制年份, 最早 2000 年:' + timeArea" type="line"></uni-section>
<view class="example-body">
<uni-datetime-picker :value="timeArea" minYear="2000" @change="timeAreaChange"></uni-datetime-picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
date: '2020-10-1 12:30:00',
timestamp: 1610364547000,
timeArea: '2000-10-1 12:30:01'
}
},
methods: {
dateChange(e) {
this.date = e
},
timestampChange(e) {
this.timestamp = e
},
timeAreaChange(e) {
this.timeArea = e
}
}
}
</script>
<style>
@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example {
padding: 0 15px 15px;
}
.example-info {
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 15px;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 15px;
color: #3b4144;
background-color: #ffffff;
font-size: 14px;
line-height: 20px;
}
.example-info-text {
font-size: 14px;
line-height: 20px;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.word-btn-white {
font-size: 18px;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 48px;
margin: 15px;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
</style>
\ No newline at end of file
pages/extUI/fav/fav.nvue
浏览文件 @ d1267e29
......@@ -11,8 +11,8 @@
<view class="example-body">
<uni-fav :checked="checkList[4]" :content-text="contentText" class="favBtn" @click="favClick(4)" />
</view>
<uni-section class="hideOnPc" title="在自定义导航栏使用" type="line"></uni-section>
<view class="example-body example-body-fullWidth hideOnPc">
<uni-section title="在自定义导航栏使用" type="line"></uni-section>
<view class="example-body example-body-fullWidth">
<uni-nav-bar style="width: 100%;" :fixed="false" left-icon="arrowleft" title="标题" color="#333333" background-color="#FFFFFF">
<block slot="right">
<uni-fav :checked="checkList[5]" class="favBtn-nav" :circle="true" @click="favClick(5)" />
......
pages/extUI/forms/forms.vue
浏览文件 @ d1267e29
<template>
<view>
<text class="example-info"> uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
<text class="example-info">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
<uni-group title="基本信息" top="0">
......@@ -9,17 +9,19 @@
</uni-forms-item>
<!-- 使用原生input，需要绑定binddata -->
<uni-forms-item name="age" required label="年龄">
<input type="text" v-model="formData.age" class="uni-input-border" @blur="binddata('age',$event.detail.value)" placeholder="请输入年龄">
<input type="text" v-model="formData.age" class="uni-input-border" @blur="binddata('age', $event.detail.value)" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item name="weight" label="体重">
<slider min="0" max="200" show-value v-model="formData.weight" @change="binddata('weight',$event.detail.value)" 　 step="5" />
<slider min="0" max="200" step="5" show-value v-model="formData.weight" @change="binddata('weight', $event.detail.value)"></slider>
</uni-forms-item>
<uni-forms-item required name="birth" label="出生日期">
<uni-datetime-picker timestamp v-model="formData.birth"></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item name="email" label="邮箱">
<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="checked" label="详细信息">
<switch :checked="formData.checked" @change="change('checked',$event.detail.value)" />
<switch :checked="formData.checked" @change="change('checked', $event.detail.value)" />
</uni-forms-item>
</uni-group>
<template v-if="formData.checked">
......@@ -28,8 +30,8 @@
<uni-data-checkbox v-model="formData.sex" :localdata="sex"></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item name="country" label="国家">
<picker :value="formData.country" :range="range" @change="binddata('country',$event.detail.value)">
<view>{{formData.country === ''? '请选择国家':range[formData.country]}}</view>
<picker :value="formData.country" :range="range" @change="binddata('country', $event.detail.value)">
<view>{{ formData.country === '' ? '请选择国家' : range[formData.country] }}</view>
</picker>
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
......@@ -39,7 +41,6 @@
<uni-easyinput type="textarea" v-model="formData.remarks" :maxlength="50" placeholder="请输入备注"></uni-easyinput>
</uni-forms-item>
</uni-group>
</template>
<!-- 直接使用组件自带submit、reset 方法，小程序不生效 -->
......@@ -49,7 +50,7 @@
<view class="example">
<button class="button" @click="submitForm('form')">校验表单</button>
<button class="button" @click="validateField('form')">只校验用户名和邮箱项</button>
<button class="button" @click="clearValidate('form','name')">移除用户名的校验结果</button>
<button class="button" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
<button class="button" @click="clearValidate('form')">移除全部表单校验结果</button>
<button class="button" @click="resetForm">重置表单</button>
</view>
......@@ -64,100 +65,125 @@
formData: {
name: '',
age: '',
email: "",
email: '',
sex: '',
hobby: [],
remarks: "",
remarks: '',
checked: false,
country: -1,
weight: 0
weight: 0,
birth: ''
},
sex: [{
text: '男',
value: '0'
}, {
text: '女',
value: '1'
}, {
text: '未知',
value: '2'
}],
text: '男',
value: '0'
},
{
text: '女',
value: '1'
},
{
text: '未知',
value: '2'
}
],
hobby: [{
text: '足球',
value: 0
}, {
text: '篮球',
value: 1
}, {
text: '游泳',
value: 2
}],
text: '足球',
value: 0
},
{
text: '篮球',
value: 1
},
{
text: '游泳',
value: 2
}
],
range: ['中国', '美国', '澳大利亚'],
show: false,
rules: {
name: {
// validateTrigger:'submit',
rules: [{
required: true,
errorMessage: '请输入用户名',
}, {
minLength: 3,
maxLength: 15,
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
}]
required: true,
errorMessage: '请输入用户名'
},
{
minLength: 3,
maxLength: 15,
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
}
]
},
age: {
rules: [{
required: true,
errorMessage: '请输入年龄',
errorMessage: '请输入年龄'
},
{
format: 'int',
errorMessage: '年龄必须是数字',
}, {
errorMessage: '年龄必须是数字'
},
{
minimum: 18,
maximum: 30,
errorMessage: '年龄应该大于 {minimum} 岁，小于 {maximum} 岁',
errorMessage: '年龄应该大于 {minimum} 岁，小于 {maximum} 岁'
}
]
},
weight: {
rules: [{
format: 'number',
errorMessage: '体重必须是数字',
}, {
minimum: 100,
maximum: 200,
errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤',
}]
format: 'number',
errorMessage: '体重必须是数字'
},
{
minimum: 100,
maximum: 200,
errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤'
}
]
},
birth: {
rules: [
// {
// required: true,
// errorMessage: '请选择时间'
// },
{
format: 'timestamp',
errorMessage: '必须是时间戳'
}
]
},
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
errorMessage: '请输入正确的邮箱地址'
}]
},
checked: {
rules: [{
format: 'bool',
format: 'bool'
}]
},
sex: {
rules: [{
format: "string"
format: 'string'
}]
},
hobby: {
rules: [{
format: "array"
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length < 2) {
callback('请至少勾选两个兴趣爱好')
format: 'array'
},
{
validateFunction: function(rule, value, data, callback) {
if (value.length < 2) {
callback('请至少勾选两个兴趣爱好')
}
return true
}
return true
}
}]
]
}
}
}
......@@ -168,15 +194,16 @@
// 模拟异步请求数据
setTimeout(() => {
this.formData = {
name: 'LiMing',
age: 12,
email: "",
name: 'DCloud',
age: 21,
email: '',
sex: '0',
hobby: [0, 2],
remarks: "热爱学习，热爱生活",
remarks: '热爱学习，热爱生活',
checked: false,
country: 2,
weight: 120
weight: 120,
birth: ''
}
uni.hideLoading()
}, 500)
......@@ -185,6 +212,9 @@
// this.$refs.form.setRules(this.rules)
},
methods: {
birthChange(e) {
console.log(e)
},
change(name, value) {
this.formData.checked = value
this.$refs.form.setValue(name, value)
......@@ -196,14 +226,16 @@
*/
submitForm(form) {
// console.log(this.formData);
this.$refs[form].submit()
.then((res) => {
console.log('表单的值：', res);
this.$refs[form]
.submit()
.then(res => {
console.log('表单的值：', res)
uni.showToast({
title: '验证成功'
})
}).catch((errors) => {
console.error('验证失败：', errors);
})
.catch(errors => {
console.error('验证失败：', errors)
})
},
......@@ -218,14 +250,17 @@
* @param {Object} form
*/
validateField(form) {
this.$refs[form].validateField(['name', 'email']).then((res) => {
uni.showToast({
title: '验证成功'
this.$refs[form]
.validateField(['name', 'email'])
.then(res => {
uni.showToast({
title: '验证成功'
})
console.log('表单的值：', res)
})
.catch(errors => {
console.error('验证失败：', errors)
})
console.log('表单的值：', res);
}).catch((errors) => {
console.error('验证失败：', errors);
})
},
/**
......
pages/extUI/notice-bar/notice-bar.nvue
浏览文件 @ d1267e29
<template>
<view>
<view class="fixforpc-window">
<text class="example-info">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
<uni-section title="基本用法" type="line"></uni-section>
<view class="example-body">
......@@ -164,4 +164,14 @@
display: block;
/* #endif */
}
.fixforpc-window {
/* #ifndef APP-NVUE */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* #endif */
}
</style>
\ No newline at end of file
pages/extUI/number-box/number-box.nvue
浏览文件 @ d1267e29
......@@ -5,6 +5,10 @@
<view class="example-body">
<uni-number-box />
</view>
<uni-section :title="'使用v-model : '+ vModelValue" type="line"></uni-section>
<view class="example-body">
<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" />
</view>
<uni-section title="设置最小值和最大值" type="line"></uni-section>
<view class="example-body">
<uni-number-box :min="2" :max="9" :value="5" />
......@@ -17,11 +21,10 @@
<view class="example-body">
<uni-number-box :disabled="true" />
</view>
<uni-section :title="'获取输入的值 : '+numberValue" type="line"></uni-section>
<uni-section :title="'获取输入的值 : '+ numberValue" type="line"></uni-section>
<view class="example-body">
<uni-number-box :value="numberValue" @change="change" />
</view>
<!-- <view style="height: 30rpx;"></view> -->
</view>
</template>
<script>
......@@ -29,13 +32,21 @@
components: {},
data() {
return {
numberValue: 0
numberValue: 0,
vModelValue: 3
}
},
methods: {
change(value) {
this.numberValue = value
},
blur(e) {
console.log('-------blur:', e);
},
focus(e) {
console.log('-------focus:', e);
}
}
}
</script>
......
pages/extUI/popup/popup.nvue
浏览文件 @ d1267e29
......@@ -21,8 +21,8 @@
</view>
<button class="button" type="primary" @click="confirmDialog"><text class="button-text">输入对话框</text></button>
</view>
<uni-section title="底部分享示例" type="line"></uni-section>
<view class="example-body share">
<uni-section title="底部分享示例" type="line" class="hideOnPc"></uni-section>
<view class="example-body share hideOnPc">
<button class="button" type="primary" @click="confirmShare"><text class="button-text">分享模版示例</text></button>
</view>
<!-- 基本示例 -->
......
pages/extUI/layout/layout.nvue → pages/extUI/row/row.nvue
浏览文件 @ d1267e29
<template>
<view class="container">
<view class="warp">
<!-- #ifndef APP-NVUE -->
<text class="example-info">流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text class="example-info">流式栅格系统，在nvue不可使用媒体查询</text>
<!-- #endif -->
<uni-section title="基础布局" subTitle="使用单一分栏创建基础的栅格布局" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row">
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col>
<view class="demo-uni-col dark_deep"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="12">
<view class="demo-uni-col dark"></view>
</uni-col>
......@@ -18,7 +24,7 @@
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
</uni-col>
......@@ -30,7 +36,7 @@
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="6">
<view class="demo-uni-col dark"></view>
</uni-col>
......@@ -45,7 +51,7 @@
</uni-col>
</uni-row>
<uni-row class="demo-uni-row">
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="4">
<view class="demo-uni-col dark"></view>
</uni-col>
......@@ -69,27 +75,27 @@
<uni-section title="混合布局" subTitle="通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row" :gutter="10">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
<view class="demo-uni-col light"></view>
</uni-col>
<uni-col :span="4">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="4">
<view class="demo-uni-col dark"></view>
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row" :gutter="10">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="4">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="16">
<view class="demo-uni-col dark"></view>
<view class="demo-uni-col light"></view>
</uni-col>
<uni-col :span="4">
<view class="demo-uni-col dark"></view>
......@@ -97,51 +103,43 @@
</uni-row>
</view>
<button type="default" @click="updateGutter">更改Gutter</button>
<uni-section title="分栏间隔" subTitle="分栏之间存在间隔" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row" :gutter="gutter">
<uni-col :span="16">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
</uni-col>
</uni-row>
</view>
<uni-section title="分栏偏移" subTitle="支持偏移指定的栏数" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row" :gutter="gutter">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="8">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="8" :offset="6">
<view class="demo-uni-col dark"></view>
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row" :gutter="gutter">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="6" :offset="6">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="6" :offset="6">
<view class="demo-uni-col dark"></view>
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row" :gutter="gutter">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="12" :pull="6">
<view class="demo-uni-col dark"></view>
</uni-col>
<uni-col :span="6" :push="6">
<view class="demo-uni-col light"></view>
</uni-col>
</uni-row>
<uni-row class="demo-uni-row" :gutter="gutter">
<uni-col :span="12" :push="6">
<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
<uni-col :span="12" :offset="6">
<view class="demo-uni-col dark"></view>
</uni-col>
</uni-row>
</view>
<!-- #ifndef APP-NVUE -->
<uni-section title="响应式布局" subTitle="共五个响应尺寸：xs、sm、md、lg 和 xl" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row" :gutter="gutter">
......@@ -160,72 +158,6 @@
</uni-row>
</view>
<!-- #endif -->
<!-- #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU -->
<uni-section title="对齐方式" subTitle="通过 flex 布局来对分栏进行灵活的对齐" type="line"></uni-section>
<view class="example-body">
<uni-row class="demo-uni-row" type="flex" justify="center">
<template v-for="i in 3">
<!-- #ifndef APP-NVUE -->
<uni-col :span="6" :key="i">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<uni-col :style="{width: nvueWidth}">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
</template>
</uni-row>
<uni-row class="demo-uni-row" type="flex" justify="end">
<template v-for="i in 3">
<!-- #ifndef APP-NVUE -->
<uni-col :span="6" :key="i">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<uni-col :style="{width: nvueWidth}">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
</template>
</uni-row>
<uni-row class="demo-uni-row" type="flex" justify="space-between">
<template v-for="i in 3">
<!-- #ifndef APP-NVUE -->
<uni-col :span="6" :key="i">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<uni-col :style="{width: nvueWidth}">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
</template>
</uni-row>
<uni-row class="demo-uni-row" type="flex" justify="space-around">
<template v-for="i in 3">
<!-- #ifndef APP-NVUE -->
<uni-col :span="6" :key="i">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<uni-col :style="{width: nvueWidth}">
<view :class="['demo-uni-col',i%2 === 0 ? 'dark' : 'light']"></view>
</uni-col>
<!-- #endif -->
</template>
</uni-row>
</view>
<!-- #endif -->
</view>
</template>
......@@ -233,13 +165,8 @@
export default {
data() {
return {
nvueWidth: '187rpx',
gutter: 10
}
},
methods: {
updateGutter() {
this.gutter += 2;
gutter: 0,
nvueWidth: 730
}
}
}
......
pages/tabBar/extUI/extUI.nvue
浏览文件 @ d1267e29
......@@ -24,16 +24,7 @@
data() {
return {
hideList: [
'notice-bar',
'nav-bar',
'popup',
'swiper-dot',
'transition',
'rate',
'indexed-list',
'swipe-action',
'combox',
'fab'
'load-more'
],
lists: [{
name: "Badge 数字角标",
......@@ -147,6 +138,10 @@
name: "Rate 评分",
url: "rate"
},
{
name: "Row 布局-行",
url: "row"
},
{
name: "SearchBar 搜索栏",
url: "search-bar"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或