@nutui/nutui-react-taro 3.0.1 → 3.0.3-beta.0

package/dist/cjs/packages/picker/style/style.css

@@ -383,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

package/dist/cjs/packages/signature/signature.js

@@ -164,7 +164,7 @@ var InternalSignature = function InternalSignature(props, ref) {
         onTouchStart: startEventHandler,
         onTouchMove: moveEventHandler,
         onTouchEnd: endEventHandler
-    }) : /*#__PURE__*/ _react.default.createElement("canvas", {
+    }) : /*#__PURE__*/ _react.default.createElement(_components.Canvas, {
         id: canvasId,
         ref: canvasRef,
         "canvas-id": canvasId,

package/dist/cjs/packages/swipe/style/style.css

@@ -22,12 +22,12 @@
 .nut-swipe-left, .nut-swipe-right {
   position: absolute;
   top: 0;
-  display: flex;
-  flex-direction: row;
 }
 .nut-swipe-left {
   left: 0;
+  transform: translate(-100%, 0px);
 }
 .nut-swipe-right {
-  left: 100%;
+  right: 0px;
+  transform: translate(100%, 0px);
 }

package/dist/cjs/packages/swipe/style/style.harmony.css

@@ -22,12 +22,12 @@
 .nut-swipe-left, .nut-swipe-right {
   position: absolute;
   top: 0;
-  display: flex;
-  flex-direction: row;
 }
 .nut-swipe-left {
   left: 0;
+  transform: translate(-100%, 0px);
 }
 .nut-swipe-right {
-  left: 100%;
+  right: 0px;
+  transform: translate(100%, 0px);
 }

package/dist/cjs/packages/swipe/style/swipe.scss

@@ -20,15 +20,19 @@
   &-right {
     position: absolute;
     top: 0;
-    display: flex;
-    flex-direction: row;
+    //display: flex;
+    //flex-direction: row;
+    //flex-shrink: 0;
   }
 
   &-left {
     left: 0;
+    transform: translate(-100%, 0px);
   }
 
   &-right {
-    left: 100%;
+    //left: 100%;
+    right: 0px;
+    transform: translate(100%, 0px);
   }
 }

package/dist/cjs/packages/swipe/swipe.js

@@ -18,12 +18,13 @@ var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _taro = require("@tarojs/taro");
 var _usetouch = require("../../hooks/use-touch");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _typings = require("../../utils/typings");
 var _platformtaro = require("../../utils/platform-taro");
-var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var _userefstate = require("../../hooks/use-ref-state");
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
 function preventDefault(event, isStopPropagation) {
     if (typeof event.cancelable !== 'boolean' || event.cancelable) {
         event.preventDefault();
@@ -38,8 +39,11 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     var classPrefix = 'nut-swipe';
     var touch = (0, _usetouch.useTouch)();
+    var uid = (0, _useuuid.default)();
+    var leftId = "swipe-left-".concat(uid);
+    var rightId = "swipe-right-".concat(uid);
     // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-    (0, _react.useEffect)(function() {
+    (0, _taro.useReady)(function() {
         var getWidth = /*#__PURE__*/ function() {
             var _ref = (0, _async_to_generator._)(function() {
                 var leftRect, rightRect;
@@ -52,7 +56,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
                             ];
                             return [
                                 4,
-                                (0, _getrectbytaro.getRectByTaro)(leftWrapper.current)
+                                (0, _getrectbytaro.getRectByTaro)(leftWrapper.current, leftId)
                             ];
                         case 1:
                             leftRect = _state.sent();
@@ -69,11 +73,10 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
                             ];
                             return [
                                 4,
-                                (0, _getrectbytaro.getRectByTaro)(rightWrapper.current)
+                                (0, _getrectbytaro.getRectByTaro)(rightWrapper.current, rightId)
                             ];
                         case 3:
                             rightRect = _state.sent();
-                            console.log('actionWidth.current.left', rightRect.width);
                             rightRect && setActionWidth(function(v) {
                                 return (0, _object_spread_props._)((0, _object_spread._)({}, v), {
                                     right: rightRect.width
@@ -94,7 +97,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         setTimeout(function() {
             return getWidth();
         });
-    }, []);
+    });
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
     var root = (0, _react.useRef)();
     var opened = (0, _react.useRef)(false);
@@ -122,7 +125,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         }
     };
     var wrapperStyle = {
-        transform: "translate(".concat(state.offset, "px, 0)"),
+        transform: "translate(".concat(state.offset).concat(!(0, _platformtaro.harmony)() ? 'px' : '', ", 0)"),
         transitionDuration: state.dragging ? '0s' : '.6s'
     };
     var onTouchStart = /*#__PURE__*/ function() {
@@ -131,14 +134,13 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        console.log('ontouchstart');
                         if (!leftWrapper.current) return [
                             3,
                             2
                         ];
                         return [
                             4,
-                            (0, _getrectbytaro.getRectByTaro)(leftWrapper.current)
+                            (0, _getrectbytaro.getRectByTaro)(leftWrapper.current, leftId)
                         ];
                     case 1:
                         leftRect = _state.sent();
@@ -155,7 +157,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
                         ];
                         return [
                             4,
-                            (0, _getrectbytaro.getRectByTaro)(rightWrapper.current)
+                            (0, _getrectbytaro.getRectByTaro)(rightWrapper.current, rightId)
                         ];
                     case 3:
                         rightRect = _state.sent();
@@ -198,7 +200,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
             if (isEdge) {
                 preventDefault(event, true);
             }
-            newState.offset = rangeCalculation(((0, _platformtaro.harmony)() ? parseFloat((0, _pxtransform.default)(touch.deltaX.current)) : touch.deltaX.current) + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
+            newState.offset = rangeCalculation(touch.deltaX.current + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
             setState(newState);
         }
     };
@@ -265,13 +267,10 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
     var rightWrapper = (0, _react.useRef)(null);
     var renderActionContent = function renderActionContent(side) {
         if (props["".concat(side, "Action")]) {
-            console.log('actionWidth xxx', actionWidth.current.left);
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
                 ref: side === 'left' ? leftWrapper : rightWrapper,
                 className: "".concat(classPrefix, "-").concat(side),
-                style: (0, _object_spread._)({}, side === 'left' ? {
-                    left: Number("".concat(-actionWidth.current.left))
-                } : {}),
+                id: side === 'left' ? leftId : rightId,
                 onClick: function onClick(e) {
                     return handleOperate(e, side);
                 }

package/dist/cjs/utils/get-rect-by-taro.d.ts

@@ -9,4 +9,4 @@ export interface Rect {
     height: number;
 }
 export declare function makeRect(width: number, height: number): Rect;
-export declare const getRectByTaro: (element: any) => Promise<Rect>;
+export declare const getRectByTaro: (element: any, harmonyId?: string) => Promise<Rect>;

package/dist/cjs/utils/get-rect-by-taro.js

@@ -33,7 +33,10 @@ function makeRect(width, height) {
 }
 var getRectByTaro = /*#__PURE__*/ function() {
     var _ref = (0, _async_to_generator._)(function(element) {
+        var harmonyId;
+        var _arguments = arguments;
         return (0, _ts_generator._)(this, function(_state) {
+            harmonyId = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : '';
             if (element) {
                 if (_useclientrect.inBrowser) {
                     return [
@@ -45,7 +48,7 @@ var getRectByTaro = /*#__PURE__*/ function() {
                 return [
                     2,
                     new Promise(function(resolve, reject) {
-                        (0, _taro.createSelectorQuery)().select("#".concat(element.uid)).boundingClientRect().exec(function(param) {
+                        (0, _taro.createSelectorQuery)().select("#".concat(harmonyId || element.uid)).boundingClientRect().exec(function(param) {
                             var _param = (0, _sliced_to_array._)(param, 1), rects = _param[0];
                             resolve(rects);
                         });

package/dist/cjs/utils/get-system-info.js

@@ -19,14 +19,13 @@ _export(exports, {
         return getWindowInfo;
     }
 });
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
+var _taro = require("@tarojs/taro");
 var getDeviceInfo = function getDeviceInfo() {
-    return _taro.default.canIUse('getDeviceInfo') ? _taro.default.getDeviceInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getDeviceInfo') ? (0, _taro.getDeviceInfo)() : (0, _taro.getSystemInfoSync)();
 };
 var getWindowInfo = function getWindowInfo() {
-    return _taro.default.canIUse('getWindowInfo') ? _taro.default.getWindowInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getWindowInfo') ? (0, _taro.getWindowInfo)() : (0, _taro.getSystemInfoSync)();
 };
 var getAppBaseInfo = function getAppBaseInfo() {
-    return _taro.default.canIUse('getAppBaseInfo') ? _taro.default.getAppBaseInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getAppBaseInfo') ? (0, _taro.getAppBaseInfo)() : (0, _taro.getSystemInfoSync)();
 };

package/dist/cjs/utils/merge.d.ts

@@ -0,0 +1,14 @@
+export default main;
+export declare function main(clone: boolean, ...items: any[]): any;
+export declare function main(...items: any[]): any;
+export declare namespace main {
+    var clone: typeof import("./merge").clone;
+    var isPlainObject: typeof import("./merge").isPlainObject;
+    var recursive: typeof import("./merge").recursive;
+}
+export declare function merge(clone: boolean, ...items: any[]): any;
+export declare function merge(...items: any[]): any;
+export declare function recursive(clone: boolean, ...items: any[]): any;
+export declare function recursive(...items: any[]): any;
+export declare function clone<T>(input: T): T;
+export declare function isPlainObject(input: unknown): input is NonNullable<any>;

package/dist/cjs/utils/merge.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    clone: function() {
+        return clone;
+    },
+    default: function() {
+        return _default;
+    },
+    isPlainObject: function() {
+        return isPlainObject;
+    },
+    main: function() {
+        return main;
+    },
+    merge: function() {
+        return merge;
+    },
+    recursive: function() {
+        return recursive;
+    }
+});
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _type_of = require("@swc/helpers/_/_type_of");
+var _default = main;
+function main() {
+    for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+        items[_key] = arguments[_key];
+    }
+    return merge.apply(void 0, (0, _to_consumable_array._)(items));
+}
+main.clone = clone;
+main.isPlainObject = isPlainObject;
+main.recursive = recursive;
+function merge() {
+    for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+        items[_key] = arguments[_key];
+    }
+    return _merge(items[0] === true, false, items);
+}
+function recursive() {
+    for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+        items[_key] = arguments[_key];
+    }
+    return _merge(items[0] === true, true, items);
+}
+function clone(input) {
+    if (Array.isArray(input)) {
+        var output = [];
+        for(var index = 0; index < input.length; ++index)output.push(clone(input[index]));
+        return output;
+    }
+    if (isPlainObject(input)) {
+        var output1 = {};
+        // eslint-disable-next-line guard-for-in
+        for(var index1 in input)output1[index1] = clone(input[index1]);
+        return output1;
+    }
+    return input;
+}
+function isPlainObject(input) {
+    if (input === null || (typeof input === "undefined" ? "undefined" : (0, _type_of._)(input)) !== 'object') return false;
+    if (Object.getPrototypeOf(input) === null) return true;
+    var ref = input;
+    while(Object.getPrototypeOf(ref) !== null)ref = Object.getPrototypeOf(ref);
+    return Object.getPrototypeOf(input) === ref;
+}
+function _recursiveMerge(base, extend) {
+    if (!isPlainObject(base) || !isPlainObject(extend)) return extend;
+    for(var key in extend){
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;
+        base[key] = isPlainObject(base[key]) && isPlainObject(extend[key]) ? _recursiveMerge(base[key], extend[key]) : extend[key];
+    }
+    return base;
+}
+function _merge(isClone, isRecursive, items) {
+    var result;
+    if (isClone || !isPlainObject(result = items.shift())) result = {};
+    for(var index = 0; index < items.length; ++index){
+        var item = items[index];
+        // eslint-disable-next-line no-continue
+        if (!isPlainObject(item)) continue;
+        for(var key in item){
+            if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;
+            var value = isClone ? clone(item[key]) : item[key];
+            result[key] = isRecursive ? _recursiveMerge(result[key], value) : value;
+        }
+    }
+    return result;
+}

package/dist/cjs/utils/platform-taro.js

@@ -19,22 +19,21 @@ _export(exports, {
         return web;
     }
 });
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
+var _taro = require("@tarojs/taro");
 var harmony = function harmony() {
     return [
         'harmony',
         'harmonyhybrid',
         'jdharmony'
-    ].includes(_taro.default.getEnv().toLowerCase());
+    ].includes((0, _taro.getEnv)().toLowerCase());
 };
 var web = function web() {
     return [
         'web'
-    ].includes(_taro.default.getEnv().toLowerCase());
+    ].includes((0, _taro.getEnv)().toLowerCase());
 };
 var miniprogram = function miniprogram() {
     return [
         'mini'
-    ].includes(_taro.default.getEnv().toLowerCase());
+    ].includes((0, _taro.getEnv)().toLowerCase());
 };

package/dist/cjs/utils/to-array.d.ts

@@ -0,0 +1 @@
+export declare function toArray<T>(value?: T | T[] | null): T[];

package/dist/cjs/utils/to-array.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "toArray", {
+    enumerable: true,
+    get: function() {
+        return toArray;
+    }
+});
+function toArray(value) {
+    if (value === undefined || value === null) {
+        return [];
+    }
+    return Array.isArray(value) ? value : [
+        value
+    ];
+}

package/dist/es/hooks/use-client-rect.js

@@ -25,6 +25,7 @@ export function isWindow(val) {
         };
     }
     if (element && element.getBoundingClientRect) {
+        console.log(element, element.getBoundingClientRect());
         return element.getBoundingClientRect();
     }
     return {

package/dist/es/packages/datepicker/style/style.css

@@ -383,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

package/dist/es/packages/datepickerview/style/index.js

@@ -1 +1,2 @@
+import '../../pickerview/style';
 import './datepickerview.scss';

package/dist/es/packages/datepickerview/style/style.css

@@ -2,6 +2,76 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-datepickerview {
   display: flex;
   width: 100%;