【react】Framework7普通选择器和时间选择器picker的使用

Framework7的选择器比微信小程序的picker麻烦多了，网上的资料较少，记录下它的一个使用案例。
picker组件文档地址：
https:// framework7.io/docs/picker

普通选择器

JS部分：

  	let picker = null;
    // 选择状态
    const [statusSelected, setStatusSelected] = useState('未处理')
    const [status, setStatus] = useState('')
	
	// 设置遮罩层
  	const [overflyZIndex, setOverlayZIndex] = useState(0);
    
    // 状态切换
    const statusChange = () => {
        if (picker != null) {
            picker.destroy();
        }
        setOverlayZIndex(12000)
        picker = f7router.app.picker.create({
            inputEl: '#statusChange',
            rotateEffect: true,//3d效果
            cssClass: 'lineAndStation',
            closeByOutsideClick: false,
            renderToolbar: function () {
                return '<div class="toolbar">' +
                    '<div class="left">' +
                    '<a href="#" class="link line-cancel">取消</a>' +
                    '</div>' +
                    '<div class="right">' +
                    '<a href="#" class="link line-sure">确定</a>' +
                    '</div>' +
                    '</div>';
            }, value: [statusSelected],
            cols: [
                {
                    textAlign: 'center',
                    values: ["全部", "未处理", "已处理"],
                }
            ],
            on: {//事件
                open: function (picker) {
                    picker.$el.find('.line-sure').on('click', function () {
                        const departData = picker.getValue();//获取当前选择值并弹框
                        setStatusSelected(departData[0]);
                        setStatus(departData[0])
                        picker.destroy();
                        setOverlayZIndex(0);
                    })
                    picker.$el.find('.line-cancel').on('click', function () {
                        picker.destroy();
                        setOverlayZIndex(0)
                    })
                },
            }
        }).open();
    }

html部分

 {/* 遮罩使用 */}
<div style={{ position: 'fixed', left: '0', top: '0', zIndex: overflyZIndex, width: '100vw', height: '100vh', backgroundColor: '#000000b3' }}></div>
 {/* 显示状态代码 */}                           
 <div className={styles.box} id={'statusChange'} onClick={() => { statusChange() }}>
     <div className={styles.label}><span>处理状态：</span></div>
     <div><span style={{ color: status == '全部' ? '#b2b2b9' : '#161718' }}>{status ? (status == '全部' ? '请选择状态' : status) : '未处理'}</span></div>
 </div>

时间选择器

JS部分

let picker = null;
// 获取当前时间
const todaySelected = new Date();
const [timeSelected, setTimeSelected] = useState([todaySelected.getFullYear(), todaySelected.getMonth() + 1, todaySelected.getDate()]);
// 控制遮罩
const [overflyZIndex, setOverlayZIndex] = useState(0);

// 时间切换
const timeChange = () => {
  if (isImplement) return;
  if (picker != null) {
    picker.destroy();
  }
  setOverlayZIndex(12000)
  const today = new Date();
  picker = f7router.app.picker.create({
    inputEl: '#timeChange',
    rotateEffect: true,//3d效果
    cssClass: 'lineAndStation',
    closeByOutsideClick: false,
    renderToolbar: function () {
      return '<div class="toolbar">' +
        '<div class="left">' +
        '<a href="#" class="link line-cancel">取消</a>' +
        '</div>' +
        '<div class="right">' +
        '<a href="#" class="link line-sure">确定</a>' +
        '</div>' +
        '</div>';
    }, value: timeSelected,
    cols: [
      // Years
      {
        values: (function () {
          var arr = [];
          for (var i = 1950; i <= 2030; i++) { arr.push(i); }
          return arr;
        })(),
        textAlign: 'left'
      },
      // Months
      {
        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      },
      // Days
      {
        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
      },

    ],
    on: {//事件
      open: function (picker) {
        picker.$el.find('.line-sure').on('click', function () {
          const departData = picker.getValue();//获取当前选择值并弹框   
          // 获取选中月份的最大天数
          const daysInMonth = new Date(departData[0], departData[1] * 1, 0).getDate()
          if (departData[2] > daysInMonth) {
            departData[2] = daysInMonth
          }
          const temp = departData.join('-')
          setTimeSelected(departData);
          setTime(temp)
          picker.destroy();
          setOverlayZIndex(0);
        })
        picker.$el.find('.line-cancel').on('click', function () {
          picker.destroy();
          setOverlayZIndex(0)
        })
      },
    }
  }).open();
}

html部分

 {/* 遮罩使用 */}
<div style={{ position: 'fixed', left: '0', top: '0', zIndex: overflyZIndex, width: '100vw', height: '100vh', backgroundColor: '#000000b3' }}></div>
 {/* 显示状态代码 */}    
 <div id={'timeChange'} className={styles.box} onClick={() => { timeChange() }}>
   <div className={styles.label}><span>抛粉时间：</span></div>
   <div style={{ width: '80px' }}><span style={{ color: time ? '#161718' : '#b2b2b9' }}>{time ? time : '请选择时间'}</span></div>
   <Icon style={{ marginTop: '6px', marginLeft: '7px', fontSize: '12px' }} f7="arrowtriangle_down_fill"></Icon>
 </div>