日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
import React, { useState, memo, useEffect, useRef } from 'react'; 
  
  
  
  
import { Calendar } from 'zarm'; 
  
  
  
  
import styles from './index.less'; 
  
  
  
  
import { ICalendarConfig } from './schema'; 
  
  
  
  
 
  
  
  
  
const CalendarCp = memo((props: ICalendarConfig & { isTpl: boolean }) => { 
  
  
  
  
  const { time, range, color, selectedColor, round, isTpl } = props; 
  
  
  
  
  // ... 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      
  
  
  
  
        multiple={!!range} 
  
  
  
  
        value={value} 
  
  
  
  
        min={min} 
  
  
  
  
        max={new Date(max)} 
  
  
  
  
        disabledDate={(date:any) => /(0|6)/.test(date.getDay())} 
  
  
  
  
        onChange={(value:Date[] | undefined) => { 
  
  
  
  
          setValue(value); 
  
  
  
  
        }} 
  
  
  
  
      /> 
  
  
  
  
    

 這是一個dooring組件的基本雛形, 其次我們看看 schema 部分. 這一部分主要包含了組件的shape的類型定義和基本的可編輯屬性(editable), 如下:

 
 
 
 

  
  
  
  
export type TCalendarEditData = Array; 
  
  
  
  
export interface ICalendarConfig { 
  
  
  
  
  time: TTextDefaultType; 
  
  
  
  
  range: TTextDefaultType; 
  
  
  
  
  color: TTextDefaultType; 
  
  
  
  
  selectedColor: TTextDefaultType; 
  
  
  
  
  round: TNumberDefaultType; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
export interface ICalendarSchema { 
  
  
  
  
  editData: TCalendarEditData; 
  
  
  
  
  config: ICalendarConfig; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const Calendar: ICalendarSchema = { 
  
  
  
  
  editData: [ 
  
  
  
  
    { 
  
  
  
  
      key: 'time', 
  
  
  
  
      name: '日歷時間', 
  
  
  
  
      type: 'Text', 
  
  
  
  
      placeholder: '格式如2020-01或2020-11' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'range', 
  
  
  
  
      name: '日歷選中范圍', 
  
  
  
  
      type: 'Text', 
  
  
  
  
      placeholder: '格式如01-12(幾號到幾號)' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'color', 
  
  
  
  
      name: '文本顏色', 
  
  
  
  
      type: 'Color' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'selectedColor', 
  
  
  
  
      name: '選中顏色', 
  
  
  
  
      type: 'Color' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'round', 
  
  
  
  
      name: '圓角', 
  
  
  
  
      type: 'Number' 
  
  
  
  
    }, 
  
  
  
  
  ], 
  
  
  
  
  config: { 
  
  
  
  
    time: '2020-12', 
  
  
  
  
    range: '05-08', 
  
  
  
  
    color: 'rgba(0,0,0,1)', 
  
  
  
  
    selectedColor: 'rgba(22,40,212,1)', 
  
  
  
  
    round: 0 
  
  
  
  
  }, 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default Calendar; 
 
 
 
 

如果我們想增加屬性, 我們只需要在這個文件里添加對應(yīng)的屬性和類型即可.

template主要是定義了組件的分區(qū)和初始高度, 代碼如下:

 
 
 
 

  
  
  
  
const template = { 
  
  
  
  
  type: 'Calendar', 
  
  
  
  
  h: 185, 
  
  
  
  
  displayName: '日歷組件', 
  
  
  
  
}; 
  
  
  
  
export default template; 
 
 
 
 

有了以上三個部分, 我們要可以渲染出一個在畫布中可拖拽, 可編輯的組件了. 當(dāng)然這塊還需要FormRender的幫助, 這塊筆者后期會介紹.

以上基本就實(shí)現(xiàn)了一個可拖拽可配置的日歷組件, 我們接下來繼續(xù)看看地圖組件.

開發(fā)地圖組件

有了以上的組件開發(fā)經(jīng)驗(yàn)之后我們開發(fā)地圖組件就非常方便了. 地圖組件我們這里使用了@uiw/react-baidu-map, 也就是百度地圖的React版本, 大家也可以使用高德地圖.因?yàn)榈貓D組件react-baidu-map 需要提前閱讀對應(yīng)的文檔, 這里筆者就不一一介紹了, 我們直接來看如何實(shí)現(xiàn).同樣我們也需要定義好地圖對外暴露的props, 筆者這里簡單定義幾個可配置的屬性:

• ak 百度地圖使用憑證, 建議大家在生產(chǎn)環(huán)境替換成自己的
• location 地點(diǎn)的經(jīng)緯度, 方便快速定位
• position 地點(diǎn)的地名, 我們可以自定義設(shè)置

如下圖:

基本的代碼實(shí)現(xiàn)如下:

 
 
 
 

  
  
  
  
import React, { memo } from 'react'; 
  
  
  
  
import { Map, Marker, Label, APILoader } from '@uiw/react-baidu-map'; 
  
  
  
  
import styles from './index.less'; 
  
  
  
  
import { IMapConfig } from './schema'; 
  
  
  
  
 
  
  
  
  
const Mapcomponent = memo((props: IMapConfig) => { 
  
  
  
  
  const { ak, location, position } = props; 
  
  
  
  
  return ( 
  
  
  
  
         
  
  
  
  
           
  
  
  
  
             
  
  
  
  
               
  
  
  
  
              
  
  
  
  
                content={location}  
  
  
  
  
                position={{ lng: position[0], lat: position[1] }}  
  
  
  
  
                style={{color: '#000', borderColor: '#06c', padding: '3px 10px', borderRadius: '6px'}}  
  
  
  
  
              />