Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(doc): 新增codesandbox支持 #12332

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
3 changes: 2 additions & 1 deletion packages/vant-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"@types/less": "^3.0.3",
"@types/lodash": "^4.14.191",
"@types/markdown-it": "^13.0.0",
"codesandbox": "^2.2.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个依赖让 lock 文件增加了 1600 行,而 Vant 仓库是希望严格控制依赖梳理的。

能否看一下是否有体积更小的依赖。。

"rimraf": "^5.0.0",
"vue": "^3.3.4"
},
Expand All @@ -56,9 +57,9 @@
"autoprefixer": "^10.4.8",
"commander": "^11.0.0",
"consola": "^3.0.2",
"enquirer": "2.3.6",
"esbuild": "^0.18.11",
"eslint": "^8.46.0",
"enquirer": "2.3.6",
"fast-glob": "^3.2.11",
"fs-extra": "^11.1.0",
"hash-sum": "^2.0.0",
Expand Down
32 changes: 32 additions & 0 deletions packages/vant-cli/site/desktop/components/Content.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

<script>
import { copyToClipboard } from '../../common';
import { getCodeSandboxParams } from './getCodeSandboxParams';

export default {
name: 'VanDocContent',
Expand Down Expand Up @@ -97,6 +98,37 @@ export default {
}, 1400);
});
}
const preBoxes = document.querySelectorAll('.van-doc-card pre');
if (!preBoxes || !preBoxes.length) {
return;
}
for (let i = 0; i < preBoxes.length; i++) {
const item = preBoxes[i];
if (i > 0 && item.children.length === 1) {
const form = document.createElement('form');
form.action = 'https://codesandbox.io/api/v1/sandboxes/define';
form.method = 'POST';
form.target = '_blank';
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'parameters';
const params = getCodeSandboxParams(codeBoxes[i].innerText, {
title: `vant - demo`,
});
input.value = params;
const div = document.createElement('div');
div.innerHTML = `<svg focusable="false" data-icon="code-sandbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M709.6 210l.4-.2h.2L512 96 313.9 209.8h-.2l.7.3L151.5 304v416L512 928l360.5-208V304l-162.9-94zM482.7 843.6L339.6 761V621.4L210 547.8V372.9l272.7 157.3v313.4zM238.2 321.5l134.7-77.8 138.9 79.7 139.1-79.9 135.2 78-273.9 158-274-158zM814 548.3l-128.8 73.1v139.1l-143.9 83V530.4L814 373.1v175.2z"></path></svg>`;
div.style.display = 'flex';
div.style.justifyContent = 'flex-end';
div.style.cursor = 'pointer';
form.appendChild(input);
form.appendChild(div);
item.appendChild(form);
item.addEventListener('click', () => {
form.submit();
});
}
}
},
},
};
Expand Down
79 changes: 79 additions & 0 deletions packages/vant-cli/site/desktop/components/getCodeSandboxParams.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { getParameters } from 'codesandbox/lib/api/define';

const indexHtml = `<!DOCTYPE html>
<html lang="en">
<head>
<title>Vant Demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
`;

const App = `
<template>
<demo />
</template>

<script>
import { defineComponent } from "vue";
import Demo from "./Demo.vue";

export default defineComponent({
components: {
Demo,
},
});
</script>`;

const mainJs = `
import { createApp } from 'vue';
import Vant from 'vant';
import App from './App.vue';
import 'vant/lib/index.css';

const app = createApp(App)
app.use(Vant);
app.mount("#app");
`;

