mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
chore: 🚀 文档调整为使用VitePress构建
This commit is contained in:
xuqingkai
parent
b811c8e983
commit
fce5bd0cbb
4
.gitignore
vendored
4
.gitignore
vendored
@ -6,9 +6,7 @@ lib/
|
||||
website/
|
||||
.temp
|
||||
.cache
|
||||
# src/uni_modules/fant-mini-plus/components/hd-*/API.md
|
||||
docs/components/hd-*
|
||||
docs/.vuepress/public/*.zip
|
||||
/docs/.vitepress/cache
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2022-12-02 14:34:18
|
||||
* @LastEditTime: 2023-07-22 15:27:13
|
||||
* @LastEditors: weisheng
|
||||
* @Description: .d.ts移动到制品
|
||||
* @FilePath: \wot-design-uni\build\demoCopy.js
|
||||
* 记得注释
|
||||
*/
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const srcRoot = path.join(__dirname, '../dist/build/h5')
|
||||
const targetSrcRoot = path.join(__dirname, '../docs/dist/demo')
|
||||
const targetSrcRoot = path.join(__dirname, '../docs/.vitepress/dist/demo')
|
||||
|
||||
function copyFolder(sourceDir, targetDir) {
|
||||
// 创建目标文件夹
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
267
docs/.vitepress/config.ts
Normal file
267
docs/.vitepress/config.ts
Normal file
@ -0,0 +1,267 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-27 10:26:09
|
||||
* @LastEditTime: 2023-07-28 10:16:39
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-docs\docs\.vitepress\config.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import { defineConfig } from 'vitepress';
|
||||
|
||||
export default defineConfig({
|
||||
title: `Wot Design Uni`,
|
||||
description: '一个基于Vue3构建的uni-app组件库',
|
||||
head: [
|
||||
['link', { rel: 'icon', href: '/favicon.ico' }],
|
||||
],
|
||||
themeConfig: {
|
||||
logo: '/wot-design.png',
|
||||
editLink: {
|
||||
pattern: 'https://github.com/Moonofweisheng/wot-design-uni/edit/main/docs/:path',
|
||||
text: '为此页提供修改建议',
|
||||
},
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' },
|
||||
],
|
||||
|
||||
algolia: {
|
||||
appId: 'C7S10T5C4B',
|
||||
apiKey: 'a11cbee9214ed36f4ddd5e87323eff30',
|
||||
indexName: 'wot-design-uni',
|
||||
searchParameters: {
|
||||
},
|
||||
},
|
||||
|
||||
// carbonAds: {
|
||||
// code: 'CEBIEK3N',
|
||||
// placement: 'vitejsdev',
|
||||
// },
|
||||
|
||||
footer: {
|
||||
message: `Released under the MIT License.`,
|
||||
copyright: 'Copyright © 2023-present weisheng',
|
||||
},
|
||||
nav: [
|
||||
{ text: '指南', link: '/guide/quickUse', activeMatch: '/guide/' },
|
||||
{ text: '组件', link: '/component/button', activeMatch: '/component/' },
|
||||
{ text: '打赏作者', link: '/reward/reward', activeMatch: '/reward/' },
|
||||
|
||||
{
|
||||
text: '相关链接',
|
||||
items: [
|
||||
{ text: 'uni-mini-router', link: 'https://gitee.com/fant-mini/uni-mini-router' },
|
||||
{ text: 'uni-mini-ci', link: 'https://gitee.com/fant-mini/uni-mini-ci' },
|
||||
{ text: 'fant-mini-plus', link: 'https://fant-mini-plus.top/fant-mini-plus/' },
|
||||
],
|
||||
},
|
||||
],
|
||||
sidebar:{
|
||||
'/guide/': [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction',
|
||||
},
|
||||
{
|
||||
text: '快速上手',
|
||||
link: '/guide/quickUse',
|
||||
},
|
||||
{
|
||||
text: '定制主题',
|
||||
link: '/guide/customTheme',
|
||||
},
|
||||
{
|
||||
text: '字体',
|
||||
link: '/guide/typography',
|
||||
},
|
||||
{
|
||||
text: '更新日志',
|
||||
link: '/guide/changelog',
|
||||
},
|
||||
{
|
||||
text: '常见问题',
|
||||
link: '/guide/commonProblems',
|
||||
}
|
||||
],
|
||||
|
||||
'/component/': [
|
||||
{
|
||||
text: '基础',
|
||||
items: [
|
||||
{
|
||||
link: "/component/button",
|
||||
text: "Button 按钮"
|
||||
}, {
|
||||
link: "/component/icon",
|
||||
text: "Icon 图标"
|
||||
}, {
|
||||
link: "/component/layout",
|
||||
text: "Layout 布局"
|
||||
}, {
|
||||
link: "/component/popup",
|
||||
text: "Popup 弹出层"
|
||||
}, {
|
||||
link: "/component/resize",
|
||||
text: "Resize 监听元素尺寸变化"
|
||||
}, {
|
||||
link: "/component/transition",
|
||||
text: "Transition 动画"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
text: "导航",
|
||||
items: [{
|
||||
link: "/component/pagination",
|
||||
text: "Pagination 分页"
|
||||
}, {
|
||||
link: "/component/popover",
|
||||
text: "Popover 气泡"
|
||||
}, {
|
||||
link: "/component/tabs",
|
||||
text: "Tabs 标签页"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据输入",
|
||||
items: [{
|
||||
link: "/component/calendar",
|
||||
text: "Calendar 日历选择器"
|
||||
}, {
|
||||
link: "/component/calendarView",
|
||||
text: "CalendarView 日历面板"
|
||||
}, {
|
||||
link: "/component/checkbox",
|
||||
text: "Checkbox 复选框"
|
||||
}, {
|
||||
link: "/component/colPicker",
|
||||
text: "ColPicker 多列选择器"
|
||||
}, {
|
||||
link: "/component/datetimePicker",
|
||||
text: "DatetimePicker 时间选择器"
|
||||
}, {
|
||||
link: "/component/datetimePickerView",
|
||||
text: "DatetimePickerView 时间选择器视图"
|
||||
}, {
|
||||
link: "/component/form",
|
||||
text: "Form 表单组合"
|
||||
}, {
|
||||
link: "/component/input",
|
||||
text: "Input 输入框"
|
||||
}, {
|
||||
link: "/component/inputNumber",
|
||||
text: "InputNumber 计数器"
|
||||
}, {
|
||||
link: "/component/picker",
|
||||
text: "Picker 选择器"
|
||||
}, {
|
||||
link: "/component/pickerView",
|
||||
text: "PickerView 选择器视图"
|
||||
}, {
|
||||
link: "/component/radio",
|
||||
text: "Radio 单选框"
|
||||
}, {
|
||||
link: "/component/rate",
|
||||
text: "Rate 评分"
|
||||
}, {
|
||||
link: "/component/search",
|
||||
text: "Search 搜索框"
|
||||
}, {
|
||||
link: "/component/selectPicker",
|
||||
text: "SelectPicker 单复选选择器"
|
||||
}, {
|
||||
link: "/component/slider",
|
||||
text: "Slider 滑块"
|
||||
}, {
|
||||
link: "/component/switch",
|
||||
text: "Switch 开关"
|
||||
}, {
|
||||
link: "/component/upload",
|
||||
text: "Upload 上传"
|
||||
}]
|
||||
}, {
|
||||
text: "反馈",
|
||||
items: [{
|
||||
link: "/component/actionSheet",
|
||||
text: "ActionSheet 动作面板"
|
||||
}, {
|
||||
link: "/component/dropMenu",
|
||||
text: "DropMenu 下拉菜单"
|
||||
}, {
|
||||
link: "/component/loading",
|
||||
text: "Loading 加载"
|
||||
}, {
|
||||
link: "/component/messageBox",
|
||||
text: "MessageBox 弹框"
|
||||
}, {
|
||||
link: "/component/noticeBar",
|
||||
text: "NoticeBar 通知栏"
|
||||
}, {
|
||||
link: "/component/progress",
|
||||
text: "Progress 进度条"
|
||||
}, {
|
||||
link: "/component/sortButton",
|
||||
text: "SortButton 排序按钮"
|
||||
}, {
|
||||
link: "/component/statusTip",
|
||||
text: "StatusTip 缺省提示"
|
||||
}, {
|
||||
link: "/component/swipeAction",
|
||||
text: "SwipeAction 滑动操作"
|
||||
}, {
|
||||
link: "/component/toast",
|
||||
text: "Toast 轻提示"
|
||||
}, {
|
||||
link: "/component/tooltip",
|
||||
text: "Tooltip 文字提示"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据展示",
|
||||
items: [{
|
||||
link: "/component/badge",
|
||||
text: "Badge 角标"
|
||||
}, {
|
||||
link: "/component/card",
|
||||
text: "Card 卡片"
|
||||
}, {
|
||||
link: "/component/cell",
|
||||
text: "Cell 单元格"
|
||||
}, {
|
||||
link: "/component/collapse",
|
||||
text: "Collapse 折叠面板"
|
||||
}, {
|
||||
link: "/component/curtain",
|
||||
text: "Curtain 幕帘"
|
||||
}, {
|
||||
link: "/component/divider",
|
||||
text: "Divider 分割线"
|
||||
}, {
|
||||
link: "/component/img",
|
||||
text: "Img 图片"
|
||||
}, {
|
||||
link: "/component/imgCropper",
|
||||
text: "ImgCropper 图片裁剪"
|
||||
}, {
|
||||
link: "/component/grid",
|
||||
text: "Grid 宫格"
|
||||
}, {
|
||||
link: "/component/loadmore",
|
||||
text: "Loadmore 加载更多"
|
||||
}, {
|
||||
link: "/component/steps",
|
||||
text: "Steps 步骤条"
|
||||
}, {
|
||||
link: "/component/sticky",
|
||||
text: "Sticky 粘性布局"
|
||||
}, {
|
||||
link: "/component/tag",
|
||||
text: "Tag 标签"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
22
docs/.vitepress/theme/components/AsideSponsors.vue
Normal file
22
docs/.vitepress/theme/components/AsideSponsors.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { VPDocAsideSponsors } from 'vitepress/theme'
|
||||
import { useSponsor } from '../composables/sponsor'
|
||||
|
||||
const { data } = useSponsor()
|
||||
|
||||
const sponsors = computed(() => {
|
||||
return (
|
||||
data?.value.map((sponsor) => {
|
||||
return {
|
||||
size: sponsor.size === 'big' ? 'mini' : 'xmini',
|
||||
items: sponsor.items,
|
||||
}
|
||||
}) ?? []
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPDocAsideSponsors v-if="data" :data="sponsors" />
|
||||
</template>
|
||||
70
docs/.vitepress/theme/components/HomeSponsors.vue
Normal file
70
docs/.vitepress/theme/components/HomeSponsors.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { VPHomeSponsors } from 'vitepress/theme'
|
||||
import { useSponsor } from '../composables/sponsor'
|
||||
|
||||
const { data } = useSponsor()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPHomeSponsors
|
||||
v-if="data"
|
||||
message="Vite is free and open source, made possible by wonderful sponsors."
|
||||
:data="data"
|
||||
/>
|
||||
<div class="action">
|
||||
<a
|
||||
class="sponsor"
|
||||
href="https://github.com/sponsors/vitejs"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Sponsor Vite
|
||||
</a>
|
||||
<a
|
||||
class="sponsor"
|
||||
href="https://github.com/sponsors/yyx990803"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Sponsor Evan You
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.action {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.sponsor {
|
||||
/* .VPButton */
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
color 0.25s,
|
||||
border-color 0.25s,
|
||||
background-color 0.25s;
|
||||
/* .VPButton.medium */
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
/* .VPButton.sponsor */
|
||||
border-color: var(--vp-button-sponsor-border);
|
||||
color: var(--vp-button-sponsor-text);
|
||||
background-color: var(--vp-button-sponsor-bg);
|
||||
}
|
||||
|
||||
.sponsor:hover {
|
||||
/* .VPButton.sponsor:hover */
|
||||
border-color: var(--vp-button-sponsor-hover-border);
|
||||
color: var(--vp-button-sponsor-hover-text);
|
||||
background-color: var(--vp-button-sponsor-hover-bg);
|
||||
}
|
||||
</style>
|
||||
22
docs/.vitepress/theme/components/SvgImage.vue
Normal file
22
docs/.vitepress/theme/components/SvgImage.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ svg: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<figure class="svg-image-root" v-html="svg" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.svg-image-root {
|
||||
background-color: #eee;
|
||||
border-radius: 8px;
|
||||
padding: 1ch;
|
||||
margin: 1ch 0;
|
||||
}
|
||||
html.dark .svg-image-root {
|
||||
background-color: #313641;
|
||||
}
|
||||
.svg-image-root svg text {
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
</style>
|
||||
128
docs/.vitepress/theme/components/frame.vue
Normal file
128
docs/.vitepress/theme/components/frame.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2022-12-16 18:03:21
|
||||
* @LastEditTime: 2023-07-28 10:27:15
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-docs\docs\.vitepress\theme\components\frame.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
<iframe id="demo-modal" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vitepress';
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
let props = defineProps({
|
||||
url: String,
|
||||
})
|
||||
const route = useRoute()
|
||||
const href = ref('')
|
||||
onBeforeMount(() => {
|
||||
const baseUrl = process.env.NODE_ENV === 'production' ? location.origin + 'demo/#/' : 'http://localhost:5173/#/'
|
||||
const path = route.path
|
||||
const paths = path ? path.split('.')[0].split('/') : []
|
||||
if (paths.length) {
|
||||
href.value = baseUrl + `pages/${paths[paths.length - 1]}/Index`
|
||||
} else {
|
||||
href.value = baseUrl
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1301px) and (max-width: 1449px) {
|
||||
.page-demo {
|
||||
padding-right: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1450px) and (max-width: 1679px) {
|
||||
.page-demo {
|
||||
padding-right: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1680px) {
|
||||
.page-demo {
|
||||
padding-right: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.page-demo {
|
||||
padding-right: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-model {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
width: 330px;
|
||||
position: fixed;
|
||||
right: 50%;
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
right: 12px;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
box-shadow: 0 4px 25px 0 rgba(4, 40, 60, 0.18);
|
||||
overflow: hidden;
|
||||
background: #eff2f5;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.demo-model {
|
||||
width: 310px;
|
||||
height: calc(310px * 143.6 / 70.9);
|
||||
top: calc((100vh - 310px * 143.6 / 70.9 - 3.6rem) / 2 + 3.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.demo-model {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1366px) {
|
||||
.demo-model {
|
||||
width: 270px;
|
||||
height: calc(270px * 143.6 / 70.9);
|
||||
top: calc((100vh - 270px * 143.6 / 70.9 - 3.6rem) / 2 + 3.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
.demo-model {
|
||||
width: 310px;
|
||||
height: calc(310px * 143.6 / 70.9);
|
||||
top: calc((100vh - 310px * 143.6 / 70.9 - 3.6rem) / 2 + 3.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.demo-model {
|
||||
width: 360px;
|
||||
height: calc(360px * 143.6 / 70.9);
|
||||
top: calc((100vh - 350px * 143.6 / 70.9 - 3.6rem) / 2 + 3.6rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
docs/.vitepress/theme/components/layout.vue
Normal file
6
docs/.vitepress/theme/components/layout.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<!-- .vitepress/theme/Layout.vue -->
|
||||
<template>
|
||||
<h1>Custom Layout!</h1>
|
||||
<Content />
|
||||
</template>
|
||||
|
||||
101
docs/.vitepress/theme/composables/sponsor.ts
Normal file
101
docs/.vitepress/theme/composables/sponsor.ts
Normal file
@ -0,0 +1,101 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
interface Sponsors {
|
||||
special: Sponsor[]
|
||||
platinum: Sponsor[]
|
||||
platinum_china: Sponsor[]
|
||||
gold: Sponsor[]
|
||||
silver: Sponsor[]
|
||||
bronze: Sponsor[]
|
||||
}
|
||||
|
||||
interface Sponsor {
|
||||
name: string
|
||||
img: string
|
||||
url: string
|
||||
}
|
||||
|
||||
// shared data across instances so we load only once.
|
||||
const data = ref()
|
||||
|
||||
const dataHost = 'https://sponsors.vuejs.org'
|
||||
const dataUrl = `${dataHost}/vite.json`
|
||||
|
||||
const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
|
||||
special: [
|
||||
// sponsors patak-dev
|
||||
{
|
||||
name: 'StackBlitz',
|
||||
url: 'https://stackblitz.com',
|
||||
img: '/stackblitz.svg',
|
||||
},
|
||||
// sponsors antfu
|
||||
{
|
||||
name: 'NuxtLabs',
|
||||
url: 'https://nuxtlabs.com',
|
||||
img: '/nuxtlabs.svg',
|
||||
},
|
||||
// sponsors bluwy
|
||||
{
|
||||
name: 'Astro',
|
||||
url: 'https://astro.build',
|
||||
img: '/astro.svg',
|
||||
},
|
||||
],
|
||||
gold: [],
|
||||
}
|
||||
|
||||
export function useSponsor() {
|
||||
onMounted(async () => {
|
||||
if (data.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const result = await fetch(dataUrl)
|
||||
const json = await result.json()
|
||||
|
||||
data.value = mapSponsors(json)
|
||||
})
|
||||
|
||||
return {
|
||||
data,
|
||||
}
|
||||
}
|
||||
|
||||
function mapSponsors(sponsors: Sponsors) {
|
||||
return [
|
||||
{
|
||||
tier: 'Special Sponsors',
|
||||
size: 'big',
|
||||
items: viteSponsors['special'],
|
||||
},
|
||||
{
|
||||
tier: 'Platinum Sponsors',
|
||||
size: 'big',
|
||||
items: mapImgPath(sponsors['platinum']),
|
||||
},
|
||||
{
|
||||
tier: 'Gold Sponsors',
|
||||
size: 'medium',
|
||||
items: viteSponsors['gold'].concat(mapImgPath(sponsors['gold'])),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const viteSponsorNames = new Set(
|
||||
Object.values(viteSponsors).flatMap((sponsors) =>
|
||||
sponsors.map((s) => s.name),
|
||||
),
|
||||
)
|
||||
|
||||
/**
|
||||
* Map Vue/Vite sponsors data to objects and filter out Vite-specific sponsors
|
||||
*/
|
||||
function mapImgPath(sponsors: Sponsor[]) {
|
||||
return sponsors
|
||||
.filter((sponsor) => !viteSponsorNames.has(sponsor.name))
|
||||
.map((sponsor) => ({
|
||||
...sponsor,
|
||||
img: `${dataHost}/images/${sponsor.img}`,
|
||||
}))
|
||||
}
|
||||
34
docs/.vitepress/theme/index.ts
Normal file
34
docs/.vitepress/theme/index.ts
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-27 12:36:30
|
||||
* @LastEditTime: 2023-07-27 23:14:02
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-docs\docs\.vitepress\theme\index.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import { h } from 'vue'
|
||||
import Theme from 'vitepress/theme'
|
||||
import './styles/vars.css'
|
||||
import './styles/custom.css'
|
||||
import './styles/scrollbar.scss'
|
||||
|
||||
// import HomeSponsors from './components/HomeSponsors.vue'
|
||||
// import AsideSponsors from './components/AsideSponsors.vue'
|
||||
import SvgImage from './components/SvgImage.vue'
|
||||
import frame from './components/frame.vue'
|
||||
|
||||
|
||||
export default {
|
||||
...Theme,
|
||||
Layout() {
|
||||
return h(Theme.Layout, null, {
|
||||
// 'home-features-after': () => h(HomeSponsors),
|
||||
// 'aside-ads-before': () => h(AsideSponsors),
|
||||
})
|
||||
},
|
||||
enhanceApp({ app }) {
|
||||
app.component('SvgImage', SvgImage)
|
||||
app.component('frame', frame)
|
||||
},
|
||||
}
|
||||
163
docs/.vitepress/theme/styles/custom.css
Normal file
163
docs/.vitepress/theme/styles/custom.css
Normal file
@ -0,0 +1,163 @@
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:active {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
|
||||
.style-block {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
padding: 15px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.style-block p {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.a-dot,
|
||||
.b-dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #668df8;
|
||||
z-index: 10;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .09);
|
||||
}
|
||||
|
||||
.a-dot {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.a-dot:before {
|
||||
content: "A";
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 17px;
|
||||
-webkit-transform: translate(14px, -22px);
|
||||
transform: translate(14px, -22px);
|
||||
}
|
||||
|
||||
.b-dot {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
.b-dot:before {
|
||||
content: "B";
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
font-size: 17px;
|
||||
-webkit-transform: translate(14px, -22px);
|
||||
transform: translate(14px, -22px);
|
||||
}
|
||||
|
||||
.liner-color {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liner-color:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 250px;
|
||||
right: 79px;
|
||||
top: 50%;
|
||||
background-color: #fff;
|
||||
-webkit-transform: translateY(-50%) rotate(-45deg);
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.color-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-block {
|
||||
width: 65px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.liner-color1:after {
|
||||
-webkit-transform: translateY(-50%) rotate(45deg);
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.liner-color1 .a-dot {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
.liner-color1 .b-dot {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
.liner-color1 .b-dot:before {
|
||||
-webkit-transform: translate(25px, -15px);
|
||||
transform: translate(25px, -15px);
|
||||
}
|
||||
|
||||
.demo-right {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
}
|
||||
|
||||
.color-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.color-group.dark {
|
||||
background: #262626;
|
||||
border: 3px solid #262626;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.color-group li {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 8px 0 0 8px;
|
||||
}
|
||||
.color-group-line{
|
||||
margin-top:0 !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.color-group li div {
|
||||
font-weight: 500;
|
||||
}
|
||||
45
docs/.vitepress/theme/styles/scrollbar.scss
Normal file
45
docs/.vitepress/theme/styles/scrollbar.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.VPSidebar{
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.VPSidebar:hover{
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
// scrollbar
|
||||
* {
|
||||
scrollbar-color: var(--el-scrollbar-bg-color) var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: 6px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dark {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
128
docs/.vitepress/theme/styles/vars.css
Normal file
128
docs/.vitepress/theme/styles/vars.css
Normal file
@ -0,0 +1,128 @@
|
||||
|
||||
/**
|
||||
* Colors
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-brand: #4d80f0;
|
||||
/* 20 */
|
||||
--vp-c-brand-light: #7199f3;
|
||||
/* 30 */
|
||||
--vp-c-brand-lighter: #7199f3;
|
||||
/* 35 */
|
||||
--vp-c-brand-lightest: #8bacf5;
|
||||
/* 10 */
|
||||
--vp-c-brand-dark: #4573d8;
|
||||
/* 20 */
|
||||
--vp-c-brand-darker: #3e66c0;
|
||||
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Button
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand);
|
||||
--vp-button-brand-hover-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
|
||||
--vp-button-brand-active-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Home
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#bd34fe 30%,
|
||||
#4d80f0
|
||||
);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#bd34fe 50%,
|
||||
#4d80f0 50%
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(40px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(72px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-custom-block-tip-border: var(--vp-c-brand);
|
||||
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-custom-block-tip-border: var(--vp-c-brand);
|
||||
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Algolia
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* VitePress: Custom fix
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
Use lighter colors for links in dark mode for a11y.
|
||||
Also specify some classes twice to have higher specificity
|
||||
over scoped class data attribute.
|
||||
*/
|
||||
.dark .vp-doc a,
|
||||
.dark .vp-doc a > code,
|
||||
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
|
||||
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
|
||||
.dark .link.link:hover,
|
||||
.dark .link.link.active,
|
||||
.dark .edit-link-button.edit-link-button,
|
||||
.dark .pager-link .title {
|
||||
color: var(--vp-c-brand-lighter);
|
||||
}
|
||||
|
||||
.dark .vp-doc a:hover,
|
||||
.dark .vp-doc a > code:hover {
|
||||
color: var(--vp-c-brand-lightest);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Transition by color instead of opacity */
|
||||
.dark .vp-doc .custom-block a {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
|
||||
max-width: 124px;
|
||||
}
|
||||
|
||||
|
||||
11
docs/App.vue
11
docs/App.vue
@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -1,29 +0,0 @@
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1524030726307'); /* IE9*/
|
||||
src: url('iconfont.eot?t=1524030726307#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAb8AAsAAAAACkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kmWY21hcAAAAYAAAACKAAAB5J6PeARnbHlmAAACDAAAAsAAAAN8xpUqw2hlYWQAAATMAAAALwAAADYRGUAJaGhlYQAABPwAAAAcAAAAJAfeA4lobXR4AAAFGAAAABQAAAAgH+kAAGxvY2EAAAUsAAAAEgAAABIEugPCbWF4cAAABUAAAAAfAAAAIAEZAF1uYW1lAAAFYAAAAUUAAAJtPlT+fXBvc3QAAAaoAAAAUQAAAHPviV0veJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/ss4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxfztzwv4EhhrmBoQEozAiSAwAxdA0ZeJzFkcsNgzAQRJ+DgSiilFTCIS0gpBSBckozhM68ZZCxFx+ogLGe5Rn5p12gBRrxFBHCl0DWR2koecOj5JGX/MCdm9ZLGtNks237rrS6tbiqoN11ZBd1stN9Lb1sx2UK1z191lDm9+FUFZYDfTGNTu5LmhxVEJsd1RJbndxD+zm5p7Y59H+GiiSLAAB4nGWTPWgUQRTH5z/7Obt3e+7c3ezmzrvL7nq7mugFz/so1KRQ0IiIYOMHCHYWRrBKoxIUwcJC0CK24gdaiiiiCNb2FiKK+FUI1kGSibN3ARGH5cFb3vvP/zfzhhiErH/WXmkhKZOtZCfZT44SAnMasUcbiLJeh06jGhnVoOJpWZJFVhJ3tL0IYrMiuoNeGpiWWYKHJnZF3UHWoRn6vVm6G13RACbqtWO8vZlrN+GEWfOaPETvotpKNpdmd8j57XOV7mTZXixwPsH5Dds0DJtSveRhIRDMYI4p7xmlWvVVaxttoTCR1Q6fKE7W+ZnrvfONdsCApSWU65Pewzm/5qvvYk2U+YS1qWiHtWKypYLFr25YLjTSL0QtS7G+0aa0ObKJTJIp0iX7yAFykBAjitPMn8UwaiLwPSSIzapfETnR0O8g0TroDbqiYlp90xLdYZoNVUvf7w1UiVClZtKO/MinP2W/lgBJDW/rMRDXZb/IeRFvPR/wvW9+EMRB4CvnPgV7L+dNxkw8z6M8jmV5djapaxhLrK7XE+00L66ue5x7Gop89Svy9jjALjC1sMe26Nm8eW3Zspt0fu15zok8aK/pHRIQUo4sswUxxKCXIS1BJZFpVcUR+vGlbbeVCNd1+Yuxtm2/WNviAjj5dJTB1h0d9qjoCQp9d0N7/RP9rkVqXghSNQXqGlRoQh3VaI9TTlh2cE7edhy94BQMXGFMC1k5ZPKWvMVCRzcMHVdZyP7zimg4mEFq5YIQc1BJNBj2U+3JWjw2K3/pOvjYLP2Qm30wNitXlFm58o/Zsbag73Lttm+ZcdpTol11HBUznoFf8ZDixyO3IZzvbtP94YiG85i3xAV8eeaKRmHFdX+7zar7TDa8KhV/+d+P+Y38BWQsx+6okRn5pvdzfnkb5zb45WXGRvhYwMIGvrykfv0B2sCR33icY2BkYGAA4lV/e+zj+W2+MnCzMIDAtT//2BD0/4MsDMz2QC4HAxNIFABdIgvfAHicY2BkYGBu+N/AEMPCAAJAkpEBFXAAAEcOAnF4nGNhYGBgfsnAwMKAHQMAGtcBCQAAAAAAdgDqARgBQAFuAZgBvgAAeJxjYGRgYOBgCGRgZwABJiDmAkIGhv9gPgMAEawBdwB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICDkYmRmZGFkZWRjZGdkYORk4GxgrUgIz8vlTuxqCi/XLcoMz2jhDcrMzGvJL8UwuOCyOSkppUwl+QX8MAkQQIMDAD8nRb1AAAA') format('woff'),
|
||||
url('iconfont.ttf?t=1524030726307') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('iconfont.svg?t=1524030726307#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-phone:before { content: "\e65f"; }
|
||||
|
||||
.icon-arrow-right:before { content: "\e7a5"; }
|
||||
|
||||
.icon-jiantou-right:before { content: "\e64a"; }
|
||||
|
||||
.icon-arrow-left:before { content: "\e7a6"; }
|
||||
|
||||
.icon-top:before { content: "\e761"; }
|
||||
|
||||
.icon-jiantou-left:before { content: "\e7a7"; }
|
||||
|
||||
Binary file not shown.
@ -1,51 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||
|
||||
|
||||
|
||||
<glyph glyph-name="phone" unicode="" d="M747.294464-62.40927399999998L288.099005-62.40927399999998c-34.171196 0-61.928321 27.873782-61.928321 62.107399L226.170684 768.664124c0 34.298085 27.757125 62.171867 61.928321 62.171867l459.195459 0c34.117984 0 61.871016-27.873782 61.871016-62.171867L809.165479-0.30187499999999545C809.165479-34.53549199999998 781.412448-62.40927399999998 747.294464-62.40927399999998L747.294464-62.40927399999998zM288.099005 800.405996c-17.351145 0-31.498325-14.234161-31.498325-31.741872L256.60068-0.30187499999999545c0-17.472918 14.14718-31.678427 31.498325-31.678427l459.195459 0c17.356262 0 31.44102 14.205508 31.44102 31.678427L778.735484 768.664124c0 17.506687-14.084758 31.741872-31.44102 31.741872L288.099005 800.405996 288.099005 800.405996zM517.698781 4.1556379999999535c-22.345893 0-40.477819 18.217884-40.477819 40.593452s18.131926 40.594476 40.477819 40.594476c22.347939 0 40.473726-18.218907 40.473726-40.594476S540.04672 4.1556379999999535 517.698781 4.1556379999999535L517.698781 4.1556379999999535zM517.698781 54.91357100000005c-5.526866 0-10.041684-4.548587-10.041684-10.16448 0-11.233833 20.086437-11.233833 20.086437 0C527.742511 50.36498400000005 523.22667 54.91357100000005 517.698781 54.91357100000005L517.698781 54.91357100000005zM735.644146 114.70420899999999l-438.629092 0c-8.377791 0-15.21244 6.804973-15.21244 15.216533L281.802614 745.548707c0 8.407467 6.834648 15.21244 15.21244 15.21244l438.629092 0c8.382908 0 15.216533-6.804973 15.216533-15.21244l0-615.627965C750.860679 121.50918200000001 744.027054 114.70420899999999 735.644146 114.70420899999999L735.644146 114.70420899999999zM312.23261 145.13318100000004l408.199097 0L720.431706 730.331151 312.23261 730.331151 312.23261 145.13318100000004 312.23261 145.13318100000004zM312.23261 145.13318100000004" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="arrow-right" unicode="" d="M78.443 345.96799999999996h733.558l-187.319-180.328c-4.795-4.796-4.795-12.57 0-17.367l37.627-37.627c4.796-4.795 12.57-4.795 17.367 0l235.807 227.011c0.272 0.229 0.541 0.465 0.797 0.721l1.259 1.259 36.367 35.009c2.567 2.568 3.746 5.99 3.564 9.352 0.188 3.369-0.991 6.8-3.562 9.372l-37.627 36.267c-0.243 0.241-0.496 0.463-0.752 0.68l-235.852 227.05c-4.796 4.797-12.57 4.797-17.367 0l-37.627-37.627c-4.795-4.795-4.795-12.569 0-17.367l185.562-178.637h-731.8c-6.783 0-12.28-5.498-12.28-12.28v-53.213c0-6.781 5.497-12.28 12.28-12.28z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-right" unicode="" d="M346.52382345477406 791.5616946732558c-12.257495055447652 12.257495055447652-30.6437359627898 12.257495055447652-42.90123101823747 0s-12.257495055447652-30.6437359627898 0-42.90123101823747L668.2830560915551 384 303.6225924365366 19.339536344981525c-12.257495055447652-12.257495055447652-12.257495055447652-30.6437359627898 0-42.90123101823747 6.128747527723826-6.128747527723826 15.3218679813949-9.193120453671073 21.450615509118734-9.193120453671073s15.3218679813949 3.064372925947246 21.450615509118734 9.193120453671073l386.1110791641372 386.1110791641372c12.257495055447652 12.257495055447652 12.257495055447652 30.6437359627898 0 42.90123101823747L346.52382345477406 791.5616946732558z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="arrow-left" unicode="" d="M945.557 422.032l-733.558 0 187.319 180.328c4.795 4.796 4.79500001 12.57 0 17.367l-37.627 37.627c-4.796 4.795-12.57 4.79500001-17.367 0l-235.807-227.011c-0.272-0.229-0.541-0.465-0.797-0.721l-1.259-1.259-36.367-35.009c-2.567-2.568-3.746-5.99-3.564-9.352-0.188-3.369 0.991-6.8 3.562-9.372l37.627-36.267c0.243-0.241 0.496-0.463 0.752-0.68l235.852-227.05c4.796-4.797 12.57-4.797 17.367 0l37.627 37.627c4.795 4.795 4.795 12.569 0 17.367l-185.562 178.637 731.8 0c6.783 0 12.28 5.498 12.28 12.28000001l0 53.21299999c0 6.781-5.497 12.28-12.28 12.28z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="top" unicode="" d="M486.741333 113.27999999999997V596.394667c0 0.085333-0.170667 0.170667-0.170666 0.085333l-168.96-182.186667a34.816 34.816 0 0 0-50.56-1.024 37.973333 37.973333 0 0 0-0.981334 52.352L496.213333 713.8133330000001a35.328 35.328 0 0 0 25.770667 11.349334c9.728 0 18.986667-4.138667 25.728-11.349334l231.338667-249.514666a37.632 37.632 0 0 0 9.984-25.685334 37.376 37.376 0 0 0-10.965334-26.709333 34.901333 34.901333 0 0 0-50.517333 1.024l-169.002667 182.186667c-0.085333 0.128-0.170667 0-0.170666-0.042667v-482.602667a36.522667 36.522667 0 0 0-33.578667-36.992c-20.778667-1.28-37.973333 16.341333-37.973333 37.802667z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-left" unicode="" d="M677.47617655-23.56169466999995c12.25749506-12.25749506 30.64373596-12.25749506 42.90123101 0s12.25749506 30.64373596 0 42.90123101L355.7169439 384 720.37740756 748.66046366c12.25749506 12.25749506 12.25749506 30.64373596 0 42.90123101-6.12874753 6.12874753-15.32186798 9.19312045-21.45061552 9.19312046s-15.32186798-3.06437293-21.45061549-9.19312046l-386.11107917-386.11107916c-12.25749506-12.25749506-12.25749506-30.64373596 0-42.90123102L677.47617655-23.56169466999995z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 550 B |
@ -1,11 +0,0 @@
|
||||
/* 清除浮动 */
|
||||
@mixin clearFloat {
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@ -1,136 +0,0 @@
|
||||
/**
|
||||
* 文档变量
|
||||
*/
|
||||
|
||||
/* 背景颜色 */
|
||||
$color-bg: #fefefe;
|
||||
|
||||
/* 白色 */
|
||||
$color-white: #fff;
|
||||
|
||||
/* 黑色 */
|
||||
$color-black: #000;
|
||||
$color-black-l1: mix($color-white, $color-black, 10%);
|
||||
$color-black-l2: mix($color-white, $color-black, 20%);
|
||||
$color-black-l3: mix($color-white, $color-black, 30%);
|
||||
$color-black-l4: mix($color-white, $color-black, 40%);
|
||||
$color-black-l5: mix($color-white, $color-black, 50%);
|
||||
$color-black-l6: mix($color-white, $color-black, 60%);
|
||||
$color-black-l7: mix($color-white, $color-black, 70%);
|
||||
$color-black-l8: mix($color-white, $color-black, 80%);
|
||||
$color-black-l9: mix($color-white, $color-black, 90%);
|
||||
|
||||
/* 主题色 */
|
||||
$color-theme: #0083ff;
|
||||
$color-theme-l1: mix($color-white, $color-theme, 10%);
|
||||
$color-theme-l2: mix($color-white, $color-theme, 20%);
|
||||
$color-theme-l3: mix($color-white, $color-theme, 30%);
|
||||
$color-theme-l4: mix($color-white, $color-theme, 40%);
|
||||
$color-theme-l5: mix($color-white, $color-theme, 50%);
|
||||
$color-theme-l6: mix($color-white, $color-theme, 60%);
|
||||
$color-theme-l7: mix($color-white, $color-theme, 70%);
|
||||
$color-theme-l8: mix($color-white, $color-theme, 80%);
|
||||
$color-theme-l9: mix($color-white, $color-theme, 90%);
|
||||
|
||||
$color-theme-e1: mix($color-black, $color-theme, 10%);
|
||||
$color-theme-e2: mix($color-black, $color-theme, 20%);
|
||||
$color-theme-e3: mix($color-black, $color-theme, 30%);
|
||||
$color-theme-e4: mix($color-black, $color-theme, 40%);
|
||||
$color-theme-e5: mix($color-black, $color-theme, 50%);
|
||||
$color-theme-e6: mix($color-black, $color-theme, 60%);
|
||||
$color-theme-e7: mix($color-black, $color-theme, 70%);
|
||||
$color-theme-e8: mix($color-black, $color-theme, 80%);
|
||||
$color-theme-e9: mix($color-black, $color-theme, 90%);
|
||||
|
||||
/* 辅助色 */
|
||||
$color-aid: #e2231a;
|
||||
$color-aid-l1: mix($color-white, $color-aid, 10%);
|
||||
$color-aid-l2: mix($color-white, $color-aid, 20%);
|
||||
$color-aid-l3: mix($color-white, $color-aid, 30%);
|
||||
$color-aid-l4: mix($color-white, $color-aid, 40%);
|
||||
$color-aid-l5: mix($color-white, $color-aid, 50%);
|
||||
$color-aid-l6: mix($color-white, $color-aid, 60%);
|
||||
$color-aid-l7: mix($color-white, $color-aid, 70%);
|
||||
$color-aid-l8: mix($color-white, $color-aid, 80%);
|
||||
$color-aid-l9: mix($color-white, $color-aid, 90%);
|
||||
|
||||
$color-aid-e1: mix($color-black, $color-aid, 10%);
|
||||
$color-aid-e2: mix($color-black, $color-aid, 20%);
|
||||
$color-aid-e3: mix($color-black, $color-aid, 30%);
|
||||
$color-aid-e4: mix($color-black, $color-aid, 40%);
|
||||
$color-aid-e5: mix($color-black, $color-aid, 50%);
|
||||
$color-aid-e6: mix($color-black, $color-aid, 60%);
|
||||
$color-aid-e7: mix($color-black, $color-aid, 70%);
|
||||
$color-aid-e8: mix($color-black, $color-aid, 80%);
|
||||
$color-aid-e9: mix($color-black, $color-aid, 90%);
|
||||
|
||||
/* 警告色 */
|
||||
$color-warn: #ff9900;
|
||||
$color-warn-l1: mix($color-white, $color-warn, 10%);
|
||||
$color-warn-l2: mix($color-white, $color-warn, 20%);
|
||||
$color-warn-l3: mix($color-white, $color-warn, 30%);
|
||||
$color-warn-l4: mix($color-white, $color-warn, 40%);
|
||||
$color-warn-l5: mix($color-white, $color-warn, 50%);
|
||||
$color-warn-l6: mix($color-white, $color-warn, 60%);
|
||||
$color-warn-l7: mix($color-white, $color-warn, 70%);
|
||||
$color-warn-l8: mix($color-white, $color-warn, 80%);
|
||||
$color-warn-l9: mix($color-white, $color-warn, 90%);
|
||||
|
||||
/* 错误色 */
|
||||
$color-error: #ff3333;
|
||||
$color-error-l1: mix($color-white, $color-error, 10%);
|
||||
$color-error-l2: mix($color-white, $color-error, 20%);
|
||||
$color-error-l3: mix($color-white, $color-error, 30%);
|
||||
$color-error-l4: mix($color-white, $color-error, 40%);
|
||||
$color-error-l5: mix($color-white, $color-error, 50%);
|
||||
$color-error-l6: mix($color-white, $color-error, 60%);
|
||||
$color-error-l7: mix($color-white, $color-error, 70%);
|
||||
$color-error-l8: mix($color-white, $color-error, 80%);
|
||||
$color-error-l9: mix($color-white, $color-error, 90%);
|
||||
|
||||
/* 代码颜色 */
|
||||
$color-code-bg: #f6f6f6;
|
||||
$color-code: #2d3c4a;
|
||||
$color-js-keyword: $color-theme;
|
||||
$color-js-string: $color-aid-l2;
|
||||
$color-html-tag: #464646;
|
||||
$color-html-attr: #0083ff;
|
||||
$color-html-attr-value: #429606;
|
||||
$color-html-tag-name: $color-aid;
|
||||
$color-html-comment: #999;
|
||||
$color-js-comment: mix($color-white, $color-code, 50%);
|
||||
$color-js-number: #ae81ff;
|
||||
$color-js-literal: #ae81ff;
|
||||
$color-js-built_in: #429606;
|
||||
$color-js-attr: $color-aid;
|
||||
$color-css-selector: $color-theme;
|
||||
$color-css-attr: $color-code;
|
||||
$color-css-number: $color-aid;
|
||||
$color-json-attr: $color-aid;
|
||||
$color-json-string: #429606;
|
||||
$color-json-type: $color-theme;
|
||||
$color-bash-built: $color-theme;
|
||||
|
||||
/* 代码字体 */
|
||||
$code-family: ("Roboto Mono", Monaco, courier, monospace);
|
||||
|
||||
/* 字体 */
|
||||
$font-family: ('Helvetica Neue','PingFang SC','Microsoft YaHei',Helvetica,'Hiragino Sans GB',SimSun,sans-serif);
|
||||
|
||||
/* 字体大小 */
|
||||
$fs-large-title: 20px; // 大标题
|
||||
$fs-title: 16px; // 小标题
|
||||
$fs-text: 14px; // 正文
|
||||
|
||||
/* 字体颜色 */
|
||||
$color-important: #2b2b2b; // 重要文字
|
||||
$color-text: #34495e; // 正文
|
||||
$color-text-light: #666;
|
||||
$color-text-aid: #adadad; // 辅助性文字
|
||||
|
||||
/* 边框颜色 */
|
||||
$color-line: #ddd;
|
||||
$color-line-light: #eee;
|
||||
|
||||
/* 头部高度 */
|
||||
$layout-header-height: 60px;
|
||||
@ -1,201 +0,0 @@
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
@import 'variable';
|
||||
@import 'markdown';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: $font-family;
|
||||
font-size: $fs-text;
|
||||
color: $color-text;
|
||||
background: $color-bg;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-text;
|
||||
|
||||
&:active {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
.body-scrollbar {
|
||||
overflow-y: auto;
|
||||
overflow-y: overlay;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) #fefefe;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
opacity: 0.5;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
.win-scrollbar {
|
||||
overflow-y: auto;
|
||||
overflow-y: overlay;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0) #fefefe;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
opacity: 0.5;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover{
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
scrollbar-color: rgba(0, 0, 0, 0.2) #fefefe;
|
||||
}
|
||||
}
|
||||
|
||||
.style-block {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
padding: 15px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.a-dot,
|
||||
.b-dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #668df8;
|
||||
z-index: 10;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
.a-dot {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
&::before {
|
||||
content: "A";
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 17px;
|
||||
transform: translate(14px, -22px);
|
||||
}
|
||||
}
|
||||
.b-dot {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
&::before {
|
||||
content: "B";
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 17px;
|
||||
transform: translate(14px, -22px);
|
||||
}
|
||||
}
|
||||
.liner-color {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 250px;
|
||||
right: 96px;
|
||||
top: -32px;
|
||||
background-color: #fff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.color-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.color-block {
|
||||
width: 65px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.liner-color1 {
|
||||
&::after {
|
||||
transform: rotate(45deg);
|
||||
top: -30px;
|
||||
}
|
||||
.a-dot {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
left: inherit;
|
||||
}
|
||||
.b-dot {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
&::before {
|
||||
transform: translate(25px, -15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-right {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
}
|
||||
.color-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0 !important;
|
||||
box-sizing: border-box;
|
||||
&.dark {
|
||||
background: rgba(38, 38, 38, 1);
|
||||
border: 3px solid rgba(38, 38, 38, 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
li {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 8px 0 0 8px;
|
||||
|
||||
div {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,337 +0,0 @@
|
||||
@import './variable';
|
||||
$--font-path: 'https://static.360buyimg.com/bus/fonts/JDZhengHT';
|
||||
@font-face {
|
||||
font-family: 'JDZhengHT-Bold';
|
||||
src: url('#{$--font-path}/JDZhengHT-Bold.woff') format('woff'), /* chrome, firefox */
|
||||
url('#{$--font-path}/JDZhengHT-Bold.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JDZhengHT-Light';
|
||||
src: url('#{$--font-path}/JDZhengHT-Light.woff') format('woff'), /* chrome, firefox */
|
||||
url('#{$--font-path}/JDZhengHT-Light.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
.wd-markdown {
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
color: #666;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
}
|
||||
a {
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: $color-theme-l3;
|
||||
|
||||
&:active, &:hover {
|
||||
outline: 0;
|
||||
color: $color-theme-l3;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 20px 0;
|
||||
font-weight: 400;
|
||||
color: $color-important;
|
||||
}
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
margin: 30px 0 15px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 13px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
hr {
|
||||
height: 1px;
|
||||
margin: 30px 0 20px 0;
|
||||
border: none;
|
||||
background: $color-line;
|
||||
}
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
code, kbd, pre {
|
||||
font-family: $code-family;
|
||||
font-size: 12px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 15px;
|
||||
color: $color-theme-l2;
|
||||
border-bottom: 1px solid $color-line-light;
|
||||
max-width: 194px;
|
||||
}
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid $color-line-light;
|
||||
max-width: 194px;
|
||||
color: #666;
|
||||
}
|
||||
blockquote {
|
||||
margin: 30px 0;
|
||||
padding-left: 16px;
|
||||
border-left: 4px solid $color-theme-l5;
|
||||
color: $color-text-light;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 30px;
|
||||
list-style: disc;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
line-height: 28px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
margin: 0 5px;
|
||||
line-height: 18px;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
background: $color-code-bg;
|
||||
color: $color-aid-l2;
|
||||
overflow: auto;
|
||||
}
|
||||
pre {
|
||||
width: 100%;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
color: $color-code;
|
||||
border-radius: 4px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
.language-javascript, .language-JavaScript, .javascript {
|
||||
.hljs-keyword {
|
||||
color: $color-js-keyword;
|
||||
}
|
||||
.hljs-string {
|
||||
color: $color-js-string;
|
||||
}
|
||||
.hljs-comment {
|
||||
color: $color-js-comment;
|
||||
}
|
||||
.hljs-number {
|
||||
color: $color-js-number;
|
||||
}
|
||||
.hljs-literal {
|
||||
color: $color-js-literal;
|
||||
}
|
||||
.hljs-built_in {
|
||||
color: $color-js-built_in;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: $color-js-attr;
|
||||
}
|
||||
}
|
||||
.language-html, .language-HTML {
|
||||
.hljs-tag {
|
||||
color: $color-html-tag;
|
||||
}
|
||||
.hljs-attr {
|
||||
color: $color-html-attr;
|
||||
}
|
||||
.hljs-string {
|
||||
color: $color-html-attr-value;
|
||||
}
|
||||
.hljs-name {
|
||||
color: $color-html-tag-name;
|
||||
}
|
||||
.hljs-comment {
|
||||
color: $color-html-comment;
|
||||
}
|
||||
.javascript {
|
||||
.hljs-attr {
|
||||
color: $color-js-attr;
|
||||
}
|
||||
}
|
||||
}
|
||||
.language-css, .language-scss, .language-sass, .language-less {
|
||||
color: $color-css-selector;
|
||||
|
||||
.hljs-selector-class {
|
||||
color: $color-css-selector;
|
||||
}
|
||||
.hljs-attribute, .hljs-variable {
|
||||
color: $color-css-attr;
|
||||
}
|
||||
.hljs-number {
|
||||
color: $color-css-number;
|
||||
}
|
||||
.hljs-comment {
|
||||
color: $color-js-comment;
|
||||
}
|
||||
}
|
||||
.language-json, .languane-JSON {
|
||||
.hljs-attr {
|
||||
color: $color-json-attr;
|
||||
}
|
||||
.hljs-string {
|
||||
color: $color-json-string;
|
||||
}
|
||||
.hljs-number, .hljs-literal {
|
||||
color: $color-json-type;
|
||||
}
|
||||
}
|
||||
.language-bash, .language-BASH {
|
||||
.hljs-built_in {
|
||||
color: $color-bash-built;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
background: $color-theme-l9;
|
||||
padding: 10px 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 3px;
|
||||
border-left: 5px solid $color-theme-l4;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.warning {
|
||||
background: $color-warn-l9;
|
||||
padding: 10px 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 3px;
|
||||
border-left: 5px solid $color-warn-l4;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
background: $color-error-l9;
|
||||
padding: 10px 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 3px;
|
||||
border-left: 5px solid $color-error-l4;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.typo-content {
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
line-height: 30px;
|
||||
|
||||
& > div {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.typo-content-demo {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.typo-content-title {
|
||||
width: 30px;
|
||||
}
|
||||
.typo-PingFang-Medium-text {
|
||||
width: 150px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typo-PingFang, .typo-PingFang-Semibold, .typo-PingFang-Medium {
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
.typo-PingFang-Semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.typo-PingFang-Medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typo-Source, .typo-Source-Medium, .typo-Source-Normal {
|
||||
font-family: Noto SansCJK;
|
||||
}
|
||||
.typo-Source-Medium {
|
||||
font-weight: 600;
|
||||
}
|
||||
.typo-Source-Normal {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typo-SanFrancisco, .typo-SanFrancisco-Semibold, .typo-SanFrancisco-Regular {
|
||||
font-family: San Francisco;
|
||||
}
|
||||
.typo-SanFrancisco-Semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.typo-SanFrancisco-Regular {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typo-Roboto, .typo-Roboto-Normal, .typo-Roboto-Normal {
|
||||
font-family: Roboto;
|
||||
}
|
||||
.typo-Roboto-Medium {
|
||||
font-weight: 600;
|
||||
}
|
||||
.typo-Roboto-Normal {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typo-JDZhengHT-Semibold {
|
||||
font-family: 'JDZhengHT-Bold';
|
||||
}
|
||||
.typo-JDZhengHT-Light, .typo-JDZhengHT-Medium {
|
||||
font-family: 'JDZhengHT-Light';
|
||||
}
|
||||
.typo-JDZhengHT-Medium {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
docs/build/build-tag.js
vendored
23
docs/build/build-tag.js
vendored
@ -1,23 +0,0 @@
|
||||
const { exec } = require('child_process')
|
||||
const chalk = require('chalk')
|
||||
const packageConfig = require('../../package.json')
|
||||
|
||||
const tagBuildCmd = `git tag -a v${packageConfig.version} -m 'version ${packageConfig.version}'`
|
||||
const tagPushCmd = `git push origin v${packageConfig.version}`
|
||||
|
||||
console.log(chalk.cyan(`> 开始创建标签v${packageConfig.version}...`))
|
||||
exec(tagBuildCmd, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
console.error(chalk.red(`标签创建错误：${error}`))
|
||||
return
|
||||
}
|
||||
console.log(chalk.green('-- 标签创建成功！'))
|
||||
console.log(chalk.cyan('> 将标签推送到远程服务器...'))
|
||||
exec(tagPushCmd, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
console.error(chalk.red(`标签推送错误：${error}`))
|
||||
return
|
||||
}
|
||||
console.log(chalk.green('-- 标签推送成功！'))
|
||||
})
|
||||
})
|
||||
13
docs/build/deploy/before-deploy.sh
vendored
13
docs/build/deploy/before-deploy.sh
vendored
@ -1,13 +0,0 @@
|
||||
#! /bin/sh
|
||||
|
||||
if [ ! $RELEASE_NAME ]; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# get release file
|
||||
mv lib/jd wot-design
|
||||
zip -r wot-design-$RELEASE_NAME-jd.zip wot-design/*
|
||||
mv wot-design lib/jd
|
||||
mv lib/wx wot-design
|
||||
zip -r wot-design-$RELEASE_NAME-wechat.zip wot-design/*
|
||||
mv wot-design lib/wx
|
||||
50
docs/build/deploy/change-log.js
vendored
50
docs/build/deploy/change-log.js
vendored
@ -1,50 +0,0 @@
|
||||
/**
|
||||
* @description 提取changelog.md的日志，用于github release
|
||||
* @author Gkxie
|
||||
* @date 2019-12-25
|
||||
*/
|
||||
const minimist = require('minimist')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const MarkdownIt = require('markdown-it')
|
||||
const args = minimist(process.argv.slice(2))
|
||||
const md = new MarkdownIt()
|
||||
const rules = /\d+\.\d+\.\d+/
|
||||
const html = md
|
||||
.render(
|
||||
fs.readFileSync(args.hasOwnProperty('path') ? path.resolve(args.path) : path.resolve(__dirname, '../../docs/changelog.md'), {
|
||||
encoding: 'utf-8'
|
||||
})
|
||||
)
|
||||
.split('\n')
|
||||
.filter((s) => Boolean(s))
|
||||
const isH3 = /<h3>(\S+)<\/h3>/
|
||||
const versionList = {}
|
||||
let temp = []
|
||||
for (let i = 0; i < html.length; i++) {
|
||||
if (html[i].indexOf('<h2>') === 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')
|
||||
}
|
||||
}
|
||||
23
docs/build/deploy/check-deploy.js
vendored
23
docs/build/deploy/check-deploy.js
vendored
@ -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')
|
||||
36
docs/build/deploy/delete-old.js
vendored
36
docs/build/deploy/delete-old.js
vendored
@ -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')
|
||||
10
docs/build/deploy/script.sh
vendored
10
docs/build/deploy/script.sh
vendored
@ -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
|
||||
64
docs/build/file-writer.js
vendored
64
docs/build/file-writer.js
vendored
@ -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
|
||||
}
|
||||
58
docs/build/md-loader.js
vendored
58
docs/build/md-loader.js
vendored
@ -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 '<pre class="hljs language-' + lang + '"><code>' + hljs.highlight(lang, str, true).value + '</code></pre>'
|
||||
} catch (__) {}
|
||||
}
|
||||
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
|
||||
}
|
||||
})
|
||||
.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('<script>')
|
||||
let scriptEnd = 0
|
||||
let pageScript
|
||||
let pageHtml = []
|
||||
|
||||
if (scriptStart > -1) {
|
||||
scriptEnd = content.indexOf('</script>') + '</script>'.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, '<span>{</span>').replace(/\}/g, '<span>}</span>')
|
||||
|
||||
return `
|
||||
<template>
|
||||
<section class="markdown-content">
|
||||
${output}
|
||||
</section>
|
||||
</template>
|
||||
${pageScript}
|
||||
`
|
||||
}
|
||||
43
docs/build/sitemap.js
vendored
43
docs/build/sitemap.js
vendored
@ -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) => `
|
||||
<url>
|
||||
<loc>${route}</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
</url>`
|
||||
)
|
||||
.join('\r\n')
|
||||
return `
|
||||
<urlset
|
||||
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
${list}
|
||||
</urlset>
|
||||
`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
siteMapUrls,
|
||||
createSitemapXml
|
||||
}
|
||||
36
docs/build/utils.js
vendored
36
docs/build/utils.js
vendored
@ -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)
|
||||
}
|
||||
183
docs/build/webpack.docs.conf.js
vendored
183
docs/build/webpack.docs.conf.js
vendored
@ -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
|
||||
@ -1,7 +1,9 @@
|
||||
## ActionSheet 动作面板
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
</wd-action-sheet>
|
||||
```
|
||||
|
||||
### 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 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Badge 标记
|
||||
<frame/>
|
||||
|
||||
# Badge 标记
|
||||
|
||||
|
||||
出现在按钮、图标旁的数字或状态标记。
|
||||
|
||||
### 基础用法
|
||||
## 基础用法
|
||||
|
||||
展示新消息数量。
|
||||
|
||||
@ -19,7 +21,7 @@
|
||||
</wd-badge>
|
||||
```
|
||||
|
||||
### 修改背景色
|
||||
## 修改背景色
|
||||
|
||||
设置 `type` 属性，也可以自定义背景色 `bg-color`，也可以通过`custom-class`定义组件样式。
|
||||
|
||||
@ -48,7 +50,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 最大值
|
||||
## 最大值
|
||||
|
||||
可自定义最大值。
|
||||
|
||||
@ -64,7 +66,7 @@
|
||||
```
|
||||
|
||||
|
||||
### 自定义内容
|
||||
## 自定义内容
|
||||
|
||||
可以显示数字以外的文本内容。
|
||||
|
||||
@ -79,7 +81,7 @@
|
||||
</wd-badge>
|
||||
```
|
||||
|
||||
### 点状标注
|
||||
## 点状标注
|
||||
|
||||
以红点的形式标注需要关注的内容。
|
||||
|
||||
@ -92,7 +94,7 @@
|
||||
</wd-badge>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -105,7 +107,7 @@
|
||||
| type | 类型 | string | primary / success / warning / danger / info | - | - |
|
||||
| bg-color | 背景色 | string | 各种颜色的css写法 | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Button 按钮
|
||||
<frame/>
|
||||
|
||||
# Button 按钮
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
基本按钮。
|
||||
|
||||
@ -13,7 +15,7 @@
|
||||
<wd-button type="error">危险按钮</wd-button>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -21,7 +23,7 @@
|
||||
<wd-button disabled>默认按钮</wd-button>
|
||||
```
|
||||
|
||||
### 幽灵按钮
|
||||
## 幽灵按钮
|
||||
|
||||
设置 `plain` 属性。
|
||||
|
||||
@ -29,7 +31,7 @@
|
||||
<wd-button plain>主要按钮</wd-button>
|
||||
```
|
||||
|
||||
### 按钮大小
|
||||
## 按钮大小
|
||||
|
||||
设置 `size` ，支持 'small'、'medium'、'large'，默认为 'medium'。
|
||||
|
||||
@ -39,7 +41,7 @@
|
||||
<wd-button size="large">大号按钮</wd-button>
|
||||
```
|
||||
|
||||
### 加载中按钮
|
||||
## 加载中按钮
|
||||
|
||||
设置 `loading` 属性，让按钮处于加载中状态。加载中的按钮是禁止点击的。
|
||||
|
||||
@ -47,7 +49,7 @@
|
||||
<wd-button loading>加载中</wd-button>
|
||||
```
|
||||
|
||||
### 文字按钮
|
||||
## 文字按钮
|
||||
|
||||
将 `type` 设置为 `text`。文字按钮不支持其他颜色。
|
||||
|
||||
@ -55,7 +57,7 @@
|
||||
<wd-button type="text">文字按钮</wd-button>
|
||||
```
|
||||
|
||||
### 图标按钮
|
||||
## 图标按钮
|
||||
|
||||
将 `type` 设置为 `icon`，同时设置 `icon` 属性，icon为图标的类名，可以直接使用 `Icon 图标` 章节中的图标类名。
|
||||
|
||||
@ -63,7 +65,7 @@
|
||||
<wd-button type="icon" icon="menu"></wd-button>
|
||||
```
|
||||
|
||||
### 带图标的按钮
|
||||
## 带图标的按钮
|
||||
|
||||
设置 `icon` 属性，不需要设置 `type` 为 `icon`，即可以直接使用带图标的按钮。
|
||||
|
||||
@ -71,7 +73,7 @@
|
||||
<wd-button icon="edit-outline"></wd-button>
|
||||
```
|
||||
|
||||
### 块状按钮
|
||||
## 块状按钮
|
||||
|
||||
设置 `block` 属性。
|
||||
|
||||
@ -79,7 +81,7 @@
|
||||
<wd-button block>主要按钮</wd-button>
|
||||
```
|
||||
|
||||
### 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时有效 | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Calendar 日历选择器
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-calendar label="日周月切换" first-day-of-week="{{ 1 }}" show-type-switch value="{{ value }}" bind:confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
### 快捷操作
|
||||
## 快捷操作
|
||||
|
||||
设置 `show-confirm` 属性为 `false`，不展示确定按钮，只对 `date、daterange、week、weekrange、month、monthrange` 类型有效。
|
||||
|
||||
@ -176,7 +178,7 @@ Page({
|
||||
<wd-calendar label="快捷操作" show-confirm="{{ false }}" value="{{ value }}" bind:confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
### 范围选择允许选中同一日期
|
||||
## 范围选择允许选中同一日期
|
||||
|
||||
设置 `allow-same-day` 属性，范围选择允许用户选择同一天、同一周、同一个月。
|
||||
|
||||
@ -184,7 +186,7 @@ Page({
|
||||
<wd-calendar type="daterange" value="{{ value }}" allow-same-day bind:confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
### 格式化日期
|
||||
## 格式化日期
|
||||
|
||||
设置 `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({
|
||||
<wd-calendar type="daterange" max-range="{{ 3 }}" value="{{ value }}" bind:confirm="handleConfirm" />
|
||||
```
|
||||
|
||||
### 设置周起始日
|
||||
## 设置周起始日
|
||||
|
||||
设置 `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 | 左侧插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,10 +1,12 @@
|
||||
## CalendarView 日历面板组件
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-calendar-view type="daterange" value="{{ value }}" allow-same-day bind:change="handleChange" />
|
||||
```
|
||||
|
||||
### 格式化日期
|
||||
## 格式化日期
|
||||
|
||||
设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下：
|
||||
|
||||
@ -236,7 +238,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 最大范围限制
|
||||
## 最大范围限制
|
||||
|
||||
设置 `max-range` 属性，设置范围选择的最大限制。
|
||||
|
||||
@ -244,7 +246,7 @@ Page({
|
||||
<wd-calendar-view type="daterange" max-range="{{ 3 }}" value="{{ value }}" bind:change="handleChange" />
|
||||
```
|
||||
|
||||
### 展示面板标题
|
||||
## 展示面板标题
|
||||
|
||||
`show-panel-title` 默认为 `true`，会自动计算标题并进行展示，可以选择不进行展示。
|
||||
|
||||
@ -252,11 +254,11 @@ Page({
|
||||
<wd-calendar-view type="daterange" show-panel-title="{{ false }}" value="{{ value }}" bind:change="handleChange" />
|
||||
```
|
||||
|
||||
### 设置周起始日
|
||||
## 设置周起始日
|
||||
|
||||
设置 `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 |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Card 卡片
|
||||
<frame/>
|
||||
|
||||
# Card 卡片
|
||||
|
||||
|
||||
### 基本使用
|
||||
## 基本使用
|
||||
|
||||
通过 `title` 属性设置标题，默认插槽传入内容。
|
||||
支持设置 `title` 插槽和 `footer` 插槽。
|
||||
@ -13,7 +15,7 @@
|
||||
</wd-card>
|
||||
```
|
||||
|
||||
### 矩形卡片
|
||||
## 矩形卡片
|
||||
|
||||
将`type` 设置为 `rectangle` 。
|
||||
|
||||
@ -55,13 +57,13 @@
|
||||
}
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|-----|------|-------|-------|--------|
|
||||
| title | 卡片标题 | string | - | - | - |
|
||||
| type | 卡片类型 | string | rectangle | - | - |
|
||||
|
||||
### Slot
|
||||
## Slot
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
@ -69,7 +71,7 @@
|
||||
| title | 卡片标题 | - |
|
||||
| footer | 底部操作内容 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Cell单元格
|
||||
<frame/>
|
||||
|
||||
# Cell单格
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`Cell` 可以单独使用，也可以和 `CellGroup` 组合使用。
|
||||
|
||||
@ -14,7 +16,7 @@
|
||||
</wd-cell-group>
|
||||
```
|
||||
|
||||
### 图标设置
|
||||
## 图标设置
|
||||
|
||||
设置 `icon` 属性，值可以为 Icon 章节中的图标名，也可以通过 icon 的 slot 自定义图标位置。
|
||||
|
||||
@ -41,7 +43,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 分组标题
|
||||
## 分组标题
|
||||
|
||||
可以在 `cell-group` 上设置 `title` 和 `value` 属性。
|
||||
|
||||
@ -52,7 +54,7 @@
|
||||
</wd-cell-group>
|
||||
```
|
||||
|
||||
### 单元格大小
|
||||
## 单元格大小
|
||||
|
||||
通过设置 `size` 修改单元格大小，将 `size` 设置为 'large' 时左侧标题字号为 16px。
|
||||
|
||||
@ -60,7 +62,7 @@
|
||||
<wd-cell size="large" title="标题文字" value="内容" />
|
||||
```
|
||||
|
||||
### 展示边框线
|
||||
## 展示边框线
|
||||
|
||||
在 `wd-cell-group` 上设置 `border` 属性，会给每个cell加上边框，最后一个cell则不展示边框，其他具有 `cell` 类型的表单组件也支持边框展示，如 input、picker。
|
||||
|
||||
@ -71,7 +73,7 @@
|
||||
</wd-cell-group>
|
||||
```
|
||||
|
||||
### 点击反馈
|
||||
## 点击反馈
|
||||
|
||||
通过设置 `clickable` 开启点击反馈，之后可以监听`click`事件。
|
||||
|
||||
@ -88,7 +90,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 页面跳转
|
||||
## 页面跳转
|
||||
|
||||
通过设置 `is-link` 属性显示导航箭头和点击态，设置 `to` 属性，指定跳转地址，可以设置 replace 替换掉历史堆栈中的当前页面。
|
||||
|
||||
@ -105,7 +107,7 @@ Page({
|
||||
<wd-cell title="帮助与反馈" is-link></wd-cell>
|
||||
```
|
||||
|
||||
### 垂直居中
|
||||
## 垂直居中
|
||||
|
||||
通过设置 `center` 设置内容垂直居中对齐，默认顶部居中。
|
||||
|
||||
@ -113,7 +115,7 @@ Page({
|
||||
<wd-cell title="标题文字" value="内容" center></wd-cell>
|
||||
```
|
||||
|
||||
### 表单属性 - 必填
|
||||
## 表单属性 - 必填
|
||||
|
||||
设置 `required` 属性。
|
||||
|
||||
@ -123,7 +125,7 @@ Page({
|
||||
</wd-cell>
|
||||
```
|
||||
|
||||
### 表单属性 - 上下结构
|
||||
## 表单属性 - 上下结构
|
||||
|
||||
设置 `vertical` 属性。
|
||||
|
||||
@ -133,7 +135,7 @@ Page({
|
||||
</wd-cell>
|
||||
```
|
||||
|
||||
### 设置左侧宽度
|
||||
## 设置左侧宽度
|
||||
|
||||
设置 `title-width` 属性，label 内容超出则会 ... 隐藏，如果有个性化需求，使用插槽实现。
|
||||
|
||||
@ -141,7 +143,7 @@ Page({
|
||||
<wd-cell title="标题文字" label="这里是文字描述这里是文字描述这里是文字描述" title-width="200px" value="内容" />
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
## 自定义内容
|
||||
|
||||
`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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Checkbox 复选框
|
||||
<frame/>
|
||||
|
||||
# Checkbox 复选框
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值，是否选中，单独使用时值为 `boolean` 类型。
|
||||
|
||||
@ -21,7 +23,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 修改图标形状
|
||||
## 修改图标形状
|
||||
|
||||
修改 `shape` 属性，可选值为 'circle'、'square'、'button'，默认为 'circle'。
|
||||
|
||||
@ -30,7 +32,7 @@ Page({
|
||||
<wd-checkbox value="{{true}}" shape="button">沃特</wd-checkbox>
|
||||
```
|
||||
|
||||
### 修改选中的颜色
|
||||
## 修改选中的颜色
|
||||
|
||||
设置 `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({
|
||||
</wd-checkbox-group>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,8 +1,10 @@
|
||||
## ColPicker 多列选择器
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-col-picker label="禁用" disabled value="{{value}}" columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 只读
|
||||
## 只读
|
||||
|
||||
设置 `readonly` 属性。
|
||||
|
||||
@ -224,7 +226,7 @@ Page({
|
||||
<wd-col-picker label="禁用" readonly value="{{value}}" columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 禁用选项
|
||||
## 禁用选项
|
||||
|
||||
`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({
|
||||
<wd-col-picker label="标题" value="{{value}}" title="选择地址" columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 确定前校验
|
||||
## 确定前校验
|
||||
|
||||
设置 `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({
|
||||
<wd-col-picker label="选择地址" value="{{value}}" error columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 必填样式
|
||||
## 必填样式
|
||||
|
||||
设置 `required` 属性，展示必填样式。
|
||||
|
||||
@ -439,7 +441,7 @@ Page({
|
||||
<wd-col-picker label="选择地址" value="{{value}}" required columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 选择器大小
|
||||
## 选择器大小
|
||||
|
||||
通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。
|
||||
|
||||
@ -447,7 +449,7 @@ Page({
|
||||
<wd-col-picker label="选择地址" value="{{value}}" size="large" columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 值靠右展示
|
||||
## 值靠右展示
|
||||
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
@ -455,7 +457,7 @@ Page({
|
||||
<wd-col-picker label="选择地址" align-right value="{{value}}" columns="{{areaData}}" column-change="{{columnChange}}" bind:confirm="handleConfirm"></wd-col-picker>
|
||||
```
|
||||
|
||||
### 自定义选择器
|
||||
## 自定义选择器
|
||||
|
||||
如果默认的 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 | 左侧插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Collapse 折叠面板
|
||||
<frame/>
|
||||
|
||||
# Collapse 折叠面板
|
||||
|
||||
|
||||
### 基本使用
|
||||
## 基本使用
|
||||
|
||||
`value` 为绑定值，可以为 array 类型（普通折叠）、 string 类型（手风琴）和 boolean 类型（收起展开查看更多）。CollapseItem 的 `title` 和 `name` 为必填。`name` 用于标识该折叠栏。
|
||||
##由于微信小程序非双向绑定，因此需要事件手动赋值到当前页面##
|
||||
@ -31,7 +33,7 @@ page({
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
### 手风琴
|
||||
## 手风琴
|
||||
|
||||
设置 `accordion` 属性。
|
||||
|
||||
@ -49,7 +51,7 @@ page({
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
给 CollapseItem 设置 `disabled` 属性，禁用某个折叠栏。
|
||||
|
||||
@ -67,7 +69,7 @@ page({
|
||||
</wd-collapse>
|
||||
```
|
||||
|
||||
### 查看更多
|
||||
## 查看更多
|
||||
|
||||
Collapse 可以单独使用，通过设置 `viewmore` 属性，将其转化为查看更多的折叠类型，同时可以设置 `line-num` 修改收起时的显示行数。这时候的 `value` 为 boolean 类型。
|
||||
|
||||
@ -76,7 +78,7 @@ Collapse 可以单独使用，通过设置 `viewmore` 属性，将其转化为
|
||||
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
|
||||
</wd-collapse>
|
||||
```
|
||||
### 查看更多-使用插槽
|
||||
## 查看更多-使用插槽
|
||||
Collapse 查看更多的模式下，可以使用插槽定义自己想要的折叠处样式，使用 `use-more-slot` 设置插槽开启。并且可以使用外部样式类 `custom-more-slot-class` 为自定义插槽设置样式。
|
||||
```css
|
||||
.more-slot{
|
||||
@ -90,7 +92,7 @@ Collapse 查看更多的模式下，可以使用插槽定义自己想要的折
|
||||
</wd-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根结点样式 | - |
|
||||
@ -1,9 +1,11 @@
|
||||
## Curtain 幕帘
|
||||
<frame/>
|
||||
|
||||
# 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 | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,8 +1,10 @@
|
||||
## DatetimePicker 日期时间选择器
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-datetime-picker label="日期选择" size="large" value="{{value}}" />
|
||||
```
|
||||
|
||||
### 必填属性
|
||||
## 必填属性
|
||||
|
||||
设置 `required` 属性开启表单必填。
|
||||
|
||||
@ -176,7 +178,7 @@ Page({
|
||||
<wd-datetime-picker label="必填属性" error value="{{value}}" required/>
|
||||
```
|
||||
|
||||
### 错误状态
|
||||
## 错误状态
|
||||
|
||||
设置 `error` 属性，选择器的值显示为红色。
|
||||
|
||||
@ -184,7 +186,7 @@ Page({
|
||||
<wd-datetime-picker label="日期选择" error value="{{value}}" />
|
||||
```
|
||||
|
||||
### 值靠右展示
|
||||
## 值靠右展示
|
||||
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
@ -192,7 +194,7 @@ Page({
|
||||
<wd-datetime-picker label="日期选择" align-right value="{{value}}" />
|
||||
```
|
||||
|
||||
### 确定前校验
|
||||
## 确定前校验
|
||||
|
||||
设置 `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({
|
||||
</wd-datetime-picker>
|
||||
```
|
||||
|
||||
### 时间范围选择
|
||||
## 时间范围选择
|
||||
|
||||
当 `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 | 左侧标题插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## DatetimePickerView 日期时间选择器视图
|
||||
<frame/>
|
||||
|
||||
# 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
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Divider 分割线
|
||||
<frame/>
|
||||
|
||||
# Divider 分割线
|
||||
|
||||
|
||||
### 基本使用
|
||||
## 基本使用
|
||||
|
||||
使用默认插槽设置内容。
|
||||
|
||||
@ -9,7 +11,7 @@
|
||||
<wd-divider>这是分割线</wd-divider>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
## 自定义颜色
|
||||
|
||||
设置 `color` 属性。
|
||||
|
||||
@ -17,19 +19,19 @@
|
||||
<wd-divider color="#4D80F0">自定义颜色</wd-divider>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
| color | 自定义颜色，所有颜色的写法 | string | - | - | - |
|
||||
|
||||
### Slot
|
||||
## Slot
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
| default | 内容 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|-----|---------|
|
||||
@ -1,9 +1,11 @@
|
||||
<frame/>
|
||||
|
||||
# DropMenu 下拉菜单
|
||||
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
## 基础用法
|
||||
|
||||
基础用法需要绑定 `value` 值以及 `options` 属性。
|
||||
|
||||
@ -58,7 +60,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 自定义菜单内容
|
||||
## 自定义菜单内容
|
||||
|
||||
通过插槽 `default` 可以自定义 `DropMenuItem` 的内容，此时需要使用实例上的 `close` 方法手动控制菜单的关闭。
|
||||
|
||||
@ -102,7 +104,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 自定义菜单选项
|
||||
## 自定义菜单选项
|
||||
|
||||
自己通过 flex 布局做自定义筛选展示。
|
||||
|
||||
@ -117,7 +119,7 @@ Page({
|
||||
</view>
|
||||
```
|
||||
|
||||
### 向上展开
|
||||
## 向上展开
|
||||
|
||||
将 `direction` 属性值设置为 `up`，菜单即可向上展开
|
||||
|
||||
@ -128,7 +130,7 @@ Page({
|
||||
</wd-drop-menu>
|
||||
```
|
||||
|
||||
### 禁用菜单
|
||||
## 禁用菜单
|
||||
|
||||
```html
|
||||
<wd-drop-menu>
|
||||
@ -137,7 +139,7 @@ Page({
|
||||
</wd-drop-menu>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,4 +1,6 @@
|
||||
## Form 表单组合
|
||||
<frame/>
|
||||
|
||||
# Form 表单组合
|
||||
|
||||
本章节主要讲如何将多个 form 表单组件进行组合，形成一个完整的表单页面。
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<frame/>
|
||||
|
||||
# Grid 宫格
|
||||
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
## 基础用法
|
||||
|
||||
基础用法需要绑定 `icon` 值以及 `text` 属性。默认显示一行。
|
||||
|
||||
@ -17,7 +19,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 自定义列数
|
||||
## 自定义列数
|
||||
|
||||
`column` 可以用来自定义宫格列数。未定义 `column` 属性时，默认显示为一行，定义该属性后，组件内部根据 `column` 属性自行划分行数。
|
||||
|
||||
@ -32,7 +34,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 自定义背景颜色
|
||||
## 自定义背景颜色
|
||||
|
||||
`bg-color` 可以用来自定义宫格背景颜色。
|
||||
|
||||
@ -45,7 +47,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 开启边框
|
||||
## 开启边框
|
||||
|
||||
`border` 可以用来开启边框线展示。
|
||||
|
||||
@ -60,7 +62,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 内容插槽
|
||||
## 内容插槽
|
||||
|
||||
通过默认插槽可以自定义 `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 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 设定格间隙
|
||||
## 设定格间隙
|
||||
|
||||
通过 `gutter` 属性设置格子之间的距离。
|
||||
|
||||
@ -184,7 +186,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 页面导航
|
||||
## 页面导航
|
||||
|
||||
通过 `clickable` 属性开启可点击状态, 可以绑定 `click` 事件。
|
||||
|
||||
@ -199,7 +201,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 提示信息
|
||||
## 提示信息
|
||||
|
||||
设置 `is-dot` 属性后，会在图标右上角展示一个小红点。
|
||||
|
||||
@ -212,7 +214,7 @@
|
||||
</wd-grid>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,8 +1,10 @@
|
||||
## Icon 图标
|
||||
<frame/>
|
||||
|
||||
# Icon 图标
|
||||
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
通过 `name` 属性设置使用哪个图标。
|
||||
|
||||
@ -10,7 +12,7 @@
|
||||
<wd-icon name="add-circle" />
|
||||
```
|
||||
|
||||
### 图标颜色
|
||||
## 图标颜色
|
||||
|
||||
设置 `color` 属性。
|
||||
|
||||
@ -18,7 +20,7 @@
|
||||
<wd-icon name="add-circle" color="#0083ff" />
|
||||
```
|
||||
|
||||
### 图标大小
|
||||
## 图标大小
|
||||
|
||||
设置 `size` 属性。
|
||||
|
||||
@ -26,7 +28,7 @@
|
||||
<wd-icon name="add-circle" size="20px" />
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
| name | 使用的图标名字，可以使用链接图片 | string | - | - | - |
|
||||
@ -34,7 +36,7 @@
|
||||
| size | 图标的字体大小 | string | - | inherit | - |
|
||||
| custom-style | 根结点样式 | string | - | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Img 图片
|
||||
<frame/>
|
||||
|
||||
# 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}` | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,4 +1,6 @@
|
||||
## ImgCropper 图片裁剪
|
||||
<frame/>
|
||||
|
||||
# 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 |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Input 输入框
|
||||
<frame/>
|
||||
|
||||
# Input 输入框
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值。
|
||||
`bindChange`为绑定change事件。
|
||||
@ -23,7 +25,7 @@ page({
|
||||
<wd-input type="text" value="{{ value }}" placeholder="请输入用户名" bind:change="handleChange"/>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -31,7 +33,7 @@ page({
|
||||
<wd-input value="input" disabled />
|
||||
```
|
||||
|
||||
### 只读
|
||||
## 只读
|
||||
|
||||
设置 `readonly` 属性。
|
||||
|
||||
@ -39,7 +41,7 @@ page({
|
||||
<wd-input value="{{ value }}" readonly />
|
||||
```
|
||||
|
||||
### 清空按钮
|
||||
## 清空按钮
|
||||
|
||||
设置 `clearable` 属性。
|
||||
|
||||
@ -47,7 +49,7 @@ page({
|
||||
<wd-input value="{{ value }}" clearable bind:change="handleChange"/>
|
||||
```
|
||||
|
||||
### 密码输入框
|
||||
## 密码输入框
|
||||
|
||||
设置 `show-password` 属性。
|
||||
|
||||
@ -55,7 +57,7 @@ page({
|
||||
<wd-input value="{{ value }}" clearable show-password bind:change="handleChange"/>
|
||||
```
|
||||
|
||||
### 前后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({
|
||||
<wd-input value="{{ value }}" maxlength="20" show-word-limit bind:change="handleChange"/>
|
||||
```
|
||||
|
||||
### 文本域
|
||||
## 文本域
|
||||
|
||||
设置 `type` 为 'textarea`。
|
||||
|
||||
@ -105,7 +107,7 @@ page({
|
||||
<wd-input value="{{ value }}" auto-height bind:change="handleChange" clearable/>
|
||||
```
|
||||
|
||||
### 设置label标题
|
||||
## 设置label标题
|
||||
|
||||
设置 `label` 标题，可以和 `cell-group` 组合使用，形成 `cell` 展示类型。可以通过 `label-width` 设置标题宽度，默认为 '33%'。
|
||||
|
||||
@ -113,7 +115,7 @@ page({
|
||||
<wd-input type="text" label="基本用法" value="{{ value }}" placeholder="请输入..." />
|
||||
```
|
||||
|
||||
### 必填样式
|
||||
## 必填样式
|
||||
|
||||
设置了 `label` 的情况下，设置 `required` 属性，展示必填样式。
|
||||
|
||||
@ -121,7 +123,7 @@ page({
|
||||
<wd-input value="{{ value }}" placeholder="请输入..." label="必填" required></wd-input>
|
||||
```
|
||||
|
||||
### 输入框大小
|
||||
## 输入框大小
|
||||
|
||||
通过设置 `size` 修改输入框大小，将 `size` 设置为 'large' 时字号为 16px。
|
||||
|
||||
@ -129,7 +131,7 @@ page({
|
||||
<wd-input type="text" label="基本用法" size="large" value="{{ value }}" placeholder="请输入..." />
|
||||
```
|
||||
|
||||
### 错误状态
|
||||
## 错误状态
|
||||
|
||||
设置 `error` 属性，输入框的值显示为红色。
|
||||
|
||||
@ -137,7 +139,7 @@ page({
|
||||
<wd-input type="text" value="{{ value }}" placeholder="请输入用户名" error />
|
||||
```
|
||||
|
||||
### 垂直居中
|
||||
## 垂直居中
|
||||
|
||||
当设置 `label` 标题时，默认为顶部居中，设置 `center` 属性可以使标题和输入框垂直居中。
|
||||
|
||||
@ -145,7 +147,7 @@ page({
|
||||
<wd-input type="text" label="基本用法" value="{{ value }}" center />
|
||||
```
|
||||
|
||||
### 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 | 后置插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## InputNumber 计数器
|
||||
<frame/>
|
||||
|
||||
# InputNumber 计数器
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
通过监听 `change` 事件获取`value`变化后的值。
|
||||
|
||||
@ -22,7 +24,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 设置步长
|
||||
## 设置步长
|
||||
|
||||
设置 `step` 步长，即每次value变化的绝对值。
|
||||
|
||||
@ -30,7 +32,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" step="{{ 2 }}" />
|
||||
```
|
||||
|
||||
### 设置最小最大值
|
||||
## 设置最小最大值
|
||||
|
||||
设置 `min` 最小值，`max` 最大值。`min` 默认为1。
|
||||
|
||||
@ -38,7 +40,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" min="{{ 3 }}" max="{{ 10 }}" />
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -46,7 +48,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" disabled />
|
||||
```
|
||||
|
||||
### 无输入框
|
||||
## 无输入框
|
||||
|
||||
设置 `without-input` ，不展示输入框。
|
||||
|
||||
@ -54,7 +56,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" without-input />
|
||||
```
|
||||
|
||||
### 设置小数精度
|
||||
## 设置小数精度
|
||||
|
||||
设置 `precision` 属性，默认为0。
|
||||
|
||||
@ -62,7 +64,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" precision="{{ 2 }}" step="{{ 0.1 }}" />
|
||||
```
|
||||
|
||||
### 严格步数倍数
|
||||
## 严格步数倍数
|
||||
|
||||
设置 `step-strictly` 属性，强制输入框输入内容为 `step` 的倍数（当用户输入完成后触发change时，会更正输入框内容）。
|
||||
|
||||
@ -70,7 +72,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" step-strictly step="{{ 2 }}" />
|
||||
```
|
||||
|
||||
### 修改输入框宽度
|
||||
## 修改输入框宽度
|
||||
|
||||
设置 `input-width` 设置宽度，该值接受1个字符串，可以是表示尺寸的任何单位。
|
||||
|
||||
@ -78,7 +80,7 @@ Page({
|
||||
<wd-input-number value="{{ value }}" bind:change="handleChange" input-width="70px" />
|
||||
```
|
||||
|
||||
### 允许空值，设置 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 }` | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,3 +1,5 @@
|
||||
<frame/>
|
||||
|
||||
# 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 @@
|
||||
</wd-row>
|
||||
```
|
||||
|
||||
### 分栏间隔
|
||||
## 分栏间隔
|
||||
|
||||
通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
@ -83,30 +85,30 @@
|
||||
</wd-row>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Loading 加载指示器
|
||||
<frame/>
|
||||
|
||||
# Loading 加载指示器
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
基本用法，适用于按钮加载状态和页面轻提示。
|
||||
|
||||
@ -9,7 +11,7 @@
|
||||
<wd-loading />
|
||||
```
|
||||
|
||||
### 修改指示器类型
|
||||
## 修改指示器类型
|
||||
|
||||
通过 `type` 修改指示器的类型，可选值为 'outline'，适用于通用模块加载。
|
||||
|
||||
@ -17,7 +19,7 @@
|
||||
<wd-loading type="outline" />
|
||||
```
|
||||
|
||||
### 修改颜色
|
||||
## 修改颜色
|
||||
|
||||
通过 `color` 属性修改指示器的颜色。比如修改为白色，同时设置背景为黑色。
|
||||
|
||||
@ -42,7 +44,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 修改指示器大小
|
||||
## 修改指示器大小
|
||||
|
||||
通过 `size` 属性设置指示器的大小，默认为大小 '32px'，属性支持 `number`/`string` 类型。
|
||||
|
||||
@ -52,7 +54,7 @@
|
||||
<wd-loading size="50px" />
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -60,7 +62,7 @@
|
||||
| color | 设置加载指示器颜色 | string | - | #4D80F0 | - |
|
||||
| size | 设置加载指示器大小 | number / string | - | 32px | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,10 @@
|
||||
## loadmore 加载更多
|
||||
|
||||
<frame/>
|
||||
|
||||
# loadmore 加载更多
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
在需要进行加载的列表的底部引入该组件即可。当滑动到列表底部时，通过设置`state`展示不同的文案。
|
||||
|
||||
@ -21,7 +24,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义文案
|
||||
## 自定义文案
|
||||
|
||||
通过设置`loading-text`、`finished-text`、`error-text`配合`state`展示不同状态时的文案
|
||||
|
||||
@ -33,7 +36,7 @@
|
||||
<wd-loadmore custom-class="loadmore" state="error" error-text="自定义错误文案"/>
|
||||
```
|
||||
|
||||
### 点击继续加载
|
||||
## 点击继续加载
|
||||
|
||||
当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事件 | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## MessageBox 弹框
|
||||
<frame/>
|
||||
|
||||
# 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 |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|-----|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## NoticeBar 通知栏
|
||||
<frame/>
|
||||
|
||||
# NoticeBar 通知栏
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置 `text` 文本内容和 `prefix` 左侧图标。
|
||||
|
||||
@ -12,7 +14,7 @@
|
||||
/>
|
||||
```
|
||||
|
||||
### 类型修改
|
||||
## 类型修改
|
||||
|
||||
设置 `type` 可修改通知类型，通知类型共有三种 `info`|`warning`|`danger`，默认值为`warning`。
|
||||
|
||||
@ -40,7 +42,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 插槽演示
|
||||
## 插槽演示
|
||||
|
||||
```html
|
||||
<wd-notice-bar>
|
||||
@ -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 | 后置插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Pagination 分页
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-pagination value="{{ value }}" bind:change="handleChange" show-icon ></wd-pagination>
|
||||
```
|
||||
|
||||
### 文字提示
|
||||
## 文字提示
|
||||
|
||||
设置 `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为当前值 |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Picker 选择器视图
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
<wd-picker columns="{{columns}}" label="只读" value="{{value}}" readonly />
|
||||
```
|
||||
|
||||
### 文案标题
|
||||
## 文案标题
|
||||
|
||||
设置 `title` 属性。
|
||||
|
||||
```html
|
||||
<wd-picker label="标题" columns="{{columns7}}" title="文案标题"/>
|
||||
```
|
||||
### 加载中
|
||||
## 加载中
|
||||
|
||||
设置 `loading` 属性。
|
||||
|
||||
@ -72,7 +74,7 @@ Page({
|
||||
<wd-picker-view columns="{{columns}}" loading />
|
||||
```
|
||||
|
||||
### 多列
|
||||
## 多列
|
||||
|
||||
`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({
|
||||
<wd-picker label="单列选项" size="large" value="{{value}}" columns="{{columns}}" />
|
||||
```
|
||||
|
||||
### 必填属性
|
||||
## 必填属性
|
||||
|
||||
设置 `required` 属性，展示必填样式。
|
||||
|
||||
@ -165,7 +167,7 @@ Page({
|
||||
<wd-picker label="必填属性" error columns="{{columns}}" value="{{value}}" required/>
|
||||
```
|
||||
|
||||
### 错误状态
|
||||
## 错误状态
|
||||
|
||||
设置 `error` 属性，选择器的值显示为红色。
|
||||
|
||||
@ -173,7 +175,7 @@ Page({
|
||||
<wd-picker label="单列选项" error columns="{{columns}}" value="{{value}}"/>
|
||||
```
|
||||
|
||||
### 值靠右展示
|
||||
## 值靠右展示
|
||||
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
@ -181,7 +183,7 @@ Page({
|
||||
<wd-picker label="单列选项" align-right columns="{{columns}}" value="{{value}}"/>
|
||||
```
|
||||
|
||||
### 确定前校验
|
||||
## 确定前校验
|
||||
|
||||
设置 `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({
|
||||
</wd-picker>
|
||||
```
|
||||
|
||||
### 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 | 左侧标题插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,6 +1,8 @@
|
||||
## PickerView 选择器视图
|
||||
<frame/>
|
||||
|
||||
### 基本用法
|
||||
# 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
|
||||
<wd-picker-view columns="{{columns}}" loading />
|
||||
```
|
||||
### 多列
|
||||
## 多列
|
||||
|
||||
`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 | 当滚动选择结束时候触发事件 | - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Popover 气泡
|
||||
<frame/>
|
||||
|
||||
# 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Popup 弹出层
|
||||
<frame/>
|
||||
|
||||
# Popup 弹出层
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
通过 `show` 属性设置显示隐藏，监听 `bind:close` 事件修改 `show`。
|
||||
|
||||
@ -9,7 +11,7 @@
|
||||
<wd-popup show="{{ show }}" custom-style="padding: 30px 40px;" bind:close="handleClose">内容</wd-popup>
|
||||
```
|
||||
|
||||
### 弹出位置
|
||||
## 弹出位置
|
||||
|
||||
设置 `position`，默认为 'center'，可选值 'top', 'right', 'bottom', 'left'。
|
||||
|
||||
@ -17,7 +19,7 @@
|
||||
<wd-popup show="{{ show }}" position="top" custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
|
||||
```
|
||||
|
||||
### 关闭按钮
|
||||
## 关闭按钮
|
||||
|
||||
设置 `closable` 属性。
|
||||
|
||||
@ -25,7 +27,7 @@
|
||||
<wd-popup show="{{ show }}" position="bottom" closable custom-style="height: 200px;" bind:close="handleClose"></wd-popup>
|
||||
```
|
||||
|
||||
### 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 | 离开后触发| - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Progress 进度条
|
||||
<frame/>
|
||||
|
||||
# Progress 进度条
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置百分比 `percentage`。
|
||||
|
||||
@ -9,7 +11,7 @@
|
||||
<wd-progress percentage="30" />
|
||||
```
|
||||
|
||||
### 隐藏进度文字
|
||||
## 隐藏进度文字
|
||||
|
||||
设置 `hide-text` 隐藏进度文字。
|
||||
|
||||
@ -17,7 +19,7 @@
|
||||
<wd-progress percentage="60" hide-text>
|
||||
```
|
||||
|
||||
### 设置状态
|
||||
## 设置状态
|
||||
|
||||
设置 `status`，告知用户当前状态和预期。
|
||||
|
||||
@ -26,7 +28,7 @@
|
||||
<wd-progress percentage="70" hide-text status="danger" />
|
||||
```
|
||||
|
||||
### 修改颜色
|
||||
## 修改颜色
|
||||
|
||||
设置 `color` 修改进度条颜色。
|
||||
|
||||
@ -72,7 +74,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|-----|------|-------|-------|--------|
|
||||
@ -82,7 +84,7 @@ Page({
|
||||
| status | 进度条状态 | string | success / danger | - | - |
|
||||
| duration | 进度增加1%所需毫秒数 | number | - | 30 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Radio 单选框
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### 同行展示
|
||||
## 同行展示
|
||||
|
||||
设置 `inline` 属性，使单选框在同一行展示。
|
||||
|
||||
@ -107,7 +109,7 @@ Page({
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### 修改选中的颜色
|
||||
## 修改选中的颜色
|
||||
|
||||
设置 `checked-color` 属性。
|
||||
|
||||
@ -118,7 +120,7 @@ Page({
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
可以在 `radio-group` 上面设置 `disabled`，禁用所有单选框，也可以在单个单选框上面设置 `disabled` 属性，禁用某个单选框。
|
||||
|
||||
@ -129,7 +131,7 @@ Page({
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### 尺寸
|
||||
## 尺寸
|
||||
|
||||
设置 `size` 属性，可选 `large`。
|
||||
|
||||
@ -140,7 +142,7 @@ Page({
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### Props优先级
|
||||
## Props优先级
|
||||
|
||||
radio设置的props优先级比radioGroup上设置的props优先级更高
|
||||
|
||||
@ -152,7 +154,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
|
||||
</wd-radio-group>
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Rate 评分
|
||||
<frame/>
|
||||
|
||||
# Rate 评分
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置`value`分数，设置`num`总分数，默认为5分，监听 `change` 事件获取新值。
|
||||
|
||||
@ -22,7 +24,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 只读
|
||||
## 只读
|
||||
|
||||
设置 `readonly` 属性。
|
||||
|
||||
@ -30,7 +32,7 @@ Page({
|
||||
<wd-rate value="{{3}}" readonly />
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性和`disabled-color`
|
||||
|
||||
@ -38,7 +40,7 @@ Page({
|
||||
<wd-rate value="{{2}}" disabled />
|
||||
```
|
||||
|
||||
### 修改颜色
|
||||
## 修改颜色
|
||||
|
||||
可以通过 `color` 属性修改未选中的颜色，`active-color` 修改选中的颜色。
|
||||
|
||||
@ -47,7 +49,7 @@ Page({
|
||||
<wd-rate value="{{4}}" active-color="{{['linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)', 'linear-gradient(315deg, rgba(245,34,34,1) 0%,rgba(255,117,102,1) 100%)']}}" />
|
||||
```
|
||||
|
||||
### 修改icon
|
||||
## 修改icon
|
||||
|
||||
可以通过 `icon` 属性修改未选中的图标，`active-icon` 修改选中的图标。
|
||||
|
||||
@ -55,7 +57,7 @@ Page({
|
||||
<wd-rate value="{{3}}" icon="wd-icon-dong" active-icon="wd-icon-dong" active-color="#4D80F0"/>
|
||||
```
|
||||
|
||||
### 修改大小、间隔
|
||||
## 修改大小、间隔
|
||||
|
||||
可以通过 `size` 属性修改图标的大小，`space` 修改图标之间的间隔。
|
||||
|
||||
@ -63,7 +65,7 @@ Page({
|
||||
<wd-rate value="{{3}}" size="30px" space="10px"/>
|
||||
```
|
||||
|
||||
### 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 } | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,14 +1,16 @@
|
||||
## Resize 监听元素尺寸变化
|
||||
<frame/>
|
||||
|
||||
# Resize 监听元素尺寸变化
|
||||
|
||||
当组件包裹的文档流尺寸发生变化时，触发 `size` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化，重新获取 dom 尺寸和位置，进行内容展示的计算操作。
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
> 不要给此组件增加任何外部样式
|
||||
|
||||
```html
|
||||
<wd-resize bind:resize="handleResize">
|
||||
<wd-resize @resize="handleResize">
|
||||
<view style="background: #4d80f0; width: {{width}};height: {{height}}"></view>
|
||||
</wd-resize>
|
||||
```
|
||||
@ -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}` | - |
|
||||
@ -1,7 +1,9 @@
|
||||
## Search 搜索框
|
||||
<frame/>
|
||||
|
||||
# Search 搜索框
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value`设置输入框绑定值、`focus`绑定聚焦事件、`change` 绑定输入事件，`blur`绑定失焦事件，`search` 绑定搜索事件，`cancel` 绑定取消事件，`clear` 绑定清空事件。
|
||||
|
||||
@ -47,7 +49,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 浅色主题
|
||||
## 浅色主题
|
||||
|
||||
设置 `light` 属性，将组件背景色和输入框背景色反转。
|
||||
|
||||
@ -55,13 +57,13 @@ Page({
|
||||
<wd-search light />
|
||||
```
|
||||
|
||||
### 输入框提示文案靠左
|
||||
## 输入框提示文案靠左
|
||||
设置 `placeholder-left` 属性。
|
||||
```html
|
||||
<wd-search placeholder-left />
|
||||
```
|
||||
|
||||
### 隐藏取消按钮
|
||||
## 隐藏取消按钮
|
||||
|
||||
设置 `hide-cancel` 属性。
|
||||
|
||||
@ -69,7 +71,7 @@ Page({
|
||||
<wd-search hide-cancel />
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -83,7 +85,7 @@ Page({
|
||||
<wd-search hide-cancel disabled />
|
||||
```
|
||||
|
||||
### 自定义左侧插槽
|
||||
## 自定义左侧插槽
|
||||
|
||||
通过使用 `prefix` 插槽自定义搜索框左侧内容。
|
||||
|
||||
@ -135,7 +137,7 @@ Page({
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义文案
|
||||
## 自定义文案
|
||||
|
||||
通过设置 `placeholder` 修改输入框提示文案，`cancel-txt` 修改取消按钮文案。
|
||||
|
||||
@ -150,7 +152,7 @@ Page({
|
||||
</wd-search>
|
||||
```
|
||||
|
||||
### 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 | 输入框左侧自定义内容 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## SelectPicker 单复选选择器
|
||||
<frame/>
|
||||
|
||||
# SelectPicker 单复选选择器
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`label` 设置左侧文本内容；
|
||||
|
||||
@ -45,7 +47,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 类型切换
|
||||
## 类型切换
|
||||
|
||||
`type` 默认值为 `checkbox`， 为默认值时，value值类型为 `Array` 类型
|
||||
|
||||
@ -82,7 +84,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -90,7 +92,7 @@ Page({
|
||||
<wd-select-picker label="禁用" value="{{ value }}" columns="{{ columns }}" disabled binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 只读
|
||||
## 只读
|
||||
|
||||
设置 `readonly` 属性。
|
||||
|
||||
@ -98,7 +100,7 @@ Page({
|
||||
<wd-select-picker label="只读" value="{{ value }}" columns="{{ columns }}" readonly binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 禁用选项
|
||||
## 禁用选项
|
||||
|
||||
`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({
|
||||
<wd-select-picker label="标题" value="{{ value }}" columns="{{ columns }}" title="多选" binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 错误状态
|
||||
## 错误状态
|
||||
|
||||
设置 `error` 属性，选择器的值显示为红色。
|
||||
|
||||
@ -241,7 +243,7 @@ Page({
|
||||
<wd-select-picker label="错误" value="{{ value }}" columns="{{ columns }}" error binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 必填样式
|
||||
## 必填样式
|
||||
|
||||
设置 `required` 属性，展示必填样式。
|
||||
|
||||
@ -249,7 +251,7 @@ Page({
|
||||
<wd-select-picker label="必填" value="{{ value }}" columns="{{ columns }}" required binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 选择器大小
|
||||
## 选择器大小
|
||||
|
||||
通过设置 `size` 修改选择器大小，将 `size` 设置为 'large' 时字号为 16px。
|
||||
|
||||
@ -257,7 +259,7 @@ Page({
|
||||
<wd-select-picker label="大尺寸" value="{{ value }}" columns="{{ columns }}" size="large" binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 值靠右展示
|
||||
## 值靠右展示
|
||||
|
||||
设置 `align-right` 属性，选择器的值靠右展示。
|
||||
|
||||
@ -265,7 +267,7 @@ Page({
|
||||
<wd-select-picker label="值靠右展示" value="{{ value }}" columns="{{ columns }}" align-right binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 可搜索
|
||||
## 可搜索
|
||||
|
||||
设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的占位符。
|
||||
|
||||
@ -273,7 +275,7 @@ Page({
|
||||
<wd-select-picker label="可搜索" value="{{ value }}" columns="{{ columns }}" filterable binconfirm="handleConfirm"></wd-select-picker>
|
||||
```
|
||||
|
||||
### 自定义选择器
|
||||
## 自定义选择器
|
||||
|
||||
如果默认的 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 | 左侧插槽 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Slider 滑块
|
||||
<frame/>
|
||||
|
||||
# Slider 滑块
|
||||
|
||||
支持单向滑块和双向滑块。
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。
|
||||
```html
|
||||
@ -21,7 +23,7 @@ page({
|
||||
}
|
||||
})
|
||||
```
|
||||
### 双滑块
|
||||
## 双滑块
|
||||
|
||||
双滑块模式下 `value` 为 `二元数组` 类型。
|
||||
|
||||
@ -40,7 +42,7 @@ page({
|
||||
}
|
||||
})
|
||||
```
|
||||
### 最大值最小值
|
||||
## 最大值最小值
|
||||
|
||||
设置 `min` 最小值，`min` 最大值。
|
||||
|
||||
@ -48,7 +50,7 @@ page({
|
||||
<wd-slider value="{{ value }}" min="{{ 4 }}" max="{{ 10000 }}" bind:dragend="handleChange"/>
|
||||
```
|
||||
|
||||
### 隐藏文案
|
||||
## 隐藏文案
|
||||
|
||||
设置 `hide-label` 隐藏滑块当前值。
|
||||
|
||||
@ -62,7 +64,7 @@ page({
|
||||
<wd-slider value="{{ value }}" hide-min-max bind:dragend="handleChange"/>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 属性。
|
||||
|
||||
@ -70,7 +72,7 @@ page({
|
||||
<wd-slider value="{{ value }}" disabled bind:dragend="handleChange"/>
|
||||
```
|
||||
|
||||
### 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 | 根结点样式 | - |
|
||||
@ -1,7 +1,9 @@
|
||||
## SortButton 排序按钮
|
||||
<frame/>
|
||||
|
||||
# SortButton 排序按钮
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value` 为组件状态，其值为：`-1、0、1`，分别代表：降序、未选中状态、升序。 `title` 为展示文案，按钮默认处于未选中状态，监听 `bind:change` 事件获取新值。
|
||||
|
||||
@ -22,7 +24,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 按钮重置
|
||||
## 按钮重置
|
||||
|
||||
双箭头状态下(默认状态)通过设置 `allow-reset` 允许重置按钮为未选中状态
|
||||
|
||||
@ -30,7 +32,7 @@ Page({
|
||||
<wd-sort-button title="价格" allow-reset/>
|
||||
```
|
||||
|
||||
### 优先切换为降序
|
||||
## 优先切换为降序
|
||||
|
||||
通过设置 `desc-first` 优先切换为降序，默认为升序。
|
||||
|
||||
@ -38,7 +40,7 @@ Page({
|
||||
<wd-sort-button value="{{ value }}" desc-first title="价格" />
|
||||
```
|
||||
|
||||
### 取消展示下划线
|
||||
## 取消展示下划线
|
||||
|
||||
当只有一个排序按钮时，应该不展示下划线，设置 `line` 属性为 `false`。
|
||||
|
||||
@ -46,7 +48,7 @@ Page({
|
||||
<wd-sort-button value="{{ value }}" line="{{false}}" title="价格" />
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|--------|
|
||||
@ -56,13 +58,13 @@ Page({
|
||||
| desc-first | 优先切换为降序，不开启则默认优先切换为升序 | boolean | - | false | - |
|
||||
| line | 展示下划线，当只有一个排序按钮时，应该不展示下划线 | boolean | - | true | - |
|
||||
|
||||
### Events
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
| bind:change | 监听排序修改 | event.detail = { value } | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
| custom-class | 根结点样式 | - |
|
||||
@ -1,11 +1,13 @@
|
||||
## StatusTip 缺省提示
|
||||
<frame/>
|
||||
|
||||
# StatusTip 缺省提示
|
||||
|
||||
一般用于兜底占位展示。
|
||||
|
||||
> 若图片显示安全域名问题，需将 img11.360buyimg.com 域名添加为业务域名。
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置 `type` 修改展示缺省图片类型，默认为 'network'，可选值 'search', 'network', 'content', 'collect', 'comment', 'halo', 'message'。可设置 `tip` 来控制展示提示文案。
|
||||
|
||||
@ -19,7 +21,7 @@
|
||||
<wd-status-tip type="message" tip="已订阅全部消息"/>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Steps 标签页
|
||||
<frame/>
|
||||
|
||||
# Steps 标签页
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`active` 为步骤进度，为 number 类型，步骤的下标。
|
||||
|
||||
@ -13,7 +15,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 水平居中
|
||||
## 水平居中
|
||||
|
||||
设置 `align-center` 水平居中，只对横向步骤条有效。
|
||||
|
||||
@ -25,7 +27,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 设置标题和描述信息
|
||||
## 设置标题和描述信息
|
||||
|
||||
可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。
|
||||
|
||||
@ -37,7 +39,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 修改图标
|
||||
## 修改图标
|
||||
|
||||
可以通过 `icon` 属性设置步骤的图标，传入图标的名称，也可以通过 `icon` 的 slot 插槽自定义图标，使用插槽需要设置 `icon-slot` 为 `true`。
|
||||
|
||||
@ -49,7 +51,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 竖向步骤条
|
||||
## 竖向步骤条
|
||||
|
||||
设置 `vertical` 属性。
|
||||
|
||||
@ -61,7 +63,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 点状步骤
|
||||
## 点状步骤
|
||||
|
||||
设置 `dot` 属性。
|
||||
|
||||
@ -73,7 +75,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 修改状态
|
||||
## 修改状态
|
||||
|
||||
设置 `status`，支持 'finished'（完成）、'process'（进行中）、'error'（失败） 三种状态。
|
||||
|
||||
@ -85,7 +87,7 @@
|
||||
</wd-steps>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Sticky 粘性布局
|
||||
<frame/>
|
||||
|
||||
# Sticky 粘性布局
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
将需要吸顶的内容包裹在 `wd-sticky` 组件内即可。
|
||||
|
||||
@ -13,7 +15,7 @@
|
||||
</wd-sticky>
|
||||
```
|
||||
|
||||
### 动态插入
|
||||
## 动态插入
|
||||
|
||||
`wd-sticky` 支持包裹动态生成的内容。
|
||||
|
||||
@ -49,7 +51,7 @@ page{
|
||||
```
|
||||
|
||||
|
||||
### 吸顶距离
|
||||
## 吸顶距离
|
||||
|
||||
通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。
|
||||
|
||||
@ -59,7 +61,7 @@ page{
|
||||
</wd-sticky>
|
||||
```
|
||||
|
||||
### 指定容器
|
||||
## 指定容器
|
||||
|
||||
将 `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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Swipe 轮播图
|
||||
<frame/>
|
||||
|
||||
# Swipe 轮播图
|
||||
|
||||
<p style="color: #ff0000;">！！！该组件尚未开发，不可使用</p>
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
默认自动轮播，并且循环轮播，轮播时间为 3000 ms。
|
||||
|
||||
@ -25,7 +27,7 @@
|
||||
</wd-swipe>
|
||||
```
|
||||
|
||||
### 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 {
|
||||
</script>
|
||||
```
|
||||
|
||||
### 纵向轮播
|
||||
## 纵向轮播
|
||||
|
||||
设置 `vertical` 属性，同时给轮播图设置高度 `height` 属性，如果是横向轮播，可以不用设置 `height` 属性。
|
||||
|
||||
@ -86,7 +88,7 @@ export default {
|
||||
</wd-swipe>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -1,4 +1,6 @@
|
||||
## SwipeAction 滑动操作
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
</wd-swipe-action>
|
||||
```
|
||||
|
||||
### 切换按钮
|
||||
## 切换按钮
|
||||
|
||||
> 可以通过设置`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({
|
||||
</wd-swipe-action>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|-----|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Switch 开关
|
||||
<frame/>
|
||||
|
||||
# Switch 开关
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置 `value` 值，监听 `change` 事件修改值。
|
||||
|
||||
@ -22,7 +24,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 修改值
|
||||
## 修改值
|
||||
|
||||
通过 `active-value` 属性修改开关打开时的值，`inactive-value` 属性修改开关关闭时的值。
|
||||
|
||||
@ -30,7 +32,7 @@ Page({
|
||||
<wd-switch value="{{ checked }}" active-value="沃特" inactive-value="商家后台" />
|
||||
```
|
||||
|
||||
### 修改颜色
|
||||
## 修改颜色
|
||||
|
||||
通过 `active-color` 属性修改开关打开时的颜色，`inactive-color` 属性修改开关关闭时的颜色。
|
||||
|
||||
@ -38,7 +40,7 @@ Page({
|
||||
<wd-switch value="{{ checked }}" active-color="#13ce66" inactive-color="#f00" />
|
||||
```
|
||||
|
||||
### 修改大小
|
||||
## 修改大小
|
||||
|
||||
设置 `size` 修改开关大小。
|
||||
|
||||
@ -46,11 +48,11 @@ Page({
|
||||
<wd-switch value="{{ checked }}" size="20px" />
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `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 } | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|-----|---------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Tab 标签页
|
||||
<frame/>
|
||||
|
||||
# Tab 标签页
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`value` 为绑定值，可以为 number 类型（选中的tab的下标）和 string 类型（标签名）。
|
||||
|
||||
@ -23,7 +25,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 滑动动画
|
||||
## 滑动动画
|
||||
|
||||
设置 `animated` 属性，开启tab切换动画。
|
||||
|
||||
@ -38,7 +40,7 @@
|
||||
|
||||
```
|
||||
|
||||
### 粘性布局
|
||||
## 粘性布局
|
||||
|
||||
设置 `sticky` 属性，使用粘性布局。可以设置 `offset-top` 属性，当距离窗口顶部多少像素时，固定标签头。
|
||||
|
||||
@ -52,7 +54,7 @@
|
||||
</wd-tabs>
|
||||
```
|
||||
|
||||
### 禁用Tab
|
||||
## 禁用Tab
|
||||
|
||||
在 `wd-tab` 上设置 `disabled` 属性，禁用某个页签。
|
||||
|
||||
@ -66,7 +68,7 @@
|
||||
</wd-tabs>
|
||||
```
|
||||
|
||||
### 点击事件
|
||||
## 点击事件
|
||||
|
||||
监听页签的点击事件.
|
||||
|
||||
@ -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
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
@ -1,8 +1,10 @@
|
||||
## Tag 标签
|
||||
<frame/>
|
||||
|
||||
# Tag 标签
|
||||
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
设置 `type` 修改标签类型。
|
||||
|
||||
@ -18,7 +20,7 @@
|
||||
margin: 0 10px;
|
||||
}
|
||||
```
|
||||
### 幽灵标签
|
||||
## 幽灵标签
|
||||
|
||||
设置 `plain` 属性。
|
||||
|
||||
@ -30,7 +32,7 @@
|
||||
<wd-tag type="success" plain>标签</wd-tag>
|
||||
```
|
||||
|
||||
### 标记标签
|
||||
## 标记标签
|
||||
|
||||
设置 `mark` 属性。
|
||||
|
||||
@ -42,7 +44,7 @@
|
||||
<wd-tag type="success" mark>标签</wd-tag>
|
||||
```
|
||||
|
||||
### 幽灵标记标签
|
||||
## 幽灵标记标签
|
||||
同时设置 `mark` 和 `plain` 属性。
|
||||
|
||||
```html
|
||||
@ -53,7 +55,7 @@
|
||||
<wd-tag type="success" mark plain>标签</wd-tag>
|
||||
```
|
||||
|
||||
### 圆角标签
|
||||
## 圆角标签
|
||||
|
||||
设置 `round` 属性。
|
||||
|
||||
@ -65,7 +67,7 @@
|
||||
<wd-tag type="success" round>标签</wd-tag>
|
||||
```
|
||||
|
||||
### 设置图标
|
||||
## 设置图标
|
||||
|
||||
设置 `icon` 左侧图标，也可以使用 'icon' 的 slot 插槽,此时要开启`use-icon-slot`。
|
||||
|
||||
@ -77,7 +79,7 @@
|
||||
</wd-tag>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
## 自定义颜色
|
||||
|
||||
设置 `color` 修改文字颜色，设置 `bg-color` 修改背景色和边框颜色。
|
||||
|
||||
@ -86,14 +88,14 @@
|
||||
<wd-tag color="#FAA21E" bg-color="#FAA21E" plain>标签</wd-tag>
|
||||
```
|
||||
|
||||
### 可关闭
|
||||
## 可关闭
|
||||
|
||||
设置 `closable` 属性，允许标签关闭，关闭时会触发 `close` 事件。
|
||||
```html
|
||||
<wd-tag closable round type="primary">标签</wd-tag>
|
||||
```
|
||||
|
||||
### 新增标签
|
||||
## 新增标签
|
||||
|
||||
设置 `dynamic` 属性，该标签为新增样式，输入内容确定后触发 `confirm` 事件。
|
||||
|
||||
@ -142,7 +144,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 事件
|
||||
## 事件
|
||||
|
||||
```html
|
||||
<wd-tag
|
||||
@ -183,7 +185,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### Attributes
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|-----|------|-----|-------|-------|---------|
|
||||
@ -198,7 +200,7 @@ Page({
|
||||
| use-icon-slot | 开启图标插槽 | boolean | - | false | - |
|
||||
| dynamic | 新增标签 | boolean | - | false | - |
|
||||
|
||||
### Events
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|---------|-----|-----|---------|
|
||||
@ -206,13 +208,13 @@ Page({
|
||||
| bind:close | 点击关闭按钮时触发 | event | - |
|
||||
| bind:confirm | 新增标签输入内容确定后触发 | event.detail = { value } | - |
|
||||
|
||||
### Slots
|
||||
## Slots
|
||||
|
||||
| name | 说明 | 最低版本 |
|
||||
|------|-----|---------|
|
||||
| icon | 图标 | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Toast 轻提示
|
||||
<frame/>
|
||||
|
||||
# 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实例上的方法| - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,9 +1,11 @@
|
||||
## Tooltip 文字提示
|
||||
<frame/>
|
||||
|
||||
# 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({
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
### 控制位置
|
||||
## 控制位置
|
||||
|
||||
**注意：由于微信小程序无法动态插入节点，因此文字气泡位置会根据传入定位的节点最外层位置对齐，如果文字提示位置不在您想要渲染的位置上，可以通过控制组件整体位置达到想要的效果。**
|
||||
错误用法示例：
|
||||
@ -135,7 +137,7 @@ Page({
|
||||
</wd-tooltip>
|
||||
```
|
||||
|
||||
### 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 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,7 +1,9 @@
|
||||
## Transition 动画
|
||||
<frame/>
|
||||
|
||||
# Transition 动画
|
||||
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
将元素包裹在 `wd-transition` 标签中，并设置 `show` 来切换显隐，设置 `name` 选择动画。
|
||||
|
||||
@ -11,7 +13,7 @@
|
||||
</wd-transition>
|
||||
```
|
||||
|
||||
### 动画类型
|
||||
## 动画类型
|
||||
|
||||
`wd-transition` 内置了常用的动画，如 `fade`、`slide`、`zoom-in` 等。
|
||||
|
||||
@ -21,11 +23,11 @@
|
||||
</wd-transition>
|
||||
```
|
||||
|
||||
### 动画时间
|
||||
## 动画时间
|
||||
|
||||
可以通过 `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 | 离开后触发| - | - |
|
||||
|
||||
### 外部样式类
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|-----|------|--------|
|
||||
@ -1,8 +1,10 @@
|
||||
## Upload 上传
|
||||
<frame/>
|
||||
|
||||
# Upload 上传
|
||||
|
||||
图片上传组件
|
||||
|
||||
### 基本用法
|
||||
## 基本用法
|
||||
|
||||
`file-list` 设置上传列表，数据类型为数组；
|
||||
|
||||
@ -33,7 +35,7 @@ Page({
|
||||
})
|
||||
```
|
||||
|
||||
### 禁用
|
||||
## 禁用
|
||||
|
||||
设置 `disabled` 开启禁用上传
|
||||
|
||||
@ -46,7 +48,7 @@ Page({
|
||||
</wd-upload>
|
||||
```
|
||||
|
||||
### 多选上传
|
||||
## 多选上传
|
||||
|
||||
通过设置 `multiple` 开启文件多选上传。
|
||||
|
||||
@ -59,7 +61,7 @@ Page({
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
### 最大上传数限制
|
||||
## 最大上传数限制
|
||||
|
||||
上传组件可通过设置 `limit` 来限制上传文件的个数。
|
||||
|
||||
@ -72,7 +74,7 @@ Page({
|
||||
></wd-upload>
|
||||
```
|
||||
|
||||
### 拦截预览图片操作
|
||||
## 拦截预览图片操作
|
||||
|
||||
设置 `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 {
|
||||
</script>
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
|--------|------|-----|---------|
|
||||
@ -1,7 +1,7 @@
|
||||
## 更新日志
|
||||
# 更新日志
|
||||
|
||||
|
||||
### 1.0.0
|
||||
## 1.0.0
|
||||
|
||||
*2023-07-21*
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
## 常见问题FAQ
|
||||
# 常见问题FAQ
|
||||
|
||||
本节介绍在开发过程当中遇到的部分 **常见问题** 以及 **解决办法**
|
||||
|
||||
|
||||
### 小程序样式隔离
|
||||
## 小程序样式隔离
|
||||
|
||||
#### 在页面中使用 Wot Design Uni 组件时，可直接在页面的样式文件中覆盖样式
|
||||
### 在页面中使用 Wot Design Uni 组件时，可直接在页面的样式文件中覆盖样式
|
||||
```vue
|
||||
<wd-button type="primary">主要按钮</wd-button>
|
||||
```
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
```
|
||||
|
||||
#### 在自定义组件中使用 Wot Design Uni 组件时，需开启`styleIsolation: 'shared'`选项
|
||||
### 在自定义组件中使用 Wot Design Uni 组件时，需开启`styleIsolation: 'shared'`选项
|
||||
|
||||
```vue
|
||||
<wd-button type="primary">主要按钮</wd-button>
|
||||
@ -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)**
|
||||
@ -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，可以在
|
||||
<p>#2bb3ed</p>
|
||||
</div>
|
||||
|
||||
#### 中性色
|
||||
### 中性色
|
||||
|
||||
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
|
||||
@ -118,7 +118,7 @@ Wot Design Uni 每1个组件基本都有自定义类名 custom-class，可以在
|
||||
<li class="color-group-line" style="background: rgba(255,255,255,0.02);color: rgba(255,255,255,0.65)">2%<div>表头填充色</div></li>
|
||||
</ul>
|
||||
|
||||
#### 自定义 Sass 变量
|
||||
### 自定义 Sass 变量
|
||||
|
||||
开发者自己参考 `@/uni_modules/wot-design-uni/components/common/abstracts/variable.scss` 文件中的scss变量`uni.scss`文件中重新定义一份自定义主题变量。
|
||||
例如：
|
||||
@ -1,12 +1,12 @@
|
||||
## 介绍
|
||||
# 介绍
|
||||
|
||||
该组件库基于`uni-app`+`vue3`构建，根据`wot desing mini`的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
|
||||
|
||||
### 快速上手
|
||||
## 快速上手
|
||||
|
||||
请查看[快速上手](#/components/quickUse)文档。
|
||||
|
||||
### 扫码体验
|
||||
## 扫码体验
|
||||
|
||||
<div style="display: inline-block; margin-right: 60px;">
|
||||
<img style="width: 150px; height: 150px;" :src="WxQrcode" />
|
||||
@ -18,7 +18,7 @@
|
||||
<div style="text-align: center;">支付宝扫码</div>
|
||||
</div>
|
||||
|
||||
### 特性
|
||||
## 特性
|
||||
|
||||
* 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 协议。
|
||||
|
||||
<script>
|
||||
import WxQrcode from '../assets/img/wx.jpg'
|
||||
import AlipayQrcode from '../assets/img/alipay.png'
|
||||
import WxQrcode from '/wx.jpg'
|
||||
import AlipayQrcode from '/alipay.png'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@ -1,8 +1,8 @@
|
||||
## 快速上手
|
||||
# 快速上手
|
||||
|
||||
本节介绍如何在`uni-app`项目中使用 `Wot Design Uni`
|
||||
|
||||
### 安装
|
||||
## 安装
|
||||
|
||||
`Wot Design Uni` 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=11489"><span >wot-design-uni</span></a>
|
||||
|
||||
|
||||
### 使用
|
||||
## 使用
|
||||
完成前四步之后就可以开始使用`Wot Design Uni`了。`Wot Design Uni`的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
|
||||
``` html
|
||||
<wd-toast></wd-toast>
|
||||
@ -1,9 +1,8 @@
|
||||
|
||||
## 捐赠作者，榜上留名
|
||||
# 捐赠作者，榜上留名
|
||||
|
||||
如果您认为本项目对你的工作起到了帮助，可以通过以下方式捐助组件库的研发工作，使本项目持续发展下去。
|
||||
|
||||
### 扫码捐赠
|
||||
## 扫码捐赠
|
||||
|
||||
<div style="display: inline-block; margin-right: 120px;">
|
||||
<img style="width: 250px; height: 250px;" src="https://fant-mini-plus.top/img/weixinQrcode.jpg" />
|
||||
@ -1,6 +1,6 @@
|
||||
## 字体
|
||||
# 字体
|
||||
|
||||
### iOS字体
|
||||
## iOS字体
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -59,7 +59,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Andriod字体
|
||||
## Andriod字体
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -118,13 +118,13 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Font-family 代码
|
||||
## Font-family 代码
|
||||
```css
|
||||
font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
|
||||
```
|
||||
|
||||
|
||||
### 京东正黑 Font-family
|
||||
## 京东正黑 Font-family
|
||||
|
||||
CDN：
|
||||
|
||||
@ -162,7 +162,7 @@ https://static.360buyimg.com/bus/fonts/JDZhengHT/JDZhengHT-Bold.woff
|
||||
}
|
||||
```
|
||||
|
||||
### 字体使用规范
|
||||
## 字体使用规范
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="keywords" content="uni-app组件库,组件库,wot design,wot design uni">
|
||||
<meta name="description" content="该组件库基于uni-app+vue3构建，根据wot desing mini的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。">
|
||||
<title>Wot Design Uni - uni-app组件库</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?18377b8bd73d88647503887f67ccf27f";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
(function () {
|
||||
var bp = document.createElement('script');
|
||||
var curProtocol = window.location.protocol.split(':')[0];
|
||||
if (curProtocol === 'https') {
|
||||
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
|
||||
}
|
||||
else {
|
||||
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
|
||||
}
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(bp, s);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
44
docs/index.md
Normal file
44
docs/index.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
layout: home
|
||||
|
||||
title: Wot Design Uni
|
||||
titleTemplate: 一个基于Wot-design开发的uni-app组件库
|
||||
|
||||
hero:
|
||||
name: Wot Design Uni
|
||||
text:
|
||||
tagline: 一个基于Wot-design开发的uni-app组件库
|
||||
image:
|
||||
src: /wot-design.png
|
||||
alt: Wot Design
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 快速上手
|
||||
link: /guide/quickUse
|
||||
- theme: alt
|
||||
text: 打赏作者
|
||||
link: /reward/reward
|
||||
- theme: alt
|
||||
text: 在GitHub上查看
|
||||
link: https://github.com/Moonofweisheng/wot-design-uni
|
||||
|
||||
features:
|
||||
- icon: 🚀
|
||||
title: 多平台覆盖
|
||||
details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。
|
||||
- icon: 🚀
|
||||
title: 50+ 组件
|
||||
details: 超过50个高质量组件，覆盖移动端主流场景。
|
||||
- icon: 💪
|
||||
title: 支持 TypeScript
|
||||
details: 使用 Typescript 构建，提供良好的组件类型系统。
|
||||
- icon: 💪
|
||||
title: 支持 Vue3
|
||||
details: 采用 Vue3 最新特性，提升组件性能。
|
||||
- icon: 📖
|
||||
title: 提供丰富的文档和组件示例
|
||||
details: 文档和组件示例为开发者提供稳定的后勤保障。
|
||||
- icon: 🍭
|
||||
title: 支持主题定制
|
||||
details: 可以定制scss变量以及组件的样式自定义。
|
||||
---
|
||||
@ -1,334 +0,0 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="header-container">
|
||||
<router-link :to="{ path: '/' }" class="logo-block">
|
||||
<img class="wot-design-logo" src="../assets/img/wot-design.png" alt="wot design mini" />
|
||||
<h1 class="wot-design-title">Wot Design Uni</h1>
|
||||
</router-link>
|
||||
<survey></survey>
|
||||
<ul class="header-tab">
|
||||
<!-- 搜索 -->
|
||||
<li class="header-tab__item">
|
||||
<search />
|
||||
</li>
|
||||
<!-- 组件文档切换 -->
|
||||
<li class="header-tab__item" v-for="(page, key) in pages" :key="key">
|
||||
<a v-if="page.type === 'link'" :href="page.link" class="header-tab__link" target="_blank">{{ page.title }}</a>
|
||||
<router-link v-else class="header-tab__link" active-class="header-tab__link--active" :to="{ name: page.name }">
|
||||
{{ page.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- 版本控制 -->
|
||||
<li class="header-tab__item version-control" v-show="isComponentPage">
|
||||
<a class="header-tab__link header-tab__with-arrow" @click="showOption">{{ version }}</a>
|
||||
<transition name="drop-scale-in">
|
||||
<div class="wot-dropdown" v-show="isShowOption">
|
||||
<ul class="wot-dropdown-menu">
|
||||
<li
|
||||
class="wot-dropdown-item"
|
||||
:class="{ 'is-active': item === version }"
|
||||
v-for="item in formatVersions"
|
||||
:key="item"
|
||||
@click="switchVersion(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<i class="popper__arrow"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import routesConfig from '../routes.yml'
|
||||
import search from './search'
|
||||
import survey from './survey'
|
||||
import axios from 'axios'
|
||||
const { version } = require('../../package.json')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
search,
|
||||
survey
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pages: routesConfig,
|
||||
versions: [],
|
||||
isComponentPage: true,
|
||||
isShowOption: false,
|
||||
version
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatVersions() {
|
||||
return this.filter(this.versions)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showOption() {
|
||||
this.isShowOption = !this.isShowOption
|
||||
},
|
||||
getVersions() {
|
||||
const requestUrl = process.env.NODE_ENV === 'dev' ? '/static/public/versions.json' : '/wot-design-uni/static/public/versions.json'
|
||||
|
||||
axios.get(requestUrl).then((res) => {
|
||||
this.versions = res.data
|
||||
})
|
||||
},
|
||||
filter(versions) {
|
||||
const keys = versions
|
||||
let result = []
|
||||
let preVersionList = []
|
||||
|
||||
keys.forEach((item) => {
|
||||
const lastIndex = item.lastIndexOf('.')
|
||||
const preVersion = item.slice(0, lastIndex)
|
||||
const curentPreIndex = preVersionList.indexOf(preVersion)
|
||||
if (curentPreIndex === -1) {
|
||||
preVersionList.push(preVersion)
|
||||
result.push(item)
|
||||
} else {
|
||||
const lastVersion = item.slice(lastIndex + 1)
|
||||
// 当前的 preVersion 如果存在，那么查找目前 result 中存在前两位版本的最后版本数的大小
|
||||
result = result.map((itemR) => {
|
||||
const lastIndexR = itemR.lastIndexOf('.')
|
||||
const preVersionR = itemR.slice(0, lastIndexR)
|
||||
const lastVersionR = itemR.slice(lastIndexR + 1)
|
||||
if (preVersion === preVersionR && lastVersion > lastVersionR) {
|
||||
itemR = item
|
||||
}
|
||||
return itemR
|
||||
})
|
||||
}
|
||||
})
|
||||
return result.sort((a, b) => a - b)
|
||||
},
|
||||
switchVersion(selected) {
|
||||
this.isShowOption = !this.isShowOption
|
||||
if (selected === this.version) return
|
||||
// location.hash
|
||||
window.location.href = `${location.origin}/wot-design-uni/${selected}/#/components/introduction`
|
||||
},
|
||||
clickOutside(event) {
|
||||
let clickDom = event.target
|
||||
|
||||
// 监听常见问题标题点击
|
||||
while (clickDom.className.indexOf('version-control') === -1 && clickDom !== document.body) {
|
||||
clickDom = clickDom.parentNode
|
||||
}
|
||||
|
||||
if (clickDom.className.indexOf('version-control') === -1) {
|
||||
this.isShowOption = false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.body.addEventListener('click', this.clickOutside)
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.body.removeEventListener('click', this.clickOutside)
|
||||
},
|
||||
created() {
|
||||
this.getVersions()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/**
|
||||
* 布局文件 header 的样式
|
||||
*/
|
||||
@import '../assets/style/variable';
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 10px #eee;
|
||||
background: $color-bg;
|
||||
z-index: 100;
|
||||
}
|
||||
.header-container {
|
||||
margin: 0 120px;
|
||||
height: $layout-header-height;
|
||||
line-height: $layout-header-height;
|
||||
}
|
||||
|
||||
.logo-block {
|
||||
display: inline-block;
|
||||
height: $layout-header-height;
|
||||
line-height: $layout-header-height;
|
||||
vertical-align: top;
|
||||
font-size: 18px;
|
||||
color: $color-theme;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.wot-design-logo {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wot-design-title {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
color: $color-theme;
|
||||
margin: 0;
|
||||
}
|
||||
.header-tab {
|
||||
float: right;
|
||||
}
|
||||
.header-tab__item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-tab__link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: $fs-title;
|
||||
line-height: 25px;
|
||||
color: $color-text-light;
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-important;
|
||||
}
|
||||
}
|
||||
.header-tab__with-arrow::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 50%;
|
||||
margin-top: -3px;
|
||||
right: 0;
|
||||
border: 6px solid rgba(0, 0, 0, 0);
|
||||
border-top-color: #ccc;
|
||||
}
|
||||
.header-tab__link--active {
|
||||
color: $color-theme;
|
||||
|
||||
&:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
}
|
||||
.version-control {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: calc(50% - 8px);
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
}
|
||||
.wot-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.wot-dropdown-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 10px 0;
|
||||
width: 90px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.1);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) #fefefe;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
opacity: 0.5;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
.wot-dropdown-item {
|
||||
list-style: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding-left: 15px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #464c5b;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&.is-active,
|
||||
&.is-active:hover {
|
||||
background-color: mix(#0083ff, #fff, 10%);
|
||||
color: #0083ff;
|
||||
}
|
||||
}
|
||||
.popper__arrow {
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -2px;
|
||||
margin-left: -3px;
|
||||
border-width: 6px;
|
||||
border-color: transparent;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
.drop-scale-in-enter,
|
||||
.drop-scale-in-leave-to {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
.drop-scale-in-enter-active,
|
||||
.drop-scale-in-leave-active {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
@media (max-width: 1366px) {
|
||||
.header-container {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 773px) {
|
||||
.wot-design-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.header-container {
|
||||
margin: 0 15px;
|
||||
}
|
||||
.header-tab__link {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<header-layout></header-layout>
|
||||
<div class="body-content" :class="isWindows ? 'body-scrollbar' : ''">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<scroll-top></scroll-top>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderLayout from './header'
|
||||
import ScrollTop from './scrollTop'
|
||||
import { isWindows } from '../utils/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeaderLayout,
|
||||
ScrollTop
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isWindows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../assets/style/_variable.scss";
|
||||
|
||||
.body-content{
|
||||
padding-top: $layout-header-height;
|
||||
height: calc(100vh - #{$layout-header-height});
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
</style>
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="page-controller">
|
||||
<div v-if="prevPage" class="page-controller__prev">
|
||||
<router-link class="page-controller__link" :to="{ name: prevPage.name }">
|
||||
<i class="iconfont icon-arrow-left"></i>
|
||||
<span>{{ prevPage.title }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="nextPage" class="page-controller__next">
|
||||
<router-link class="page-controller__link" :to="{ name: nextPage.name }">
|
||||
<span>{{ nextPage.title }}</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { prevPage, nextPage } from '../utils/pageCache'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
prevPage () {
|
||||
let parentName = this.$route.meta.parentName
|
||||
let routeName = this.$route.name
|
||||
|
||||
return prevPage(parentName, routeName)
|
||||
},
|
||||
nextPage () {
|
||||
let parentName = this.$route.meta.parentName
|
||||
let routeName = this.$route.name
|
||||
|
||||
return nextPage(parentName, routeName)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../assets/style/variable';
|
||||
@import '../assets/style/mixin';
|
||||
|
||||
.page-controller {
|
||||
margin: 80px 0 50px;
|
||||
padding-top: 30px;
|
||||
border-top: 2px solid $color-theme-l7;
|
||||
|
||||
@include clearFloat;
|
||||
|
||||
.page-controller__prev {
|
||||
float: left;
|
||||
}
|
||||
.page-controller__next {
|
||||
float: right;
|
||||
}
|
||||
.page-controller__link {
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
transition: .2s;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $color-theme-l2;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.iconfont {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user