2020-07-28 14:55:49 +08:00
|
|
|
|
---
|
|
|
|
|
title: 快速开始
|
|
|
|
|
description:
|
|
|
|
|
---
|
|
|
|
|
|
2020-08-12 16:39:54 +08:00
|
|
|
|
amis 有两种使用方法:
|
|
|
|
|
|
|
|
|
|
- [JS SDK](#SDK)
|
2020-09-11 15:00:56 +08:00
|
|
|
|
- [npm](#npm)
|
|
|
|
|
|
2020-08-12 16:39:54 +08:00
|
|
|
|
npm 适合用在 React 项目中,可以完整使用 amis 的所有功能,方便扩展。
|
|
|
|
|
|
|
|
|
|
SDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式难以支持 [自定义组件](./custom),只能使用 amis 内置的组件。
|
|
|
|
|
|
2020-09-11 15:00:56 +08:00
|
|
|
|
## SDK
|
|
|
|
|
|
2020-10-10 09:51:10 +08:00
|
|
|
|
JSSDK 版本可以在 github 的 [releases](https://github.com/baidu/amis/releases) 页面下载,比如 sdk.tar.gz。
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
2020-10-10 09:51:10 +08:00
|
|
|
|
或者可以使用 `npm i amis` 来下载,在 `node_modules\amis\sdk` 目录里就能找到。
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
2020-10-10 09:51:10 +08:00
|
|
|
|
新建一个 html 文件,简单示例如下,将其中的 `sdk.css` 和 `sdk.js` 改成实际的路径:
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>amis demo</title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
|
|
|
/>
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
2020-10-10 09:51:10 +08:00
|
|
|
|
<link rel="stylesheet" href="sdk.css" />
|
2020-09-11 15:00:56 +08:00
|
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
.app-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="root" class="app-wrapper"></div>
|
2020-10-10 09:51:10 +08:00
|
|
|
|
<script src="sdk.js"></script>
|
2020-09-11 15:00:56 +08:00
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
(function () {
|
|
|
|
|
let amis = amisRequire('amis/embed');
|
2020-10-10 09:51:10 +08:00
|
|
|
|
// 通过替换下面这个配置来生成不同页面
|
2020-09-11 15:00:56 +08:00
|
|
|
|
let amisScoped = amis.embed('#root', {
|
|
|
|
|
type: 'page',
|
2020-10-10 09:51:10 +08:00
|
|
|
|
title: '表单页面',
|
|
|
|
|
body: {
|
|
|
|
|
type: 'form',
|
|
|
|
|
mode: 'horizontal',
|
|
|
|
|
api: '/saveForm',
|
|
|
|
|
controls: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Name',
|
|
|
|
|
type: 'text',
|
|
|
|
|
name: 'name'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Email',
|
|
|
|
|
type: 'email',
|
|
|
|
|
name: 'email'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
2020-09-11 15:00:56 +08:00
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 控制 amis 的行为
|
|
|
|
|
|
|
|
|
|
`amis.embed` 函数还支持以下配置项来控制 amis 的行为,比如在 fetcher 的时候加入自己的处理逻辑,这些函数参数的说明在前面也有介绍。
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
let amisScoped = amis.embed(
|
|
|
|
|
'#root',
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
title: 'amis demo',
|
|
|
|
|
body: 'This is a simple amis page.'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// props 一般不用传。
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
fetcher: (url, method, data, config) => {
|
|
|
|
|
// 可以不传,用来实现 ajax 请求
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
jumpTo: location => {
|
|
|
|
|
// 可以不传,用来实现页面跳转
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
updateLocation: (location, replace) => {
|
|
|
|
|
// 可以不传,用来实现地址栏更新
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
isCurrentUrl: url => {
|
|
|
|
|
// 可以不传,用来判断是否目标地址当前地址。
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
copy: content => {
|
|
|
|
|
// 可以不传,用来实现复制到剪切板
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
notify: (type, msg) => {
|
|
|
|
|
// 可以不传,用来实现通知
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
alert: content => {
|
|
|
|
|
// 可以不传,用来实现提示
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
confirm: content => {
|
|
|
|
|
// 可以不传,用来实现确认框。
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息,它有如下方法:
|
|
|
|
|
|
|
|
|
|
`getComponentByName(name)` 用于获取渲染出来的组件,比如下面的示例
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"name": "page1",
|
|
|
|
|
"title": "表单页面",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "form",
|
|
|
|
|
"name": "form1",
|
|
|
|
|
"controls": [
|
|
|
|
|
{
|
|
|
|
|
"label": "Name",
|
|
|
|
|
"type": "text",
|
|
|
|
|
"name": "name1"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值,需要注意 page 和 form 都需要有 name 属性。
|
|
|
|
|
|
2020-07-28 14:55:49 +08:00
|
|
|
|
## npm
|
|
|
|
|
|
|
|
|
|
### 安装
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm i amis
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
### 主题样式
|
|
|
|
|
|
|
|
|
|
目前支持三种主题:`default(默认主题)`、`cxd(云舍)`和`dark(暗黑)`
|
|
|
|
|
|
|
|
|
|
1. 引入样式文件:
|
|
|
|
|
|
2020-08-04 13:16:20 +08:00
|
|
|
|
html 中引入:
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
```html
|
|
|
|
|
<link href="./node_modules/amis/lib/themes/default.css" />
|
|
|
|
|
<!-- 或 <link href="./node_modules/amis/lib/themes/cxd.css" /> -->
|
|
|
|
|
<!-- 或 <link href="./node_modules/amis/lib/themes/dark.css" /> -->
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
js 中引入:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import './node_modules/amis/lib/themes/default.css';
|
|
|
|
|
// 或 import './node_modules/amis/lib/themes/cxd.css';
|
|
|
|
|
// 或 import './node_modules/amis/lib/themes/dark.css';
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 上面只是示例,请根据自己的项目结构调整引用路径
|
|
|
|
|
|
|
|
|
|
2. 渲染器使用配置主题
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
renderAmis(
|
|
|
|
|
{
|
|
|
|
|
type: 'page',
|
|
|
|
|
title: '简单页面',
|
|
|
|
|
body: '内容'
|
|
|
|
|
},
|
2020-08-04 13:16:20 +08:00
|
|
|
|
{},
|
2020-08-04 10:55:22 +08:00
|
|
|
|
{
|
|
|
|
|
// env...
|
2020-08-04 13:16:20 +08:00
|
|
|
|
theme: 'default' // cxd 或 dark
|
2020-08-04 10:55:22 +08:00
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
### 使用指南
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
|
|
|
|
可以在 React Component 这么使用(TypeScript)。
|
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
1. 安装部分示例需要的插件库
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm i axios copy-to-clipboard
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 为了方便示例,上面选用了我们常用几个插件库,你完全可以选择自己喜欢的插件并重新实现
|
|
|
|
|
|
2020-09-11 12:58:20 +08:00
|
|
|
|
2. 代码实现(React Typescript)
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
2020-07-28 14:55:49 +08:00
|
|
|
|
```tsx
|
|
|
|
|
import * as React from 'react';
|
2020-08-18 18:53:18 +08:00
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import copy from 'copy-to-clipboard';
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
import {render as renderAmis} from 'amis';
|
2020-08-18 18:53:18 +08:00
|
|
|
|
import {alert, confirm} from 'amis/lib/components/Alert';
|
|
|
|
|
import {toast} from 'amis/lib/components/Toast';
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
|
|
|
|
class MyComponent extends React.Component<any, any> {
|
2020-08-04 10:55:22 +08:00
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<p>通过 amis 渲染页面</p>
|
|
|
|
|
{renderAmis(
|
|
|
|
|
{
|
|
|
|
|
// 这里是 amis 的 Json 配置。
|
|
|
|
|
type: 'page',
|
|
|
|
|
title: '简单页面',
|
|
|
|
|
body: '内容'
|
|
|
|
|
},
|
|
|
|
|
{
|
2020-08-18 18:53:18 +08:00
|
|
|
|
// props...
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// env
|
|
|
|
|
// 这些是 amis 需要的一些接口实现
|
|
|
|
|
// 可以参考后面的参数介绍。
|
|
|
|
|
|
2020-08-20 15:50:36 +08:00
|
|
|
|
jumpTo: (
|
|
|
|
|
location: string /*目标地址*/,
|
|
|
|
|
action: any /* action对象*/
|
|
|
|
|
) => {
|
2020-08-18 18:53:18 +08:00
|
|
|
|
// 用来实现页面跳转, actionType:link、url 都会进来。
|
|
|
|
|
// 因为不清楚所在环境中是否使用了 spa 模式,所以自己实现这个方法吧。
|
|
|
|
|
},
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
updateLocation: (
|
|
|
|
|
location: string /*目标地址*/,
|
|
|
|
|
replace: boolean /*是replace,还是push?*/
|
|
|
|
|
) => {
|
2020-08-18 18:53:18 +08:00
|
|
|
|
// 地址替换,跟 jumpTo 类似
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
fetcher: ({
|
2020-08-18 18:53:18 +08:00
|
|
|
|
url, // 接口地址
|
|
|
|
|
method, // 请求方法 get、post、put、delete
|
|
|
|
|
data, // 请求数据
|
|
|
|
|
responseType,
|
|
|
|
|
config, // 其他配置
|
|
|
|
|
headers // 请求头
|
|
|
|
|
}: any) => {
|
|
|
|
|
config = config || {};
|
|
|
|
|
config.withCredentials = true;
|
|
|
|
|
responseType && (config.responseType = responseType);
|
|
|
|
|
|
|
|
|
|
if (config.cancelExecutor) {
|
|
|
|
|
config.cancelToken = new (axios as any).CancelToken(
|
|
|
|
|
config.cancelExecutor
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
config.headers = headers || {};
|
|
|
|
|
|
|
|
|
|
if (method !== 'post' && method !== 'put' && method !== 'patch') {
|
|
|
|
|
if (data) {
|
|
|
|
|
config.params = data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (axios as any)[method](url, config);
|
|
|
|
|
} else if (data && data instanceof FormData) {
|
|
|
|
|
config.headers = config.headers || {};
|
|
|
|
|
config.headers['Content-Type'] = 'multipart/form-data';
|
|
|
|
|
} else if (
|
|
|
|
|
data &&
|
|
|
|
|
typeof data !== 'string' &&
|
|
|
|
|
!(data instanceof Blob) &&
|
|
|
|
|
!(data instanceof ArrayBuffer)
|
|
|
|
|
) {
|
|
|
|
|
data = JSON.stringify(data);
|
|
|
|
|
config.headers = config.headers || {};
|
|
|
|
|
config.headers['Content-Type'] = 'application/json';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (axios as any)[method](url, data, config);
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
2020-08-18 18:53:18 +08:00
|
|
|
|
isCancel: (value: any) => (axios as any).isCancel(value),
|
2020-08-04 10:55:22 +08:00
|
|
|
|
notify: (
|
|
|
|
|
type: 'error' | 'success' /**/,
|
|
|
|
|
msg: string /*提示内容*/
|
|
|
|
|
) => {
|
2020-08-18 18:53:18 +08:00
|
|
|
|
toast[type]
|
|
|
|
|
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
|
|
|
|
: console.warn('[Notify]', type, msg);
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
2020-08-18 18:53:18 +08:00
|
|
|
|
alert,
|
|
|
|
|
confirm,
|
|
|
|
|
copy: content => {
|
|
|
|
|
copy(content);
|
|
|
|
|
toast.success('内容已复制到粘贴板');
|
2020-08-04 10:55:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2020-07-28 14:55:49 +08:00
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
### render 函数介绍
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
(schema, props, env) => JSX.Element;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### schema
|
|
|
|
|
|
|
|
|
|
即页面配置,请前往 [配置与组件](../concepts/schema) 了解
|
|
|
|
|
|
|
|
|
|
#### props
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```jsx
|
|
|
|
|
() =>
|
|
|
|
|
renderAmis(schema, {
|
|
|
|
|
data: {
|
|
|
|
|
username: 'amis'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这样,内部所有组件都能拿到 `username` 这个变量的值。当然,这里的 key 并不一定必须是 data , 你也可以是其它 key,但必须配合 schema 中的 `detectField` 属性一起使用。 如:
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```jsx
|
|
|
|
|
() =>
|
|
|
|
|
renderAmis(
|
|
|
|
|
{
|
|
|
|
|
//其它配置
|
|
|
|
|
detectField: 'somekey'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
somekey: {
|
2020-07-28 14:55:49 +08:00
|
|
|
|
username: 'amis'
|
|
|
|
|
}
|
2020-08-18 18:53:18 +08:00
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
#### env
|
2020-08-12 16:39:54 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
环境变量,可以理解为这个渲染器工具的配置项,需要使用 amis 用户实现部分接口。他有下面若干参数:
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
##### fetcher(必须实现)
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
接口请求器,实现该函数才可以实现 ajax 发送,函数签名如下:
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```ts
|
|
|
|
|
(config: {
|
|
|
|
|
url; // 接口地址
|
|
|
|
|
method; // 请求方法 get、post、put、delete
|
|
|
|
|
data; // 请求数据
|
|
|
|
|
responseType;
|
|
|
|
|
config; // 其他配置
|
|
|
|
|
headers; // 请求头
|
|
|
|
|
}) => Promise<fetcherResult>;
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
##### notify
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```ts
|
|
|
|
|
(type: string, msg: string) => void
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
用来实现消息提示。
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
##### alert
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(msg: string) => void
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
用来实现警告提示。
|
|
|
|
|
|
|
|
|
|
##### confirm
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(msg: string) => boolean | Promise<boolean>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
用来实现确认框。返回 boolean 值
|
|
|
|
|
|
|
|
|
|
##### jumpTo
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(to: string, action?: Action, ctx?: object) => void
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
用来实现页面跳转,因为不清楚所在环境中是否使用了 spa 模式,所以用户自己实现吧。
|
|
|
|
|
|
|
|
|
|
##### updateLocation
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(location: any, replace?: boolean) => void
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
地址替换,跟 jumpTo 类似。
|
|
|
|
|
|
|
|
|
|
##### theme: string
|
|
|
|
|
|
|
|
|
|
目前支持是三种主题:`default`、`cxd` 和 `dark`
|
|
|
|
|
|
|
|
|
|
##### isCurrentUrl
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(link: string) => boolean;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
判断目标地址是否为当前页面。
|
|
|
|
|
|
|
|
|
|
##### copy
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(contents: string, options?: {shutup: boolean})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
用来实现内容复制。
|
|
|
|
|
|
|
|
|
|
##### session
|
|
|
|
|
|
|
|
|
|
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。
|
|
|
|
|
|
|
|
|
|
##### getModalContainer
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
() => HTMLElement;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
用来决定弹框容器。
|
|
|
|
|
|
|
|
|
|
##### loadRenderer
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
(schema: any, path: string) => Promise<Function>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
可以通过它懒加载自定义组件,比如: https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
|
|
|
|
|
|
|
|
|
|
##### affixOffsetTop: number
|
|
|
|
|
|
|
|
|
|
固顶间距,当你的有其他固顶元素时,需要设置一定的偏移量,否则会重叠。
|
|
|
|
|
|
|
|
|
|
##### affixOffsetBottom: number
|
|
|
|
|
|
|
|
|
|
固底间距,当你的有其他固底元素时,需要设置一定的偏移量,否则会重叠。
|
|
|
|
|
|
|
|
|
|
##### richTextToken: string
|
|
|
|
|
|
2020-09-17 21:40:59 +08:00
|
|
|
|
内置 rich-text 为 frolaEditor,想要使用,请自行购买,或者用免费的 Tinymce,不设置 token 默认就是 Tinymce。
|