提交 e0385a20 编写于 作者: fxy060608's avatar fxy060608

Merge branch 'dev' of https://github.com/dcloudio/uni-app into v3

......@@ -24,6 +24,7 @@ module.exports = {
transpileDependencies: [],
productionSourceMap: false,
configureWebpack: webpackConfig,
parallel: process.env.UNI_PLATFORM !== 'h5' || process.env.UNI_WATCH !== 'false' || process.env.UNI_UI === 'true',
chainWebpack: config => {
config.devtool('source-map')
......@@ -44,4 +45,4 @@ module.exports = {
css: {
extract: true
}
}
}
......@@ -880,11 +880,6 @@ uni-picker-view[hidden] {
}
uni-picker {
display: block;
}
uni-progress {
display: -webkit-flex;
display: -webkit-box;
......
......@@ -10532,262 +10532,8 @@ function processTouches(target, touches) {
/***/ }),
/* 27 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(UniViewJSBridge) {/* harmony import */ var uni_mixins__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
//
//
//
//
//
//
//
//
var _UniViewJSBridge = UniViewJSBridge,
subscribe = _UniViewJSBridge.subscribe,
unsubscribe = _UniViewJSBridge.unsubscribe,
publishHandler = _UniViewJSBridge.publishHandler;
var mode = {
SELECTOR: 'selector',
MULTISELECTOR: 'multiSelector',
TIME: 'time',
DATE: 'date' // 暂不支持城市选择
// REGION: 'region'
};
var fields = {
YEAR: 'year',
MONTH: 'month',
DAY: 'day'
};
/* harmony default export */ __webpack_exports__["a"] = ({
name: 'Picker',
mixins: [uni_mixins__WEBPACK_IMPORTED_MODULE_0__[/* emitter */ "a"]],
props: {
name: {
type: String,
default: ''
},
range: {
type: Array,
default: function _default() {
return [];
}
},
rangeKey: {
type: String,
default: ''
},
value: {
type: [Number, String, Array],
default: 0
},
mode: {
type: String,
default: mode.SELECTOR,
validator: function validator(val) {
return Object.values(mode).indexOf(val) >= 0;
}
},
fields: {
type: String,
default: 'day',
validator: function validator(val) {
return Object.values(fields).indexOf(val) >= 0;
}
},
start: {
type: String,
default: function _default() {
if (this.mode === mode.TIME) {
return '00:00';
}
if (this.mode === mode.DATE) {
var year = new Date().getFullYear() - 100;
switch (this.fields) {
case fields.YEAR:
return year;
case fields.MONTH:
return year + '-01';
case fields.DAY:
return year + '-01-01';
}
}
return '';
}
},
end: {
type: String,
default: function _default() {
if (this.mode === mode.TIME) {
return '23:59';
}
if (this.mode === mode.DATE) {
var year = new Date().getFullYear() + 100;
switch (this.fields) {
case fields.YEAR:
return year;
case fields.MONTH:
return year + '-12';
case fields.DAY:
return year + '-12-31';
}
}
return '';
}
},
disabled: {
type: [Boolean, String],
default: false
}
},
data: function data() {
return {
valueSync: this.value || 0,
visible: false,
valueChangeSource: ''
};
},
watch: {
value: function value(val) {
var _this = this;
if (Array.isArray(val)) {
if (!Array.isArray(this.valueSync)) {
this.valueSync = [];
}
this.valueSync.length = val.length;
val.forEach(function (val, index) {
if (val !== _this.valueSync[index]) {
_this.$set(_this.valueSync, index, val);
}
});
} else if (_typeof(val) !== 'object') {
this.valueSync = val;
}
},
valueSync: function valueSync(val) {
if (!this.valueChangeSource) {
this._show();
} else {
this.$emit('update:value', val);
}
}
},
created: function created() {
var _this2 = this;
this.$dispatch('Form', 'uni-form-group-update', {
type: 'add',
vm: this
});
Object.keys(this.$props).forEach(function (key) {
if (key !== 'value' && key !== 'name') {
_this2.$watch(key, _this2._show);
}
});
},
beforeDestroy: function beforeDestroy() {
this.$dispatch('Form', 'uni-form-group-update', {
type: 'remove',
vm: this
});
},
destroyed: function destroyed() {
if (this.visible) {
var id = this.$page.id;
publishHandler('hidePicker', {}, id);
}
},
methods: {
_click: function _click() {
if (this.disabled) {
return;
}
var id = this.$page.id;
subscribe("".concat(id, "-picker-change"), this.change);
subscribe("".concat(id, "-picker-columnchange"), this.columnchange);
subscribe("".concat(id, "-picker-cancel"), this.cancel);
this.visible = true;
this._show();
},
_show: function _show() {
if (this.visible) {
var id = this.$page.id;
var options = Object.assign({}, this.$props);
options.value = this.valueSync;
publishHandler('showPicker', options, id);
}
},
change: function change(args) {
this.visible = false;
var id = this.$page.id;
unsubscribe("".concat(id, "-picker-change"));
unsubscribe("".concat(id, "-picker-columnchange"));
unsubscribe("".concat(id, "-picker-cancel"));
if (!this.disabled) {
this.valueChangeSource = 'click';
var value = args.value;
this.valueSync = Array.isArray(value) ? value.map(function (val) {
return val;
}) : value;
this.$trigger('change', {}, {
value: value
});
}
},
columnchange: function columnchange(args) {
this.$trigger('columnchange', {}, args);
},
cancel: function cancel(args) {
this.visible = false;
var id = this.$page.id;
unsubscribe("".concat(id, "-picker-change"));
unsubscribe("".concat(id, "-picker-columnchange"));
unsubscribe("".concat(id, "-picker-cancel"));
this.$trigger('cancel', {}, {});
},
_getFormData: function _getFormData() {
return {
value: this.valueSync,
key: this.name
};
},
_resetFormData: function _resetFormData() {
this.valueSync = '';
}
}
});
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(3)))
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
if(false) { var cssReload; }
/***/ }),
/* 27 */,
/* 28 */,
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
......@@ -12076,7 +11822,7 @@ function destroyComponentObserver(_ref2) {
/* 49 */
/***/ (function(module, exports) {
module.exports = ['uni-app', 'uni-tabbar', 'uni-page', 'uni-page-head', 'uni-page-wrapper', 'uni-page-body', 'uni-page-refresh', 'uni-actionsheet', 'uni-modal', 'uni-picker', 'uni-toast', 'uni-resize-sensor', 'uni-ad', 'uni-audio', 'uni-button', 'uni-camera', 'uni-canvas', 'uni-checkbox', 'uni-checkbox-group', 'uni-cover-image', 'uni-cover-view', 'uni-form', 'uni-functional-page-navigator', 'uni-icon', 'uni-image', 'uni-input', 'uni-label', 'uni-live-player', 'uni-live-pusher', 'uni-map', 'uni-movable-area', 'uni-movable-view', 'uni-navigator', 'uni-official-account', 'uni-open-data', 'uni-picker', 'uni-picker-view', 'uni-picker-view-column', 'uni-progress', 'uni-radio', 'uni-radio-group', 'uni-rich-text', 'uni-scroll-view', 'uni-slider', 'uni-swiper', 'uni-swiper-item', 'uni-switch', 'uni-text', 'uni-textarea', 'uni-video', 'uni-view', 'uni-web-view'];
module.exports = ['uni-app', 'uni-tabbar', 'uni-page', 'uni-page-head', 'uni-page-wrapper', 'uni-page-body', 'uni-page-refresh', 'uni-actionsheet', 'uni-modal', 'uni-toast', 'uni-resize-sensor', 'uni-ad', 'uni-audio', 'uni-button', 'uni-camera', 'uni-canvas', 'uni-checkbox', 'uni-checkbox-group', 'uni-cover-image', 'uni-cover-view', 'uni-form', 'uni-functional-page-navigator', 'uni-icon', 'uni-image', 'uni-input', 'uni-label', 'uni-live-player', 'uni-live-pusher', 'uni-map', 'uni-movable-area', 'uni-movable-view', 'uni-navigator', 'uni-official-account', 'uni-open-data', 'uni-picker', 'uni-picker-view', 'uni-picker-view-column', 'uni-progress', 'uni-radio', 'uni-radio-group', 'uni-rich-text', 'uni-scroll-view', 'uni-slider', 'uni-swiper', 'uni-swiper-item', 'uni-switch', 'uni-text', 'uni-textarea', 'uni-video', 'uni-view', 'uni-web-view'];
/***/ }),
/* 50 */
......@@ -14294,7 +14040,6 @@ var map = {
"./navigator/index.vue": 95,
"./picker-view-column/index.vue": 119,
"./picker-view/index.vue": 117,
"./picker/index.vue": 113,
"./progress/index.vue": 108,
"./radio-group/index.vue": 107,
"./radio/index.vue": 105,
......@@ -14452,16 +14197,7 @@ webpackContext.id = 66;
/* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/* 79 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(28);
/* harmony import */ var _node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */
/* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/* 79 */,
/* 80 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
......@@ -20229,73 +19965,7 @@ component.options.__file = "src/core/view/components/label/index.vue"
/* harmony default export */ var label = __webpack_exports__["default"] = (component.exports);
/***/ }),
/* 113 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"70784d34-vue-loader-template"}!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/core/view/components/picker/index.vue?vue&type=template&id=bcf74e32&
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"uni-picker",
{
on: {
click: function($event) {
$event.stopPropagation()
return _vm._click($event)
}
}
},
[_c("div", [_vm._t("default")], 2)]
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./src/core/view/components/picker/index.vue?vue&type=template&id=bcf74e32&
// EXTERNAL MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/core/view/components/picker/index.vue?vue&type=script&lang=js&
var pickervue_type_script_lang_js_ = __webpack_require__(27);
// CONCATENATED MODULE: ./src/core/view/components/picker/index.vue?vue&type=script&lang=js&
/* harmony default export */ var components_pickervue_type_script_lang_js_ = (pickervue_type_script_lang_js_["a" /* default */]);
// EXTERNAL MODULE: ./src/core/view/components/picker/index.vue?vue&type=style&index=0&lang=css&
var pickervue_type_style_index_0_lang_css_ = __webpack_require__(79);
// EXTERNAL MODULE: ./node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);
// CONCATENATED MODULE: ./src/core/view/components/picker/index.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
components_pickervue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* hot reload */
if (false) { var api; }
component.options.__file = "src/core/view/components/picker/index.vue"
/* harmony default export */ var picker = __webpack_exports__["default"] = (component.exports);
/***/ }),
/* 113 */,
/* 114 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
......
......@@ -650,8 +650,8 @@ class Util {
// },
data: optionsData,
success: () => {
// if (process.env.NODE_ENV === 'development') {
// console.log('stat request success');
// if (process.env.NODE_ENV === 'development') {
// console.log('stat request success');
// }
},
fail: (e) => {
......@@ -699,7 +699,7 @@ class Stat extends Util {
super();
this.instance = null;
// 注册拦截器
if (typeof uni.addInterceptor === 'function') {
if (typeof uni.addInterceptor === 'function' && process.env.NODE_ENV !== 'development') {
this.addInterceptorInit();
this.interceptLogin();
this.interceptShare(true);
......@@ -776,7 +776,7 @@ class Stat extends Util {
this.self = self;
if (getPageTypes(self)) {
this._pageShow(self);
} else {
} else {
this._applicationShow(self);
}
}
......
......@@ -382,8 +382,8 @@ class Util {
// },
data: optionsData,
success: () => {
// if (process.env.NODE_ENV === 'development') {
// console.log('stat request success');
// if (process.env.NODE_ENV === 'development') {
// console.log('stat request success');
// }
},
fail: (e) => {
......@@ -431,7 +431,7 @@ class Stat extends Util {
super()
this.instance = null;
// 注册拦截器
if (typeof uni.addInterceptor === 'function') {
if (typeof uni.addInterceptor === 'function' && process.env.NODE_ENV !== 'development') {
this.addInterceptorInit();
this.interceptLogin();
this.interceptShare(true);
......@@ -508,7 +508,7 @@ class Stat extends Util {
this.self = self;
if (getPageTypes(self)) {
this._pageShow(self);
} else {
} else {
this._applicationShow(self);
}
}
......
......@@ -6,16 +6,26 @@ const {
capitalize
} = require('./util')
const platformTags = ['audio', 'map', 'video', 'web-view', 'cover-view', 'cover-image']
const platformTags = ['audio', 'map', 'video', 'web-view', 'cover-view', 'cover-image', 'picker']
//input 在 pageHead 中有使用,resize-sensor 在很多组件中有使用,暂时直接加载
const autoloadTags = ['input', 'resize-sensor']
const autoloadTags = {
// input 在 pageHead 中有使用,resize-sensor 在很多组件中有使用,暂时直接加载
root: ['input', 'resize-sensor'],
other: {
picker: ['picker-view', 'picker-view-column']
}
}
module.exports = function updateComponents(tags) {
autoloadTags.forEach(tagName => {
autoloadTags.root.forEach(tagName => {
tags.add(tagName)
})
tags = [...tags]
Object.keys(autoloadTags.other).forEach(tagName => {
if (tags.includes(tagName)) {
tags.push(...autoloadTags.other[tagName])
}
})
const importsStr = tags.map(tagName => {
if (platformTags.indexOf(tagName) !== -1) {
return `import ${capitalize(camelize(tagName))} from 'uni-platform/view/components/${tagName}'`
......@@ -44,4 +54,4 @@ ${componentsStr}
fs.writeFileSync(path.resolve(dir, 'components.js'), content, 'utf8')
}
}
......@@ -93,9 +93,9 @@ const getPageComponents = function (inputDir, pagesJson) {
let windowTop = 44
let pageStyle = Object.assign({}, globalStyle, props)
if (pageStyle.navigationStyle === 'custom' || (props.titleNView && props.titleNView.type ===
'transparent')) {
windowTop = 0
if (pageStyle.navigationStyle === 'custom' || !pageStyle.titleNView || pageStyle.titleNView.type ===
'transparent' || pageStyle.titleNView.type === 'float') {
windowTop = 0
}
// 删除 app-plus 平台配置
......
......@@ -8,7 +8,6 @@ module.exports = [
'uni-page-refresh',
'uni-actionsheet',
'uni-modal',
'uni-picker',
'uni-toast',
'uni-resize-sensor',
......
<template>
<uni-picker @click.stop="_click">
<div>
<slot/>
</div>
</uni-picker>
</template>
<script>
import {
emitter
} from 'uni-mixins'
const {
subscribe,
unsubscribe,
publishHandler
} = UniViewJSBridge
const mode = {
SELECTOR: 'selector',
MULTISELECTOR: 'multiSelector',
TIME: 'time',
DATE: 'date'
// 暂不支持城市选择
// REGION: 'region'
}
const fields = {
YEAR: 'year',
MONTH: 'month',
DAY: 'day'
}
export default {
name: 'Picker',
mixins: [emitter],
props: {
name: {
type: String,
default: ''
},
range: {
type: Array,
default () {
return []
}
},
rangeKey: {
type: String,
default: ''
},
value: {
type: [Number, String, Array],
default: 0
},
mode: {
type: String,
default: mode.SELECTOR,
validator (val) {
return Object.values(mode).indexOf(val) >= 0
}
},
fields: {
type: String,
default: 'day',
validator (val) {
return Object.values(fields).indexOf(val) >= 0
}
},
start: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '00:00'
}
if (this.mode === mode.DATE) {
let year = (new Date()).getFullYear() - 100
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-01'
case fields.DAY:
return year + '-01-01'
}
}
return ''
}
},
end: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '23:59'
}
if (this.mode === mode.DATE) {
let year = (new Date()).getFullYear() + 100
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-12'
case fields.DAY:
return year + '-12-31'
}
}
return ''
}
},
disabled: {
type: [Boolean, String],
default: false
}
},
data () {
return {
valueSync: this.value || 0,
visible: false,
valueChangeSource: ''
}
},
watch: {
value (val) {
if (Array.isArray(val)) {
if (!Array.isArray(this.valueSync)) {
this.valueSync = []
}
this.valueSync.length = val.length
val.forEach((val, index) => {
if (val !== this.valueSync[index]) {
this.$set(this.valueSync, index, val)
}
})
} else if (typeof val !== 'object') {
this.valueSync = val
}
},
valueSync (val) {
if (!this.valueChangeSource) {
this._show()
} else {
this.$emit('update:value', val)
}
}
},
created () {
this.$dispatch('Form', 'uni-form-group-update', {
type: 'add',
vm: this
})
Object.keys(this.$props).forEach(key => {
if (key !== 'value' && key !== 'name') {
this.$watch(key, this._show)
}
})
},
beforeDestroy () {
this.$dispatch('Form', 'uni-form-group-update', {
type: 'remove',
vm: this
})
},
destroyed () {
if (this.visible) {
const id = this.$page.id
publishHandler('hidePicker', {}, id)
}
},
methods: {
_click () {
if (this.disabled) {
return
}
const id = this.$page.id
subscribe(`${id}-picker-change`, this.change)
subscribe(`${id}-picker-columnchange`, this.columnchange)
subscribe(`${id}-picker-cancel`, this.cancel)
this.visible = true
this._show()
},
_show () {
if (this.visible) {
const id = this.$page.id
let options = Object.assign({}, this.$props)
options.value = this.valueSync
publishHandler('showPicker', options, id)
}
},
change (args) {
this.visible = false
const id = this.$page.id
unsubscribe(`${id}-picker-change`)
unsubscribe(`${id}-picker-columnchange`)
unsubscribe(`${id}-picker-cancel`)
if (!this.disabled) {
this.valueChangeSource = 'click'
let value = args.value
this.valueSync = Array.isArray(value) ? value.map(val => val) : value
this.$trigger('change', {}, {
value
})
}
},
columnchange (args) {
this.$trigger('columnchange', {}, args)
},
cancel (args) {
this.visible = false
const id = this.$page.id
unsubscribe(`${id}-picker-change`)
unsubscribe(`${id}-picker-columnchange`)
unsubscribe(`${id}-picker-cancel`)
this.$trigger('cancel', {}, {})
},
_getFormData () {
return {
value: this.valueSync,
key: this.name
}
},
_resetFormData () {
this.valueSync = ''
}
}
}
</script>
<style>
uni-picker {
display: block;
}
</style>
......@@ -10,21 +10,17 @@
v-if="hasTabBar"
v-show="showTabBar"
v-bind="tabBar" />
<toast
<toast
v-if="$options.components.Toast"
v-bind="showToast"/>
<action-sheet
<action-sheet
v-if="$options.components.ActionSheet"
v-bind="showActionSheet"
@close="_onActionSheetClose" />
<modal
<modal
v-if="$options.components.Modal"
v-bind="showModal"
@close="_onModalClose" />
<picker
v-if="$options.components.Picker"
v-bind="showPicker"
@close="_onPickerClose" />
</uni-app>
</template>
<script>
......
import Toast from './toast'
import Modal from './modal'
import Picker from './picker'
import ActionSheet from './actionSheet'
export default {
Toast,
Modal,
Picker,
ActionSheet
}
}
const defaultProps = {
visible: false,
mode: '',
range: [],
rangeKey: '',
value: '',
disabled: false,
start: '',
end: '',
fields: 'day',
customItem: ''
}
export default {
data () {
return {
showPicker: {
visible: false
}
}
},
created () {
// 订阅 View 层的 showPicker 事件
UniServiceJSBridge.subscribe('showPicker', (args, pageId) => {
// 根据不同参数,渲染不同类型 picker(注意全局仅一个 picker 组件对象,每次 showPicker 需传入当前类型 picker 的完整参数)
this.showPicker = Object.assign(defaultProps, args, {
pageId,
visible: true
})
})
// 订阅 View 层的 hidePicker 事件
UniServiceJSBridge.subscribe('hidePicker', () => {
this._onPickerClose()
})
// 订阅页面返回跳转时触发的 uni.onHidePopup 事件,隐藏 picker
UniServiceJSBridge.on('onHidePopup', () => {
this._onPickerClose()
})
},
methods: {
// 处理 Picker close 回调
_onPickerClose () {
// 隐藏 picker 重置数据
this.showPicker.visible = false
this.showPicker.mode = 'selector'
this.showPicker.range = []
this.showPicker.value = 0
}
}
}
<template>
<uni-picker @touchmove.prevent>
<transition name="uni-fade">
<div
v-show="visible"
class="uni-mask"
@click="_cancel"/>
</transition>
<div
:class="{'uni-picker-toggle':visible}"
class="uni-picker">
<div
class="uni-picker-header"
@click.stop>
<div
class="uni-picker-action uni-picker-action-cancel"
@click="_cancel">取消</div>
<div
class="uni-picker-action uni-picker-action-confirm"
@click="_change">确定</div>
</div>
<v-uni-picker-view
v-if="visible"
:value.sync="valueArray"
class="uni-picker-content">
<v-uni-picker-view-column
v-for="(range,index0) in rangeArray"
:key="index0">
<div
v-for="(item,index) in range"
:key="index"
class="uni-picker-item"
>{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
</v-uni-picker-view-column>
</v-uni-picker-view>
<!-- 第二种时间单位展示方式-暂时不用这种 -->
<!-- <div v-if="units.length" class="uni-picker-units">
<div v-for="(item,index) in units" :key="index">{{item}}</div>
</div>-->
</div>
</uni-picker>
</template>
<script>
import {
formatDateTime
} from 'uni-shared'
const mode = {
SELECTOR: 'selector',
MULTISELECTOR: 'multiSelector',
TIME: 'time',
DATE: 'date',
REGION: 'region'
}
const fields = {
YEAR: 'year',
MONTH: 'month',
DAY: 'day'
}
export default {
name: 'Picker',
props: {
pageId: {
type: Number,
default: 0
},
range: {
type: Array,
default () {
return []
}
},
rangeKey: {
type: String,
default: ''
},
value: {
type: [Number, String, Array],
default: 0
},
mode: {
type: String,
default: mode.SELECTOR
},
fields: {
type: String,
default: fields.DAY
},
start: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '00:00'
}
if (this.mode === mode.DATE) {
let year = (new Date()).getFullYear() - 150
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-01'
case fields.DAY:
return year + '-01-01'
}
}
return ''
}
},
end: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '23:59'
}
if (this.mode === mode.DATE) {
let year = (new Date()).getFullYear() + 150
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-12'
case fields.DAY:
return year + '-12-31'
}
}
return ''
}
},
disabled: {
type: [Boolean, String],
default: false
},
visible: {
type: Boolean,
default: false
}
},
data () {
return {
timeArray: [],
dateArray: [],
valueArray: [],
oldValueArray: []
}
},
computed: {
rangeArray () {
var val = this.range
switch (this.mode) {
case mode.SELECTOR:
return [val]
case mode.MULTISELECTOR:
return val
case mode.TIME:
return this.timeArray
case mode.DATE:
{
let dateArray = this.dateArray
switch (this.fields) {
case fields.YEAR:
return [dateArray[0]]
case fields.MONTH:
return [dateArray[0], dateArray[1]]
case fields.DAY:
return [dateArray[0], dateArray[1], dateArray[2]]
}
}
}
},
startArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':'
var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
var val = this.start.split(splitStr).map((val, i) => array[i].indexOf(
val))
if (val.indexOf(-1) >= 0) {
val = array.map(() => 0)
}
return val
},
endArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':'
var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
var val = this.end.split(splitStr).map((val, i) => array[i].indexOf(
val))
if (val.indexOf(-1) >= 0) {
val = array.map((val) => val.length - 1)
}
return val
},
units () {
switch (this.mode) {
case mode.DATE:
return ['', '', '']
case mode.TIME:
return ['', '']
default:
return []
}
}
},
watch: {
valueArray (val) {
if (this.mode === mode.TIME || this.mode === mode.DATE) {
let getValue = this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
let valueArray = this.valueArray
let startArray = this.startArray
let endArray = this.endArray
if (this.mode === mode.DATE) {
const dateArray = this.dateArray
let max = dateArray[2].length
let day = dateArray[2][valueArray[2]]
let realDay = new Date(`${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]}/${day}`).getDate()
day = Number(day)
if (realDay < day) {
valueArray[2] -= realDay + max - day
}
}
if (getValue(valueArray) < getValue(startArray)) {
this._cloneArray(valueArray, startArray)
} else if (getValue(valueArray) > getValue(endArray)) {
this._cloneArray(valueArray, endArray)
}
}
val.forEach((value, column) => {
if (value !== this.oldValueArray[column]) {
this.oldValueArray[column] = value
if (this.mode === mode.MULTISELECTOR) {
// 触发 View 层 columnchange 事件
UniServiceJSBridge.publishHandler(this.pageId + '-picker-columnchange', {
column,
value
}, this.pageId)
}
}
})
},
visible (val) {
if (!val) {
this.$nextTick(() => this._setValue())
}
}
},
created () {
this._createTime()
this._createDate()
this._setValue()
this.$watch('value', this._setValue)
this.$watch('mode', this._setValue)
},
methods: {
_createTime () {
var hours = []
var minutes = []
hours.splice(0, hours.length)
for (let i = 0; i < 24; i++) {
hours.push((i < 10 ? '0' : '') + i)
}
minutes.splice(0, minutes.length)
for (let i = 0; i < 60; i++) {
minutes.push((i < 10 ? '0' : '') + i)
}
this.timeArray.push(hours, minutes)
},
_createDate () {
var years = []
var year = (new Date()).getFullYear()
for (let i = year - 150, end = year + 150; i <= end; i++) {
years.push(String(i))
}
var months = []
for (let i = 1; i <= 12; i++) {
months.push((i < 10 ? '0' : '') + i)
}
var days = []
for (let i = 1; i <= 31; i++) {
days.push((i < 10 ? '0' : '') + i)
}
this.dateArray.push(years, months, days)
},
_getTimeValue (val) {
return val[0] * 60 + val[1]
},
_getDateValue (val) {
return val[0] * 366 + (val[1] || 0) * 31 + (val[2] || 0)
},
/**
* 将右侧数组值同步到左侧(交集部分)
*/
_cloneArray (val1, val2) {
for (let i = 0; i < val1.length && i < val2.length; i++) {
val1[i] = val2[i]
}
},
_setValue () {
var val = this.value
var valueArray
switch (this.mode) {
case mode.SELECTOR:
valueArray = [val]
break
case mode.MULTISELECTOR:
valueArray = [...val]
break
case mode.TIME:
// 处理默认值为当前时间
if (this.value === 0) {
val = formatDateTime({
mode: mode.TIME
})
}
valueArray = val.split(':').map((val, i) => this.timeArray[i].indexOf(val))
break
case mode.DATE:
// 处理默认值为当前日期
if (this.value === 0) {
val = formatDateTime({
mode: mode.DATE
})
}
valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val))
break
}
this.oldValueArray = [...valueArray]
this.valueArray = [...valueArray]
},
_getValue () {
var val = this.valueArray
switch (this.mode) {
case mode.SELECTOR:
return val[0]
case mode.MULTISELECTOR:
return val.map(val => val)
case mode.TIME:
return this.valueArray.map((val, i) => this.timeArray[i][val]).join(':')
case mode.DATE:
return this.valueArray.map((val, i) => this.dateArray[i][val]).join('-')
}
},
_change () {
this.$emit('close')
// 触发 View 层 change 事件
UniServiceJSBridge.publishHandler(this.pageId + '-picker-change', {
value: this._getValue()
}, this.pageId)
},
_cancel () {
// 通知父组件修改 visible
this.$emit('close')
// 触发 View 层 cancel 事件
UniServiceJSBridge.publishHandler(this.pageId + '-picker-cancel', {}, this.pageId)
}
}
}
</script>
<style>
uni-picker {
display: block;
box-sizing: border-box;
}
uni-picker .uni-picker * {
box-sizing: border-box;
}
uni-picker .uni-picker {
position: fixed;
left: 0;
bottom: 0;
transform: translate(0, 100%);
backface-visibility: hidden;
z-index: 999;
width: 100%;
background-color: #efeff4;
visibility: hidden;
transition: transform 0.3s, visibility 0.3s;
}
uni-picker .uni-picker.uni-picker-toggle {
visibility: visible;
transform: translate(0, 0);
}
uni-picker .uni-picker-content {
position: relative;
display: block;
width: 100%;
height: 238px;
background-color: white;
}
uni-picker .uni-picker-item {
padding: 0;
height: 34px;
line-height: 34px;
text-align: center;
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
uni-picker .uni-picker-header {
display: block;
position: relative;
text-align: center;
width: 100%;
height: 45px;
background-color: #fff;
}
uni-picker .uni-picker-header:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
clear: both;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
uni-picker .uni-picker-action {
display: block;
max-width: 50%;
top: 0;
height: 100%;
box-sizing: border-box;
padding: 0 14px;
font-size: 17px;
line-height: 45px;
overflow: hidden;
}
uni-picker .uni-picker-action.uni-picker-action-cancel {
float: left;
color: #888;
}
uni-picker .uni-picker-action.uni-picker-action-confirm {
float: right;
color: #007aff;
}
/* .uni-picker {
position: relative;
}
.uni-picker-units {
position: absolute;
display: flex;
width: 100%;
line-height: 16px;
font-size: 14px;
top: 50%;
margin-top: 22.5px;
transform: translateY(-50%);
overflow: hidden;
color: #666666;
pointer-events: none;
}
.uni-picker-units > div {
flex: 1;
text-align: center;
transform: translateX(2em);
} */
</style>
<template>
<uni-picker @click.stop="_show">
<div
ref="picker"
class="uni-picker-container"
@touchmove.prevent>
<transition name="uni-fade">
<div
v-show="visible"
class="uni-mask"
@click="_cancel" />
</transition>
<div
:class="{'uni-picker-toggle':visible}"
class="uni-picker">
<div
class="uni-picker-header"
@click.stop>
<div
class="uni-picker-action uni-picker-action-cancel"
@click="_cancel">取消</div>
<div
class="uni-picker-action uni-picker-action-confirm"
@click="_change">确定</div>
</div>
<v-uni-picker-view
v-if="visible"
:value.sync="valueArray"
class="uni-picker-content">
<v-uni-picker-view-column
v-for="(range,index0) in rangeArray"
:key="index0">
<div
v-for="(item,index) in range"
:key="index"
class="uni-picker-item"
>{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
</v-uni-picker-view-column>
</v-uni-picker-view>
<!-- 第二种时间单位展示方式-暂时不用这种 -->
<!-- <div v-if="units.length" class="uni-picker-units">
<div v-for="(item,index) in units" :key="index">{{item}}</div>
</div>-->
</div>
</div>
<div>
<slot />
</div>
</uni-picker>
</template>
<script>
import { emitter } from 'uni-mixins'
import { formatDateTime } from 'uni-shared'
const mode = {
SELECTOR: 'selector',
MULTISELECTOR: 'multiSelector',
TIME: 'time',
DATE: 'date'
// 暂不支持城市选择
// REGION: 'region'
}
const fields = {
YEAR: 'year',
MONTH: 'month',
DAY: 'day'
}
export default {
name: 'Picker',
mixins: [emitter],
props: {
name: {
type: String,
default: ''
},
range: {
type: Array,
default () {
return []
}
},
rangeKey: {
type: String,
default: ''
},
value: {
type: [Number, String, Array],
default: 0
},
mode: {
type: String,
default: mode.SELECTOR,
validator (val) {
return Object.values(mode).indexOf(val) >= 0
}
},
fields: {
type: String,
default: 'day',
validator (val) {
return Object.values(fields).indexOf(val) >= 0
}
},
start: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '00:00'
}
if (this.mode === mode.DATE) {
let year = new Date().getFullYear() - 100
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-01'
case fields.DAY:
return year + '-01-01'
}
}
return ''
}
},
end: {
type: String,
default () {
if (this.mode === mode.TIME) {
return '23:59'
}
if (this.mode === mode.DATE) {
let year = new Date().getFullYear() + 100
switch (this.fields) {
case fields.YEAR:
return year
case fields.MONTH:
return year + '-12'
case fields.DAY:
return year + '-12-31'
}
}
return ''
}
},
disabled: {
type: [Boolean, String],
default: false
}
},
data () {
return {
valueSync: this.value || 0,
visible: false,
valueChangeSource: '',
timeArray: [],
dateArray: [],
valueArray: [],
oldValueArray: []
}
},
computed: {
rangeArray () {
var val = this.range
switch (this.mode) {
case mode.SELECTOR:
return [val]
case mode.MULTISELECTOR:
return val
case mode.TIME:
return this.timeArray
case mode.DATE:
{
let dateArray = this.dateArray
switch (this.fields) {
case fields.YEAR:
return [dateArray[0]]
case fields.MONTH:
return [dateArray[0], dateArray[1]]
case fields.DAY:
return [dateArray[0], dateArray[1], dateArray[2]]
}
}
}
},
startArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':'
var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
var val = this.start.split(splitStr).map((val, i) => array[i].indexOf(
val))
if (val.indexOf(-1) >= 0) {
val = array.map(() => 0)
}
return val
},
endArray () {
var splitStr = this.mode === mode.DATE ? '-' : ':'
var array = this.mode === mode.DATE ? this.dateArray : this.timeArray
var val = this.end.split(splitStr).map((val, i) => array[i].indexOf(
val))
if (val.indexOf(-1) >= 0) {
val = array.map((val) => val.length - 1)
}
return val
},
units () {
switch (this.mode) {
case mode.DATE:
return ['', '', '']
case mode.TIME:
return ['', '']
default:
return []
}
}
},
watch: {
value (val) {
if (Array.isArray(val)) {
if (!Array.isArray(this.valueSync)) {
this.valueSync = []
}
this.valueSync.length = val.length
val.forEach((val, index) => {
if (val !== this.valueSync[index]) {
this.$set(this.valueSync, index, val)
}
})
} else if (typeof val !== 'object') {
this.valueSync = val
}
},
valueSync (value) {
if (this.valueChangeSource) {
this.$trigger(
'change',
{},
{
value
}
)
}
},
valueArray (val) {
if (this.mode === mode.TIME || this.mode === mode.DATE) {
let getValue =
this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
let valueArray = this.valueArray
let startArray = this.startArray
let endArray = this.endArray
if (this.mode === mode.DATE) {
const dateArray = this.dateArray
let max = dateArray[2].length
let day = dateArray[2][valueArray[2]]
let realDay = new Date(
`${dateArray[0][valueArray[0]]}/${
dateArray[1][valueArray[1]]
}/${day}`
).getDate()
day = Number(day)
if (realDay < day) {
valueArray[2] -= realDay + max - day
}
}
if (getValue(valueArray) < getValue(startArray)) {
this._cloneArray(valueArray, startArray)
} else if (getValue(valueArray) > getValue(endArray)) {
this._cloneArray(valueArray, endArray)
}
}
val.forEach((value, column) => {
if (value !== this.oldValueArray[column]) {
this.oldValueArray[column] = value
if (this.mode === mode.MULTISELECTOR) {
this.$trigger('columnchange', {}, {
column,
value
}
)
}
}
})
}
},
created () {
this.$dispatch('Form', 'uni-form-group-update', {
type: 'add',
vm: this
})
this._createTime()
this._createDate()
this.$watch('valueSync', this._setValue)
this.$watch('mode', this._setValue)
},
beforeDestroy () {
this.$dispatch('Form', 'uni-form-group-update', {
type: 'remove',
vm: this
})
},
methods: {
_show () {
if (this.disabled) {
return
}
this.valueChangeSource = ''
this._setValue()
var $picker = this.$refs.picker
$picker.remove();
(document.querySelector('uni-app') || document.body).append($picker)
$picker.style.display = 'block'
setTimeout(() => {
this.visible = true
}, 20)
},
_getFormData () {
return {
value: this.valueSync,
key: this.name
}
},
_resetFormData () {
this.valueSync = ''
},
_createTime () {
var hours = []
var minutes = []
hours.splice(0, hours.length)
for (let i = 0; i < 24; i++) {
hours.push((i < 10 ? '0' : '') + i)
}
minutes.splice(0, minutes.length)
for (let i = 0; i < 60; i++) {
minutes.push((i < 10 ? '0' : '') + i)
}
this.timeArray.push(hours, minutes)
},
_createDate () {
var years = []
var year = new Date().getFullYear()
for (let i = year - 150, end = year + 150; i <= end; i++) {
years.push(String(i))
}
var months = []
for (let i = 1; i <= 12; i++) {
months.push((i < 10 ? '0' : '') + i)
}
var days = []
for (let i = 1; i <= 31; i++) {
days.push((i < 10 ? '0' : '') + i)
}
this.dateArray.push(years, months, days)
},
_getTimeValue (val) {
return val[0] * 60 + val[1]
},
_getDateValue (val) {
return val[0] * 366 + (val[1] || 0) * 31 + (val[2] || 0)
},
/**
* 将右侧数组值同步到左侧(交集部分)
*/
_cloneArray (val1, val2) {
for (let i = 0; i < val1.length && i < val2.length; i++) {
val1[i] = val2[i]
}
},
_setValue () {
var val = this.valueSync
var valueArray
switch (this.mode) {
case mode.SELECTOR:
valueArray = [val]
break
case mode.MULTISELECTOR:
valueArray = [...val]
break
case mode.TIME:
// 处理默认值为当前时间
if (this.value === 0) {
val = formatDateTime({
mode: mode.TIME
})
}
valueArray = val
.split(':')
.map((val, i) => this.timeArray[i].indexOf(val))
break
case mode.DATE:
// 处理默认值为当前日期
if (this.value === 0) {
val = formatDateTime({
mode: mode.DATE
})
}
valueArray = val
.split('-')
.map((val, i) => this.dateArray[i].indexOf(val))
break
}
this.oldValueArray = [...valueArray]
this.valueArray = [...valueArray]
},
_getValue () {
var val = this.valueArray
switch (this.mode) {
case mode.SELECTOR:
return val[0]
case mode.MULTISELECTOR:
return val.map(val => val)
case mode.TIME:
return this.valueArray
.map((val, i) => this.timeArray[i][val])
.join(':')
case mode.DATE:
return this.valueArray
.map((val, i) => this.dateArray[i][val])
.join('-')
}
},
_change () {
this._close()
this.valueChangeSource = 'click'
let value = this._getValue()
this.valueSync = Array.isArray(value) ? value.map(val => val) : value
},
_cancel () {
this._close()
this.$trigger('cancel', {}, {})
},
_close () {
this.visible = false
setTimeout(() => {
var $picker = this.$refs.picker
$picker.remove()
this.$el.prepend($picker)
$picker.style.display = 'none'
}, 260)
}
}
}
</script>
<style>
uni-picker {
display: block;
}
.uni-picker-container {
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
z-index: 999;
font-size: 16px;
}
.uni-picker-container .uni-picker * {
box-sizing: border-box;
}
.uni-picker-container .uni-picker {
position: fixed;
left: 0;
bottom: 0;
transform: translate(0, 100%);
backface-visibility: hidden;
z-index: 999;
width: 100%;
background-color: #efeff4;
visibility: hidden;
transition: transform 0.3s, visibility 0.3s;
}
.uni-picker-container .uni-picker.uni-picker-toggle {
visibility: visible;
transform: translate(0, 0);
}
.uni-picker-container .uni-picker-content {
position: relative;
display: block;
width: 100%;
height: 238px;
background-color: white;
}
.uni-picker-container .uni-picker-item {
padding: 0;
height: 34px;
line-height: 34px;
text-align: center;
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.uni-picker-container .uni-picker-header {
display: block;
position: relative;
text-align: center;
width: 100%;
height: 45px;
background-color: #fff;
}
.uni-picker-container .uni-picker-header:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
clear: both;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.uni-picker-container .uni-picker-action {
display: block;
max-width: 50%;
top: 0;
height: 100%;
box-sizing: border-box;
padding: 0 14px;
font-size: 17px;
line-height: 45px;
overflow: hidden;
}
.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
float: left;
color: #888;
}
.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
float: right;
color: #007aff;
}
/* .uni-picker {
position: relative;
}
.uni-picker-units {
position: absolute;
display: flex;
width: 100%;
line-height: 16px;
font-size: 14px;
top: 50%;
margin-top: 22.5px;
transform: translateY(-50%);
overflow: hidden;
color: #666666;
pointer-events: none;
}
.uni-picker-units > div {
flex: 1;
text-align: center;
transform: translateX(2em);
} */
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册