') === 0 || !html[i]) {
- continue
- } else if (isH3.test(html[i])) {
- if (temp.length > 0) {
- versionList[temp[0]] = temp[1]
- temp = []
- }
- temp[0] = html[i].match(isH3)[1]
- } else if (i === html.length - 1) {
- versionList[temp[0]] = temp[1]
- temp = []
- } else {
- temp[1] = temp[1] ? temp[1] + html[i] : html[i]
- }
-}
-const versions = Object.keys(versionList)
-module.exports = versions
-
-if (versions.length > 0 && args.path) {
- if (args.version) {
- const version = args.version.match(rules)[0]
- process.stdout.write((versionList[version] || '') + '\n')
- } else {
- process.stdout.write((versionList[versions[0]] || '') + '\n')
- }
-}
diff --git a/docs/build/deploy/check-deploy.js b/docs/build/deploy/check-deploy.js
deleted file mode 100644
index e8a892bf..00000000
--- a/docs/build/deploy/check-deploy.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const stopDeploy = (reason) => {
- process.stdout.write(reason + '\n')
- process.exit(0)
-}
-/** ******在此区间进行部署条件校验,不通过时调用stopDeploy停止部署************************/
-
-// 当前的git tag 版本
-const version = process.env.RELEASE_NAME
-if (!version) {
- stopDeploy('Can\'t find version to deploy, and stop to deploy !')
-}
-
-if (version !== `v${require('../../package.json').version}`) {
- stopDeploy('The deploy version isn\'t same as package.json')
-}
-
-if (!process.env.RELEASE_NOTE) {
- stopDeploy('Can\'t find the version\'s release notes of changelog.md')
-}
-
-/** ******在此区间进行部署条件校验,不通过时调用stopDeploy停止部署************************/
-
-process.stdout.write(true + '\n')
\ No newline at end of file
diff --git a/docs/build/deploy/delete-old.js b/docs/build/deploy/delete-old.js
deleted file mode 100644
index cba56651..00000000
--- a/docs/build/deploy/delete-old.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * @description 删除第二位版本号相同的文档,同时对传入的版本号格式化并返回
- * @author Gkxie
- * @date 2019-12-26
- */
-const fs = require('fs')
-const path = require('path')
-const exec = require('child_process').exec
-const minimist = require('minimist')
-const args = minimist(process.argv.slice(2))
-const rules = /\d+\.\d+\.\d+/
-
-let {version = '0.0.0', dir = './'} = args
-
-// 传入的version不正确,异常退出
-if (!rules.test(version)) {
- console.log('the format of version must be `x.x.x` or `vx.x.x`.')
- process.exit(1)
-}
-
-// 版本号统一格式化为:x.x.x
-const temp = version.match(rules)[0]
-
-// 删除第二位版本号相同的文档
-version = temp.split('.')
-version.pop()
-version = `${version.join('.')}.\\d+`
-const root = path.resolve(dir)
-fs.readdirSync(root).forEach(item => {
- if (new RegExp(version).test(item)) {
- exec(`rm -rf ${path.resolve(root, item)}`)
- }
-})
-
-// 返回格式化后的版本号
-process.stdout.write(temp + '\n')
\ No newline at end of file
diff --git a/docs/build/deploy/script.sh b/docs/build/deploy/script.sh
deleted file mode 100644
index 9c31abec..00000000
--- a/docs/build/deploy/script.sh
+++ /dev/null
@@ -1,10 +0,0 @@
-#! /bin/sh
-
-npm run build:icon
-npm run build:jd
-npm run build:wx
-
-if [ $RELEASE_NAME ]; then
- # only build document when deploy
- npm run build:docs
-fi
diff --git a/docs/build/file-writer.js b/docs/build/file-writer.js
deleted file mode 100644
index cec80731..00000000
--- a/docs/build/file-writer.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * @Author: weisheng
- * @Date: 2023-07-20 00:34:54
- * @LastEditTime: 2023-07-24 10:10:45
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: \wot-design-uni\docs\build\file-writer.js
- * 记得注释
- */
-const fs = require('fs')
-const path = require('path')
-const readYaml = require('read-yaml')
-const routesConfig = readYaml.sync(path.resolve(__dirname, '../routes.yml'))
-const { siteMapUrls, createSitemapXml } = require('./sitemap')
-const versions = require('../build/deploy/change-log')
-const pkg = require('../../package.json')
-
-// 写入 version.json 文件
-const versionWriter = () => {
- // 把 versions 对象转换为json格式字符串
- const content = JSON.stringify(versions)
-
- // 指定创建目录及文件名称,__dirname为执行当前js文件的目录
- const versionDir = path.resolve(__dirname, '../public')
- const file = path.resolve(__dirname, '../public/versions.json')
-
- if (!fs.existsSync(versionDir)) {
- fs.mkdirSync(versionDir, { recursive: true })
- }
-
- // 写入文件
- fs.writeFile(file, content, (err) => {
- if (err) {
- return console.error(err)
- }
- })
-}
-
-// 写入 sitemap.xml 文件
-const sitemapWriter = () => {
- const originUrl = 'https://wot-design-uni.netlify.app/' + pkg.version + '/#'
- const sitemapUrl = siteMapUrls(routesConfig, originUrl)
- const sitemapXml = createSitemapXml(sitemapUrl)
-
- // 创建sitemap操作
- const sitemapDir = path.resolve(__dirname, '../')
- const sitemap = path.resolve(__dirname, '../sitemap.xml')
-
- if (!fs.existsSync(sitemapDir)) {
- fs.mkdirSync(sitemapDir, { recursive: true })
- }
-
- // 写入文件
- fs.writeFile(sitemap, sitemapXml, (err) => {
- if (err) {
- return console.error(err)
- }
- })
-}
-
-module.exports = {
- sitemapWriter,
- versionWriter
-}
diff --git a/docs/build/md-loader.js b/docs/build/md-loader.js
deleted file mode 100644
index ebb743c6..00000000
--- a/docs/build/md-loader.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const hljs = require('highlight.js')
-const MarkdownIt = require('markdown-it')
-const markdownItContainer = require('markdown-it-container')
-const markdownItAnchor = require('markdown-it-anchor')
-const slugify = require('transliteration').slugify
-
-const md = new MarkdownIt({
- html: true,
- highlight: function (str, lang) {
- str = str.replace(/</g, '<')
- str = str.replace(/>/g, '>')
-
- if (lang && hljs.getLanguage(lang)) {
- try {
- return '' + hljs.highlight(lang, str, true).value + '
'
- } catch (__) {}
- }
- return '' + md.utils.escapeHtml(str) + '
'
- }
-})
- .use(markdownItContainer, 'warning')
- .use(markdownItContainer, 'error')
- .use(markdownItContainer, 'info')
- .use(markdownItAnchor, {
- level: 2,
- slugify,
- permalink: true,
- permalinkBefore: true
- })
-
-module.exports = (source) => {
- const content = md.render(source)
- let scriptStart = content.indexOf('') + ''.length
- pageScript = content.slice(scriptStart, scriptEnd)
- } else {
- scriptStart = 0
- }
-
- pageHtml.push(content.slice(0, scriptStart))
- pageHtml.push(content.slice(scriptEnd))
-
- let output = pageHtml.join('').replace(/\{/g, '{').replace(/\}/g, '}')
-
- return `
-
-
-
- ${pageScript}
- `
-}
diff --git a/docs/build/sitemap.js b/docs/build/sitemap.js
deleted file mode 100644
index 9a271885..00000000
--- a/docs/build/sitemap.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 页面配置获取地址表
- * @param {Array} routes 路径地址数组
- * @param {String} pre 地址前缀
- */
-const siteMapUrls = (routes, pre) => {
- return routes.reduce((array, route) => {
- if (route.children) {
- array.push(...siteMapUrls(route.children, pre))
- } else if (route.type !== 'link') {
- const path = `${pre}/components/${route.name}`
- array.push(path)
- }
-
- return array
- }, [])
-}
-
-// 根据路由列表生成sitemap
-const createSitemapXml = (routeList) => {
- const list = routeList
- .map(
- (route) => `
-
- ${route}
- weekly
- `
- )
- .join('\r\n')
- return `
-
- ${list}
-
- `
-}
-
-module.exports = {
- siteMapUrls,
- createSitemapXml
-}
diff --git a/docs/build/utils.js b/docs/build/utils.js
deleted file mode 100644
index 5b9be36a..00000000
--- a/docs/build/utils.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const path = require('path')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-const isProd = process.env.NODE_ENV === 'production'
-
-exports.cssLoader = (...loaders) => {
- const formatLoaders = []
- formatLoaders.push('vue-style-loader')
-
- if (isProd) {
- formatLoaders.push({
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: '../../'
- }
- })
- }
- loaders.forEach((loader) => {
- formatLoaders.push({
- loader: loader,
- options: {
- sourceMap: !isProd
- }
- })
- })
-
- return formatLoaders
-}
-
-exports.resolve = (dir) => {
- return path.join(__dirname, '..', dir)
-}
-
-exports.assetsPath = (file) => {
- return path.posix.join('static', file)
-}
diff --git a/docs/build/webpack.docs.conf.js b/docs/build/webpack.docs.conf.js
deleted file mode 100644
index 2fbce7d8..00000000
--- a/docs/build/webpack.docs.conf.js
+++ /dev/null
@@ -1,183 +0,0 @@
-const path = require('path')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const utils = require('./utils')
-const { VueLoaderPlugin } = require('vue-loader')
-const merge = require('webpack-merge')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const webpack = require('webpack')
-const { versionWriter, sitemapWriter } = require('./file-writer')
-const isProd = process.env.NODE_ENV === 'production'
-let outputConfig
-
-sitemapWriter()
-versionWriter()
-
-const webpackConf = {
- mode: isProd ? 'production' : 'development',
- context: path.resolve(__dirname, '../'),
- entry: {
- app: './main.js'
- },
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- },
- {
- test: /\.md$/,
- use: [
- {
- loader: 'vue-loader',
- options: {
- compilerOptions: {
- preserveWhitespace: false
- }
- }
- },
- {
- loader: path.resolve(__dirname, './md-loader.js')
- }
- ]
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- exclude: /node_modules/
- },
- {
- test: /\.yml$/,
- loader: 'yml-loader'
- },
- {
- test: /\.css$/,
- use: utils.cssLoader('css-loader', 'postcss-loader')
- },
- {
- test: /\.scss$/,
- use: utils.cssLoader('css-loader', 'postcss-loader', 'sass-loader')
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 20000,
- name: utils.assetsPath('img/[name].[hash:8].[ext]')
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('fonts/[name].[ext]')
- }
- }
- ]
- },
- devtool: isProd ? false : 'cheap-module-eval-source-map',
- resolve: {
- extensions: ['.js', '.vue', '.json', '.md', '.xml'],
- alias: {
- vue$: 'vue/dist/vue.esm.js'
- }
- },
- stats: {
- children: false,
- modules: false,
- entrypoints: false
- },
- plugins: [
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify(isProd ? 'prod' : 'dev')
- }),
- new VueLoaderPlugin(),
- new HtmlWebpackPlugin({
- filename: isProd ? path.resolve(__dirname, '../dist/index.html') : 'index.html',
- template: path.resolve(__dirname, '../index.html'),
- favicon: path.resolve(__dirname, '../favicon.ico')
- }),
- new CopyWebpackPlugin([
- {
- from: path.resolve(__dirname, '../public'),
- to: utils.assetsPath('public'),
- toType: 'dir',
- ignore: ['.DS_Store']
- },
- {
- from: path.resolve(__dirname, '../sitemap.xml'),
- to: utils.assetsPath('../sitemap.xml')
- }
- ])
- ]
-}
-
-if (!isProd) {
- const devWebpackConf = merge(webpackConf, {
- devServer: {
- clientLogLevel: 'warning',
- historyApiFallback: {
- rewrites: [{ from: /.*/, to: 'index.html' }]
- },
- hot: true,
- contentBase: false,
- compress: true,
- port: 8070,
- overlay: {
- warnings: false,
- errors: true
- },
- open: true,
- quiet: true,
- disableHostCheck: true
- },
- plugins: [new webpack.HotModuleReplacementPlugin()]
- })
- outputConfig = new Promise((resolve, reject) => {
- portfinder.basePort = 8070
- portfinder.getPort((err, port) => {
- if (err) {
- reject(err)
- } else {
- process.env.PORT = port
- devWebpackConf.devServer.port = port
-
- devWebpackConf.plugins.push(new FriendlyErrorsPlugin())
-
- resolve(devWebpackConf)
- }
- })
- })
-} else {
- outputConfig = merge(webpackConf, {
- output: {
- publicPath: './',
- path: path.resolve(__dirname, '../dist'),
- filename: utils.assetsPath('js/[name].[chunkhash].js'),
- chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
- },
- optimization: {
- minimizer: [
- new TerserPlugin({
- cache: true,
- parallel: true
- }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new OptimizeCSSAssetsPlugin()
- ]
- },
- plugins: [
- new MiniCssExtractPlugin({
- filename: utils.assetsPath('css/[name].[contenthash:8].css'),
- chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
- })
- ]
- })
-}
-
-module.exports = outputConfig
diff --git a/docs/docs/actionSheet.md b/docs/component/actionSheet.md
similarity index 96%
rename from docs/docs/actionSheet.md
rename to docs/component/actionSheet.md
index 6b6d0c6e..8263e6fb 100644
--- a/docs/docs/actionSheet.md
+++ b/docs/component/actionSheet.md
@@ -1,7 +1,9 @@
-## ActionSheet 动作面板
+
+
+# ActionSheet 动作面板
-### 基本用法
+## 基本用法
通过 `show` 属性设置显示隐藏,监听 `close` 事件,隐藏菜单。
@@ -49,7 +51,7 @@ page({
})
```
-### 选项状态
+## 选项状态
可以设置 颜色、禁用、加载 等状态。
@@ -87,7 +89,7 @@ page({
})
```
-### 取消按钮
+## 取消按钮
设置 `cancel-text` 取消按钮文案,展示取消按钮。
@@ -99,7 +101,7 @@ page({
cancel-text="取消" />
```
-### 自定义单行面板
+## 自定义单行面板
自定义单行面板时,`panels` 类型为一维数组, 数组内部对象结构如下:
@@ -141,7 +143,7 @@ page({
})
```
-#### 多行展示
+### 多行展示
自定义多行面板时, `panels` 类型为多维数组, 每个数组内部对象结构如下:
@@ -190,7 +192,7 @@ page({
})
```
-### 标题
+## 标题
设置 `title` 展示标题。
@@ -200,7 +202,7 @@ page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -216,7 +218,7 @@ page({
| lazy-render | 弹层内容懒渲染,触发展示时才渲染内容 | boolean | - | true | 2.3.0 |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | true | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -228,7 +230,7 @@ page({
| clickmodal | 点击遮罩时触发 | - | - |
| cancel | 点击取消按钮时触发 | - | - |
-### Action 数据结构
+## Action 数据结构
| 键名 | 说明 | 类型 | 最低版本 |
|-----|------|-----|---------|
@@ -238,14 +240,14 @@ page({
| disabled | 禁用 | boolean | - |
| loading | 加载中状态 | boolean | - |
-### Panel 数据结构
+## Panel 数据结构
| 键名 | 说明 | 类型 | 最低版本 |
|-----|------|-----|---------|
| iconUrl | 图片地址 | string | - |
| title | 标题内容 | string | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/badge.md b/docs/component/badge.md
similarity index 95%
rename from docs/docs/badge.md
rename to docs/component/badge.md
index e7fc02cd..494bb0cc 100644
--- a/docs/docs/badge.md
+++ b/docs/component/badge.md
@@ -1,9 +1,11 @@
-## Badge 标记
+
+
+# Badge 标记
出现在按钮、图标旁的数字或状态标记。
-### 基础用法
+## 基础用法
展示新消息数量。
@@ -19,7 +21,7 @@
```
-### 修改背景色
+## 修改背景色
设置 `type` 属性,也可以自定义背景色 `bg-color`,也可以通过`custom-class`定义组件样式。
@@ -48,7 +50,7 @@
}
```
-### 最大值
+## 最大值
可自定义最大值。
@@ -64,7 +66,7 @@
```
-### 自定义内容
+## 自定义内容
可以显示数字以外的文本内容。
@@ -79,7 +81,7 @@
```
-### 点状标注
+## 点状标注
以红点的形式标注需要关注的内容。
@@ -92,7 +94,7 @@
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -105,7 +107,7 @@
| type | 类型 | string | primary / success / warning / danger / info | - | - |
| bg-color | 背景色 | string | 各种颜色的css写法 | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/button.md b/docs/component/button.md
similarity index 95%
rename from docs/docs/button.md
rename to docs/component/button.md
index 734d3439..a56f8a0d 100644
--- a/docs/docs/button.md
+++ b/docs/component/button.md
@@ -1,7 +1,9 @@
-## Button 按钮
+
+
+# Button 按钮
-### 基本用法
+## 基本用法
基本按钮。
@@ -13,7 +15,7 @@
危险按钮
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -21,7 +23,7 @@
默认按钮
```
-### 幽灵按钮
+## 幽灵按钮
设置 `plain` 属性。
@@ -29,7 +31,7 @@
主要按钮
```
-### 按钮大小
+## 按钮大小
设置 `size` ,支持 'small'、'medium'、'large',默认为 'medium'。
@@ -39,7 +41,7 @@
大号按钮
```
-### 加载中按钮
+## 加载中按钮
设置 `loading` 属性,让按钮处于加载中状态。加载中的按钮是禁止点击的。
@@ -47,7 +49,7 @@
加载中
```
-### 文字按钮
+## 文字按钮
将 `type` 设置为 `text`。文字按钮不支持其他颜色。
@@ -55,7 +57,7 @@
文字按钮
```
-### 图标按钮
+## 图标按钮
将 `type` 设置为 `icon`,同时设置 `icon` 属性,icon为图标的类名,可以直接使用 `Icon 图标` 章节中的图标类名。
@@ -63,7 +65,7 @@
```
-### 带图标的按钮
+## 带图标的按钮
设置 `icon` 属性,不需要设置 `type` 为 `icon`,即可以直接使用带图标的按钮。
@@ -71,7 +73,7 @@
```
-### 块状按钮
+## 块状按钮
设置 `block` 属性。
@@ -79,7 +81,7 @@
主要按钮
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -105,7 +107,7 @@
| app-parameter | 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 | string | - | - | - |
| show-message-card | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | boolean | - | false | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -117,7 +119,7 @@
| bind:launchapp | 打开 APP 成功的回调,open-type=launchApp时有效 | - | - |
| bind:opensetting | 在打开授权设置页后回调,open-type=openSetting时有效 | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/calendar.md b/docs/component/calendar.md
similarity index 97%
rename from docs/docs/calendar.md
rename to docs/component/calendar.md
index 93efac6b..55617f24 100644
--- a/docs/docs/calendar.md
+++ b/docs/component/calendar.md
@@ -1,9 +1,11 @@
-## Calendar 日历选择器
+
+
+# Calendar 日历选择器
提供日历单选、多选、范围选择、周维度、月维度等功能。
-### 基本使用
+## 基本使用
`type` 默认为 `date` 类型,设置 `value` 绑定值(13位时间戳格式),监听 `bind:confirm` 事件获取选中值。`min-date` 最小日期默认为当前日期往前推 6 个月,`max-date` 最大日期默认为当前日期往后推 6 个月,日历的日期只展示最小日期到最大日期之间的日期。label 可以不传。可以通过 `label-width` 设置标题宽度,默认为 '33%'。
@@ -26,7 +28,7 @@ Page({
})
```
-### 日期多选
+## 日期多选
设置 `type` 为 `dates` 类型,此时 `value` 为数组。
@@ -47,7 +49,7 @@ Page({
})
```
-### 周类型选择
+## 周类型选择
设置 `type` 为 `week` 类型,如果 `value` 有初始值,建议将周起始日 `first-day-of-week` 设置为 1(周一),避免选中样式和回显匹配不上。
@@ -68,7 +70,7 @@ Page({
})
```
-### 月类型选择
+## 月类型选择
设置 `type` 为 `month` 类型,此时 `value` 有值时其值为月的第一天。
@@ -89,7 +91,7 @@ Page({
})
```
-### 范围选择
+## 范围选择
`type` 支持 `daterange`(日期范围选择)、`weekrange`(周范围选择)、`monthrange`(月范围选择) 类型,此时 `value` 为数组格式。
@@ -110,7 +112,7 @@ Page({
})
```
-### 日期时间类型
+## 日期时间类型
设置 `type` 为 `datetime` 类型,可以选择到时分秒,设置 `type` 为 `datetimerange` 为范围选择。
@@ -160,7 +162,7 @@ Page({
})
```
-### 日周月切换
+## 日周月切换
设置 `show-type-switch` 属性,展示 日周月 切换功能,支持在日周月类型 `date、week、month` 之间进行来回切换,可以通过 `type` 属性设置初始类型。如果 `type` 为 range 类型如 `daterange`,则日历可以在 `daterange、weekrange、monthrang` 之间进行来回切换。
@@ -168,7 +170,7 @@ Page({
```
-### 快捷操作
+## 快捷操作
设置 `show-confirm` 属性为 `false`,不展示确定按钮,只对 `date、daterange、week、weekrange、month、monthrange` 类型有效。
@@ -176,7 +178,7 @@ Page({
```
-### 范围选择允许选中同一日期
+## 范围选择允许选中同一日期
设置 `allow-same-day` 属性,范围选择允许用户选择同一天、同一周、同一个月。
@@ -184,7 +186,7 @@ Page({
```
-### 格式化日期
+## 格式化日期
设置 `formatter` 参数,其值为函数类型,接收一个 `object` 参数,返回一个对象,对象的属性保持跟入参的属性一致,其属性如下:
@@ -251,7 +253,7 @@ Page({
})
```
-### 快捷选项
+## 快捷选项
设置 `shortcuts` 属性,配置快捷选项列表,传入 `on-shortcuts-click` 属性,`on-shortcuts-click` 是个函数,接收 { item, index } 参数,item 为当前选项,index 为当前选项的下标。当快捷选项被点击时,会调用 `on-shortcuts-click`,接收到日历新的选中值。`text` 为选项的必传字段,其他字段根据自己需要自行传入。
@@ -291,7 +293,7 @@ Page({
})
```
-### 自定义展示
+## 自定义展示
设置 `display-format` 属性可以自定义表单回显,`inner-display-format` 属性自定义范围选择类型的面板内部回显。
@@ -328,7 +330,7 @@ Page({
})
```
-### 确定前校验
+## 确定前校验
设置 `before-confirm` 函数,在用户点击`确定`按钮时,会执行 `before-confirm` 函数,并传入 `value` 和 `resolve` 参数,可以对 `value` 进行校验,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会关闭弹窗。
@@ -361,7 +363,7 @@ Page({
})
```
-### 最大范围限制
+## 最大范围限制
设置 `max-range` 属性,设置范围选择的最大限制。
@@ -369,11 +371,11 @@ Page({
```
-### 设置周起始日
+## 设置周起始日
设置 `first-day-of-week` 属性,默认为 0,即周日,设置为 1 则为周一,依此类推。
-### 自定义选择器
+## 自定义选择器
如果默认的 cell 类型的展示格式不满足需求,可以通过默认插槽进行自定义选择器样式。
@@ -403,7 +405,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|-----|
@@ -444,7 +446,7 @@ Page({
| z-index | 弹窗层级 | number | - | 15 | 2.3.0 |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | true | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -452,21 +454,21 @@ Page({
| bind:change | 点击面板日期时触发 | event.detail = { value } | 2.3.0 |
| bind:cancel | 点击关闭按钮或者蒙层时触发 | - | 2.3.0
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| open | 打开面板 | - | 2.3.0 |
| close | 关闭面板 | - | 2.3.0 |
-### Slots
+## Slots
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 自定义展示 | - |
| label | 左侧插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/calendarView.md b/docs/component/calendarView.md
similarity index 96%
rename from docs/docs/calendarView.md
rename to docs/component/calendarView.md
index acdbff1c..6f75f70a 100644
--- a/docs/docs/calendarView.md
+++ b/docs/component/calendarView.md
@@ -1,10 +1,12 @@
-## CalendarView 日历面板组件
+
+
+# CalendarView 日历面板组件
提供日历单选、多选、范围选择、周维度、月维度等功能。可以根据实际业务场景基于该组件进行封装高度定制化组件。
-### 基本使用
+## 基本使用
`type` 默认为 `date` 类型,设置 `value` 绑定值(13位时间戳格式),监听 `bind:change` 事件获取选中值。`min-date` 最小日期默认为当前日期往前推 6 个月,`max-date` 最大日期默认为当前日期往后推 6 个月,日历面板的日期只展示最小日期到最大日期之间的日期。
@@ -27,7 +29,7 @@ Page({
})
```
-### 日期多选
+## 日期多选
设置 `type` 为 `dates` 类型,此时 `value` 为数组。
@@ -48,7 +50,7 @@ Page({
})
```
-### 周类型选择
+## 周类型选择
设置 `type` 为 `week` 类型,如果 `value` 有初始值,建议将周起始日 `first-day-of-week` 设置为 1(周一),避免选中样式和回显匹配不上。
@@ -69,7 +71,7 @@ Page({
})
```
-### 月类型选择
+## 月类型选择
设置 `type` 为 `month` 类型,此时 `value` 有值时其值为月的第一天。
@@ -90,7 +92,7 @@ Page({
})
```
-### 范围选择
+## 范围选择
`type` 支持 `daterange`(日期范围选择)、`weekrange`(周范围选择)、`monthrange`(月范围选择) 类型,此时 `value` 为数组格式。
@@ -111,7 +113,7 @@ Page({
})
```
-### 日期时间类型
+## 日期时间类型
设置 `type` 为 `datetime` 类型,可以选择到时分秒,设置 `type` 为 `datetimerange` 为范围选择。
@@ -161,7 +163,7 @@ Page({
})
```
-### 范围选择允许选中同一日期
+## 范围选择允许选中同一日期
设置 `allow-same-day` 属性,范围选择允许用户选择同一天、同一周、同一个月。
@@ -169,7 +171,7 @@ Page({
```
-### 格式化日期
+## 格式化日期
设置 `formatter` 参数,其值为函数类型,接收一个 `object` 参数,返回一个对象,对象的属性保持跟入参的属性一致,其属性如下:
@@ -236,7 +238,7 @@ Page({
})
```
-### 最大范围限制
+## 最大范围限制
设置 `max-range` 属性,设置范围选择的最大限制。
@@ -244,7 +246,7 @@ Page({
```
-### 展示面板标题
+## 展示面板标题
`show-panel-title` 默认为 `true`,会自动计算标题并进行展示,可以选择不进行展示。
@@ -252,11 +254,11 @@ Page({
```
-### 设置周起始日
+## 设置周起始日
设置 `first-day-of-week` 属性,默认为 0,即周日,设置为 1 则为周一,依此类推。
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|-----|
@@ -275,19 +277,19 @@ Page({
| time-filter | type 为 'datetime' 或 'datetimerange' 时有效,用于过滤时间选择器的数据 | function | - | - | 2.3.0 |
| hide-second | type 为 'datetime' 或 'datetimerange' 时有效,是否不展示秒修改 | boolean | - | false | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 绑定值变化时触发 | event.detail = { value } | 2.3.0 |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| scrollIntoView | 使当前日期或者选中日期滚动到可视区域,并监听滚动,在面板从 隐藏状态(如 display: none) 切换为展示状态时调用 | thresholds,数字数组,具体使用见 [Intersection Observer](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) | 2.3.0 |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/card.md b/docs/component/card.md
similarity index 96%
rename from docs/docs/card.md
rename to docs/component/card.md
index 18027987..d532389b 100644
--- a/docs/docs/card.md
+++ b/docs/component/card.md
@@ -1,7 +1,9 @@
-## Card 卡片
+
+
+# Card 卡片
-### 基本使用
+## 基本使用
通过 `title` 属性设置标题,默认插槽传入内容。
支持设置 `title` 插槽和 `footer` 插槽。
@@ -13,7 +15,7 @@
```
-### 矩形卡片
+## 矩形卡片
将`type` 设置为 `rectangle` 。
@@ -55,13 +57,13 @@
}
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
| title | 卡片标题 | string | - | - | - |
| type | 卡片类型 | string | rectangle | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
@@ -69,7 +71,7 @@
| title | 卡片标题 | - |
| footer | 底部操作内容 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/cell.md b/docs/component/cell.md
similarity index 94%
rename from docs/docs/cell.md
rename to docs/component/cell.md
index 60661b05..39d8a530 100644
--- a/docs/docs/cell.md
+++ b/docs/component/cell.md
@@ -1,7 +1,9 @@
-## Cell单元格
+
+
+# Cell单格
-### 基本用法
+## 基本用法
`Cell` 可以单独使用,也可以和 `CellGroup` 组合使用。
@@ -14,7 +16,7 @@
```
-### 图标设置
+## 图标设置
设置 `icon` 属性,值可以为 Icon 章节中的图标名,也可以通过 icon 的 slot 自定义图标位置。
@@ -41,7 +43,7 @@
}
```
-### 分组标题
+## 分组标题
可以在 `cell-group` 上设置 `title` 和 `value` 属性。
@@ -52,7 +54,7 @@
```
-### 单元格大小
+## 单元格大小
通过设置 `size` 修改单元格大小,将 `size` 设置为 'large' 时左侧标题字号为 16px。
@@ -60,7 +62,7 @@
```
-### 展示边框线
+## 展示边框线
在 `wd-cell-group` 上设置 `border` 属性,会给每个cell加上边框,最后一个cell则不展示边框,其他具有 `cell` 类型的表单组件也支持边框展示,如 input、picker。
@@ -71,7 +73,7 @@
```
-### 点击反馈
+## 点击反馈
通过设置 `clickable` 开启点击反馈,之后可以监听`click`事件。
@@ -88,7 +90,7 @@ Page({
})
```
-### 页面跳转
+## 页面跳转
通过设置 `is-link` 属性显示导航箭头和点击态,设置 `to` 属性,指定跳转地址,可以设置 replace 替换掉历史堆栈中的当前页面。
@@ -105,7 +107,7 @@ Page({
```
-### 垂直居中
+## 垂直居中
通过设置 `center` 设置内容垂直居中对齐,默认顶部居中。
@@ -113,7 +115,7 @@ Page({
```
-### 表单属性 - 必填
+## 表单属性 - 必填
设置 `required` 属性。
@@ -123,7 +125,7 @@ Page({
```
-### 表单属性 - 上下结构
+## 表单属性 - 上下结构
设置 `vertical` 属性。
@@ -133,7 +135,7 @@ Page({
```
-### 设置左侧宽度
+## 设置左侧宽度
设置 `title-width` 属性,label 内容超出则会 ... 隐藏,如果有个性化需求,使用插槽实现。
@@ -141,7 +143,7 @@ Page({
```
-### 自定义内容
+## 自定义内容
`cell` 提供了 `icon`、`title`、`label`和默认value的插槽。
@@ -197,7 +199,7 @@ Page({
}
```
-### CellGroup Attributes
+## CellGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -206,7 +208,7 @@ Page({
| border | 是否展示边框线 | string | - | - | - |
| use-slot | 分组启用插槽 | boolean | - | false | - |
-### Cell Attributes
+## Cell Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -224,13 +226,13 @@ Page({
| required | 表单属性,必填 | boolean | - | false | - |
| vertical | 表单属性,上下结构 | boolean | - | false | - |
-### Cell Events
+## Cell Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| bind:click | 当 clickable 或 is-link 为 true 时点击单元格触发 | - | - |
-### CellGroup Slot
+## CellGroup Slot
> CellGroup必须首先开启`use-slot`,插槽才生效。使用插槽时请通过外部自定义样式类来控制样式。
@@ -239,7 +241,7 @@ Page({
| title | 分组标题 | - |
| value | 分组右侧内容 | - |
-### Cell Slot
+## Cell Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| title | 标题 | - |
@@ -247,13 +249,13 @@ Page({
| icon | 图标 | - |
| label | 描述信息 | - |
-### CellGroup 外部样式类
+## CellGroup 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | 根结点样式 | - |
-### Cell 外部样式类
+## Cell 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/checkbox.md b/docs/component/checkbox.md
similarity index 94%
rename from docs/docs/checkbox.md
rename to docs/component/checkbox.md
index c93ba4c5..ee9304c2 100644
--- a/docs/docs/checkbox.md
+++ b/docs/component/checkbox.md
@@ -1,7 +1,9 @@
-## Checkbox 复选框
+
+
+# Checkbox 复选框
-### 基本用法
+## 基本用法
`value` 为绑定值,是否选中,单独使用时值为 `boolean` 类型。
@@ -21,7 +23,7 @@ Page({
})
```
-### 修改图标形状
+## 修改图标形状
修改 `shape` 属性,可选值为 'circle'、'square'、'button',默认为 'circle'。
@@ -30,7 +32,7 @@ Page({
沃特
```
-### 修改选中的颜色
+## 修改选中的颜色
设置 `checked-color` 属性。
@@ -56,7 +58,7 @@ Page({
})
```
-### 修改选中和非选中的值
+## 修改选中和非选中的值
设置 `true-value` 和 `false-value` 修改选中值和非选中值。如果不设置,`change`事件的参数 默认为 `true` 和 `false` 切换。
@@ -78,7 +80,7 @@ Page({
})
```
-### 复选框组
+## 复选框组
`value` 为数组,单个复选框的值通过 `value` 进行设置。通过监听 `change` 事件获取当前选中值。
@@ -128,7 +130,7 @@ Page({
})
```
-### 同行展示
+## 同行展示
设置 `inline` 属性,使复选框在同一行展示。
@@ -152,7 +154,7 @@ Page({
})
```
-### 禁用
+## 禁用
可以在 `checkbox-group` 上面设置 `disabled`,禁用所有复选框,也可以在单个复选框上面设置 `disabled` 属性,禁用某个复选框。
@@ -175,7 +177,7 @@ Page({
}
})
```
-### 设置选中数量的上限和下限
+## 设置选中数量的上限和下限
`min` 属性设置最小选中的数量,`max` 属性设置最大选中的数量。如果要默认设置某个选项固定被选中,则给该复选框设置 disabled,且 `value` 中有该选项的值。
@@ -200,7 +202,7 @@ Page({
})
```
-### 尺寸
+## 尺寸
设置 `size` 属性,可选 `large`。
@@ -211,7 +213,7 @@ Page({
```
-### Checkbox Attributes
+## Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
@@ -225,7 +227,7 @@ Page({
| size | 设置大小 | string | large | - | - |
| name | form 表单中的字段名 | string | - | - | - |
-### CheckboxGroup Attributes
+## CheckboxGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -240,25 +242,25 @@ Page({
| size | 设置大小 | string | large | - | - |
| name | form 表单中的字段名 | string | - | - | - |
-### Checkbox Methods
+## Checkbox Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| toggle | 切换当前选中状态,同时触发change事件 | - | - |
-### Checkbox Events
+## Checkbox Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 绑定值变化时触发,当为复选框组时参数为boolean,表示该复选框是否选中 | event.detail = { value } | - |
-### CheckboxGroup Events
+## CheckboxGroup Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 绑定值变化时触发 | event.detail = { value } | - |
-### Checkbox 外部样式类
+## Checkbox 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
@@ -266,7 +268,7 @@ Page({
| custom-label-class | 文字结点样式 | - |
| custom-shape-class | 单选图标结点样式 | - |
-### CheckboxGroup 外部样式类
+## CheckboxGroup 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/colPicker.md b/docs/component/colPicker.md
similarity index 97%
rename from docs/docs/colPicker.md
rename to docs/component/colPicker.md
index 7bf7552d..752a57e7 100644
--- a/docs/docs/colPicker.md
+++ b/docs/component/colPicker.md
@@ -1,8 +1,10 @@
-## ColPicker 多列选择器
+
+
+# ColPicker 多列选择器
使用多列选择器来做级联,交互效果较好,多列选择器支持无限级选择。
-### 基本用法
+## 基本用法
`label` 设置左侧文本内容;
@@ -64,7 +66,7 @@ Page({
如果想在data定义中的函数获取到小程序页面 this 对象,可以在小程序的生命周期里将 this 赋值给一个临时变量,也可以在生命周期的时候setData设置函数,并通过 bind 修改上下文,如下,详见 [在 data 定义的函数变量获取 this](http://fant-mini-plus.top/wot-design-uni/#/components/commonProblems#zai-data-ding-yi-de-han-shu-bian-liang-huo-qu-this)
:::
-### 异步加载
+## 异步加载
一般column-change是个异步获取数据的操作,触发column-change组件会有默认loading,数据响应后关闭loading。
@@ -118,7 +120,7 @@ Page({
})
```
-### 初始选项
+## 初始选项
初始选项有两种方式:
@@ -208,7 +210,7 @@ Page({
})
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -216,7 +218,7 @@ Page({
```
-### 只读
+## 只读
设置 `readonly` 属性。
@@ -224,7 +226,7 @@ Page({
```
-### 禁用选项
+## 禁用选项
`columns` 每个选项支持 `disabled` 属性。
@@ -267,7 +269,7 @@ Page({
})
```
-### 选项提示信息
+## 选项提示信息
`columns` 每个选项支持 `tip` 属性。
@@ -310,7 +312,7 @@ Page({
})
```
-### 展示格式化
+## 展示格式化
设置 `display-format` 属性,其类型为 `function`,接收当前选中项(数组,数组成员的格式同columns数组成员的格式),返回要展示的字符串。
@@ -365,7 +367,7 @@ Page({
})
```
-### 设置标题
+## 设置标题
设置 `title` 属性,修改弹出层的标题。
@@ -373,7 +375,7 @@ Page({
```
-### 确定前校验
+## 确定前校验
设置 `before-confirm` 函数,在用户点击`确定`按钮时,会执行 `before-confirm` 函数,并传入 `value`、`selectedItems`(选中项数组,数据结构同columns每一列的选项) 和 `resolve` 参数,可以对 `value` 进行校验,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会关闭弹窗。
@@ -423,7 +425,7 @@ Page({
})
```
-### 错误状态
+## 错误状态
设置 `error` 属性,选择器的值显示为红色。
@@ -431,7 +433,7 @@ Page({
```
-### 必填样式
+## 必填样式
设置 `required` 属性,展示必填样式。
@@ -439,7 +441,7 @@ Page({
```
-### 选择器大小
+## 选择器大小
通过设置 `size` 修改选择器大小,将 `size` 设置为 'large' 时字号为 16px。
@@ -447,7 +449,7 @@ Page({
```
-### 值靠右展示
+## 值靠右展示
设置 `align-right` 属性,选择器的值靠右展示。
@@ -455,7 +457,7 @@ Page({
```
-### 自定义选择器
+## 自定义选择器
如果默认的 cell 类型的展示格式不满足需求,可以通过默认插槽进行自定义选择器样式。
@@ -505,7 +507,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|---------|
@@ -537,7 +539,7 @@ Page({
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | true | 2.3.0 |
| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
-### 选项数据结构
+## 选项数据结构
| 键名 | 说明 | 类型 | 是否必填 | 最低版本 |
|------|-----|-----|---------|--------|
@@ -546,28 +548,28 @@ Page({
| tip | 选项提示 | string | 否 | - |
| disabled | 禁用选项 | boolean | 否 | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
-| bind:confirm | 最后一列选项选中时触发 | event.detail = { value(选项值数组), selectedItem(选项数组) } | - |
+| bind:confirm | 最后一列选项选中时触发 | `{ value(选项值数组), selectedItem(选项数组) }` | - |
| bind:cancel | 点击关闭按钮或者蒙层时触发 | - | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| open | 打开picker弹框 | - |
| close | 关闭picker弹框 | - |
-### Slots
+## Slots
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 自定义展示 | - |
| label | 左侧插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/collapse.md b/docs/component/collapse.md
similarity index 94%
rename from docs/docs/collapse.md
rename to docs/component/collapse.md
index 936d9367..b2d662a5 100644
--- a/docs/docs/collapse.md
+++ b/docs/component/collapse.md
@@ -1,7 +1,9 @@
-## Collapse 折叠面板
+
+
+# Collapse 折叠面板
-### 基本使用
+## 基本使用
`value` 为绑定值,可以为 array 类型(普通折叠)、 string 类型(手风琴)和 boolean 类型(收起展开查看更多)。CollapseItem 的 `title` 和 `name` 为必填。`name` 用于标识该折叠栏。
##由于微信小程序非双向绑定,因此需要事件手动赋值到当前页面##
@@ -31,7 +33,7 @@ page({
```
-### 手风琴
+## 手风琴
设置 `accordion` 属性。
@@ -49,7 +51,7 @@ page({
```
-### 禁用
+## 禁用
给 CollapseItem 设置 `disabled` 属性,禁用某个折叠栏。
@@ -67,7 +69,7 @@ page({
```
-### 查看更多
+## 查看更多
Collapse 可以单独使用,通过设置 `viewmore` 属性,将其转化为查看更多的折叠类型,同时可以设置 `line-num` 修改收起时的显示行数。这时候的 `value` 为 boolean 类型。
@@ -76,7 +78,7 @@ Collapse 可以单独使用,通过设置 `viewmore` 属性,将其转化为
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
```
-### 查看更多-使用插槽
+## 查看更多-使用插槽
Collapse 查看更多的模式下,可以使用插槽定义自己想要的折叠处样式,使用 `use-more-slot` 设置插槽开启。并且可以使用外部样式类 `custom-more-slot-class` 为自定义插槽设置样式。
```css
.more-slot{
@@ -90,7 +92,7 @@ Collapse 查看更多的模式下,可以使用插槽定义自己想要的折
```
-### CollapseItem Attributes
+## CollapseItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -98,7 +100,7 @@ Collapse 查看更多的模式下,可以使用插槽定义自己想要的折
| title | 折叠栏的标题 | string | - | - | - |
| disabled | 禁用折叠栏 | boolean | - | false | - |
-### Collapse Attributes
+## Collapse Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -108,26 +110,26 @@ Collapse 查看更多的模式下,可以使用插槽定义自己想要的折
| useMoreSlot | 查看更多的自定义插槽使用标志 | boolean | - | false | - |
| line-num | 查看更多的折叠面板,收起时的显示行数 | number | - | 2 | - |
-### Collapse Events
+## Collapse Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 绑定值变化时触发 | event.detail = { value } | - |
-### Collapse Slot
+## Collapse Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| more | 查看更多,便于开发者自定义查看更多类型的展开收起样式 | - |
-### CollapseItem 外部样式类
+## CollapseItem 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | collapseItem根结点样式 | - |
**注意:组件内插槽样式不生效,因此使用插槽时需注意添加外部样式类**
-### Collapse 外部样式类
+## Collapse 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
| custom-class | collapse根结点样式 | - |
diff --git a/docs/docs/curtain.md b/docs/component/curtain.md
similarity index 95%
rename from docs/docs/curtain.md
rename to docs/component/curtain.md
index 1e21f12d..f3f4b708 100644
--- a/docs/docs/curtain.md
+++ b/docs/component/curtain.md
@@ -1,9 +1,11 @@
-## Curtain 幕帘
+
+
+# Curtain 幕帘
一般用于公告类的图片弹窗。
-### 基本用法
+## 基本用法
通过 `value` 属性设置显示隐藏,监听 `bind:close` 事件修改 `value`,必填项。
@@ -35,7 +37,7 @@ Page({
})
```
-### 设置幕帘图片宽高
+## 设置幕帘图片宽高
设置 `width`,默认高度为图片原始比例与传入`width`计算所得, 必填项。
@@ -63,7 +65,7 @@ Page({
})
```
-### 修改关闭按钮位置
+## 修改关闭按钮位置
设置 `close-position`,默认为 'inset',可选值 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'。
@@ -91,7 +93,7 @@ Page({
})
```
-### 设置遮罩点击可关闭幕帘
+## 设置遮罩点击可关闭幕帘
设置 `close-on-click-modal` 属性,值为`boolean` 类型,非必填项。
@@ -119,7 +121,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
@@ -131,7 +133,7 @@ Page({
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - |
| hide-when-close | 是否当关闭时将弹出层隐藏(display: none) | boolean | - | true | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -147,7 +149,7 @@ Page({
| bind:load | 图片加载完成事件 | - | - |
| bind:error | 图片加载失败事件,若图片加载失败,则不会展示幕帘组件,即使设置 `value` 为 true | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/datetimePicker.md b/docs/component/datetimePicker.md
similarity index 95%
rename from docs/docs/datetimePicker.md
rename to docs/component/datetimePicker.md
index 8c0e2611..4ceb1939 100644
--- a/docs/docs/datetimePicker.md
+++ b/docs/component/datetimePicker.md
@@ -1,8 +1,10 @@
-## DatetimePicker 日期时间选择器
+
+
+# DatetimePicker 日期时间选择器
为 Picker 组件的封装,在其内部构建好日期时间选项。
-### 基本用法
+## 基本用法
`value` 设置绑定值,默认为 'datetime' 类型,展示年月日时分,绑定值为 `时间戳` 类型,如果为 'time' 类型,绑定值为字符串。通过绑定 `bind:confirm` 事件获取当前选中的时间,并赋值给绑定的value变量。label 可以不传。可以通过 `label-width` 设置标题宽度,默认为 '33%'。
@@ -23,7 +25,7 @@ Page({
})
```
-### 设置默认值
+## 设置默认值
`default-value` 设置默认日期,打开面板时面板自动选到默认日期。
@@ -45,7 +47,7 @@ Page({
})
```
-### date 类型
+## date 类型
'date' 类型只展示年月日。
@@ -59,7 +61,7 @@ Page({
}
})
```
-### year-month 类型
+## year-month 类型
'year-month' 类型只展示年月。
@@ -74,7 +76,7 @@ Page({
})
```
-### time 类型
+## time 类型
'time' 类型只展示时分。
@@ -89,7 +91,7 @@ Page({
})
```
-### 修改展示格式
+## 修改展示格式
> 自定义函数必须写在data中
给 `display-format` 属性传入一个函数,接收所有选中项数组,返回展示的文本内容。
@@ -107,7 +109,7 @@ Page({
}
})
```
-### 修改弹出层内部格式
+## 修改弹出层内部格式
> 自定义函数必须写在data中
给 `formatter` 属性传入一个函数,接收 `type` 和 `value` 值,返回展示的文本内容。`type` 有 `year`、`month`、`date`、`hour`、`minute` 类型,`value` 为 `number` 类型。
@@ -139,7 +141,7 @@ Page({
}
})
```
-### 过滤选项
+## 过滤选项
给 `filter` 属性传入一个函数,接收 `type` 和 `values` 值,返回列的选项列表。`type` 有 `year`、`month`、`date`、`hour`、`minute` 类型,`values` 为 number数组。
> 自定义函数必须写在data中
@@ -160,7 +162,7 @@ Page({
})
```
-### 选择器大小
+## 选择器大小
通过设置 `size` 修改选择器大小,将 `size` 设置为 'large' 时字号为 16px。
@@ -168,7 +170,7 @@ Page({
```
-### 必填属性
+## 必填属性
设置 `required` 属性开启表单必填。
@@ -176,7 +178,7 @@ Page({
```
-### 错误状态
+## 错误状态
设置 `error` 属性,选择器的值显示为红色。
@@ -184,7 +186,7 @@ Page({
```
-### 值靠右展示
+## 值靠右展示
设置 `align-right` 属性,选择器的值靠右展示。
@@ -192,7 +194,7 @@ Page({
```
-### 确定前校验
+## 确定前校验
设置 `before-confirm` 函数,在用户点击`确定`按钮时,会执行 `before-confirm` 函数,并传入 `value`(time 类型为字符串,其他为时间戳) 、 `resolve` 和 `picker` 参数,可以对 `value` 进行校验,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会关闭 `picker`弹窗。可以通过 `picker` 参数直接设置 `loading` 等属性。
@@ -229,7 +231,7 @@ Page({
})
```
-### 唤起项插槽
+## 唤起项插槽
开启 `use-default-slot` ,设置默认插槽修改唤起picker组件的形式。
@@ -239,7 +241,7 @@ Page({
```
-### 时间范围选择
+## 时间范围选择
当 `value` 为 `Array` 类型, 时间范围选择开启。
@@ -261,7 +263,7 @@ Page({
})
```
-### 范围选择tab标签展示格式
+## 范围选择tab标签展示格式
给 `display-format-tab-label` 属性传入一个函数,接收所有选中项数组,返回展示的文本内容。
> 自定义函数必须写在data中
@@ -286,7 +288,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -327,7 +329,7 @@ Page({
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | true | 2.3.0 |
| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
@@ -335,21 +337,21 @@ Page({
| bind:cancel | 点击左侧按钮触发 | - | - |
| bind:toggle | 在区域选择模式下,tab标签切换时触发 | 切换到当前picker选中的值 | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| open | 打开picker弹框 | - |
| close | 关闭picker弹框 | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 使用默认插槽 | - |
| label | 左侧标题插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/datetimePickerView.md b/docs/component/datetimePickerView.md
similarity index 95%
rename from docs/docs/datetimePickerView.md
rename to docs/component/datetimePickerView.md
index 7dae57bd..e99cfdf2 100644
--- a/docs/docs/datetimePickerView.md
+++ b/docs/component/datetimePickerView.md
@@ -1,7 +1,9 @@
-## DatetimePickerView 日期时间选择器视图
+
+
+# DatetimePickerView 日期时间选择器视图
-### 基本用法
+## 基本用法
`value` 设置绑定值,默认为 'datetime' 类型,展示年月日时分,绑定值为 `时间戳` 类型,如果为 'time' 类型,绑定值为字符串。
@@ -21,7 +23,7 @@ Page({
})
```
-### date 类型
+## date 类型
'date' 类型只展示年月日。
@@ -35,7 +37,7 @@ Page({
}
})
```
-### year-month 类型
+## year-month 类型
'year-month' 类型只展示年月。
@@ -50,7 +52,7 @@ Page({
})
```
-### time 类型
+## time 类型
'time' 类型只展示时分。
@@ -65,7 +67,7 @@ Page({
})
```
-### 修改内部格式
+## 修改内部格式
> 自定义函数必须写在data中
@@ -100,7 +102,7 @@ Page({
})
```
-### 过滤选项
+## 过滤选项
给 `filter` 属性传入一个函数,接收 `type` 和 `values` 值,返回列的选项列表。`type` 有 `year`、`month`、`date`、`hour`、`minute` 类型,`values` 为 number数组。
> 自定义函数必须写在data中
@@ -121,7 +123,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -138,7 +140,7 @@ Page({
| maxHour | 最大小时,time类型时生效 | number | - | 23 | - |
| minMinute | 最小分钟,time类型时生效 | number | - | 0 | - |
| maxMinute | 最大分钟,time类型时生效 | number | - | 59 | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
diff --git a/docs/docs/divider.md b/docs/component/divider.md
similarity index 84%
rename from docs/docs/divider.md
rename to docs/component/divider.md
index b7757a34..822d1b9d 100644
--- a/docs/docs/divider.md
+++ b/docs/component/divider.md
@@ -1,7 +1,9 @@
-## Divider 分割线
+
+
+# Divider 分割线
-### 基本使用
+## 基本使用
使用默认插槽设置内容。
@@ -9,7 +11,7 @@
这是分割线
```
-### 自定义颜色
+## 自定义颜色
设置 `color` 属性。
@@ -17,19 +19,19 @@
自定义颜色
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| color | 自定义颜色,所有颜色的写法 | string | - | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 内容 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
diff --git a/docs/docs/dropMenu.md b/docs/component/dropMenu.md
similarity index 95%
rename from docs/docs/dropMenu.md
rename to docs/component/dropMenu.md
index 9c81bd55..cf5d234e 100644
--- a/docs/docs/dropMenu.md
+++ b/docs/component/dropMenu.md
@@ -1,9 +1,11 @@
+
+
# DropMenu 下拉菜单
## 代码演示
-### 基础用法
+## 基础用法
基础用法需要绑定 `value` 值以及 `options` 属性。
@@ -58,7 +60,7 @@ Page({
})
```
-### 自定义菜单内容
+## 自定义菜单内容
通过插槽 `default` 可以自定义 `DropMenuItem` 的内容,此时需要使用实例上的 `close` 方法手动控制菜单的关闭。
@@ -102,7 +104,7 @@ Page({
})
```
-### 自定义菜单选项
+## 自定义菜单选项
自己通过 flex 布局做自定义筛选展示。
@@ -117,7 +119,7 @@ Page({
```
-### 向上展开
+## 向上展开
将 `direction` 属性值设置为 `up`,菜单即可向上展开
@@ -128,7 +130,7 @@ Page({
```
-### 禁用菜单
+## 禁用菜单
```html
@@ -137,7 +139,7 @@ Page({
```
-### DropMenu Attributes
+## DropMenu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -146,7 +148,7 @@ Page({
| close-on-click-modal | 是否点击蒙层时关闭 | boolean | - | true | - |
| duration | 菜单展开收起动画时间,单位 ms | number | - | 200 | - |
-### DropMenuItem Attributes
+## DropMenuItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -159,7 +161,7 @@ Page({
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中,选项说明对应的 key | string | - | tip | - |
-### DropdownItem Events
+## DropdownItem Events
| 方法名 | 说明 | 参数 | 最低版本 |
|------|------|------|------|---------|
@@ -167,7 +169,7 @@ Page({
| bind:close | 关闭菜单 | - | - |
| bind:open | 展开菜单 | - | - |
-### DropdownItem Methods
+## DropdownItem Methods
通过 `this.selectComponent('#selector')` 可以获取到 DropdownItem 实例并调用实例方法
@@ -176,25 +178,25 @@ Page({
| close | 关闭菜单 | - | - | - |
| open | 展开菜单 | - | - | - |
-### DropMenu Slot
+## DropMenu Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 菜单内容 | - |
-### DropMenuItem Slot
+## DropMenuItem Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 菜单自定义内部内容 | - |
-### DropMenu 外部样式类
+## DropMenu 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | DropMenu 根结点样式 | - |
-### DropMenuItem 外部样式类
+## DropMenuItem 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/form.md b/docs/component/form.md
similarity index 99%
rename from docs/docs/form.md
rename to docs/component/form.md
index a09f4422..78dc6039 100644
--- a/docs/docs/form.md
+++ b/docs/component/form.md
@@ -1,4 +1,6 @@
-## Form 表单组合
+
+
+# Form 表单组合
本章节主要讲如何将多个 form 表单组件进行组合,形成一个完整的表单页面。
diff --git a/docs/docs/grid.md b/docs/component/grid.md
similarity index 95%
rename from docs/docs/grid.md
rename to docs/component/grid.md
index aa79cc0e..8b6dd979 100644
--- a/docs/docs/grid.md
+++ b/docs/component/grid.md
@@ -1,9 +1,11 @@
+
+
# Grid 宫格
## 代码演示
-### 基础用法
+## 基础用法
基础用法需要绑定 `icon` 值以及 `text` 属性。默认显示一行。
@@ -17,7 +19,7 @@
```
-### 自定义列数
+## 自定义列数
`column` 可以用来自定义宫格列数。未定义 `column` 属性时,默认显示为一行,定义该属性后,组件内部根据 `column` 属性自行划分行数。
@@ -32,7 +34,7 @@
```
-### 自定义背景颜色
+## 自定义背景颜色
`bg-color` 可以用来自定义宫格背景颜色。
@@ -45,7 +47,7 @@
```
-### 开启边框
+## 开启边框
`border` 可以用来开启边框线展示。
@@ -60,7 +62,7 @@
```
-### 内容插槽
+## 内容插槽
通过默认插槽可以自定义 `GridItem` 的内容。
@@ -87,7 +89,7 @@
}
```
-### 单个插槽
+## 单个插槽
通过插槽 `icon` 可以插入 `GridItem` 中的图标位。通过 `use-icon-slot` 开启图标插槽。
@@ -124,7 +126,7 @@
}
```
-### 自定义样式
+## 自定义样式
通过设置 `custom-class` 可以自定义 `GridItem` 的样式。
@@ -154,7 +156,7 @@
}
```
-### 正方形格子
+## 正方形格子
通过 `square` 属性开启正方形格属性。此时显示每一个 `GridItem` 都为正方形。
@@ -170,7 +172,7 @@
```
-### 设定格间隙
+## 设定格间隙
通过 `gutter` 属性设置格子之间的距离。
@@ -184,7 +186,7 @@
```
-### 页面导航
+## 页面导航
通过 `clickable` 属性开启可点击状态, 可以绑定 `click` 事件。
@@ -199,7 +201,7 @@
```
-### 提示信息
+## 提示信息
设置 `is-dot` 属性后,会在图标右上角展示一个小红点。
@@ -212,7 +214,7 @@
```
-### Grid Attributes
+## Grid Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -223,7 +225,7 @@
| clickable | 是否开启格子点击反馈 | boolean | - | false | - |
| bg-color | 背景颜色设置 | string | - | #ffffff | - |
-### GridItem Attributes
+## GridItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -240,19 +242,19 @@
| use-text-slot | 是否开启 `GridItem` text 内容插槽 | boolean | - | false | - |
| icon-size | 图标大小 | string | - | 26px | - |
-### GridItem Events
+## GridItem Events
| 方法名 | 说明 | 参数 | 返回值 | 最低版本 |
|------|------|------|------|---------|
| bind:itemclick | 点击(跳转)事件 | event | - | - |
-### Grid Slot
+## Grid Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 宫格内容 | - |
-### GridItem Slot
+## GridItem Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
@@ -260,13 +262,13 @@
| icon | 宫格中图标位内容 | - |
| text | 宫格中文本位内容 | - |
-### Grid 外部样式类
+## Grid 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
| custom-class | Grid 根结点样式 | - |
-### GridItem 外部样式类
+## GridItem 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/icon.md b/docs/component/icon.md
similarity index 87%
rename from docs/docs/icon.md
rename to docs/component/icon.md
index 266d15ca..fbcae2c5 100644
--- a/docs/docs/icon.md
+++ b/docs/component/icon.md
@@ -1,8 +1,10 @@
-## Icon 图标
+
+
+# Icon 图标
-### 基本用法
+## 基本用法
通过 `name` 属性设置使用哪个图标。
@@ -10,7 +12,7 @@
```
-### 图标颜色
+## 图标颜色
设置 `color` 属性。
@@ -18,7 +20,7 @@
```
-### 图标大小
+## 图标大小
设置 `size` 属性。
@@ -26,7 +28,7 @@
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
| name | 使用的图标名字,可以使用链接图片 | string | - | - | - |
@@ -34,7 +36,7 @@
| size | 图标的字体大小 | string | - | inherit | - |
| custom-style | 根结点样式 | string | - | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/img.md b/docs/component/img.md
similarity index 89%
rename from docs/docs/img.md
rename to docs/component/img.md
index 7779fb41..184123ea 100644
--- a/docs/docs/img.md
+++ b/docs/component/img.md
@@ -1,9 +1,11 @@
-## Img 图片
+
+
+# Img 图片
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载完成、加载失败
-### 基本用法
+## 基本用法
基础用法与原生 image(v1.9.91) 标签一致,可以设置 `src` 、 `width` 、`height` 等原生属性。
@@ -33,7 +35,7 @@ page({
})
```
-### 填充模式
+## 填充模式
通过 `mode` 属性可以设置图片填充模式,可选值见下方表格。
@@ -48,7 +50,7 @@ mode为小程序原生属性,参考[微信小程序image官方文档](https://
/>
```
-### 圆形设置
+## 圆形设置
通过 `round` 属性可以设置以圆形展示。
@@ -61,7 +63,7 @@ mode为小程序原生属性,参考[微信小程序image官方文档](https://
/>
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -71,15 +73,15 @@ mode为小程序原生属性,参考[微信小程序image官方文档](https://
| mode | 填充模式 | string | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
| round | 是否显示为圆形 | boolean | - | false | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:click | 点击事件 | - | - |
-| bind:load | 当图片载入完毕时触发 | event.detail = {height, width} | - |
-| bind:error | 当错误发生时触发 | event.detail = {errMsg} | - |
+| bind:load | 当图片载入完毕时触发 | ` {height, width}` | - |
+| bind:error | 当错误发生时触发 | `{errMsg}` | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/imgCropper.md b/docs/component/imgCropper.md
similarity index 97%
rename from docs/docs/imgCropper.md
rename to docs/component/imgCropper.md
index c9e56e66..f15316dd 100644
--- a/docs/docs/imgCropper.md
+++ b/docs/component/imgCropper.md
@@ -1,4 +1,6 @@
-## ImgCropper 图片裁剪
+
+
+# ImgCropper 图片裁剪
- 1、图片裁剪
@@ -7,7 +9,7 @@
- 4、支持旋转,用于截取对应角度
-### 基本用法
+## 基本用法
图片裁剪组件需要绑定 `show` 来控制组件的显示与隐藏,通过属性 `img-src` 控制展示的图片资源位,也可以通过函数 `resetImg` 来控制组件图片的初始化。进入组件后,可以对图片进行拖拽、双指缩放、旋转等操作。监听 `bind:confirm` 事件获取选中值。
@@ -64,7 +66,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值| 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -80,7 +82,7 @@ Page({
| quality | 生成的图片质量 [wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | number | 0/1 | 1 | 2.3.0 |
| file-type | 目标文件的类型,[wx.canvasToTempFilePath属性介绍](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html#%E5%8F%82%E6%95%B0) | string | - | png | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -89,7 +91,7 @@ Page({
| bind:imgloaderror | 当图片加载错误时触发 | event.detail = {err} | 2.3.0 |
| bind:imgloaded | 当图片加载完成时触发 | event.detail = {res} | 2.3.0 |
-### Methods
+## Methods
对外暴露函数
@@ -98,7 +100,7 @@ Page({
| setRoate | 设置图片旋转角度 | deg (设置的旋转角度)| 2.3.0 |
| resetImg | 重置图片的角度、缩放、位置 | - | 2.3.0 |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/input.md b/docs/component/input.md
similarity index 88%
rename from docs/docs/input.md
rename to docs/component/input.md
index 6266aba3..4a2434b0 100644
--- a/docs/docs/input.md
+++ b/docs/component/input.md
@@ -1,7 +1,9 @@
-## Input 输入框
+
+
+# Input 输入框
-### 基本用法
+## 基本用法
`value` 为绑定值。
`bindChange`为绑定change事件。
@@ -23,7 +25,7 @@ page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -31,7 +33,7 @@ page({
```
-### 只读
+## 只读
设置 `readonly` 属性。
@@ -39,7 +41,7 @@ page({
```
-### 清空按钮
+## 清空按钮
设置 `clearable` 属性。
@@ -47,7 +49,7 @@ page({
```
-### 密码输入框
+## 密码输入框
设置 `show-password` 属性。
@@ -55,7 +57,7 @@ page({
```
-### 前后icon
+## 前后icon
设置前置icon `prefix-icon`,设置后置icon `suffix-icon`,icon 为 [icon](/#/components/icon) 章节中的图标,如果没有你需要的图标,则使用 `prefix`、`suffix` 插槽进行自定义插入。
@@ -67,7 +69,7 @@ page({
bind:change="handleChange"/>
```
-### 限制字数输入
+## 限制字数输入
设置 `maxlength` 属性,如果要显示字数限制,设置 `show-word-limit` 属性。
@@ -75,7 +77,7 @@ page({
```
-### 文本域
+## 文本域
设置 `type` 为 'textarea`。
@@ -105,7 +107,7 @@ page({
```
-### 设置label标题
+## 设置label标题
设置 `label` 标题,可以和 `cell-group` 组合使用,形成 `cell` 展示类型。可以通过 `label-width` 设置标题宽度,默认为 '33%'。
@@ -113,7 +115,7 @@ page({
```
-### 必填样式
+## 必填样式
设置了 `label` 的情况下,设置 `required` 属性,展示必填样式。
@@ -121,7 +123,7 @@ page({
```
-### 输入框大小
+## 输入框大小
通过设置 `size` 修改输入框大小,将 `size` 设置为 'large' 时字号为 16px。
@@ -129,7 +131,7 @@ page({
```
-### 错误状态
+## 错误状态
设置 `error` 属性,输入框的值显示为红色。
@@ -137,7 +139,7 @@ page({
```
-### 垂直居中
+## 垂直居中
当设置 `label` 标题时,默认为顶部居中,设置 `center` 属性可以使标题和输入框垂直居中。
@@ -145,7 +147,7 @@ page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -182,22 +184,22 @@ page({
| name | form 表单中的字段名 | string | - | - | - |
| no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
-| bind:input | 监听输入框input事件 | event.detail = {value, cursor, keyCode} | - |
-| bind:focus | 监听输入框focus事件 | event.detail = { value, height }, height 为键盘高度 | - |
-| bind:blur | 监听输入框blur事件 | event.detail = { value, cursor },仅在type="textarea"时存在cursor | - |
-| bind:change | 监听输入框修改事件 | event.detail = { value } | - |
+| bind:input | 监听输入框input事件 | ` {value, cursor, keyCode}` | - |
+| bind:focus | 监听输入框focus事件 | ` { value, height }`, height 为键盘高度 | - |
+| bind:blur | 监听输入框blur事件 | ` { value, cursor }`,仅在type="textarea"时存在cursor | - |
+| bind:change | 监听输入框修改事件 | ` { value }` | - |
| bind:clear | 监听输入框清空按钮事件 | - | - |
-| bind:linechange | 监听输入框行数变化(仅限textarea) | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } | - |
-| bind:confirm | 点击完成时, 触发 confirm 事件 | event.detail = { value } | - |
-| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height, duration } | - |
+| bind:linechange | 监听输入框行数变化(仅限textarea) | ` { height: 0, heightRpx: 0, lineCount: 0 }` | - |
+| bind:confirm | 点击完成时, 触发 confirm 事件 | ` { value }` | - |
+| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | ` { height, duration }` | - |
| bind:clickprefixicon | 点击前置图标时触发 | - | - |
| bind:clicksuffixicon | 点击后置图标时触发 | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
@@ -205,7 +207,7 @@ page({
| prefix | 前置插槽 | - |
| suffix | 后置插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/inputNumber.md b/docs/component/inputNumber.md
similarity index 85%
rename from docs/docs/inputNumber.md
rename to docs/component/inputNumber.md
index db155bdd..5abdd8b1 100644
--- a/docs/docs/inputNumber.md
+++ b/docs/component/inputNumber.md
@@ -1,7 +1,9 @@
-## InputNumber 计数器
+
+
+# InputNumber 计数器
-### 基本用法
+## 基本用法
通过监听 `change` 事件获取`value`变化后的值。
@@ -22,7 +24,7 @@ Page({
})
```
-### 设置步长
+## 设置步长
设置 `step` 步长,即每次value变化的绝对值。
@@ -30,7 +32,7 @@ Page({
```
-### 设置最小最大值
+## 设置最小最大值
设置 `min` 最小值,`max` 最大值。`min` 默认为1。
@@ -38,7 +40,7 @@ Page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -46,7 +48,7 @@ Page({
```
-### 无输入框
+## 无输入框
设置 `without-input` ,不展示输入框。
@@ -54,7 +56,7 @@ Page({
```
-### 设置小数精度
+## 设置小数精度
设置 `precision` 属性,默认为0。
@@ -62,7 +64,7 @@ Page({
```
-### 严格步数倍数
+## 严格步数倍数
设置 `step-strictly` 属性,强制输入框输入内容为 `step` 的倍数(当用户输入完成后触发change时,会更正输入框内容)。
@@ -70,7 +72,7 @@ Page({
```
-### 修改输入框宽度
+## 修改输入框宽度
设置 `input-width` 设置宽度,该值接受1个字符串,可以是表示尺寸的任何单位。
@@ -78,7 +80,7 @@ Page({
```
-### 允许空值,设置 placeholder
+## 允许空值,设置 placeholder
设置 `allow-null` 属性允许空值,设置 `placeholder` 提示填写。
@@ -101,7 +103,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -118,15 +120,15 @@ Page({
| allow-null | 允许空值 | boolean | - | false | 2.3.0 |
| placeholder | 占位文本 | string | - | - | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
-| bind:change | 值修改事件 | event.detail = { value } | - |
-| bind:focus | 输入框获取焦点事件 | event.detail = { value, height } | - |
-| bind:blur | 输入框失去焦点事件 | event.detail = { value } | - |
+| bind:change | 值修改事件 | ` { value }` | - |
+| bind:focus | 输入框获取焦点事件 | ` { value, height }` | - |
+| bind:blur | 输入框失去焦点事件 | ` { value }` | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/layout.md b/docs/component/layout.md
similarity index 95%
rename from docs/docs/layout.md
rename to docs/component/layout.md
index d2b84c44..00641aff 100644
--- a/docs/docs/layout.md
+++ b/docs/component/layout.md
@@ -1,3 +1,5 @@
+
+
# Layout 布局
`Layout` 组件由 `wd-col` 组件和 `wd-row` 组成。
@@ -5,7 +7,7 @@
## 代码演示
-### 基本用法
+## 基本用法
`Layout` 组件提供了 `24列` 栅格,通过在 `wd-col` 上设置 `span` 属性,通过计算当前内容所占百分比进行分栏。
@@ -56,7 +58,7 @@
}
```
-### 分栏偏移
+## 分栏偏移
`offset` 属性可以设置分栏的偏移量,计算方式以及偏移大小与 `span` 相同。
@@ -71,7 +73,7 @@
```
-### 分栏间隔
+## 分栏间隔
通过 `gutter` 属性可以设置列元素之间的间距,默认间距为 0
@@ -83,30 +85,30 @@
```
-### flex 布局
+## flex 布局
*注意:由于微信小程序使用插槽时,插槽会渲染到当前标签外部,因此在组件上设置flex布局属性,对插槽内部并不生效,因此flex布局效果需要用户参考[H5组件库 Layout](http://fant-mini-plus.top/wot-design/#/components/layout)自行实现。*
-### Row Attributes
+## Row Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| gutter | 列元素之间的间距(单位为px) | number | - | 0 | - |
-### Col Attributes
+## Col Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
| span | 列元素宽度 | number | - | 24 | - |
| offset | 列元素偏移距离 | number | - | 0 | - |
-### Row 外部样式类
+## Row 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | Row 根结点样式 | - |
-### Col 外部样式类
+## Col 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/loading.md b/docs/component/loading.md
similarity index 90%
rename from docs/docs/loading.md
rename to docs/component/loading.md
index f3e5bf42..3e12ddf3 100644
--- a/docs/docs/loading.md
+++ b/docs/component/loading.md
@@ -1,7 +1,9 @@
-## Loading 加载指示器
+
+
+# Loading 加载指示器
-### 基本用法
+## 基本用法
基本用法,适用于按钮加载状态和页面轻提示。
@@ -9,7 +11,7 @@
```
-### 修改指示器类型
+## 修改指示器类型
通过 `type` 修改指示器的类型,可选值为 'outline',适用于通用模块加载。
@@ -17,7 +19,7 @@
```
-### 修改颜色
+## 修改颜色
通过 `color` 属性修改指示器的颜色。比如修改为白色,同时设置背景为黑色。
@@ -42,7 +44,7 @@
}
```
-### 修改指示器大小
+## 修改指示器大小
通过 `size` 属性设置指示器的大小,默认为大小 '32px',属性支持 `number`/`string` 类型。
@@ -52,7 +54,7 @@
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -60,7 +62,7 @@
| color | 设置加载指示器颜色 | string | - | #4D80F0 | - |
| size | 设置加载指示器大小 | number / string | - | 32px | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/loadmore.md b/docs/component/loadmore.md
similarity index 95%
rename from docs/docs/loadmore.md
rename to docs/component/loadmore.md
index 6f46faa2..27573641 100644
--- a/docs/docs/loadmore.md
+++ b/docs/component/loadmore.md
@@ -1,7 +1,10 @@
-## loadmore 加载更多
+
+
+
+# loadmore 加载更多
-### 基本用法
+## 基本用法
在需要进行加载的列表的底部引入该组件即可。当滑动到列表底部时,通过设置`state`展示不同的文案。
@@ -21,7 +24,7 @@
}
```
-### 自定义文案
+## 自定义文案
通过设置`loading-text`、`finished-text`、`error-text`配合`state`展示不同状态时的文案
@@ -33,7 +36,7 @@
```
-### 点击继续加载
+## 点击继续加载
当state为error时,点击文案,组件会触发`loadmore`事件
@@ -45,7 +48,7 @@
/>
```
-### 应用实现
+## 应用实现
配合`onReachBottom`事件实现滚动到底部加载更多
@@ -130,7 +133,7 @@ image{
flex: 1;
}
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| state | 加载状态 | string | loading/finished/error | - | - |
@@ -138,13 +141,13 @@ image{
| finished-text | 全部加载完的提示文案 | string | - | 没有更多了 | - |
| error-text | 加载失败的提示文案 | string | - | 加载失败,点击重试 | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| bind:reload | state为error加载错误时,点击文案触发reload事件 | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/messageBox.md b/docs/component/messageBox.md
similarity index 97%
rename from docs/docs/messageBox.md
rename to docs/component/messageBox.md
index 390fd10d..7eb18928 100644
--- a/docs/docs/messageBox.md
+++ b/docs/component/messageBox.md
@@ -1,9 +1,11 @@
-## MessageBox 弹框
+
+
+# MessageBox 弹框
弹框有三种:alert、confirm 和 prompt。
-### Alert 弹框
+## Alert 弹框
alert 弹框只有确定按钮,用于强提醒。
> 由于小程序限制,组件必须设置id,默认设置为`wd-message-box`,如需修改请在options中同时传入
@@ -59,7 +61,7 @@ Page({
})
```
-### Confirm 弹框
+## Confirm 弹框
用于提示用户操作。
@@ -82,7 +84,7 @@ Page({
})
```
-### Prompt 弹框
+## Prompt 弹框
prompt 会展示一个输入框,并可以进行输入校验。
@@ -105,7 +107,7 @@ Page({
})
```
-### 插槽
+## 插槽
如果提供的弹框内容不满足需求,可以使用插槽自定义弹框内容。
@@ -162,7 +164,7 @@ MessageBox.confirm(options)
MessageBox.prompt(options)
```
-### 对 messageBox 封装
+## 对 messageBox 封装
当 `wd-message-box` 被包裹在用户代码封装的 `自定义组件` 时,`wd-message-box` 无法获取当前页面栈,进而导致 `wd-message-box` 无法在 `DOM` 中选中自己,此时需要用户代码手动透传。
@@ -184,7 +186,7 @@ Page({
})
```
-### Options Attributes
+## Options Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -205,7 +207,7 @@ Page({
| zIndex | 弹窗层级 | number | - | 99 | 2.3.0 |
| lazyRender | 弹层内容懒渲染,触发展示时才渲染内容 | boolean | - | true | 2.3.0 |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
diff --git a/docs/docs/noticeBar.md b/docs/component/noticeBar.md
similarity index 94%
rename from docs/docs/noticeBar.md
rename to docs/component/noticeBar.md
index edd6f490..715d9cdb 100644
--- a/docs/docs/noticeBar.md
+++ b/docs/component/noticeBar.md
@@ -1,7 +1,9 @@
-## NoticeBar 通知栏
+
+
+# NoticeBar 通知栏
-### 基本用法
+## 基本用法
设置 `text` 文本内容和 `prefix` 左侧图标。
@@ -12,7 +14,7 @@
/>
```
-### 类型修改
+## 类型修改
设置 `type` 可修改通知类型,通知类型共有三种 `info`|`warning`|`danger`,默认值为`warning`。
@@ -40,7 +42,7 @@
}
```
-### 插槽演示
+## 插槽演示
```html
@@ -58,7 +60,7 @@
}
```
-### 多行展示
+## 多行展示
设置 `wrapable` 属性为 `true` 且同时禁止滚动 `scrollable` 即可开启多行展示。
@@ -70,7 +72,7 @@
/>
```
-### 可关闭的
+## 可关闭的
设置 `closable` 属性,使通知栏可以关闭。
@@ -81,7 +83,7 @@
/>
```
-### 自定义颜色
+## 自定义颜色
设置 `color` 修改文字和图标颜色,设置 `background-color` 修改背景颜色。
@@ -95,7 +97,7 @@
/>
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -110,20 +112,20 @@
| color | 文字、图标颜色 | string | - | - | - |
| background-color | 背景颜色 | string | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| bind:close | 关闭按钮点击时 | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| prefix | 前置图标 | - |
| suffix | 后置插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/pagination.md b/docs/component/pagination.md
similarity index 93%
rename from docs/docs/pagination.md
rename to docs/component/pagination.md
index f0eaf023..635a4498 100644
--- a/docs/docs/pagination.md
+++ b/docs/component/pagination.md
@@ -1,7 +1,9 @@
-## Pagination 分页
+
+
+# Pagination 分页
-### 基本用法
+## 基本用法
通过监听 `change` 事件获取`value`变化后的值,total设置总条数,page-size设置一页展示条数,默认为10条,总页数通过total和page-size自动计算。
@@ -20,7 +22,7 @@ Page({
})
```
-### Icon图标
+## Icon图标
设置 `show-icon` 属性,将分页导航展示为Icon图标。
@@ -28,7 +30,7 @@ Page({
```
-### 文字提示
+## 文字提示
设置 `show-message` 属性,展示文字提示。
@@ -43,7 +45,7 @@ Page({
/>
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -57,13 +59,13 @@ Page({
| show-message | 是否展示文字提示 | boolean | - | false | - |
| hide-if-one-page | 总页数只有一页时是否隐藏 | boolean | - | true | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|------|--------|
| bind:change | 值修改事件 | event.detail = { value },value为当前值 |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/picker.md b/docs/component/picker.md
similarity index 97%
rename from docs/docs/picker.md
rename to docs/component/picker.md
index a9f9cf3b..9bc78531 100644
--- a/docs/docs/picker.md
+++ b/docs/component/picker.md
@@ -1,9 +1,11 @@
-## Picker 选择器视图
+
+
+# Picker 选择器视图
Picker 组件为 popup 和 pickerView 的组合。
-### 基本用法
+## 基本用法
`columns` 设置选项数据源,选项可以为字符串,也可以为对象,如果为对象则默认取 `label` 属性为选项内容进行渲染。`label` 设置左侧文本内容,`value` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度,默认为 '33%',监听 `bind:confirm` 事件,获取选中值,传出一个 evnet 对象, `event.detail = { value, selectedItems }`,value 为绑定值,selectedItems 为选中选项的对象。
@@ -33,7 +35,7 @@ Page({
| label | string | 选项文本内容 | - |
| disabled | boolean | 选项是否禁用 | - |
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -49,7 +51,7 @@ Page({
})
```
-### 只读
+## 只读
设置 `readonly` 属性。
@@ -57,14 +59,14 @@ Page({
```
-### 文案标题
+## 文案标题
设置 `title` 属性。
```html
```
-### 加载中
+## 加载中
设置 `loading` 属性。
@@ -72,7 +74,7 @@ Page({
```
-### 多列
+## 多列
`columns` 属性设置为二维数组,`value` 为数组。
@@ -91,7 +93,7 @@ Page({
})
```
-### 多级联动
+## 多级联动
传入 `column-change` 属性,其类型为 `function`,接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源,当修改完成后需要执行 `resolve()` 告知组件修改完成以继续执行,如果 `column-change` 包含异步操作,也可以使组件按照异步顺序进行执行。
@@ -149,7 +151,7 @@ Page({
})
```
-### 选择器大小
+## 选择器大小
通过设置 `size` 修改选择器大小,将 `size` 设置为 'large' 时字号为 16px。
@@ -157,7 +159,7 @@ Page({
```
-### 必填属性
+## 必填属性
设置 `required` 属性,展示必填样式。
@@ -165,7 +167,7 @@ Page({
```
-### 错误状态
+## 错误状态
设置 `error` 属性,选择器的值显示为红色。
@@ -173,7 +175,7 @@ Page({
```
-### 值靠右展示
+## 值靠右展示
设置 `align-right` 属性,选择器的值靠右展示。
@@ -181,7 +183,7 @@ Page({
```
-### 确定前校验
+## 确定前校验
设置 `before-confirm` 函数,在用户点击`确定`按钮时,会执行 `before-confirm` 函数,并传入 `value` 、 `resolve` 和 `picker` 参数,可以对 `value` 进行校验,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会关闭 `picker`弹窗。可以通过 `picker` 参数直接设置 `loading`、`columns` 等属性。
@@ -219,7 +221,7 @@ Page({
})
```
-### 唤起项插槽
+## 唤起项插槽
开启 `use-default-slot` ,设置默认插槽修改唤起picker组件的形式。
@@ -229,7 +231,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -263,7 +265,7 @@ Page({
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | true | 2.3.0 |
| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
@@ -271,21 +273,21 @@ Page({
| bind:cancel | 点击左侧按钮触发 | - | - |
| bind:open | 打开选择器弹出层时触发 | - | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| open | 打开picker弹框 | - | - |
| close | 关闭picker弹框 | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 使用默认插槽 | - |
| label | 左侧标题插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/pickerView.md b/docs/component/pickerView.md
similarity index 97%
rename from docs/docs/pickerView.md
rename to docs/component/pickerView.md
index 336e5727..4b63c6e6 100644
--- a/docs/docs/pickerView.md
+++ b/docs/component/pickerView.md
@@ -1,6 +1,8 @@
-## PickerView 选择器视图
+
-### 基本用法
+# PickerView 选择器视图
+
+## 基本用法
单列选择器,给 `columns` 传入一个数值数组,设置 `value` 绑定值。选项可以为字符串,也可以为对象,如果为对象则默认取 `label` 属性为选项内容进行渲染,`value` 获取的值为 `value` 属性的值,如果 `value` 属性不存在,则取 `label` 的值。
@@ -27,7 +29,7 @@ Page({
| label | string | 选项文本内容 | - |
| disabled | boolean | 选项是否禁用 | - |
-### 禁用选项
+## 禁用选项
选项可以为对象,设置 `disabled` 属性。
@@ -43,14 +45,14 @@ Page({
})
```
-### 加载中
+## 加载中
设置 `loading` 属性。
```html
```
-### 多列
+## 多列
`columns` 属性设置为二维数组,`value` 为数组。
@@ -69,7 +71,7 @@ Page({
})
```
-### 多级联动
+## 多级联动
传入 `column-change` 属性,其类型为 `function`,接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源,当修改完成后需要执行 `resolve()` 告知组件修改完成以继续执行,如果 `column-change` 包含异步操作,也可以使组件按照异步顺序进行执行。
@@ -115,7 +117,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -129,7 +131,7 @@ Page({
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
| name | form 表单中的字段名 | string | - | - | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -138,7 +140,7 @@ Page({
| getColumnData | 获取某一列的选项 | columnIndex | - |
| setColumnData | 设置某一列的选项 | columnIndex, values | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|------|--------|
@@ -146,7 +148,7 @@ Page({
| bind:pickstart | 当滚动选择开始时候触发事件 | - | - |
| bind:pickend | 当滚动选择结束时候触发事件 | - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/popover.md b/docs/component/popover.md
similarity index 95%
rename from docs/docs/popover.md
rename to docs/component/popover.md
index 4713d789..4d737a4b 100644
--- a/docs/docs/popover.md
+++ b/docs/component/popover.md
@@ -1,9 +1,11 @@
-## Popover 气泡
+
+
+# Popover 气泡
常用于展示提示信息。
-### 基本用法
+## 基本用法
Popover 的属性与 [Tooltip](/#/components/tooltip) 很类似,因此对于重复属性,请参考 [Tooltip](/#/components/tooltip) 的文档,在此文档中不做详尽解释。
@@ -37,7 +39,7 @@ Page({
})
```
-### 模式 mode
+## 模式 mode
使用 `mode` 属性控制当前文字提示的展示模式。`mode` 可选参数为 `normal` / `menu`:
@@ -96,7 +98,7 @@ Page({
})
```
-### 嵌套信息
+## 嵌套信息
开启属性 `use-content-slot`,使用插槽 `content`, 可以在 Popover 中嵌套多种类型信息。
@@ -127,7 +129,7 @@ Page({
```
-### Popover Attributes
+## Popover Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -139,29 +141,29 @@ Page({
| disabled | popover 是否可用 | boolean | - | false | - |
| offset | 出现位置的偏移量 | number | - | 0 | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| content | 多行内容或用户自定义样式 | - |
-### Events
+## Events
| 事件名称 | 说明 | 回调参数 | 最低版本 |
|---------|-----| --------|--------|
| bind:open | 显示时触发 | - | - |
| bind:close | 隐藏时触发 | - | - |
| bind:change | pop显隐值变化时触发 | - | - |
-| bind:menuclick | menu 模式下点击某一选项触发 | event.detail = { item, index } | - |
+| bind:menuclick | menu 模式下点击某一选项触发 | `{ item, index }` | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| open | 打开文字提示弹框 | - | - |
| close | 关闭文字提示弹框 | - | - |
-### Popover 外部样式类
+## Popover 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/popup.md b/docs/component/popup.md
similarity index 94%
rename from docs/docs/popup.md
rename to docs/component/popup.md
index 92e9f29a..454b1227 100644
--- a/docs/docs/popup.md
+++ b/docs/component/popup.md
@@ -1,7 +1,9 @@
-## Popup 弹出层
+
+
+# Popup 弹出层
-### 基本用法
+## 基本用法
通过 `show` 属性设置显示隐藏,监听 `bind:close` 事件修改 `show`。
@@ -9,7 +11,7 @@
内容
```
-### 弹出位置
+## 弹出位置
设置 `position`,默认为 'center',可选值 'top', 'right', 'bottom', 'left'。
@@ -17,7 +19,7 @@
```
-### 关闭按钮
+## 关闭按钮
设置 `closable` 属性。
@@ -25,7 +27,7 @@
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|---------|
@@ -42,7 +44,7 @@
| lazy-render | 弹层内容懒渲染,触发展示时才渲染内容 | boolean | - | true | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | false | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -55,7 +57,7 @@
| bind:leave | 离开时触发 | - | - |
| bind:afterleave | 离开后触发| - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/progress.md b/docs/component/progress.md
similarity index 93%
rename from docs/docs/progress.md
rename to docs/component/progress.md
index be469a8c..60aeca41 100644
--- a/docs/docs/progress.md
+++ b/docs/component/progress.md
@@ -1,7 +1,9 @@
-## Progress 进度条
+
+
+# Progress 进度条
-### 基本用法
+## 基本用法
设置百分比 `percentage`。
@@ -9,7 +11,7 @@
```
-### 隐藏进度文字
+## 隐藏进度文字
设置 `hide-text` 隐藏进度文字。
@@ -17,7 +19,7 @@
```
-### 设置状态
+## 设置状态
设置 `status`,告知用户当前状态和预期。
@@ -26,7 +28,7 @@
```
-### 修改颜色
+## 修改颜色
设置 `color` 修改进度条颜色。
@@ -72,7 +74,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
@@ -82,7 +84,7 @@ Page({
| status | 进度条状态 | string | success / danger | - | - |
| duration | 进度增加1%所需毫秒数 | number | - | 30 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/radio.md b/docs/component/radio.md
similarity index 95%
rename from docs/docs/radio.md
rename to docs/component/radio.md
index 83ce2f69..bf32ee6b 100644
--- a/docs/docs/radio.md
+++ b/docs/component/radio.md
@@ -1,7 +1,9 @@
-## Radio 单选框
+
+
+# Radio 单选框
-### 基本用法
+## 基本用法
`value` 为绑定值,即选中的 `wd-radio` 的 `value` 值。
点击radio会触发`change`事件,同时可以通过修改`value`来调整选中的radio。
@@ -28,7 +30,7 @@ Page({
})
```
-### 修改图标形状
+## 修改图标形状
修改 `shape` 属性,可选值为 'dot'、'button'、'check',默认为 'check'。
@@ -78,7 +80,7 @@ Page({
})
```
-### 表单模式
+## 表单模式
设置 `cell` 属性,开启表单模式复选框组。
@@ -96,7 +98,7 @@ Page({
```
-### 同行展示
+## 同行展示
设置 `inline` 属性,使单选框在同一行展示。
@@ -107,7 +109,7 @@ Page({
```
-### 修改选中的颜色
+## 修改选中的颜色
设置 `checked-color` 属性。
@@ -118,7 +120,7 @@ Page({
```
-### 禁用
+## 禁用
可以在 `radio-group` 上面设置 `disabled`,禁用所有单选框,也可以在单个单选框上面设置 `disabled` 属性,禁用某个单选框。
@@ -129,7 +131,7 @@ Page({
```
-### 尺寸
+## 尺寸
设置 `size` 属性,可选 `large`。
@@ -140,7 +142,7 @@ Page({
```
-### Props优先级
+## Props优先级
radio设置的props优先级比radioGroup上设置的props优先级更高
@@ -152,7 +154,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
```
-### RadioGroup Attributes
+## RadioGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -166,13 +168,13 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
| cell | 表单模式 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
-### RadioGroup Events
+## RadioGroup Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 绑定值变化时触发 | event.detail = { value } | - |
-### Radio Attributes
+## Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
diff --git a/docs/docs/rate.md b/docs/component/rate.md
similarity index 94%
rename from docs/docs/rate.md
rename to docs/component/rate.md
index 14de41f6..7e58ac82 100644
--- a/docs/docs/rate.md
+++ b/docs/component/rate.md
@@ -1,7 +1,9 @@
-## Rate 评分
+
+
+# Rate 评分
-### 基本用法
+## 基本用法
设置`value`分数,设置`num`总分数,默认为5分,监听 `change` 事件获取新值。
@@ -22,7 +24,7 @@ Page({
})
```
-### 只读
+## 只读
设置 `readonly` 属性。
@@ -30,7 +32,7 @@ Page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性和`disabled-color`
@@ -38,7 +40,7 @@ Page({
```
-### 修改颜色
+## 修改颜色
可以通过 `color` 属性修改未选中的颜色,`active-color` 修改选中的颜色。
@@ -47,7 +49,7 @@ Page({
```
-### 修改icon
+## 修改icon
可以通过 `icon` 属性修改未选中的图标,`active-icon` 修改选中的图标。
@@ -55,7 +57,7 @@ Page({
```
-### 修改大小、间隔
+## 修改大小、间隔
可以通过 `size` 属性修改图标的大小,`space` 修改图标之间的间隔。
@@ -63,7 +65,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
@@ -80,13 +82,13 @@ Page({
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
| name | form 表单中的字段名 | string | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 点击icon,修改分值事件 | event.detail = { value } | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/resize.md b/docs/component/resize.md
similarity index 76%
rename from docs/docs/resize.md
rename to docs/component/resize.md
index 9fe1d09b..704299af 100644
--- a/docs/docs/resize.md
+++ b/docs/component/resize.md
@@ -1,14 +1,16 @@
-## Resize 监听元素尺寸变化
+
+
+# Resize 监听元素尺寸变化
当组件包裹的文档流尺寸发生变化时,触发 `size` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化,重新获取 dom 尺寸和位置,进行内容展示的计算操作。
-### 基本用法
+## 基本用法
> 不要给此组件增加任何外部样式
```html
-
+
```
@@ -34,8 +36,8 @@ Page({
})
```
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
-| bind:size | 尺寸发生变化时触发 | event.detail = { width: number, height: number, top: number, right: number, bottom: number, left: number } | - |
+| size | 尺寸发生变化时触发 | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
diff --git a/docs/docs/search.md b/docs/component/search.md
similarity index 95%
rename from docs/docs/search.md
rename to docs/component/search.md
index 1da1209e..d7127426 100644
--- a/docs/docs/search.md
+++ b/docs/component/search.md
@@ -1,7 +1,9 @@
-## Search 搜索框
+
+
+# Search 搜索框
-### 基本用法
+## 基本用法
`value`设置输入框绑定值、`focus`绑定聚焦事件、`change` 绑定输入事件,`blur`绑定失焦事件,`search` 绑定搜索事件,`cancel` 绑定取消事件,`clear` 绑定清空事件。
@@ -47,7 +49,7 @@ Page({
})
```
-### 浅色主题
+## 浅色主题
设置 `light` 属性,将组件背景色和输入框背景色反转。
@@ -55,13 +57,13 @@ Page({
```
-### 输入框提示文案靠左
+## 输入框提示文案靠左
设置 `placeholder-left` 属性。
```html
```
-### 隐藏取消按钮
+## 隐藏取消按钮
设置 `hide-cancel` 属性。
@@ -69,7 +71,7 @@ Page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -83,7 +85,7 @@ Page({
```
-### 自定义左侧插槽
+## 自定义左侧插槽
通过使用 `prefix` 插槽自定义搜索框左侧内容。
@@ -135,7 +137,7 @@ Page({
}
```
-### 自定义文案
+## 自定义文案
通过设置 `placeholder` 修改输入框提示文案,`cancel-txt` 修改取消按钮文案。
@@ -150,7 +152,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -165,7 +167,7 @@ Page({
| use-suffix-slot | 是否使用输入框右侧插槽 | boolean | - | false | - |
| name | form 表单中的字段名 | string | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
@@ -176,14 +178,14 @@ Page({
| bind:cancel | 监听输入框右侧文本点击事件 | event.detail = { value } | - |
| bind:change | 监听输入框内容变化事件 | event.detail = { value } | - |
-### Slots
+## Slots
| name | 说明 | 最低版本 |
|------|-----|---------|
| prefix | 输入框左侧自定义内容 | - |
| suffix | 输入框左侧自定义内容 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/selectPicker.md b/docs/component/selectPicker.md
similarity index 96%
rename from docs/docs/selectPicker.md
rename to docs/component/selectPicker.md
index 703b1ed1..e67f3521 100644
--- a/docs/docs/selectPicker.md
+++ b/docs/component/selectPicker.md
@@ -1,7 +1,9 @@
-## SelectPicker 单复选选择器
+
+
+# SelectPicker 单复选选择器
-### 基本用法
+## 基本用法
`label` 设置左侧文本内容;
@@ -45,7 +47,7 @@ Page({
})
```
-### 类型切换
+## 类型切换
`type` 默认值为 `checkbox`, 为默认值时,value值类型为 `Array` 类型
@@ -82,7 +84,7 @@ Page({
})
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -90,7 +92,7 @@ Page({
```
-### 只读
+## 只读
设置 `readonly` 属性。
@@ -98,7 +100,7 @@ Page({
```
-### 禁用选项
+## 禁用选项
`columns` 每个选项支持 `disabled` 属性。
@@ -134,7 +136,7 @@ Page({
})
```
-### 展示格式化
+## 展示格式化
设置 `display-format` 属性,其类型为 `function`,接收当前选中项(当类型`checkbox`时 参数是 数组类型,类型为`radio` 时参数是 `String` `Number` 或 `Boolean` 类型), 当前的选项数组 `columns`,返回要展示的字符串。
@@ -181,7 +183,7 @@ Page({
})
```
-### 确定前校验
+## 确定前校验
设置 `before-confirm` 函数,在用户点击`确定`按钮时,会执行 `before-confirm` 函数,并传入`value`(选中项 也就是当前选择的值) 和 `resolve` 参数,可以对 `value` 进行校验,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会关闭弹窗。
@@ -225,7 +227,7 @@ Page({
})
```
-### 设置标题
+## 设置标题
设置 `title` 属性,修改弹出层的标题。
@@ -233,7 +235,7 @@ Page({
```
-### 错误状态
+## 错误状态
设置 `error` 属性,选择器的值显示为红色。
@@ -241,7 +243,7 @@ Page({
```
-### 必填样式
+## 必填样式
设置 `required` 属性,展示必填样式。
@@ -249,7 +251,7 @@ Page({
```
-### 选择器大小
+## 选择器大小
通过设置 `size` 修改选择器大小,将 `size` 设置为 'large' 时字号为 16px。
@@ -257,7 +259,7 @@ Page({
```
-### 值靠右展示
+## 值靠右展示
设置 `align-right` 属性,选择器的值靠右展示。
@@ -265,7 +267,7 @@ Page({
```
-### 可搜索
+## 可搜索
设置 `filterable` 属性支持本地搜索,设置 `filter-placeholder` 属性设置搜索框的占位符。
@@ -273,7 +275,7 @@ Page({
```
-### 自定义选择器
+## 自定义选择器
如果默认的 cell 类型的展示格式不满足需求,可以通过默认插槽进行自定义选择器样式。
@@ -315,7 +317,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -353,7 +355,7 @@ Page({
| filter-placeholder | 搜索框占位符 | string | - | 搜索 | 2.3.0 |
| ellipsis | 是否超出隐藏 | boolean | - | false | 2.3.0 |
-### 选项数据结构
+## 选项数据结构
| 键名 | 说明 | 类型 | 是否必填 | 最低版本 |
|------|-----|-----|---------|--------|
@@ -361,7 +363,7 @@ Page({
| label | 选项名 | string | 是 | - |
| disabled | 禁用选项 | boolean | 否 | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|-----|-------|--------|
@@ -369,21 +371,21 @@ Page({
| bind:change | picker内选项更改时触发 | event.detail = { value }, checkbox 类型时 value 为数组,radio 类型为非数组 | - |
| bind:cancel | 点击关闭按钮或者蒙层时触发 | - | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| open | 打开弹窗 | - | - |
| close | 关闭弹窗 | - | - |
-### Slots
+## Slots
| 插槽名称 | 说明 | 最低版本 |
|---------|-----|--------|
| default | 自定义展示 | - |
| label | 左侧插槽 | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/slider.md b/docs/component/slider.md
similarity index 94%
rename from docs/docs/slider.md
rename to docs/component/slider.md
index 0052b6fc..04e27a7c 100644
--- a/docs/docs/slider.md
+++ b/docs/component/slider.md
@@ -1,9 +1,11 @@
-## Slider 滑块
+
+
+# Slider 滑块
支持单向滑块和双向滑块。
-### 基本用法
+## 基本用法
`value` 为绑定值。如果为 number 类型则显示一个滑块,如果为 array 类型则显示两个滑块。
```html
@@ -21,7 +23,7 @@ page({
}
})
```
-### 双滑块
+## 双滑块
双滑块模式下 `value` 为 `二元数组` 类型。
@@ -40,7 +42,7 @@ page({
}
})
```
-### 最大值最小值
+## 最大值最小值
设置 `min` 最小值,`min` 最大值。
@@ -48,7 +50,7 @@ page({
```
-### 隐藏文案
+## 隐藏文案
设置 `hide-label` 隐藏滑块当前值。
@@ -62,7 +64,7 @@ page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
@@ -70,7 +72,7 @@ page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| value | 滑块值,如果为array,则为双向滑块 | number / array | - | - | - |
@@ -84,7 +86,7 @@ page({
| inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - |
| name | form 表单中的字段名 | string | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
@@ -92,7 +94,7 @@ page({
| bind:dragmove | 移动滑块时触发 | event.detail = { value } | - |
| bind:dragend | 移动结束时触发 | event.detail = { value } | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | 根结点样式 | - |
diff --git a/docs/docs/sortButton.md b/docs/component/sortButton.md
similarity index 91%
rename from docs/docs/sortButton.md
rename to docs/component/sortButton.md
index 91f12369..2482becf 100644
--- a/docs/docs/sortButton.md
+++ b/docs/component/sortButton.md
@@ -1,7 +1,9 @@
-## SortButton 排序按钮
+
+
+# SortButton 排序按钮
-### 基本用法
+## 基本用法
`value` 为组件状态,其值为:`-1、0、1`,分别代表:降序、未选中状态、升序。 `title` 为展示文案,按钮默认处于未选中状态,监听 `bind:change` 事件获取新值。
@@ -22,7 +24,7 @@ Page({
})
```
-### 按钮重置
+## 按钮重置
双箭头状态下(默认状态)通过设置 `allow-reset` 允许重置按钮为未选中状态
@@ -30,7 +32,7 @@ Page({
```
-### 优先切换为降序
+## 优先切换为降序
通过设置 `desc-first` 优先切换为降序,默认为升序。
@@ -38,7 +40,7 @@ Page({
```
-### 取消展示下划线
+## 取消展示下划线
当只有一个排序按钮时,应该不展示下划线,设置 `line` 属性为 `false`。
@@ -46,7 +48,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -56,13 +58,13 @@ Page({
| desc-first | 优先切换为降序,不开启则默认优先切换为升序 | boolean | - | false | - |
| line | 展示下划线,当只有一个排序按钮时,应该不展示下划线 | boolean | - | true | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
| bind:change | 监听排序修改 | event.detail = { value } | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | 根结点样式 | - |
diff --git a/docs/docs/statusTip.md b/docs/component/statusTip.md
similarity index 94%
rename from docs/docs/statusTip.md
rename to docs/component/statusTip.md
index 0f53dd0c..a0c3d8a6 100644
--- a/docs/docs/statusTip.md
+++ b/docs/component/statusTip.md
@@ -1,11 +1,13 @@
-## StatusTip 缺省提示
+
+
+# StatusTip 缺省提示
一般用于兜底占位展示。
> 若图片显示安全域名问题,需将 img11.360buyimg.com 域名添加为业务域名。
-### 基本用法
+## 基本用法
设置 `type` 修改展示缺省图片类型,默认为 'network',可选值 'search', 'network', 'content', 'collect', 'comment', 'halo', 'message'。可设置 `tip` 来控制展示提示文案。
@@ -19,7 +21,7 @@
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
diff --git a/docs/docs/steps.md b/docs/component/steps.md
similarity index 92%
rename from docs/docs/steps.md
rename to docs/component/steps.md
index ccc3abd1..2411e7db 100644
--- a/docs/docs/steps.md
+++ b/docs/component/steps.md
@@ -1,7 +1,9 @@
-## Steps 标签页
+
+
+# Steps 标签页
-### 基本用法
+## 基本用法
`active` 为步骤进度,为 number 类型,步骤的下标。
@@ -13,7 +15,7 @@
```
-### 水平居中
+## 水平居中
设置 `align-center` 水平居中,只对横向步骤条有效。
@@ -25,7 +27,7 @@
```
-### 设置标题和描述信息
+## 设置标题和描述信息
可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题,则会使用默认的文案。
@@ -37,7 +39,7 @@
```
-### 修改图标
+## 修改图标
可以通过 `icon` 属性设置步骤的图标,传入图标的名称,也可以通过 `icon` 的 slot 插槽自定义图标,使用插槽需要设置 `icon-slot` 为 `true`。
@@ -49,7 +51,7 @@
```
-### 竖向步骤条
+## 竖向步骤条
设置 `vertical` 属性。
@@ -61,7 +63,7 @@
```
-### 点状步骤
+## 点状步骤
设置 `dot` 属性。
@@ -73,7 +75,7 @@
```
-### 修改状态
+## 修改状态
设置 `status`,支持 'finished'(完成)、'process'(进行中)、'error'(失败) 三种状态。
@@ -85,7 +87,7 @@
```
-### Steps Attributes
+## Steps Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -95,7 +97,7 @@
| space | 步骤条间距,默认为自动计算 | string | - | - | - |
| align-center | 是否水平居中,只对横向步骤条有效 | boolean | - | false | - |
-### Step Attributes
+## Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -107,7 +109,7 @@
| icon-slot | 使用 icon 插槽时需要设置该属性 | boolean | - | false | - |
| status | 步骤状态 | string | finished / process / error | - | - |
-### Step Slot
+## Step Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
@@ -115,13 +117,13 @@
| title | 标题 | - |
| description | 描述 | - |
-### Steps 外部样式类
+## Steps 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
| custom-class | 根结点样式 | - |
-### Step 外部样式类
+## Step 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/sticky.md b/docs/component/sticky.md
similarity index 91%
rename from docs/docs/sticky.md
rename to docs/component/sticky.md
index 18f4b28d..ab5380cd 100644
--- a/docs/docs/sticky.md
+++ b/docs/component/sticky.md
@@ -1,7 +1,9 @@
-## Sticky 粘性布局
+
+
+# Sticky 粘性布局
-### 基本用法
+## 基本用法
将需要吸顶的内容包裹在 `wd-sticky` 组件内即可。
@@ -13,7 +15,7 @@
```
-### 动态插入
+## 动态插入
`wd-sticky` 支持包裹动态生成的内容。
@@ -49,7 +51,7 @@ page{
```
-### 吸顶距离
+## 吸顶距离
通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。
@@ -59,7 +61,7 @@ page{
```
-### 指定容器
+## 指定容器
将 `wd-sticky` 组件包裹在自定义容器内,之后再使用 `wd-sticky-box` 包裹自定义容器。
@@ -82,20 +84,20 @@ page{
}
```
-### Sticky Attributes
+## Sticky Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
| z-index | 堆叠顺序 | number | - | 1 | - |
| offset-top | 吸顶距离 | number | - | 0 | - |
-### Sticky 外部样式类
+## Sticky 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
| custom-class | 根结点样式 | - |
-### Sticky Box 外部样式类
+## Sticky Box 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/swipe.md b/docs/component/swipe.md
similarity index 96%
rename from docs/docs/swipe.md
rename to docs/component/swipe.md
index 86c2950e..2eab39f3 100644
--- a/docs/docs/swipe.md
+++ b/docs/component/swipe.md
@@ -1,9 +1,11 @@
-## Swipe 轮播图
+
+
+# Swipe 轮播图
!!!该组件尚未开发,不可使用
-### 基本用法
+## 基本用法
默认自动轮播,并且循环轮播,轮播时间为 3000 ms。
@@ -25,7 +27,7 @@
```
-### space 留白
+## space 留白
设置 `space` 留白比例,则轮播子项的宽度为 `父元素宽度 * (1 - space留白率)`,`父元素宽度 * space留白率 / 2` 则为子项距离左右边缘的距离。如例子中设置
`space` 为 `80/750`,则是以 `iphone6` 尺寸的设计稿,左右各留 `20像素`(iphone6 物理像素为 375px)。
@@ -40,7 +42,7 @@
如果设置留白,则默认会将 `loop` 关闭,暂时没有补齐左右循环用的占位项。
-### 指示器
+## 指示器
默认的指示器是在轮播图底部居中。你可以使用 `hide-indicators` 关闭指示器。
@@ -74,7 +76,7 @@ export default {
```
-### 纵向轮播
+## 纵向轮播
设置 `vertical` 属性,同时给轮播图设置高度 `height` 属性,如果是横向轮播,可以不用设置 `height` 属性。
@@ -86,7 +88,7 @@ export default {
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
diff --git a/docs/docs/swipeAction.md b/docs/component/swipeAction.md
similarity index 97%
rename from docs/docs/swipeAction.md
rename to docs/component/swipeAction.md
index 7d8615b8..8b6289d0 100644
--- a/docs/docs/swipeAction.md
+++ b/docs/component/swipeAction.md
@@ -1,4 +1,6 @@
-## SwipeAction 滑动操作
+
+
+# SwipeAction 滑动操作
:::warning
滑动操作组件对页面的功能隐藏较深,用户难以发现,建议使用其他交互方式来实现操作功能,比如列表项有个按钮,点击按钮弹出 ActionSheet。
@@ -7,7 +9,7 @@
:::
-### 基本用法
+## 基本用法
`wd-swipe-action`分为三部分:'自定义左按钮内容'、'自定义内容'、'自定义右按钮内容'。自定义按钮内容需要设置`slot`开启,自定义内容为默认插槽,无需手动开启。
@@ -53,7 +55,7 @@ Page({
}
```
-### 左右滑动
+## 左右滑动
> `wd-swipe-action`组件提供`left`/`right`两个滑动按钮,通过设置插槽`slot="left"`和`slot="right"`开启
@@ -73,7 +75,7 @@ Page({
```
-### 切换按钮
+## 切换按钮
> 可以通过设置`value`来控制开启关闭滑动按钮,可选值为:`left`、`close`、`right`分别表示:"打开左滑动按钮"、"关闭滑动按钮""打开右滑动按钮"
@@ -110,7 +112,7 @@ Page({
})
```
-### 按钮关闭前的钩子函数
+## 按钮关闭前的钩子函数
> 通过`before-close`属性传入一个函数,注意传入的变量必须定义在`data`在。回调函数会在滑动按钮关闭前执行。
@@ -158,7 +160,7 @@ Page({
})
```
-### 点击事件
+## 点击事件
> `click`事件只会在关闭滑动按钮时触发。
@@ -184,7 +186,7 @@ Page({
})
```
-### 禁用滑动按钮
+## 禁用滑动按钮
> 设置`disabled`属性禁用滑动
@@ -199,7 +201,7 @@ Page({
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -207,13 +209,13 @@ Page({
| disabled | 是否禁用滑动操作 | boolean | - | false | - |
| before-close | 关闭滑动按钮前的钩子函数 | function | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| bind:click | 当滑动按钮打开时,点击整个滑动操作容器触发click事件 | event.detail= {value}, value 可能为 'left'、'inside'、'right' | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
@@ -221,7 +223,7 @@ Page({
| default | 自定义内容 | - |
| right | 自定义右按钮 | - |
-### Cell 外部样式类
+## Cell 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
diff --git a/docs/docs/switch.md b/docs/component/switch.md
similarity index 93%
rename from docs/docs/switch.md
rename to docs/component/switch.md
index f8c92e8f..81116bb8 100644
--- a/docs/docs/switch.md
+++ b/docs/component/switch.md
@@ -1,7 +1,9 @@
-## Switch 开关
+
+
+# Switch 开关
-### 基本用法
+## 基本用法
设置 `value` 值,监听 `change` 事件修改值。
@@ -22,7 +24,7 @@ Page({
})
```
-### 修改值
+## 修改值
通过 `active-value` 属性修改开关打开时的值,`inactive-value` 属性修改开关关闭时的值。
@@ -30,7 +32,7 @@ Page({
```
-### 修改颜色
+## 修改颜色
通过 `active-color` 属性修改开关打开时的颜色,`inactive-color` 属性修改开关关闭时的颜色。
@@ -38,7 +40,7 @@ Page({
```
-### 修改大小
+## 修改大小
设置 `size` 修改开关大小。
@@ -46,11 +48,11 @@ Page({
```
-### 禁用
+## 禁用
设置 `disabled` 属性。
-### 修改前钩子
+## 修改前钩子
设置 `before-change` 属性,修改前钩子,接收 { value, resolve } 参数,`resolve(true)` 表示修改通过,`resolve(false)` 表示不修改。
@@ -71,7 +73,7 @@ Page({
})
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -85,13 +87,13 @@ Page({
| name | form 表单中的字段名 | string | - | - | - |
| before-change | 修改前钩子 | function | - | - | 2.3.0 |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| bind:change | 值修改事件 | event.detail = { value } | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|-----|---------|
diff --git a/docs/docs/tabs.md b/docs/component/tabs.md
similarity index 95%
rename from docs/docs/tabs.md
rename to docs/component/tabs.md
index 4b0b40ad..43d9713a 100644
--- a/docs/docs/tabs.md
+++ b/docs/component/tabs.md
@@ -1,7 +1,9 @@
-## Tab 标签页
+
+
+# Tab 标签页
-### 基本用法
+## 基本用法
`value` 为绑定值,可以为 number 类型(选中的tab的下标)和 string 类型(标签名)。
@@ -23,7 +25,7 @@
}
```
-### 滑动动画
+## 滑动动画
设置 `animated` 属性,开启tab切换动画。
@@ -38,7 +40,7 @@
```
-### 粘性布局
+## 粘性布局
设置 `sticky` 属性,使用粘性布局。可以设置 `offset-top` 属性,当距离窗口顶部多少像素时,固定标签头。
@@ -52,7 +54,7 @@
```
-### 禁用Tab
+## 禁用Tab
在 `wd-tab` 上设置 `disabled` 属性,禁用某个页签。
@@ -66,7 +68,7 @@
```
-### 点击事件
+## 点击事件
监听页签的点击事件.
@@ -90,7 +92,7 @@ Page({
})
```
-### 手势滑动
+## 手势滑动
设置 `swipeable` 属性,支持手势滑动。
@@ -108,7 +110,7 @@ Page({
标签页在标签数大于等于6个时,可以滑动;当标签数大于等于10个时,将会显示导航地图,便于快速定位到某个标签。可以通过设置 `slidable-num` 修改可滑动的数量阈值;设置 `map-num` 修改显示导航地图的阈值。
-### Tabs Attributes
+## Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -121,7 +123,7 @@ Page({
| swipeable | 开启手势滑动 | boolean | - | false | - |
| ~~lazy-render~~ | ~~懒渲染标签页~~,2.3.0 版本修改 tabs 切换方案,去掉该属性 | boolean | - | false | - |
-### Tab Attributes
+## Tab Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|--------|
@@ -129,7 +131,7 @@ Page({
| title | 标题 | string | - | - | - |
| disabled | 禁用 | boolean | - | false | - |
-### Tabs Events
+## Tabs Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|---------|-----|-----|---------|
diff --git a/docs/docs/tag.md b/docs/component/tag.md
similarity index 95%
rename from docs/docs/tag.md
rename to docs/component/tag.md
index ebe14fc2..365cbcea 100644
--- a/docs/docs/tag.md
+++ b/docs/component/tag.md
@@ -1,8 +1,10 @@
-## Tag 标签
+
+
+# Tag 标签
-### 基本用法
+## 基本用法
设置 `type` 修改标签类型。
@@ -18,7 +20,7 @@
margin: 0 10px;
}
```
-### 幽灵标签
+## 幽灵标签
设置 `plain` 属性。
@@ -30,7 +32,7 @@
标签
```
-### 标记标签
+## 标记标签
设置 `mark` 属性。
@@ -42,7 +44,7 @@
标签
```
-### 幽灵标记标签
+## 幽灵标记标签
同时设置 `mark` 和 `plain` 属性。
```html
@@ -53,7 +55,7 @@
标签
```
-### 圆角标签
+## 圆角标签
设置 `round` 属性。
@@ -65,7 +67,7 @@
标签
```
-### 设置图标
+## 设置图标
设置 `icon` 左侧图标,也可以使用 'icon' 的 slot 插槽,此时要开启`use-icon-slot`。
@@ -77,7 +79,7 @@
```
-### 自定义颜色
+## 自定义颜色
设置 `color` 修改文字颜色,设置 `bg-color` 修改背景色和边框颜色。
@@ -86,14 +88,14 @@
标签
```
-### 可关闭
+## 可关闭
设置 `closable` 属性,允许标签关闭,关闭时会触发 `close` 事件。
```html
标签
```
-### 新增标签
+## 新增标签
设置 `dynamic` 属性,该标签为新增样式,输入内容确定后触发 `confirm` 事件。
@@ -142,7 +144,7 @@ Page({
})
```
-### 事件
+## 事件
```html
+
+# Toast 轻提示
-### 基本用法
+## 基本用法
需要在页面中引入该组件,作为挂载点。
@@ -20,7 +22,7 @@ Page({
})
```
-### 成功、异常、警告、常规
+## 成功、异常、警告、常规
```javascript
Toast.success('操作成功')
@@ -29,7 +31,7 @@ Toast.warning('提示信息')
Toast.info('常规提示信息')
```
-### 提示位置
+## 提示位置
```javascript
// 顶部提示
@@ -45,13 +47,13 @@ Toast({
})
```
-### 关闭提示
+## 关闭提示
```javascript
Toast.close()
```
-### loading 提示
+## loading 提示
`loading` 开启后需要用户手动关闭,关闭可以调用 `close`,或者再调用一次 toast 提示,因为 toast 只会存在一个,新的 toast 会自动顶掉旧的 toast。
@@ -74,13 +76,13 @@ Toast.loading({
Toast.close()
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|--------|
| options | 配置项,可以直接传入字符串作为提示信息 | string / object | - | - | - |
-### options
+## options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|------|--------|---------|
@@ -92,11 +94,11 @@ Toast.close()
| customIcon | 自定义图标,开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
| zIndex | toast 层级 | number | - | 100 | - |
-| loadingType | [加载中图标类型](/docs#/components/loading) | string | ring | outline | - |
-| loadingColor | [加载中图标颜色](/docs#/components/loading) | string | - | #4D80F0 | - |
+| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
+| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
| context | 引用 `wd-toast` 的页面实例或自定义组件实例 | object | - | 当前页面实例 | 2.3.0 |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
@@ -107,7 +109,7 @@ Toast.close()
| loading | 加载提示 | options | - |
| close |手动关闭消息提示框,是Toast实例上的方法| - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/tooltip.md b/docs/component/tooltip.md
similarity index 96%
rename from docs/docs/tooltip.md
rename to docs/component/tooltip.md
index eae8975e..5b2a06d8 100644
--- a/docs/docs/tooltip.md
+++ b/docs/component/tooltip.md
@@ -1,9 +1,11 @@
-## Tooltip 文字提示
+
+
+# Tooltip 文字提示
常用于展示提示信息。
-### 基本用法
+## 基本用法
在这里我们提供 12 种不同方向的展示方式,可以通过以下完整示例来理解。
@@ -47,7 +49,7 @@ Page({
})
```
-### 更多 Content
+## 更多 Content
展示多行文本或者是设置文本内容的格式
@@ -77,7 +79,7 @@ Page({
})
```
-### 显示关闭按钮
+## 显示关闭按钮
Tooltip 组件通过属性`show-close` 控制是否显示关闭按钮。
@@ -98,7 +100,7 @@ Page({
})
```
-### 高级扩展
+## 高级扩展
除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:
@@ -110,7 +112,7 @@ Page({
```
-### 控制位置
+## 控制位置
**注意:由于微信小程序无法动态插入节点,因此文字气泡位置会根据传入定位的节点最外层位置对齐,如果文字提示位置不在您想要渲染的位置上,可以通过控制组件整体位置达到想要的效果。**
错误用法示例:
@@ -135,7 +137,7 @@ Page({
```
-### Tooltip Attributes
+## Tooltip Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|-----|------|-------|-------|---------|
@@ -147,7 +149,7 @@ Page({
| offset | 出现位置的偏移量 | number | - | 0 | - |
| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
-### Events
+## Events
| 事件名称 | 说明 | 回调参数 | 最低版本 |
|---------|-----|---------|--------|
@@ -155,20 +157,20 @@ Page({
| bind:close | 隐藏时触发 | - | - |
| bind:change | 显隐值变化时触发 | - | - |
-### Methods
+## Methods
| 方法名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
| open | 打开文字提示弹框 | - | - |
| close | 关闭文字提示弹框 | - | - |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| content | 多行内容或用户自定义样式 | - |
-### Tooltip 外部样式类
+## Tooltip 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/transition.md b/docs/component/transition.md
similarity index 96%
rename from docs/docs/transition.md
rename to docs/component/transition.md
index 4b30791f..d2900768 100644
--- a/docs/docs/transition.md
+++ b/docs/component/transition.md
@@ -1,7 +1,9 @@
-## Transition 动画
+
+
+# Transition 动画
-### 基本用法
+## 基本用法
将元素包裹在 `wd-transition` 标签中,并设置 `show` 来切换显隐,设置 `name` 选择动画。
@@ -11,7 +13,7 @@
```
-### 动画类型
+## 动画类型
`wd-transition` 内置了常用的动画,如 `fade`、`slide`、`zoom-in` 等。
@@ -21,11 +23,11 @@
```
-### 动画时间
+## 动画时间
可以通过 `duration` 设置动画执行时间,动画拆分为 `enter` 进入动画和 `leave` 离开动画,`duration` 可以分别设置进入动画执行时间和离开动画执行时间: `{ enter: 300, leave: 500 }`。
-### 自定义动画
+## 自定义动画
可以通过 `enter-class`、`enter-active-class`、`enter-to-class`、`leave-class`、`leave-active-class`、`leave-to-class` 设置自定义动画的类名。
@@ -71,7 +73,7 @@
}
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|-----|------|-----|-------|-------|---------|
@@ -80,7 +82,7 @@
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
| custom-style | 自定义样式 | string | - | - | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
@@ -91,7 +93,7 @@
| bind:leave | 离开时触发 | - | - |
| bind:afterleave | 离开后触发| - | - |
-### 外部样式类
+## 外部样式类
| 类名 | 说明 | 最低版本 |
|-----|------|--------|
diff --git a/docs/docs/upload.md b/docs/component/upload.md
similarity index 94%
rename from docs/docs/upload.md
rename to docs/component/upload.md
index 4a9cc7dd..057b971a 100644
--- a/docs/docs/upload.md
+++ b/docs/component/upload.md
@@ -1,8 +1,10 @@
-## Upload 上传
+
+
+# Upload 上传
图片上传组件
-### 基本用法
+## 基本用法
`file-list` 设置上传列表,数据类型为数组;
@@ -33,7 +35,7 @@ Page({
})
```
-### 禁用
+## 禁用
设置 `disabled` 开启禁用上传
@@ -46,7 +48,7 @@ Page({
```
-### 多选上传
+## 多选上传
通过设置 `multiple` 开启文件多选上传。
@@ -59,7 +61,7 @@ Page({
>
```
-### 最大上传数限制
+## 最大上传数限制
上传组件可通过设置 `limit` 来限制上传文件的个数。
@@ -72,7 +74,7 @@ Page({
>
```
-### 拦截预览图片操作
+## 拦截预览图片操作
设置 `before-preview` 函数,在用户点击图片进行预览时,会执行 `before-preview` 函数,接收 { index: 当前预览的下标, imgList: 所有图片地址列表, resolve },通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会执行预览图片操作。
@@ -111,7 +113,7 @@ Page({
})
```
-### 上传前置处理
+## 上传前置处理
设置 `before-upload` 函数,弹出图片选择界面,在用户选择图片点击确认后,会执行 `before-upload` 函数,接收 { files: 当前上传的文件, fileList: 文件列表, resolve },可以对 `file` 进行处理,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会执行上传操作。
@@ -150,7 +152,7 @@ Page({
})
```
-### 移除图片前置处理
+## 移除图片前置处理
设置 `before-remove` 函数,在用户点击关闭按钮时,会执行 `before-remove` 函数,接收 { file: 移除的文件, index: 移除文件的下标, fileList: 文件列表, resolve },可以对 `file` 进行处理,并通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会执行移除图片操作。
@@ -189,7 +191,7 @@ Page({
})
```
-### 选择文件前置处理
+## 选择文件前置处理
设置 `before-choose` 函数,在用户点击唤起项时,会执行 `before-choose` 函数,接收 { fileList: 文件列表, resolve },通过 `resolve` 函数告知组件是否确定通过,`resolve` 接受1个 boolean 值,`resolve(true)` 表示选项通过,`resolve(false)` 表示选项不通过,不通过时不会执行选择文件操作。
@@ -228,7 +230,7 @@ Page({
})
```
-### 自定义唤起上传样式
+## 自定义唤起上传样式
使用默认插槽可以修改唤起上传的样式。
@@ -257,7 +259,7 @@ export default {
```
-### Attributes
+## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|------|-----|-----|-------|-------|--------|
@@ -279,13 +281,13 @@ export default {
| before-choose | 选择图片之前的钩子,参数为文件列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。| function({ fileList, resolve }) | - | - | - |
| before-remove | 删除文件之前的钩子,参数为要删除的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。| function({ file, fileList, resolve }) | - | - | - |
| before-preview | 图片预览前的钩子,参数为预览的图片下标和图片列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。| function({ index, imgList, resolve }) | - | - | - |
-| loading-type | [加载中图标类型](/docs#/components/loading) | string | - | circular-ring | - |
-| loading-color | [加载中图标颜色](/docs#/components/loading) | string | - | #ffffff | - |
-| loading-size | [加载中图标尺寸](/docs#/components/loading) | string | - | 24px | - |
+| loading-type | [加载中图标类型](/component/loading) | string | - | circular-ring | - |
+| loading-color | [加载中图标颜色](/component/loading) | string | - | #ffffff | - |
+| loading-size | [加载中图标尺寸](/component/loading) | string | - | 24px | - |
| use-default-slot | 开启默认唤起项插槽 | boolean | - | false | - |
| status-key | file 数据结构中,status 对应的 key | string | - | status | - |
-### file 数据结构
+## file 数据结构
| 键名 | 类型 | 说明 | 最低版本 |
|-----|------|-----|--------|
@@ -297,13 +299,13 @@ export default {
| status | string | 当前图片上传状态 | - |
| response | string / object | 后端返回的内容,可能是对象,也可能是字符串 | 2.3.0 |
-### Slot
+## Slot
| name | 说明 | 最低版本 |
|------|-----|---------|
| default | 上传唤起插槽样式 | - |
-### Events
+## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
|--------|------|-----|---------|
diff --git a/docs/docs/changelog.md b/docs/guide/changelog.md
similarity index 58%
rename from docs/docs/changelog.md
rename to docs/guide/changelog.md
index ea91a84c..dc6dfdca 100644
--- a/docs/docs/changelog.md
+++ b/docs/guide/changelog.md
@@ -1,7 +1,7 @@
-## 更新日志
+# 更新日志
-### 1.0.0
+## 1.0.0
*2023-07-21*
diff --git a/docs/docs/commonProblems.md b/docs/guide/commonProblems.md
similarity index 79%
rename from docs/docs/commonProblems.md
rename to docs/guide/commonProblems.md
index 518698ef..ec6f5f1a 100644
--- a/docs/docs/commonProblems.md
+++ b/docs/guide/commonProblems.md
@@ -1,11 +1,11 @@
-## 常见问题FAQ
+# 常见问题FAQ
本节介绍在开发过程当中遇到的部分 **常见问题** 以及 **解决办法**
-### 小程序样式隔离
+## 小程序样式隔离
-#### 在页面中使用 Wot Design Uni 组件时,可直接在页面的样式文件中覆盖样式
+### 在页面中使用 Wot Design Uni 组件时,可直接在页面的样式文件中覆盖样式
```vue
主要按钮
```
@@ -17,7 +17,7 @@
}
```
-#### 在自定义组件中使用 Wot Design Uni 组件时,需开启`styleIsolation: 'shared'`选项
+### 在自定义组件中使用 Wot Design Uni 组件时,需开启`styleIsolation: 'shared'`选项
```vue
主要按钮
@@ -40,7 +40,7 @@ export default {
}
```
-### 使用外部样式类
+## 使用外部样式类
Wot Design Uni 开放了大量的自定义样式类供开发者使用,具体的样式类名称可查阅对应组件的“外部样式类”部分。需要注意的是普通样式类和自定义样式类的优先级是未定义的,因此使用时请添加`!important`以保证外部样式类的优先级。
```vue
@@ -55,6 +55,6 @@ Wot Design Uni 开放了大量的自定义样式类供开发者使用,具体
-### 关于我们
+## 关于我们
**如果您的问题不在上述列表中或您有更好的建议,请联系我们 [Moonofweisheng](https://github.com/Moonofweisheng/wot-design-uni)**
diff --git a/docs/docs/customTheme.md b/docs/guide/customTheme.md
similarity index 98%
rename from docs/docs/customTheme.md
rename to docs/guide/customTheme.md
index d270d48b..ba0c4530 100644
--- a/docs/docs/customTheme.md
+++ b/docs/guide/customTheme.md
@@ -1,12 +1,12 @@
-## 自定义主题
+# 自定义主题
Wot Design Uni 每1个组件基本都有自定义类名 custom-class,可以在组件根节点加入你页面上的类名,进行样式修改。
-### 自定义样式
+## 自定义样式
在 Wot Design Uni 的源码中,样式是通过 SCSS 进行编写的,主题色和各个组件的一些样式都是通过 SCSS 变量进行配置,因此,如果要更深层次地进行主题自定义,自己根据 Wot Design Uni 的样式变量定义一套变量文件即可。
-#### 主要变量介绍
+### 主要变量介绍
以下样式变量在多个组件中被使用,通过修改这些主要变量,可以快速定义一套自定义主题。
@@ -90,7 +90,7 @@ Wot Design Uni 每1个组件基本都有自定义类名 custom-class,可以在
#2bb3ed
-#### 中性色
+### 中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
@@ -118,7 +118,7 @@ Wot Design Uni 每1个组件基本都有自定义类名 custom-class,可以在
2%表头填充色
-#### 自定义 Sass 变量
+### 自定义 Sass 变量
开发者自己参考 `@/uni_modules/wot-design-uni/components/common/abstracts/variable.scss` 文件中的scss变量`uni.scss`文件中重新定义一份自定义主题变量。
例如:
diff --git a/docs/docs/introduction.md b/docs/guide/introduction.md
similarity index 78%
rename from docs/docs/introduction.md
rename to docs/guide/introduction.md
index 7a4ee9d9..a69a3a49 100644
--- a/docs/docs/introduction.md
+++ b/docs/guide/introduction.md
@@ -1,12 +1,12 @@
-## 介绍
+# 介绍
该组件库基于`uni-app`+`vue3`构建,根据`wot desing mini`的设计规范进行开发,旨在给开发者提供统一的UI交互,同时提高研发的开发效率。
-### 快速上手
+## 快速上手
请查看[快速上手](#/components/quickUse)文档。
-### 扫码体验
+## 扫码体验
![]()
@@ -18,7 +18,7 @@
支付宝扫码
-### 特性
+## 特性
* 50+ 组件
* Vue3 + TypeScript 开发
@@ -26,19 +26,19 @@
> 使用Vue3最新特性开发,持续优化体验
-### 链接
+## 链接
* [意见反馈](https://github.com/Moonofweisheng/wot-design-uni/issues)
-* [更新日志](#/components/changelog)
-* [常见问题](#/components/commonProblems)
+* [更新日志](/guide/changelog)
+* [常见问题](/guide/commonProblems)
-### 开源协议
+## 开源协议
本项目遵循 MIT 协议。
-