taro-ui icon indicating copy to clipboard operation
taro-ui copied to clipboard

AtCalendar 日历选择组件,嵌套在多个组件内部,样式无法显示?

Open bingo618 opened this issue 3 years ago • 3 comments

问题描述 AtCalendar 日历选择组件,嵌套在多个组件内部,样式无法显示

复现步骤

 <AtFloatLayout isOpened={open} className="calendar" onClose={onClose}>
      <View className="calendar-header">
        <Text className="cancel-btn" onClick={onClose}>
          取消
        </Text>
        <Text>{title}</Text>
        <AtButton
          circle
          className="confirm-btn"
          type="primary"
          onClick={handleConfirm}
          size="small"
        >
          确定
        </AtButton>
      </View>
      <AtTabs
        current={current}
        swipeable={false}
        onClick={handleChange}
        tabList={[{ title: "选择日期" }, { title: "选择时间" }]}
      >
        <AtTabsPane className="calendar__content" current={current} index={0}>
          <AtCalendar
            currentDate={currentDate}
            validDates={validDates}
            isSwiper={false}
            isMultiSelect={false}
            onSelectDate={handleSelectDate}
            onMonthChange={handleMonthChange}
          />
        </AtTabsPane>
        <AtTabsPane className="calendar__content" current={current} index={1}>
          <PickerView
            value={pickerValue}
            style={{ width: "100%", height: "250px" }}
            indicatorStyle="height: 50px"
            onChange={handlePickerChange}
          >
            <PickerViewColumn
              style={{ lineHeight: "50px", textAlign: "center" }}
            >
              {hours.map((item) => (
                <View style={{ fontSize: "16px" }}>{affixZ(item)} 时</View>
              ))}
            </PickerViewColumn>
            <PickerViewColumn
              style={{ lineHeight: "50px", textAlign: "center" }}
            >
              {minutes.map((item) => (
                <View style={{ fontSize: "16px" }}>{affixZ(item)} 分</View>
              ))}
            </PickerViewColumn>
          </PickerView>
        </AtTabsPane>
      </AtTabs>
    </AtFloatLayout>

系统信息 Taro CLI 3.0.9 environment info: System: OS: macOS 11.1 Shell: 5.8 - /bin/zsh Binaries: Node: 12.12.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm npmPackages: @tarojs/components: 3.0.9 => 3.0.9 @tarojs/mini-runner: 3.0.9 => 3.0.9 @tarojs/react: 3.0.9 => 3.0.9 @tarojs/runtime: 3.0.9 => 3.0.9 @tarojs/taro: 3.0.9 => 3.0.9 @tarojs/webpack-runner: 3.0.9 => 3.0.9 babel-preset-taro: 3.0.9 => 3.0.9 eslint-config-taro: 3.0.9 => 3.0.9 react: ^16.10.0 => 16.13.1 taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10

bingo618 avatar Apr 21 '21 06:04 bingo618