export function getCodeSandboxParams(code, meta) {
return getParameters({
files: {
'package.json': {
content: JSON.stringify(
{
title: meta.title,
dependencies: {
vue: 'latest',
vant: 'latest',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vant CLI 是一个通用的组件库工具,所以代码里不能和 vant 包产生耦合,这种可以通过参数控制

},
devDependencies: {
'@vue/cli-plugin-babel': '~4.5.0',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以换成 Vite 吗

},
},
null,
2,
),
isBinary: false,
},
'index.html': {
content: indexHtml,
isBinary: false,
},
'src/Demo.vue': {
content: code,
isBinary: false,
},
'src/App.vue': {
content: App,
isBinary: false,
},
'src/main.js': {
content: mainJs,
isBinary: false,
},
},
});
}
120 changes: 72 additions & 48 deletions packages/vant/src/button/README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,131 +23,155 @@ app.use(Button);
按钮支持 `default`、`primary`、`success`、`warning`、`danger` 五种类型,默认为 `default`。

```html
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<template>
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</template>
```

### 朴素按钮

通过 `plain` 属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

```html
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="success">朴素按钮</van-button>
<template>
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="success">朴素按钮</van-button>
</template>
```

### 细边框

设置 `hairline` 属性可以展示 0.5px 的细边框。

```html
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="success">细边框按钮</van-button>
<template>
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="success">细边框按钮</van-button>
</template>
```

### 禁用状态

通过 `disabled` 属性来禁用按钮,禁用状态下按钮不可点击。

```html
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="success">禁用状态</van-button>
<template>
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="success">禁用状态</van-button>
</template>
```

### 加载状态

通过 `loading` 属性设置按钮为加载状态,加载状态下默认会隐藏按钮文字,可以通过 `loading-text` 设置加载状态下的文字。

```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="success" loading-text="加载中..." />
<template>
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="success" loading-text="加载中..." />
</template>
```

### 按钮形状

通过 `square` 设置方形按钮,通过 `round` 设置圆形按钮。

```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="success">圆形按钮</van-button>
<template>
<van-button square type="primary">方形按钮</van-button>
<van-button round type="success">圆形按钮</van-button>
</template>
```

### 图标按钮

通过 `icon` 属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。

```html
<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button
icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
type="primary"
>
按钮
</van-button>
<template>
<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button
icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
type="primary"
>
按钮
</van-button>
</template>
```

### 按钮尺寸

支持 `large`、`normal`、`small`、`mini` 四种尺寸,默认为 `normal`。

```html
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>
<template>
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>
</template>
```

### 块级元素

按钮在默认情况下为行内块级元素,通过 `block` 属性可以将按钮的元素类型设置为块级元素。

```html
<van-button type="primary" block>块级元素</van-button>
<template>
<van-button type="primary" block>块级元素</van-button>
</template>
```

### 页面导航

可以通过 `url` 属性进行 URL 跳转,或通过 `to` 属性进行路由跳转。

```html
<van-button type="primary" url="https://github.com">URL 跳转</van-button>
<van-button type="primary" to="index">路由跳转</van-button>
<template>
<van-button type="primary" url="https://github.com">URL 跳转</van-button>
<van-button type="primary" to="index">路由跳转</van-button>
</template>
```

### 自定义颜色

通过 `color` 属性可以自定义按钮的颜色。

```html
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</van-button>
<template>
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</van-button>
</template>
```

### 动画按钮

搭配 Button 和 [Swipe 组件](/#/zh-CN/swipe),可以实现垂直滚动的动画按钮效果。

```html
<van-button type="danger" round>
<van-swipe
vertical
class="notice-swipe"
:autoplay="2000"
:touchable="false"
:show-indicators="false"
>
<van-swipe-item>做任务</van-swipe-item>
<van-swipe-item>抽大奖</van-swipe-item>
</van-swipe>
</van-button>
<template>
<van-button type="danger" round>
<van-swipe
vertical
class="notice-swipe"
:autoplay="2000"
:touchable="false"
:show-indicators="false"
>
<van-swipe-item>做任务</van-swipe-item>
<van-swipe-item>抽大奖</van-swipe-item>
</van-swipe>
</van-button>
</template>

<style>
.notice-swipe {
Expand Down
Loading