TS · 悦家 - 《知识杂记》

1.安装
2.组件、路由

1.安装

//  npm init -y          npm i yuejia -S

npm i yuejia

npm i yuejia-cli -g    //全局安装

npm i    //初始化

npm init

yj create project      //新建项目

npm i http-server -g

npm run dev

http-server

2.组件、路由

（1）组件：

创建页面

yj create page --name Home
Home是一个可替换的变量，页面的名称要首字母大写

创建纯组件

yj create component --name Head
Head是一个可替换的变量，组件的名称要首字母大写

创建类组件

yj create component --name Head --state
Head是一个可替换的变量，组件的名称要首字母大写
—state 表示是一个类组件

在页面下创建组件

yj create component --page Home --name Card
—page 表示页面的名称，Home是一个可替换的变量

（2）路由

3.悦家组件

（1）引入：

（2）调用：

（3）F12调试和查看该组件

4.svg图片格式的使用

（1）从ps中导出图片格式为svg格式
（2）路径导出、路径导入
const rankDown = require(‘../../assets/svg/rankDown.svg’);

/* 朝下箭头 /
rankDown: svgRootPath + rankDown.id,

css样式：

5.背景图片的使用

6.本机配置路径

7.{status ？（）：（）}，枚举， <> </>

import * as React from 'react';
import * as style from './index.scss';
import BasePage, { PageProps } from 'yuejia/app/Page';
import Page from 'yuejia/component/Page';
import View from 'yuejia/component/View';
import { Context } from 'yuejia/component/Model';
import config from '../../../config';
import ImgView from 'yuejia/component/ImgView';
import Icon from 'yuejia/component/Icon';
import * as classnames from 'classnames';
interface Match {
}
interface Props {
}
interface State {
  status: number;
  /** 经纪人维度排序类型 */
  type1: string;
  /** 经纪人维度排序方式 */
  typeS1: boolean;
  /** 置业顾问维度排序类型 */
  type2: string;
  /** 置业顾问维度排序方式 */
  typeS2: boolean;
  /** 判断箭头的显示与隐藏 */
  iconActive: boolean;
  /** 加载中图片 */
  loading: boolean;
}
const Complete = View.Complete;
const Empty = View.Empty;
const Fail = View.Fail;
// const LoadingView = () => (
//   <div className={style.lableCon}>
//     <Icon src={config.svgFiles.loading} className={style.icon}></Icon>
//     <span>正在拼命加载中···</span>
//   </div>
// );
class ProjectRank extends BasePage<Props, State, Match> {
  constructor(props: PageProps<Match>, state: State) {
    super(props, state);
    this.init();
    this.handleChecked = this.handleChecked.bind(this);
    this.isIconActive = this.isIconActive.bind(this);
  }
  public state: State = {
    status: 0,
    type1: '报备量',
    typeS1: true,
    type2: '分配量',
    typeS2: true,
    iconActive: true,
    loading: true
  };
  /** 经纪人维度和置业顾问维度的切换 */
  public handleChecked = (index: number) => {
    const status = (index === 0) ? 0 : 1;
    // const { loading } = this.state;
    this.setState({
      status
    });
  }
  /** 箭头上下的切换 */
  public isIconActive = (type: string) => {
    const { status, type1, typeS1, type2, typeS2 } = this.state;
    if (status) {
      this.setState({
        type2: type,
        typeS2: type2 === type ? !typeS2 : true,
      });
    } else {
      this.setState({
        type1: type,
        typeS1: type1 === type ? !typeS1 : true,
      });
    }
  }

public displayName: string = '项目排行';
  public pageName: string = '项目排行';

TS · 悦家