zhoudd3
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(sites): update docs and apis 

Match-id-28f3a81642ef4e150404ee9d16e456e9be50550c
This commit is contained in:
OpenTiny 2023-12-08 18:05:23 +08:00
parent 1d1032ad08
commit 015bdd19fe
3088 changed files with 53795 additions and 40159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.all-contributorsrc
View File

@ -447,6 +447,15 @@
"contributions": [
"bug"
]
},
{
"login": "betavs",
"name": "betavs",
"avatar_url": "https://avatars.githubusercontent.com/u/34408516?v=4",
"profile": "https://github.com/betavs",
"contributions": [
"code"
]
}
],
"contributorsPerLine": 8,

5
.eslintrc.js
View File

@ -20,6 +20,7 @@ module.exports = {
'vue/prefer-separate-static-class': 'off',
'vue/comma-dangle': 'off',
'vue/prefer-template': 'off',
'vue/no-unused-refs': 'off',
'vue/singleline-html-element-content-newline': 'off',
'curly': 'off',
'sort-imports': 'off',
@ -34,7 +35,6 @@ module.exports = {
'prefer-const': 'off',
'multiline-ternary': 'off',
'@typescript-eslint/comma-dangle': 'off',
// '@typescript-eslint/indent': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',
@ -43,6 +43,7 @@ module.exports = {
'@typescript-eslint/brace-style': 'off',
'@typescript-eslint/restrict-plus-operands': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/restrict-template-expressions': 'off'
'@typescript-eslint/restrict-template-expressions': 'off',
'@typescript-eslint/no-invalid-this': 'off'
}
}

2
.github/workflows/test-e2e-all.yml vendored
View File

@ -41,7 +41,7 @@ jobs:
run: pnpm i --no-frozen-lockfile
- name: dev start
run: pnpm dev & sleep 5
run: pnpm site & sleep 5
- name: update playwright
run: pnpm recursive update @playwright/test
- name: Install Playwright browsers

2
.github/workflows/test-e2e-dispatch.yml vendored
View File

@ -43,7 +43,7 @@ jobs:
run: pnpm i --no-frozen-lockfile
- name: dev start
run: pnpm dev & sleep 5
run: pnpm site & sleep 5
- name: Install Playwright browsers
run: pnpm install:browser --with-deps chromium

10
.github/workflows/test-e2e-pr.yml vendored
View File

@ -24,7 +24,11 @@ jobs:
const regex = /\[(.*?)\]/
const matches = prTitle.match(regex)
if (matches && matches.length > 1 && matches[1]) {
let components = matches[1].split(',').map(c => c.trim()).filter(c => /^[a-z\-]+$/.test(c)).map(c => `${c}/`)
let components = matches[1]
.split(',')
.map((c) => c.trim())
.filter((c) => /^[a-z\-\/]+$/.test(c))
.map((c) => `"\\/${c}\\/"`)
components = [...new Set(components)].slice(0, 3).join(' ')
core.setOutput('testComponents', components)
} else {
@ -75,10 +79,10 @@ jobs:
run: pnpm i --no-frozen-lockfile
- name: dev start
run: pnpm dev & sleep 5
run: pnpm site & sleep 5
- name: Install Playwright browsers
run: pnpm install:browser --with-deps chromium
- name: E2E Test
run: pnpm test:e2e3 ${{ env.TEST_COMPONENTS }} --reporter=line
run: pnpm test:e2e3 ${{ env.TEST_COMPONENTS }} --reporter=line --retries=1 --workers=2

3
.gitignore vendored
View File

@ -8,6 +8,7 @@ dist-react/
allDist/
packages/**/runtime
coverage/
test-results
/packages/vue/index.ts
/packages/vue/pc.ts
@ -23,6 +24,7 @@ coverage/
/packages/react/app.ts
/examples/**/playwright-report
/examples/**/test-results
vite.config.ts.timestamp*
vitest.config.ts.timestamp*
@ -57,3 +59,4 @@ packages/theme/scripts/themeExcel.xlsx
packages/theme/src/theme/*-theme/component.js
pnpm-lock.yaml
gulp/bundle.json

4
.lintstagedrc.json Normal file
View File

@ -0,0 +1,4 @@
{
"*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix"],
"*.md": ["prettier --write"]
}

1
README.md
View File

@ -146,6 +146,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
</tr>
<tr>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/AcWrong02"><img src="https://avatars.githubusercontent.com/u/147061401?v=4?s=100" width="100px;" alt="AcWrong02"/><br /><sub><b>AcWrong02</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/issues?q=author%3AAcWrong02" title="Bug reports">🐛</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/betavs"><img src="https://avatars.githubusercontent.com/u/34408516?v=4?s=100" width="100px;" alt="betavs"/><br /><sub><b>betavs</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=betavs" title="Code">💻</a></td>
</tr>
</tbody>
</table>

2
commitlint.config.js
View File

@ -1 +1 @@
module.exports = { extends: ['@commitlint/config-conventional'] }
module.exports = { extends: ['@commitlint/config-conventional'] }

34
count-api.js Normal file
View File

@ -0,0 +1,34 @@
const fs = require('fs');
const basePath = './examples/sites/demos/pc/app';
const readFile = function (path) {
let componentCount = 0;
let apiCount = 0;
const readDir = fs.readdirSync(path);
readDir.forEach(i => {
const curDir = `${path}/${i}`;
const stat = fs.statSync(curDir);
if (stat.isFile() && i.endsWith('.js')) {
componentCount += 1;
const data = fs.readFileSync(curDir, 'utf-8');
let dataJson = null;
try {
dataJson = JSON.parse(data);
} catch (err) {
console.log('err:', err);
}
if (dataJson !== null) {
apiCount += (dataJson.attrs?.length || 0) + (dataJson.slots?.length || 0) + (dataJson.events?.length || 0) + (dataJson.methods?.length || 0);
}
}
});
console.log('componentCount:', componentCount);
console.log('apiCount:', apiCount);
}
readFile(basePath);

2
examples/docs/newsrc/mobile-first.vue
View File

@ -62,7 +62,7 @@
<span v-else>{{ row.name }}</span>
</td>
<td>{{ row.type }}</td>
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
<td v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></td>
<td v-html="row.desc['zh-CN']"></td>
</tr>
</tbody>

22
examples/docs/newsrc/mobile.vue
View File

@ -1,12 +1,8 @@
<template>
<div class="wp100 hp100 f-r of-hidden">
<div class="w230 pt20 of-auto">
<tiny-tree-menu
class="!w213"
:data="menuData"
:filter-node-method="fn.searchMenu"
@current-change="fn.clickMenu"
></tiny-tree-menu>
<tiny-tree-menu class="!w213" :data="menuData" :filter-node-method="fn.searchMenu"
@current-change="fn.clickMenu"></tiny-tree-menu>
</div>
<div class="fi-1 f-c px20 pb30 f-c pr200 of-auto">
<!-- 标题 -->
@ -16,8 +12,7 @@
<div id="preview" class="bg-white">
<div class="mb20 py10 pl16 child<code>p4 child<code>bg-lightless">
<div class="mr20 fw-bold">
{{ state.currDemo?.name['zh-CN'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span
>):
{{ state.currDemo?.name['zh-CN'] }}( <span class="allselect">{{ state.currDemo?.codeFiles[0] }}</span>):
</div>
<div v-html="state.currDemo?.desc['zh-CN']"></div>
</div>
@ -66,7 +61,7 @@
<span v-else>{{ row.name }}</span>
</td>
<td>{{ row.type }}</td>
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
<td v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></td>
<td v-html="row.desc['zh-CN']"></td>
</tr>
</tbody>
@ -78,13 +73,8 @@
<!-- 右边浮动所有的demos -->
<tiny-floatbar v-if="state.demos.length > 0" class="!top120 !z1 !right25">
<div class="f12 ofy-auto">
<div
v-for="demo in state.demos"
:key="demo.demoId"
@click="fn.selectDemo(demo.demoId)"
class="w130 px10 py4 bg-light f-r f-pos-between"
:class="{ 'c-error': state.currDemo === demo }"
>
<div v-for="demo in state.demos" :key="demo.demoId" @click="fn.selectDemo(demo.demoId)"
class="w130 px10 py4 bg-light f-r f-pos-between" :class="{ 'c-error': state.currDemo === demo }">
<div class="link-primary h:c-error h:td-under ellipsis">
{{ demo.name['zh-CN'] }}
<Icon-star-icon v-if="state.currDemo === demo" style="fill: #ee343f" />

2
examples/docs/newsrc/pc.vue
View File

@ -69,7 +69,7 @@
<span v-else>{{ row.name }}</span>
</td>
<td>{{ row.type }}</td>
<td>{{ row.defaultValue?.['zh-CN'] || row.defaultValue }}</td>
<td v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"></td>
<td v-html="row.desc['zh-CN']"></td>
</tr>
</tbody>

6
examples/react-docs/package.json
View File

@ -17,8 +17,8 @@
"devDependencies": {
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.0",
"@typescript-eslint/eslint-plugin": "^6.12.0",
"@typescript-eslint/parser": "^6.12.0",
"@vitejs/plugin-react": "^4.0.1",
"autoprefixer": "^10.4.12",
"eslint": "^8.44.0",
@ -26,7 +26,7 @@
"postcss": "^8.4.16",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"vite": "^4.4.0",
"vite": "^4.3.8",
"vite-plugin-react": "^4.0.1",
"vite-plugin-svgr": "^3.2.0"
}

2
examples/react-site/package.json
View File

@ -59,7 +59,7 @@
"unplugin-auto-import": "0.8.7",
"unplugin-vue-components": "^0.19.9",
"uslug": "^1.0.4",
"vite": "^2.9.12",
"vite": "^4.3.8",
"vite-plugin-html": "^2.0.0",
"vite-plugin-inspect": "^0.5.0",
"vite-plugin-md": "0.13.1"

14
examples/react-site/src/views/components/componentsDetail.vue
View File

@ -139,7 +139,7 @@ const getApiTableOptFn = oneApiArr => {
key: 'defaultValue',
title: $t('defValue'),
width: '20%',
render: row => <div class="route-anchor" v-html={typeof row.defaultValue === 'string' ? row.defaultValue : row.defaultValue[state.langKey]}></div>,
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
},
{
key: 'desc',
@ -152,7 +152,7 @@ const getApiTableOptFn = oneApiArr => {
};
};
function loadPage(){
function loadPage() {
const lang = $t2('cn', 'en');
state.cmpTopMdShow = state.currJsonShow = true;
@ -170,16 +170,14 @@ function loadPage(){
if (faqMdConfig[state.cmpId]) {
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
.then(data => {
console.log(data)
console.log(data);
state.cmpFAQMd = marked(DOMPurify.sanitize(data));
})
.catch(error => {}
);
.catch(error => {});
} else {
state.cmpFAQMd = null;
}
fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.json`)
.then(jsonStr => {
const json = JSON.parse(jsonStr);
@ -209,10 +207,10 @@ function loadPage(){
}, 0);
})
.catch(error => {
throw new Error(error)
throw new Error(error);
state.currJsonShow = false;
});
};
}
const handleApiAnchor = ev => {
if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {

2
examples/react-site/src/views/components/componentsDetailTab.vue
View File

@ -155,7 +155,7 @@ const getApiTableOptFn = oneApiArr => {
key: 'defaultValue',
title: $t('defValue'),
width: '20%',
render: row => <div class="route-anchor" v-html={typeof row.defaultValue === 'string' ? row.defaultValue : row.defaultValue[state.langKey]}></div>,
render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
},
{
key: 'desc',

5
examples/sites/demos/mobile-first/app/alert/close-text.vue
View File

@ -6,8 +6,7 @@
</template>
<script>
import { Alert } from '@opentiny/vue'
import { alert } from '@opentiny/vue-modal'
import { Alert, Modal } from '@opentiny/vue'
export default {
components: {
@ -15,7 +14,7 @@ export default {
},
methods: {
close() {
alert('关闭了')
Modal('关闭了')
}
}
}

113
examples/sites/demos/mobile-first/app/alert/webdoc/alert.js
View File

@ -1,16 +1,15 @@
export default {
column: '2',
owner: '',
demos: [
{
demos: [{
demoId: 'type',
name: {
'zh-CN': '类型',
'en-US': 'basic usage'
'en-US': 'type'
},
desc: {
'zh-CN': '<p>通过<code>type</code>设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>',
'en-US': '<p>button type</p>'
'en-US': '<p>Use <code>type</code> to set different types. The options are success, warning, info, and error. The default value is info.</p>'
},
codeFiles: ['type.vue']
},
@ -18,11 +17,11 @@ export default {
demoId: 'size',
name: {
'zh-CN': '大尺寸',
'en-US': 'button round'
'en-US': 'Large size'
},
desc: {
'zh-CN': '<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>',
'en-US': '<p>button round</p>'
'en-US': '<p>Use the <code>size</code> attribute to set different sizes. The options are nomal and large. The default value is nomal.</p>'
},
codeFiles: ['size.vue']
},
@ -30,12 +29,11 @@ export default {
demoId: 'title',
name: {
'zh-CN': '自定义标题',
'en-US': 'events'
'en-US': 'Custom Title'
},
desc: {
'zh-CN':
'<p>当 <code>size</code>为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>当 <code>size</code>为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>',
'en-US': '<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>.</p>'
},
codeFiles: ['title.vue']
},
@ -55,11 +53,11 @@ export default {
demoId: 'closable',
name: {
'zh-CN': '不可关闭',
'en-US': 'events'
'en-US': 'Can not be closed'
},
desc: {
'zh-CN': '<p>通过 <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。</p>',
'en-US': '<p>The <code>closable</code> attribute can be used to set whether to display the Close button. If there is no Close button, the Warning dialog box cannot be closed.</p>'
},
codeFiles: ['closable.vue']
},
@ -67,11 +65,11 @@ export default {
demoId: 'custom-description',
name: {
'zh-CN': '自定义提示内容',
'en-US': 'events'
'en-US': 'Customized prompt content'
},
desc: {
'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。</p>',
'en-US': '<p>You can customize the prompt content through the <code>description</code> property or slot.</p>'
},
codeFiles: ['custom-description.vue']
},
@ -79,11 +77,11 @@ export default {
demoId: 'slot-default',
name: {
'zh-CN': '自定义交互操作',
'en-US': 'events'
'en-US': 'Customizing Interactions'
},
desc: {
'zh-CN': '<p>当 <code>size</code> 为 large 时，设置默认插槽自定义交互操作。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>当 <code>size</code> 为 large 时，设置默认插槽自定义交互操作。</p>',
'en-US': '<p>Set the default slot custom interaction when <code>size</code> is large.</p>'
},
codeFiles: ['slot-default.vue']
},
@ -91,11 +89,11 @@ export default {
demoId: 'close',
name: {
'zh-CN': '关闭事件',
'en-US': 'events'
'en-US': 'Close Event'
},
desc: {
'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。</p>',
'en-US': '<p><code>close</code> event, triggered when the warning dialog box is closed.</p>'
},
codeFiles: ['close.vue']
},
@ -103,12 +101,11 @@ export default {
demoId: 'feedback-of-result',
name: {
'zh-CN': '表单提交结果反馈',
'en-US': 'events'
'en-US': 'Form submission result feedback'
},
desc: {
'zh-CN':
'<p>当 <code>size</code> 为 large 时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>当 <code>size</code> 为 large 时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。</p>',
'en-US': '<p>When <code>size</code> is set to large, the <code>description</code> attribute is used together with the default slot to render the submission feedback interface.</p>'
},
codeFiles: ['feedback-of-result.vue']
},
@ -116,11 +113,11 @@ export default {
demoId: 'show-icon',
name: {
'zh-CN': '是否显示图标',
'en-US': 'events'
'en-US': 'Indicates whether to display the icon.'
},
desc: {
'zh-CN': '<p>通过配置 <code>show-icon</code> 属性，控制图标是否显示。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过配置 <code>show-icon</code> 属性，控制图标是否显示。</p>',
'en-US': '<p>You can set the <code>show-icon</code> attribute to control whether to display the icon.</p>'
},
codeFiles: ['show-icon.vue']
},
@ -128,12 +125,11 @@ export default {
demoId: 'show-foldable',
name: {
'zh-CN': '带标题可折叠样式',
'en-US': 'events'
'en-US': 'Collapsible Style with Title'
},
desc: {
'zh-CN':
'<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`</p>',
'en-US': '<p>The `flex-basis` attribute can be used to set the width of the content slot. The flex-basis type is an array. A maximum of four values can be transferred. The percentage, fixed width, and inherent size keywords are supported. The default value is auto. For details, see the flex-basis attribute of Flex. <br />You can set the relative proportion of the remaining space allocated to each item in the flex container by setting the `flex-grow` attribute. The default value is 1. If you do not want to automatically fill the main container, set this parameter to 0. For details, see the flex-grow attribute of flex. <br />Flex-grow Example: `:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis Example: `:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`</p>'
},
codeFiles: ['show-foldable.vue']
},
@ -141,7 +137,7 @@ export default {
demoId: 'custom-class',
name: {
'zh-CN': '自定义类名',
'en-US': 'Custom class'
'en-US': 'User-defined class name'
},
desc: {
'zh-CN': '<p>通过<code>custom-class</code>属性设置自定义类名<p>',
@ -150,5 +146,50 @@ export default {
codeFiles: ['custom-class.vue']
}
],
apis: []
}
apis: [{
'name': 'Alert',
'type': 'component',
'props': [{
'name': 'scrolling',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '是否开启描述文字在鼠标 hover 时滚动显示的动画。',
'en-US': 'Indicates whether to enable the animation of the description text scrolling when the mouse hovers.'
},
'demoId': ''
},
{
'name': 'show-foldable',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '展示带标题可折叠样式。',
'en-US': 'Shows collapsible styles with titles.'
},
'demoId': ''
},
{
'name': 'single-line',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '描述内容是否一行显示，超出显示...，默认值为 false。',
'en-US': 'Indicates whether the description is displayed in one line. The default value is false.'
},
'demoId': ''
}
],
'events': [{
'name': 'handleHeaderClick',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效。',
'en-US': 'Title click event. This parameter is valid only when show-foldable is set to true.'
},
'demoId': ''
}],
'slots': []
}]
}

259
examples/sites/demos/mobile-first/app/cascader-view/webdoc/cascader-view.js
View File

@ -9,7 +9,7 @@ export default {
'en-US': 'Basic Usage'
},
desc: {
'zh-CN': '<p>基本用法<p>',
'zh-CN': '<p>基本用法</p>',
'en-US': '<p>Basic Usage</p>'
},
codeFiles: ['basic-usage.vue']
@ -22,9 +22,9 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>:node-config="{ lazy: true, load:() => {...} }"<code>load</code> 设置属性 <code>lazy: true<code>load</code> 和 <code>load</code> 数据加载方法，开启异步加载。<p>',
'<p>通过 <code>:node-config="{ lazy: true, load:() => {...} }"<code>load</code> 设置属性 <code>lazy: true<code>load</code> 和 <code>load</code> 数据加载方法，开启异步加载。</p>',
'en-US':
'<p><p>Set the <code>lazy: true<code>load</code> attribute and <code>load</code>data loading method through <code>:node-config="{lazy: true, load:() => {...}}"<code>load</code> to enable asynchronous loading.<p></p>'
'<p><p>Set the <code>lazy: true<code>load</code> attribute and <code>load</code>data loading method through <code>:node-config="{lazy: true, load:() => {...}}"<code>load</code> to enable asynchronous loading.<p></p>'
},
codeFiles: ['lazyload.vue']
},
@ -36,9 +36,9 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>:node-config="{ checkStrictly: true }"</code> 设置属性 <code>checkStrictly: true</code>，开启父子层级互不关联，可选择非叶子节点，默认值为 <code>false</code> 显示到叶子节点。<p>',
'<p>通过 <code>:node-config="{ checkStrictly: true }"</code> 设置属性 <code>checkStrictly: true</code>，开启父子层级互不关联，可选择非叶子节点，默认值为 <code>false</code> 显示到叶子节点。</p>',
'en-US':
'<p>You can set the <code>checkStrictly: true</code> attribute in <code>:node-config="{checkStrictly: true}"</code> to enable the disassociation between parent and child levels. You can select non-leaf nodes. The default value is <code>false</code>.<p>'
'<p>You can set the <code>checkStrictly: true</code> attribute in <code>:node-config="{checkStrictly: true}"</code> to enable the disassociation between parent and child levels. You can select non-leaf nodes. The default value is <code>false</code>.</p>'
},
codeFiles: ['check-strictly.vue']
},
@ -49,9 +49,9 @@ export default {
'en-US': 'Disable option'
},
desc: {
'zh-CN': '<p>数据源里面带 <code>disabled: true</code> 渲染时自动禁用选项。<p>',
'zh-CN': '<p>数据源里面带 <code>disabled: true</code> 渲染时自动禁用选项。</p>',
'en-US':
'<p>The <code>disabled: true</code> option is automatically disabled during rendering in the data source.<p>'
'<p>The <code>disabled: true</code> option is automatically disabled during rendering in the data source.</p>'
},
codeFiles: ['disabled.vue']
},
@ -63,12 +63,251 @@ export default {
},
desc: {
'zh-CN':
'<p>通过设置 <code>emit-path</code> 属性值为 <code>false</code> 不显示值路径，默认值为 <code>true</code> 显示值路径。<p>',
'<p>通过设置 <code>emit-path</code> 属性值为 <code>false</code> 不显示值路径，默认值为 <code>true</code> 显示值路径。</p>',
'en-US':
'<p>The value path is not displayed by setting the <code>emit-path</code> attribute to <code>false</code>. The default value is <code>true</code>.<p>'
'<p>The value path is not displayed by setting the <code>emit-path</code> attribute to <code>false</code>. The default value is <code>true</code>.</p>'
},
codeFiles: ['emit-path.vue']
}
],
apis: []
apis: [
{
'name': 'CalendarView',
'type': 'component',
'props': [
{
'name': 'day-times',
'type': 'Array',
'defaultValue': '',
'desc': {
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
'en-US': 'Time range displayed in timeline mode. The default value range is [8, 18]. The value range is [0, 23].'
},
'demoId': ''
},
{
'name': 'disabled ',
'type': 'Function',
'defaultValue': '',
'desc': {
'zh-CN': '日期禁用',
'en-US': 'Date Disabled'
},
'demoId': 'disabled'
},
{
'name': 'events',
'type': 'Array',
'defaultValue': '',
'desc': {
'zh-CN': '日程事件',
'en-US': 'Scheduled Events'
},
'demoId': ''
},
{
'name': 'height',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '日历高度',
'en-US': 'Calendar height'
},
'demoId': ''
},
{
'name': 'mark-color',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '点标记的颜色',
'en-US': 'Color of the dot marker'
},
'demoId': ''
},
{
'name': 'mode',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '显示模式，可选值有 timeline-时间线模式、schedule-日程模式、month-月模式，默认为月模式。',
'en-US': 'Display mode. The options are timeline-timeline, schedule-schedule, and month-month. The default value is month.'
},
'demoId': ''
},
{
'name': 'modes',
'type': 'Array',
'defaultValue': '',
'desc': {
'zh-CN': '模式组，显示模式任意组合',
'en-US': 'Pattern group, any combination of display patterns'
},
'demoId': ''
},
{
'name': 'month',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '日历当前显示月份',
'en-US': 'The calendar currently displays the month'
},
'demoId': ''
},
{
'name': 'multi-select',
'type': 'Boolean',
'defaultValue': '',
'desc': {
'zh-CN': '日期多选',
'en-US': 'Multiple Dates'
},
'demoId': ''
},
{
'name': 'set-day-bg-color',
'type': 'Function',
'defaultValue': '',
'desc': {
'zh-CN': '设置日期背景色',
'en-US': 'Set Date Background Color'
},
'demoId': ''
},
{
'name': 'show-mark',
'type': 'Function',
'defaultValue': '',
'desc': {
'zh-CN': '显示点标记',
'en-US': 'Show Point Markers'
},
'demoId': ''
},
{
'name': 'show-new-schedule',
'type': 'Function',
'defaultValue': '',
'desc': {
'zh-CN': '显示新增日程按钮',
'en-US': 'Show the button for adding a schedule'
},
'demoId': ''
},
{
'name': 'year',
'type': 'Number',
'defaultValue': '',
'desc': {
'zh-CN': '日历当前显示年份',
'en-US': 'Calendar Current Display Year'
},
'demoId': ''
},
],
'events': [
{
'name': 'month-change',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '月改变事件',
'en-US': 'Month Change Event'
},
'demoId': ''
},
{
'name': 'new-schedule',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '新增日程按钮点击事件',
'en-US': 'Event for adding a schedule button.'
},
'demoId': ''
},
{
'name': 'next-week-click',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '下一周按钮点击事件',
'en-US': 'Next week button click event'
},
'demoId': ''
},
{
'name': 'prev-week-click',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '上一周按钮点击事件',
'en-US': 'Button click event of the previous week'
},
'demoId': ''
},
{
'name': 'selected-date-change',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '选中日期改变事件',
'en-US': 'Select Date Change Event'
},
'demoId': ''
},
{
'name': 'week-change',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '周改变事件',
'en-US': 'Week Change Event'
},
'demoId': ''
},
{
'name': 'year-change',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '年改变事件',
'en-US': 'Year Change Event'
},
'demoId': ''
},
],
'slot': [
{
'name': 'header',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '头部插槽', 'en-US': 'Head slot' },
'demoId': ''
},
{
'name': 'timeline',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽', 'en-US': 'Timeline slots, with 7 slots timeline1-timeline7' },
'demoId': ''
},
{
'name': 'tool',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '工具栏插槽', 'en-US': 'Toolbar Slot' },
'demoId': ''
},
{
'name': 'weekday',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽', 'en-US': 'Schedule slots, with 7 slots weekday1-weekday7' },
'demoId': ''
}
]
}
]
}

116
examples/sites/demos/mobile-first/app/exception/webdoc/exception.js
View File

@ -1,16 +1,15 @@
export default {
column: '2',
owner: '',
demos: [
{
demos: [{
demoId: 'message',
name: {
'zh-CN': '基本用法',
'en-US': 'events'
'en-US': 'Basic Usage'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['message.vue']
},
@ -18,12 +17,11 @@ export default {
demoId: 'page-empty',
name: {
'zh-CN': '页面级空态',
'en-US': 'events'
'en-US': 'Page-level void'
},
desc: {
'zh-CN':
'<p>通过添加`page-empty`属性展示页面级空态，其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`<br> 对应场景：<br>`pagenoperm` ：无访问权限<br>`pageweaknet` ：网络异常<br>`pagenothing` ：你访问的页面不存在<br>`pageservererror`：服务器异常 <p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过添加`page-empty`属性展示页面级空态，其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`<br> 对应场景：<br>`pagenoperm` ：无访问权限<br>`pageweaknet` ：网络异常<br>`pagenothing` ：你访问的页面不存在<br>`pageservererror`：服务器异常 </p>',
'en-US': '<p>The page-level empty state is displayed by adding the `page-empty` attribute. The type types include `pagenoperm`, `pageweaknet`, `pagenothing`, and `pageservererror`.<br>Scenario:<br>`pagenoperm`: no access permission<br>`pageweaknet`: network exception<br>`pagenothing`: The page you access does not exist<br>`pageservererror`: The server is abnormal</p>'
},
codeFiles: ['page-empty.vue']
},
@ -31,12 +29,11 @@ export default {
demoId: 'component-empty',
name: {
'zh-CN': '组件级空态',
'en-US': 'events'
'en-US': 'Component-level empty state'
},
desc: {
'zh-CN':
'<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br></p>',
'en-US': '<p>Add the `component-empty` attribute to display the component-level empty state. The type type can be `noperm, nodata, weaknet, noresult, or nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>'
},
codeFiles: ['component-empty.vue']
},
@ -44,11 +41,11 @@ export default {
demoId: 'sub-message',
name: {
'zh-CN': '自定义二级标题内容',
'en-US': 'events'
'en-US': 'User-defined level-2 title content'
},
desc: {
'zh-CN': '<p>通过`sub-message`自定义二级标题<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过`sub-message`自定义二级标题</p>',
'en-US': '<p>Customizing Level-2 Titles Using `sub-message`</p>'
},
codeFiles: ['sub-message.vue']
},
@ -59,8 +56,8 @@ export default {
'en-US': 'button-text'
},
desc: {
'zh-CN': '<p>已去除`button-text`自定义按钮文本，直接可以通过插槽自定义<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>已去除`button-text`自定义按钮文本，直接可以通过插槽自定义</p>',
'en-US': '<p>Customizing Level-2 Titles Using `sub-message`</p>'
},
codeFiles: ['button-text.vue']
},
@ -71,11 +68,86 @@ export default {
'en-US': 'content-slot'
},
desc: {
'zh-CN': '<p>通过命名插槽 `content`，自定义内容区<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过命名插槽 `content`，自定义内容区</p>',
'en-US': '<p>Customize the content area by naming the slot `content`</p>'
},
codeFiles: ['content-slot.vue']
}
],
apis: []
}
apis: [{
'name': 'Exception',
'type': 'component',
'props': [{
'name': 'component-page',
'type': 'Boolean',
'defaultValue': '',
'desc': {
'zh-CN': '设置组件级空态',
'en-US': 'Set component-level empty state'
},
'demoId': 'component-empty'
},
{
'name': 'exception-class',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '设置自定义类',
'en-US': 'Setting Custom Classes'
},
'demoId': ''
},
{
'name': 'page-empty ',
'type': 'Boolean',
'defaultValue': '',
'desc': {
'zh-CN': '设置页面级空态',
'en-US': 'Set page-level empty status'
},
'demoId': 'page-empty'
},
{
'name': 'sub-message',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '设置二级标题',
'en-US': 'Set Level-2 Title'
},
'demoId': 'sub-message'
},
{
'name': 'type',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '设置页面级空态类型。默认值为nodata',
'en-US': 'Sets the page-level empty state type. The default value is nodata.'
},
'demoId': 'page-empty'
}
],
'slots': [{
'name': 'content',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '内容插槽。可以设置自定义展示内容',
'en-US': 'Content slot. Custom display content can be set.'
},
'demoId': 'content-slot'
},
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '默认插槽',
'en-US': 'Default Slot'
},
'demoId': ''
}
]
}]
}

49
examples/sites/demos/mobile-first/app/flowchart/webdoc/flowchart.js
View File

@ -1,16 +1,15 @@
export default {
column: '2',
owner: '',
demos: [
{
demos: [{
demoId: 'basic-usage',
name: {
'zh-CN': '垂直图形',
'en-US': 'events'
'en-US': 'Vertical Graphics'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>节点设置在不同的列data.nodes[i].info.row,就可以创建垂直图形</p>',
'en-US': '<p>Nodes are set in different columns data.nodes[i].info.row, and vertical graphics can be created.</p>'
},
codeFiles: ['basic-usage.vue']
},
@ -18,11 +17,11 @@ export default {
demoId: 'horizon',
name: {
'zh-CN': '水平图形',
'en-US': 'events'
'en-US': 'Horizontal Graph'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>节点设置在不同的列data.nodes[i].info.col,就可以创建水平图形</p>',
'en-US': '<p>Nodes are set in different columns data.nodes[i].info.col, and horizontal graphics can be created.</p>'
},
codeFiles: ['horizon.vue']
},
@ -30,11 +29,11 @@ export default {
demoId: 'dot-vertical',
name: {
'zh-CN': '点模式-垂直图形',
'en-US': 'events'
'en-US': 'Point Mode - Vertical Graph'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['dot-vertical.vue']
},
@ -42,11 +41,11 @@ export default {
demoId: 'dot-horizon',
name: {
'zh-CN': '点模式-水平图形',
'en-US': 'events'
'en-US': 'Point Mode - Horizontal Graph'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['dot-horizon.vue']
},
@ -54,11 +53,11 @@ export default {
demoId: 'dot-horizon-async',
name: {
'zh-CN': '点模式-水平图形-异步',
'en-US': 'events'
'en-US': 'Point Mode - Horizontal Graph - Asynchronous'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['dot-horizon-async.vue']
},
@ -70,7 +69,7 @@ export default {
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'en-US': '<p>Point Mode - Vertical Graph - Asynchronous</p>'
},
codeFiles: ['dot-vertical-async.vue']
},
@ -78,11 +77,11 @@ export default {
demoId: 'holistic',
name: {
'zh-CN': '全景图',
'en-US': 'events'
'en-US': 'Panoramic view'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['holistic.vue']
},
@ -90,14 +89,14 @@ export default {
demoId: 'holistic-fork',
name: {
'zh-CN': '全景图-分叉',
'en-US': 'events'
'en-US': 'Panorama - Fork'
},
desc: {
'zh-CN': '<p><p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p></p>',
'en-US': '<p></p>'
},
codeFiles: ['holistic-fork.vue']
}
],
apis: []
}
}

183
examples/sites/demos/mobile-first/app/image/webdoc/image.js
View File

@ -10,7 +10,7 @@ export default {
},
desc: {
'zh-CN': '<p>通过 `image-size` 设置预览的图片尺寸大小，通过`round`设置是否展示圆形。</p>',
'en-US': '<p>button type</p>'
'en-US': '<p>Use `image-size` to set the size of the previewed image and use `round` to set whether to display a circle.</p>'
},
codeFiles: ['basic-usage.vue']
},
@ -19,11 +19,11 @@ export default {
demoId: 'show-hover',
name: {
'zh-CN': '图片悬浮',
'en-US': 'events'
'en-US': 'Image floating'
},
desc: {
'zh-CN': '<p>通过 `show-hover` 设置预览的图片的悬浮效果。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `show-hover` 设置预览的图片的悬浮效果。</p>',
'en-US': '<p>Use `show-hover` to set the floating effect of the previewed image.</p>'
},
codeFiles: ['show-hover.vue']
},
@ -31,12 +31,12 @@ export default {
demoId: 'auto-fit-container-size',
name: {
'zh-CN': '自适应容器尺寸',
'en-US': 'events'
'en-US': 'Adaptive Container Size'
},
desc: {
'zh-CN':
'<p>可通过 `fit` 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br> object-fit 说明<br>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>contain：被替换的内容大小可以填充元素的内容框<br> cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>none：被替换的内容尺寸不会被改变<br>scale-down：内容的尺寸就像是指定了 none 或 contain，取决于哪一个将导致更小的对象尺寸。<p>',
'en-US': '<p>bbutton click</p>'
'<p>可通过 `fit` 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br> object-fit 说明<br>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>contain：被替换的内容大小可以填充元素的内容框<br> cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>none：被替换的内容尺寸不会被改变<br>scale-down：内容的尺寸就像是指定了 none 或 contain，取决于哪一个将导致更小的对象尺寸。</p>',
'en-US': '<p>You can use the `fit` attribute to determine how an image adapts to the container box, which is the same as the object-fit attribute of the native CSS.<br>Object-fit Description<br>fill: The replaced content is scaled to maintain its aspect ratio when filling the element\'s content box.<br>cover: The size of the replaced content keeps its aspect ratio and fills the entire content box of the element.<br>none: The size of the content to be replaced is not changed.<br>scale-down: The size of the content is as if none or contain were specified, depending on which would result in a smaller object size.</p>'
},
codeFiles: ['auto-fit-container-size.vue']
},
@ -44,11 +44,11 @@ export default {
demoId: 'preview-src-list',
name: {
'zh-CN': '预览大图',
'en-US': 'events'
'en-US': 'Preview Large Image'
},
desc: {
'zh-CN': '<p>通过 `preview-src-list` 开启预览大图的功能，通过添加`show-index`开启图片序列号展示。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `preview-src-list` 开启预览大图的功能，通过添加`show-index`开启图片序列号展示。</p>',
'en-US': '<p>Use the `preview-src-list` command to enable the function of previewing large images, and add the `show-index` command to enable the display of image sequence numbers.</p>'
},
codeFiles: ['preview-src-list.vue']
},
@ -56,11 +56,11 @@ export default {
demoId: 'round',
name: {
'zh-CN': '尺寸类型',
'en-US': 'events'
'en-US': 'Size Type'
},
desc: {
'zh-CN': '<p>通过 `image-size` 设置预览的图片尺寸大小，通过 round 设置是否展示圆形。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `image-size` 设置预览的图片尺寸大小，通过 round 设置是否展示圆形。</p>',
'en-US': '<p>Use `image-size` to set the size of the previewed image and use round to set whether to display a circle.</p>'
},
codeFiles: ['round.vue']
},
@ -68,11 +68,11 @@ export default {
demoId: 'custom-placeholder',
name: {
'zh-CN': '占位内容',
'en-US': 'events'
'en-US': 'Placeholder Content'
},
desc: {
'zh-CN': '<p>可通过 `slot = placeholder` 自定义占位内容。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>可通过 `slot = placeholder` 自定义占位内容。</p>',
'en-US': '<p>You can use `slot = placeholder` to customize the placeholder.</p>'
},
codeFiles: ['custom-placeholder.vue']
},
@ -80,12 +80,12 @@ export default {
demoId: 'lazy-load',
name: {
'zh-CN': '懒加载',
'en-US': 'events'
'en-US': 'Lazy loading'
},
desc: {
'zh-CN':
'<p>可通过 `lazy` 开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 `scroll-container` 来设置滚动容器，若未定义，则为最近一个 `overflow` 值为 `auto` 或 `scroll` 的父元素。<p>',
'en-US': '<p>bbutton click</p>'
'<p>可通过 `lazy` 开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 `scroll-container` 来设置滚动容器，若未定义，则为最近一个 `overflow` 值为 `auto` 或 `scroll` 的父元素。</p>',
'en-US': '<p>You can use `lazy` to enable lazy loading. Images are loaded only when they are scrolled to the visible range. You can use `scroll-container` to set the scrolling container. If it is not defined, the scrolling container is the parent element whose latest `overflow` value is `auto` or `scroll`.</p>'
},
codeFiles: ['lazy-load.vue']
},
@ -93,11 +93,11 @@ export default {
demoId: 'preview-z-index',
name: {
'zh-CN': '图片预览层级',
'en-US': 'events'
'en-US': 'Image preview level'
},
desc: {
'zh-CN': '<p>可通过 `z-index` 设置预览图片的层级。<p>',
'en-US': '<p>bbutton click</p>'
'en-US': '<p>You can use `z-index` to set the preview image level.</p>'
},
codeFiles: ['preview-z-index.vue']
},
@ -105,11 +105,11 @@ export default {
demoId: 'load-event',
name: {
'zh-CN': '加载成功事件',
'en-US': 'events'
'en-US': 'Loading success event'
},
desc: {
'zh-CN': '<p>图片加载成功触发 `load` 事件。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>图片加载成功触发 `load` 事件。</p>',
'en-US': '<p>The `load` event is triggered when the image is loaded successfully.</p>'
},
codeFiles: ['load-event.vue']
},
@ -117,11 +117,11 @@ export default {
demoId: 'load-error',
name: {
'zh-CN': '加载失败事件',
'en-US': 'events'
'en-US': 'Loading failure event'
},
desc: {
'zh-CN': '<p>图片加载失败触发 `error` 事件。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>图片加载失败触发 `error` 事件。</p>',
'en-US': '<p>The `error` event is triggered when the image fails to be loaded.</p>'
},
codeFiles: ['load-error.vue']
},
@ -129,11 +129,11 @@ export default {
demoId: 'custom-load-failed-text',
name: {
'zh-CN': '加载失败',
'en-US': 'events'
'en-US': 'Loading failed.'
},
desc: {
'zh-CN': '<p>可通过 `slot = error` 自定义加载失败内容。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>可通过 `slot = error` 自定义加载失败内容。</p>',
'en-US': '<p>You can run the `slot = error` command to customize the content that fails to be loaded.</p>'
},
codeFiles: ['custom-load-failed-text.vue']
},
@ -141,11 +141,11 @@ export default {
demoId: 'preview-in-dialog',
name: {
'zh-CN': '对话框中预览图片',
'en-US': 'events'
'en-US': 'Preview picture in dialog box'
},
desc: {
'zh-CN': '<p>在 `dialog-box` 元素中嵌入 image 进行图片预览。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>在 `dialog-box` 元素中嵌入 image 进行图片预览。</p>',
'en-US': '<p>Embed the image in the `dialog-box` element for image preview.</p>'
},
codeFiles: ['preview-in-dialog.vue']
},
@ -153,11 +153,11 @@ export default {
demoId: 'thumbnail',
name: {
'zh-CN': '缩略图视图（非模态）',
'en-US': 'events'
'en-US': 'Thumbnail view (non-modal)'
},
desc: {
'zh-CN': '<p>通过 `is-thumbnail` 属性开启非模态缩略图视图的功能<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `is-thumbnail` 属性开启非模态缩略图视图的功能</p>',
'en-US': '<p>Enable the modeless thumbnail view through the `is-thumbnail` property<</p>'
},
codeFiles: ['thumbnail.vue']
},
@ -165,12 +165,12 @@ export default {
demoId: 'thumbnail-modal-view',
name: {
'zh-CN': '缩略图视图（模态）',
'en-US': 'events'
'en-US': 'Thumbnail view (modal)'
},
desc: {
'zh-CN':
'<p>通过 `modal-view` 属性开启模态缩略图视图的功能，可以通过modal-height属性设置模态框内对应的高度，默认值为 400。<p>',
'en-US': '<p>bbutton click</p>'
'<p>通过 `modal-view` 属性开启模态缩略图视图的功能，可以通过modal-height属性设置模态框内对应的高度，默认值为 400。</p>',
'en-US': '<p>You can use the `modal-view` attribute to enable the modal thumbnail view function. You can use the modal-height attribute to set the height of the modal box. The default value is 400.</p>'
},
codeFiles: ['thumbnail-modal-view.vue']
},
@ -178,11 +178,11 @@ export default {
demoId: 'menu-view',
name: {
'zh-CN': '目录视图（非模态）',
'en-US': 'events'
'en-US': 'Catalog View (Nonmodal)'
},
desc: {
'zh-CN': '<p>通过 `is-menu-view` 属性开启非模态目录视图的功能<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `is-menu-view` 属性开启非模态目录视图的功能</p>',
'en-US': '<p>Use the `is-menu-view` attribute to enable the non-modal catalog view.</p>'
},
codeFiles: ['menu-view.vue']
},
@ -190,12 +190,12 @@ export default {
demoId: 'menu-modal-view',
name: {
'zh-CN': '目录视图（模态）',
'en-US': 'events'
'en-US': 'Catalog View (modal)'
},
desc: {
'zh-CN':
'<p>通过 `modal-view` 属性开启模态目录视图的功能，可以通过`modal-height`属性设置模态框内对应的高度，默认值为 400。<p>',
'en-US': '<p>bbutton click</p>'
'<p>通过 `modal-view` 属性开启模态目录视图的功能，可以通过`modal-height`属性设置模态框内对应的高度，默认值为 400。</p>',
'en-US': '<p>Use the `modal-view` attribute to enable the modal directory view function. You can use the `modal-height` attribute to set the height of the modal box. The default value is 400.</p>'
},
codeFiles: ['menu-modal-view.vue']
},
@ -203,11 +203,11 @@ export default {
demoId: 'thumbnail-viewer-bg',
name: {
'zh-CN': '缩略图视图',
'en-US': 'events'
'en-US': 'Thumbnail View'
},
desc: {
'zh-CN': '<p>缩略图视图背景<p>',
'en-US': '<p>bbutton click</p>'
'en-US': '<p>Thumbnail View Background</p>'
},
codeFiles: ['thumbnail-viewer-bg.vue']
},
@ -215,11 +215,11 @@ export default {
demoId: 'menu-viewer-bg',
name: {
'zh-CN': '目录视图背景',
'en-US': 'events'
'en-US': 'Catalog View Background'
},
desc: {
'zh-CN': '<p>目录视图<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>目录视图</p>',
'en-US': '<p>Table of Contents View</p>'
},
codeFiles: ['menu-viewer-bg.vue']
},
@ -227,11 +227,11 @@ export default {
demoId: 'thumbnail-rename',
name: {
'zh-CN': '视图文件名-缩略图',
'en-US': 'events'
'en-US': 'View File Name - Thumbnail'
},
desc: {
'zh-CN': '<p>视图文件名-缩略图<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>视图文件名-缩略图</p>',
'en-US': '<p>View File Name - Thumbnail</p>'
},
codeFiles: ['thumbnail-rename.vue']
},
@ -239,14 +239,83 @@ export default {
demoId: 'menu-rename',
name: {
'zh-CN': '视图文件名-目录',
'en-US': 'events'
'en-US': 'View File Name - Directory'
},
desc: {
'zh-CN': '<p>视图文件名-目录<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>视图文件名-目录</p>',
'en-US': '<p>View File Name - Directory</p>'
},
codeFiles: ['menu-rename.vue']
}
],
apis: []
apis: [
{
'name': 'Image',
'type': 'component',
'props': [
{
'name': 'image-size ',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '设置预览的图片的大小',
'en-US': 'Sets the size of the previewed picture.'
},
'demoId': 'round'
},
{
'name': 'preview-visible',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '开启移动端预览大图的功能',
'en-US': 'Enable the function of previewing large images on mobile devices.'
},
'demoId': ''
},
{
'name': 'round',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '通过 round 设置是否展示圆形',
'en-US': 'Use round to set whether to display a circle.'
},
'demoId': 'round'
},
{
'name': 'show-hover',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '设置预览的图片的悬浮效果',
'en-US': 'Sets the floating effect of the previewed image.'
},
'demoId': 'show-hover'
},
{
'name': 'show-index',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '开启图片序列号展示',
'en-US': 'Enable the display of image serial numbers.'
},
'demoId': 'preview-src-list'
},
],
'events': [
{
'name': 'delete',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '图片删除触发',
'en-US': 'Triggered by image deletion.'
},
'demoId': ''
}
],
},
]
}

232
examples/sites/demos/mobile-first/app/pull-refresh/webdoc/pull-refresh.js
View File

@ -1,8 +1,7 @@
export default {
column: '2',
owner: '',
demos: [
{
demos: [{
demoId: 'basic-usage',
name: {
'zh-CN': '基本用法',
@ -30,7 +29,7 @@ export default {
demoId: 'loosing-text',
name: {
'zh-CN': '下拉可刷新的文字提示',
'en-US': 'basic usage'
'en-US': 'Drop-down refreshable text prompt'
},
desc: {
'zh-CN': '<p>通过属性 <code>loosing-text</code> 设置 pulling 提示文字</p>',
@ -42,7 +41,7 @@ export default {
demoId: 'success-text',
name: {
'zh-CN': '刷新成功的文字',
'en-US': 'basic usage'
'en-US': 'Texts that are successfully refreshed'
},
desc: {
'zh-CN': '<p>通过属性 <code>success-text</code> 设置 pulling 提示文字</p>',
@ -54,7 +53,7 @@ export default {
demoId: 'success-duration',
name: {
'zh-CN': '刷新成功的文字展示时长',
'en-US': '刷新成功的文字展示时长'
'en-US': 'Text display duration that is successfully refreshed.'
},
desc: {
'zh-CN': '<p>设置属性 <code>success-duration</code> 指定延时时间</p>',
@ -82,8 +81,7 @@ export default {
},
desc: {
'zh-CN': `<p>设置属性 <code>head-height</code> 为数字或字符串，例如：<code>100/'100'/'100px'/'6rem'</code></p>`,
'en-US': `<p>
Set the property <code>head-height</code> to a number or string, for example: <code>100/'100'/'100px'/'6rem'</code></p>`
'en-US': `<p>Set the property <code>head-height</code> to a number or string, for example: <code>100/'100'/'100px'/'6rem'</code></p>`
},
codeFiles: ['head-height.vue']
},
@ -112,5 +110,221 @@ export default {
codeFiles: ['pull-refresh-slot.vue']
}
],
apis: []
}
apis: [{
'name': 'pull-refresh',
'type': 'component',
'props': [{
'name': ' animationDuration',
'type': '[Number, String]',
'defaultValue': '默认值是300',
'desc': {
'zh-CN': '刷新成功后头部延时消失时间',
'en-US': 'Header delay disappearing time after successful refresh'
},
'demoId': 'animation-duration'
},
{
'name': 'disabled',
'type': 'Boolean',
'defaultValue': '默认值是false',
'desc': {
'zh-CN': '是否禁用下拉刷新',
'en-US': 'Whether to disable pull-down refresh'
},
'demoId': 'disabled'
},
{
'name': 'headHeight',
'type': '[Number, String]',
'defaultValue': '默认值是50',
'desc': {
'zh-CN': '组件头部提示区域的高度',
'en-US': 'Height of the component head prompt area'
},
'demoId': 'head-height'
},
{
'name': 'loadingOptions',
'type': 'Object',
'defaultValue': '默认值是空对象{}',
'desc': {
'zh-CN': '不使用loading插槽时，内置加载组件Loading的参数：Loading.service(options)',
'en-US': 'When the loading slot is not used, the loading parameter of the built-in loading component is Loading.service(options).'
},
'demoId': ''
},
{
'name': 'loadingText',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '数据刷新过程的提示文本',
'en-US': 'Prompt text for the data refresh process'
},
'demoId': ''
},
{
'name': 'loosingText',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '向下拖动超过阈值后可松开进行刷新的提示文本',
'en-US': 'Drag down to release the prompt text for refresh after the threshold is exceeded.'
},
'demoId': 'loosing-text'
},
{
'name': 'modelValue',
'type': 'Boolean',
'defaultValue': '默认值是false',
'desc': {
'zh-CN': '是否正在进行下拉刷新',
'en-US': 'Is the pull-down refresh in progress'
},
'demoId': ''
},
{
'name': 'pullDistance',
'type': '[Number, String]',
'defaultValue': '默认值是属性 `headHeight` 的值',
'desc': {
'zh-CN': '拖拽产生刷新的距离',
'en-US': 'Refreshing distance generated by dragging'
},
'demoId': ''
},
{
'name': 'pullingText',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '向下拖动过程的提示文本',
'en-US': 'Drag down the prompt text for the procedure'
},
'demoId': 'pulling-text'
},
{
'name': 'selfSimulate',
'type': 'Boolean',
'defaultValue': '默认值是false',
'desc': {
'zh-CN': '是否开启自模拟Touch事件。如果开启，那么组件只处理自身产生的模拟Touch事件，忽略冒泡上来的非自身模拟事件。正常非模拟Touch事件始终不会跳过处理',
'en-US': 'Indicates whether to enable the self-simulation Touch event. If this function is enabled, the component only processes simulated Touch events generated by itself and ignores non-simulated events generated by itself. Normal non-simulated Touch events never skip processing'
},
'demoId': ''
},
{
'name': 'successDuration',
'type': '[Number, String]',
'defaultValue': '默认值是500',
'desc': {
'zh-CN': '刷新成功提示文本延时消失时间',
'en-US': 'Time for the text to disappear after the refresh is successful.'
},
'demoId': 'success-duration'
},
{
'name': 'successText',
'type': 'String',
'defaultValue': '',
'desc': {
'zh-CN': '刷新成功的提示文本',
'en-US': 'Text of the message indicating that the refresh is successful'
},
'demoId': 'success-text'
}
],
'events': [{
'name': 'change',
'type': 'Function({ status, distance })',
'defaultValue': 'status:{String 组件当前状态}，distance:{Number 当前的拖动距离}',
'desc': {
'zh-CN': '在组件状态改变时抛出',
'en-US': 'Thrown when the component state changes'
},
'demoId': ''
},
{
'name': 'refresh',
'type': 'Function()',
'defaultValue': '',
'desc': {
'zh-CN': '在组件状态进入 loading 刷新数据时抛出',
'en-US': 'Thrown when the component enters the loading state to refresh data'
},
'demoId': ''
},
{
'name': 'update:modelValue',
'type': 'Function(isLoading)',
'defaultValue': 'isLoading:{Boolean 组件是否处于 loading}',
'desc': {
'zh-CN': '在组件状态进入 loading 刷新数据时抛出',
'en-US': 'Thrown when the component enters the loading state to refresh data'
},
'demoId': ''
}
],
'slots': [{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件默认插槽',
'en-US': 'Component Default Slot'
},
'demoId': 'pull-refresh-slot'
},
{
'name': 'loading',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件 loading 插槽，自定义 loading 状态的提示',
'en-US': 'Component loading slot, which is used to customize the loading status prompt.'
},
'demoId': 'pull-refresh-slot'
},
{
'name': 'loosing',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件 loosing 插槽，自定义 loosing 状态的提示',
'en-US': 'Component loosing slot, which is used to customize the loosing status prompt.'
},
'demoId': 'pull-refresh-slot'
},
{
'name': 'normal',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件 normal 插槽，自定义 normal 状态的提示',
'en-US': 'Indicates the normal slot of the component. The prompt for the normal status is customized.'
},
'demoId': 'pull-refresh-slot'
},
{
'name': 'pulling',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件 pulling 插槽，自定义 pulling 状态的提示',
'en-US': 'Pull slot of the component, which is used to customize the prompt of the pull status.'
},
'demoId': 'pull-refresh-slot'
},
{
'name': 'success',
'type': '',
'defaultValue': '',
'desc': {
'zh-CN': '组件 success 插槽，自定义 success 状态的提示',
'en-US': 'Indicates the success slot of the component. The success status is customized.'
},
'demoId': 'pull-refresh-slot'
}
]
}]
}

6
examples/sites/demos/mobile-first/app/tabs/basic-usage.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/mobile-first/app/tabs/before-leave.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

4
examples/sites/demos/mobile-first/app/tabs/change-title.vue
View File

@ -2,8 +2,8 @@
<div>
<tiny-button @click="handleClick"> 改变标题 </tiny-button>
<tiny-tabs v-model="activeName">
<tiny-tab-item :title="title" name="first"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="second"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item :title="title" name="first"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="second"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue
View File

@ -16,10 +16,10 @@
<span class="inline-block">数据组件</span>
</div>
</template>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等</div>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

20
examples/sites/demos/mobile-first/app/tabs/position-bottom.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position-left.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position-right.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

6
examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue
View File

@ -4,10 +4,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

20
examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

8
examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
View File

@ -32,22 +32,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth.',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]

2
examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
View File

@ -38,7 +38,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
View File

@ -25,17 +25,17 @@ export default {
{
title: '数据组件',
name: 'second',
content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: '导航组件,帮助网站访问者浏览站点的组件.'
content: '导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
}
],
activeName: 'second',

6
examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" @click="click" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

8
examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

16
examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue
View File

@ -11,10 +11,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" class="w-1/2" show-more-tabs>
@ -45,22 +45,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
],
activeName1: 'second',
@ -68,7 +68,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/mobile-first/app/tabs/tabs-size.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

4
examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
View File

@ -41,12 +41,12 @@ export default {
{
title: '数据组件',
name: 'f2',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'f3',
content: ' 导航组件,帮助网站访问者浏览站点的组件. '
content: ' 导航组件,帮助网站访问者浏览站点的组件。 '
}
]
}

2
examples/sites/demos/mobile-first/app/tabs/with-add.vue
View File

@ -20,7 +20,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

100
examples/sites/demos/mobile-first/app/tooltip/webdoc/tooltip.js
View File

@ -1,15 +1,14 @@
export default {
column: '2',
owner: '',
demos: [
{
demos: [{
demoId: 'basic-usage',
name: {
'zh-CN': '基本用法',
'en-US': 'basic usage'
},
desc: {
'zh-CN': '<p></p>',
'zh-CN': '<p>按钮类型</p>',
'en-US': '<p>button type</p>'
},
codeFiles: ['basic-usage.vue']
@ -19,11 +18,11 @@ export default {
demoId: 'dynamic-disable',
name: {
'zh-CN': '禁用',
'en-US': 'events'
'en-US': 'disabling'
},
desc: {
'zh-CN': '<p>通过 `disabled` 设置禁用<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `disabled` 设置禁用</p>',
'en-US': '<p>Disable by setting `disabled`</p>'
},
codeFiles: ['dynamic-disable.vue']
},
@ -31,12 +30,11 @@ export default {
demoId: 'manual-control-tip',
name: {
'zh-CN': '手动控制',
'en-US': 'events'
'en-US': 'Manual control'
},
desc: {
'zh-CN':
'<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏</p>',
'en-US': '<p>Manual control mode. After the `manual` attribute is set to true, the mouseenter and mouseleave events do not take effect. You can set the `v-model` to dynamically control the display and hiding of the events.</p>'
},
codeFiles: ['manual-control-tip.vue']
},
@ -44,11 +42,11 @@ export default {
demoId: 'tooltip-theme',
name: {
'zh-CN': '主题',
'en-US': 'events'
'en-US': 'Subject'
},
desc: {
'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。</p>',
'en-US': '<p>Set the theme through the `effect` property. The options are dark and light.</p>'
},
codeFiles: ['tooltip-theme.vue']
},
@ -56,12 +54,11 @@ export default {
demoId: 'open-delay',
name: {
'zh-CN': '自动隐藏和延迟时间',
'en-US': 'events'
'en-US': 'Auto-hide and delay time'
},
desc: {
'zh-CN':
'<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
'en-US': '<p>The `hide-after` attribute is used to set the automatic hiding delay of the Tooltip component, in milliseconds. If the value is 0, the Tooltip component is not automatically hidden. The `open-delay` property is used to set the delay for the Tooltip component to appear, in milliseconds.</p>'
},
codeFiles: ['open-delay.vue']
},
@ -69,11 +66,11 @@ export default {
demoId: 'tooltip-offset',
name: {
'zh-CN': '偏移量',
'en-US': 'events'
'en-US': 'Offset'
},
desc: {
'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。</p>',
'en-US': '<p>Use the `offset` property to set the offset where the Tooltip component appears.</p>'
},
codeFiles: ['tooltip-offset.vue']
},
@ -81,11 +78,11 @@ export default {
demoId: 'enterable',
name: {
'zh-CN': '鼠标是否可进入',
'en-US': 'events'
'en-US': 'Whether the mouse can be accessed'
},
desc: {
'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。</p>',
'en-US': '<p>Use the `enterable` attribute to set whether the mouse can access the tooltip.</p>'
},
codeFiles: ['enterable.vue']
},
@ -93,11 +90,11 @@ export default {
demoId: 'visible-arrow',
name: {
'zh-CN': '是否显示箭头',
'en-US': 'events'
'en-US': 'Whether to display arrows'
},
desc: {
'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。</p>',
'en-US': '<p>Use the `visible-arrow` property to set whether to display the Tooltip arrow.</p>'
},
codeFiles: ['visible-arrow.vue']
},
@ -105,11 +102,11 @@ export default {
demoId: 'popper-class',
name: {
'zh-CN': '添加样式类名',
'en-US': 'events'
'en-US': 'Add Style Class Name'
},
desc: {
'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。</p>',
'en-US': '<p>Use the `popper-class` attribute to add a class name to the tooltip\'s popper.</p>'
},
codeFiles: ['popper-class.vue']
},
@ -117,11 +114,11 @@ export default {
demoId: 'tooltip-content',
name: {
'zh-CN': '插槽',
'en-US': 'events'
'en-US': 'Slots'
},
desc: {
'zh-CN': '<p>设置过通过 `content` 插槽添加自定义内容。滤类型<p>',
'en-US': '<p>bbutton click</p>'
'en-US': '<p>Set to add custom content through the `content` slot. Filter Type</p>'
},
codeFiles: ['tooltip-content.vue']
},
@ -129,12 +126,11 @@ export default {
demoId: 'popper-options',
name: {
'zh-CN': 'popper 配置',
'en-US': 'events'
'en-US': 'Popper Configuration'
},
desc: {
'zh-CN':
'<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)</p>',
'en-US': '<p>Use the `popper-options` attribute to configure popper parameters for Tooltip. For details, see [popper.js](https://popper.js.org/).</p>'
},
codeFiles: ['popper-options.vue']
},
@ -142,11 +138,11 @@ export default {
demoId: 'popper-options-bubbling',
name: {
'zh-CN': 'popper 配置通过 bubbling 控制 tip 位置',
'en-US': 'events'
'en-US': 'The popper configuration uses bubbling to control the tip position.'
},
desc: {
'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置</p>',
'en-US': '<p>When popperOptions.bubbling is set to true, all parent elements contain scroll bars. During scrolling, the position of tip is dynamically changed.</p>'
},
codeFiles: ['popper-options-bubbling.vue']
},
@ -154,11 +150,11 @@ export default {
demoId: 'tabindex',
name: {
'zh-CN': 'tabindex 配置',
'en-US': 'events'
'en-US': 'tabindex configuration'
},
desc: {
'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。</p>',
'en-US': '<p>By configuring `tabindex`, the configured attributes are automatically added to the trigger source of the component.</p>'
},
codeFiles: ['tabindex.vue']
},
@ -166,12 +162,11 @@ export default {
demoId: 'content-pre',
name: {
'zh-CN': '文本预格式化',
'en-US': 'events'
'en-US': 'Text Preformatting'
},
desc: {
'zh-CN':
'<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。</p>',
'en-US': '<p>If `pre` is set to `true`, the `content` text is preformatted. <br>Text enclosed in the `<pre></pre>` tag element retains spaces and newline characters, and the text is rendered in an equal-width font.</p>'
},
codeFiles: ['content-pre.vue']
},
@ -179,11 +174,11 @@ export default {
demoId: 'content-render',
name: {
'zh-CN': '自定义渲染',
'en-US': 'events'
'en-US': 'Custom Rendering'
},
desc: {
'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法</p>',
'en-US': '<p>Configure a custom rendering method using the property `renderContent`</p>'
},
codeFiles: ['content-render.vue']
},
@ -191,15 +186,14 @@ export default {
demoId: 'z-index',
name: {
'zh-CN': '弹出层 zIndex',
'en-US': 'events'
'en-US': 'z-index'
},
desc: {
'zh-CN':
'<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。<p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。</p>',
'en-US': '<p>When the `z-index` attribute is set to `relative`, the value of zIndex of the pop-up layer style attribute is Reference and its parent Dom. <br>When the `z-index` attribute is set to the default value `next`, the value of the pop-up layer style attribute zIndex is maintained by the component library.</p>'
},
codeFiles: ['z-index.vue']
}
],
apis: []
}
}

26
examples/sites/demos/mobile/app/alert/basic-usage.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="demo-alert-base">
<tiny-alert description="type 为默认值 info"></tiny-alert>
<tiny-alert type="error" description="type 为 error"></tiny-alert>
<tiny-alert type="success" description="type 为 success"></tiny-alert>
<tiny-alert type="warning">
<span>type 为 warning，且使用内容插槽</span>
</tiny-alert>
</div>
</template>
<script>
import { Alert } from '@opentiny/vue'
export default {
components: {
TinyAlert: Alert
}
}
</script>
<style scoped>
.demo-alert-base .tiny-mobile-alert {
margin-bottom: 8px;
}
</style>

13
examples/sites/demos/mobile/app/alert/center.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<tiny-alert center description="文字居中"></tiny-alert>
</template>
<script>
import { Alert } from '@opentiny/vue'
export default {
components: {
TinyAlert: Alert
}
}
</script>

32
examples/sites/demos/mobile/app/alert/custom-close.vue
View File

@ -1,18 +1,36 @@
<template>
<div class="alert-wrap">
<tiny-alert>默认关闭按钮</tiny-alert>
<tiny-alert :closable="false"> 不可关闭 </tiny-alert>
<tiny-alert close-text="关闭"> 自定义关闭按钮为文本 </tiny-alert>
<tiny-alert type="warning" description="type 为 warning"></tiny-alert>
<p>1. 当 <code>closable</code> 属性设成 false 时, 提示不可关闭。</p>
<tiny-alert :closable="false"> 这个提示不可关闭 </tiny-alert>
<br />
<p>2. 当 <code>auto-hide</code> 属性设成 true 时, 提示将在2秒后自动关闭。</p>
自动关闭: <tiny-switch v-model="autoHide"></tiny-switch>
<tiny-alert :auto-hide="autoHide"> {{ autoHide ? '2秒后将自动关闭' : '点击开关查看自动关闭功能' }} </tiny-alert>
<br />
<p>3. 通过 <code>close-text</code> 属性自定义关闭按钮文本。</p>
<tiny-alert :close-text="closeText"> close-text属性使用示例 </tiny-alert>
<br />
<p>4. 提示关闭时触发 <code>close</code> 事件：</p>
<tiny-alert @close="close"> close-text属性使用示例 </tiny-alert>
</div>
</template>
<script lang="jsx">
import { Alert } from '@opentiny/vue'
<script>
import { Alert, Switch } from '@opentiny/vue'
export default {
components: {
TinyAlert: Alert
TinyAlert: Alert,
TinySwitch: Switch
},
data() {
return {
autoHide: false,
closeText: '自定义关闭',
}
},
methods: {
close() {

30
examples/sites/demos/mobile/app/alert/target.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="alert-target-demo">
<div class="alert-wrap" ref="target">
<tiny-tabs activeName="first" activeColor="blue">
<tiny-tab-item title="标签1" name="first"> 内容1 </tiny-tab-item>
<tiny-tab-item title="标签2" name="second"> 内容2 </tiny-tab-item>
<tiny-tab-item title="标签3" name="third"> 内容3 </tiny-tab-item>
</tiny-tabs>
</div>
<tiny-alert target="target">展示在标签栏上</tiny-alert>
</div>
</template>
<script>
import { Alert, Tabs, TabItem } from '@opentiny/vue'
export default {
components: {
TinyAlert: Alert,
TinyTabs: Tabs,
TinyTabItem: TabItem
}
}
</script>
<style>
.alert-wrap .tiny-mobile-alert {
margin-bottom: 8px;
}
</style>

50
examples/sites/demos/mobile/app/alert/webdoc/alert.js
View File

@ -2,6 +2,17 @@ export default {
column: '2',
owner: '',
demos: [
{
'demoId': 'base',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN':
'通过 <code>type</code> 设置不同的类型 可选值：success | warning | info | error ，默认值：success。<br> 同时可通过 <code>default</code> 默认插槽自定义提示内容。',
'en-US':
'Set different types through <code>type</code>. The options are success | warning | info | error. The default value is success. <br/> You can customize the prompt content through the <code>default</code> slot. '
},
'codeFiles': ['basic-usage.vue']
},
{
demoId: 'custom-close',
name: {
@ -26,6 +37,15 @@ export default {
},
codeFiles: ['icon.vue']
},
{
'demoId': 'center',
'name': { 'zh-CN': '文字居中', 'en-US': 'Center text' },
'desc': {
'zh-CN': '<p>通过 <code>center</code> 属性可使文字显示居中。</p>\n',
'en-US': '<p>You can use the <code>center</code> property to center the text. </p>\n'
},
'codeFiles': ['center.vue']
},
{
demoId: 'size',
name: {
@ -38,6 +58,18 @@ export default {
},
codeFiles: ['size.vue']
},
{
demoId: 'target',
name: {
'zh-CN': '指定挂载节点',
'en-US': 'Specify display node'
},
desc: {
'zh-CN': '通过<code> target </code>属性绑定要挂载的容器ref值，实现自定义展示位置',
'en-US': 'Specify display position'
},
codeFiles: ['target.vue']
},
{
demoId: 'slot-default',
name: {
@ -56,6 +88,13 @@ export default {
name: 'alert', // 组件名称展示使用
type: 'component', // API 类型
properties: [
{
'name': 'center',
'type': 'boolean',
'defaultValue': 'false',
'desc': { 'zh-CN': '文字是否居中', 'en-US': 'Whether the text is centered' },
'demoId': 'center'
},
{
name: 'closable',
type: 'Boolean',
@ -106,6 +145,17 @@ export default {
},
demoId: 'size'
},
{
name: 'target',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '挂载容器的ref值，通过该属性可以让组件展示在对应容器的顶部',
'en-US':
'Mounted container reference, this property allows the component to be displayed at the top of the corresponding container.'
},
demoId: 'target'
},
{
name: 'type',
type: 'String',

33
examples/sites/demos/mobile/app/checkbox/basic-usage.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="checkbox-wrap">
<p>当前选中的值为：{{ checked1 }}</p>
<tiny-checkbox v-model="checked1" label="复选框1"></tiny-checkbox>
<p>使用插槽：</p>
<tiny-checkbox v-model="checked2">
<span style="color: red">当前选中的值为：{{ checked2 }}</span>
</tiny-checkbox>
</div>
</template>
<script>
import { Checkbox } from '@opentiny/vue'
export default {
components: {
TinyCheckbox: Checkbox
},
data() {
return {
checked1: true,
checked2: false
}
}
}
</script>
<style scoped>
.checkbox-wrap {
padding: 20px;
}
</style>

15
examples/sites/demos/mobile/app/checkbox/default.vue → examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
View File

@ -1,19 +1,14 @@
<template>
<div class="checkbox-wrap">
<tiny-checkbox-group v-model="checked">
<tiny-checkbox label="复选框1">
<span style="color: blue">复选框1</span>
</tiny-checkbox>
<tiny-checkbox label="复选框2">
<span style="color: red">复选框2</span>
</tiny-checkbox>
<tiny-checkbox label="复选框1"></tiny-checkbox>
<tiny-checkbox label="复选框2"></tiny-checkbox>
</tiny-checkbox-group>
<br />
当前选中的值为：{{ checked }}
<p>当前选中的值为：{{ checked }}</p>
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox, CheckboxGroup } from '@opentiny/vue'
export default {
@ -29,7 +24,7 @@ export default {
}
</script>
<style>
<style scoped>
.checkbox-wrap {
padding: 20px;
}

7
examples/sites/demos/mobile/app/checkbox/label.vue → examples/sites/demos/mobile/app/checkbox/disabled.vue
View File

@ -3,13 +3,14 @@
<tiny-checkbox-group v-model="checked">
<tiny-checkbox label="复选框1" name="name"></tiny-checkbox>
<tiny-checkbox label="复选框2" disabled></tiny-checkbox>
<tiny-checkbox label="复选框3" disabled></tiny-checkbox>
</tiny-checkbox-group>
<br />
当前选中的值为：{{ checked }}
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox, CheckboxGroup } from '@opentiny/vue'
export default {
@ -19,13 +20,13 @@ export default {
},
data() {
return {
checked: ['复选框1']
checked: ['复选框1', '复选框2']
}
}
}
</script>
<style>
<style scoped>
.checkbox-wrap {
padding: 20px;
}

4
examples/sites/demos/mobile/app/checkbox/event-change.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox } from '@opentiny/vue'
export default {
@ -24,7 +24,7 @@ export default {
}
</script>
<style>
<style scoped>
.checkbox-wrap {
padding: 20px;
}

49
examples/sites/demos/mobile/app/checkbox/icon-position.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="checkbox-wrap">
<p>
1. 给 <code>checkbox-group</code> 设置 <code>icon-position</code>属性，指定其中所有
<code>checkbox</code> 子选项的同名属性。
</p>
<tiny-checkbox-group v-model="checked1" icon-position="top">
<tiny-checkbox label="复选框1">
<span style="display: block;margin-bottom: 10px;"
>第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。第1个选项内容。。。</span
>
</tiny-checkbox>
<tiny-checkbox label="复选框2">
<span
>第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。第2个选项内容。。。</span
>
</tiny-checkbox>
</tiny-checkbox-group>
<br />
<p>2. 也可以给单个 <code>checkbox</code> 复选框设置 <code>icon-position</code>属性。</p>
<tiny-checkbox v-model="checked2" icon-position="top">
<span>很长的label。。。很长的label。。。很长的label。。。很长的label。。。很长的label。。。</span>
</tiny-checkbox>
</div>
</template>
<script>
import { Checkbox, CheckboxGroup } from '@opentiny/vue'
export default {
components: {
TinyCheckbox: Checkbox,
TinyCheckboxGroup: CheckboxGroup
},
data() {
return {
checked1: ['复选框1'],
checked2: false
}
}
}
</script>
<style scoped>
.checkbox-wrap {
padding: 20px;
}
</style>

4
examples/sites/demos/mobile/app/checkbox/indeterminate.vue
View File

@ -7,7 +7,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox, CheckboxGroup } from '@opentiny/vue'
export default {
@ -48,7 +48,7 @@ export default {
}
</script>
<style>
<style scoped>
.checkbox-wrap {
padding: 20px;
}

4
examples/sites/demos/mobile/app/checkbox/true-false-label.vue
View File

@ -6,7 +6,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Checkbox } from '@opentiny/vue'
export default {
@ -21,7 +21,7 @@ export default {
}
</script>
<style>
<style scoped>
.checkbox-wrap {
padding: 20px;
}

172
examples/sites/demos/mobile/app/checkbox/webdoc/checkbox.js
View File

@ -3,16 +3,81 @@ export default {
owner: '',
demos: [
{
demoId: 'default',
demoId: 'basic-usage',
name: {
'zh-CN': '插槽',
'en-US': 'button type'
'zh-CN': '基本使用',
'en-US': 'basic-usage'
},
desc: {
'zh-CN': '<p>默认插槽</p>',
'en-US': '<p>button type</p>'
'zh-CN':
'<p>通过 <code>v-model/modelValue</code> 属性绑定勾选值，<code>label</code> 或 <code>default</code> 插槽绑定标签文本。</p>',
'en-US':
'<p>Bind the checked value through the <code>v-model/modelValue/code> attribute and the <code>label/code> props or <code>default/code> slot to bind the label text.</p>'
},
codeFiles: ['default.vue']
codeFiles: ['basic-usage.vue']
},
{
demoId: 'checkbox-group',
name: {
'zh-CN': '复选框组',
'en-US': 'checkbox group'
},
desc: {
'zh-CN':
'<p>通过 <code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 <code>checkbox</code> 的描述文本。 <code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>',
'en-US':
'<p>Manages multiple <code>checkbox</code> elements into a group through the <code>checkbox-group</code> element. In <code>checkbox-group</code> , use <code>v-model</code> to bind variables of the Array type to implement bidirectional binding. The <code>label</code> attribute of the <code>checkbox</code> is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. <code>label</code> corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected. </p>'
},
codeFiles: ['checkbox-group.vue']
},
{
demoId: 'indeterminate',
name: {
'zh-CN': '全选与半选',
'en-US': 'Set the all-selected and indeterminate state'
},
desc: {
'zh-CN': '<p>全选与半选</p>',
'en-US': '<p></p>'
},
codeFiles: ['indeterminate.vue']
},
{
demoId: 'disabled',
name: {
'zh-CN': '禁用',
'en-US': 'disabled'
},
desc: {
'zh-CN': '<p>通过 <code>disabled</code> 设置禁用。</p>',
'en-US': '<p>The demo of <code>disabled<code> attribute.</p>'
},
codeFiles: ['disabled.vue']
},
{
demoId: 'custom-value',
name: {
'zh-CN': '自定义取值',
'en-US': 'custom value'
},
desc: {
'zh-CN': '<p>通过 <code>true-label</code> 自定义选中值，<code>false-label</code> 自定义未选中值。</p>',
'en-US':
'<p>Customize the selected value with <code>true-label</code> and the unselected value with <code>false-label</code>.</p>'
},
codeFiles: ['true-false-label.vue']
},
{
demoId: 'icon-position',
name: {
'zh-CN': 'icon对齐方式',
'en-US': 'Icon Alignment'
},
desc: {
'zh-CN': '<p>通过 <code>icon-position</code> 属性设置图标与文本的对齐方式。</p>',
'en-US': '<p>Set the alignment of icons and text using the <code>icon-position</code> property.k</p>'
},
codeFiles: ['icon-position.vue']
},
{
demoId: 'event-change',
@ -21,45 +86,10 @@ export default {
'en-US': 'button round'
},
desc: {
'zh-CN': '<p>事件</p>',
'en-US': '<p>button round</p>'
'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>',
'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>'
},
codeFiles: ['event-change.vue']
},
{
demoId: 'indeterminate',
name: {
'zh-CN': '全选与半选',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>全选与半选</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['indeterminate.vue']
},
{
demoId: 'label',
name: {
'zh-CN': '选中值设置',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>复选框组选中的值设置</p>'
},
codeFiles: ['label.vue']
},
{
demoId: 'true-false-label',
name: {
'zh-CN': '选中值设置',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>选中与未选中的值设置</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['true-false-label.vue']
}
],
apis: [
@ -72,8 +102,8 @@ export default {
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>当前是否勾选,该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '<p>是否选中</p>',
'en-US': '<p>whether checked</p>'
},
demoId: ''
},
@ -82,20 +112,30 @@ export default {
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>当前是否勾选,该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '<p>是否禁用</p>',
'en-US': '<p>whether disabled</p>'
},
demoId: 'label'
demoId: 'disabled'
},
{
name: 'false-label',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>没有选中时的值</p>',
'en-US': 'display different button'
'zh-CN': '<p>未选中的值</p>',
'en-US': '<p>alue when no option is selected</p>'
},
demoId: 'true-false-label'
demoId: 'custom-value'
},
{
name: 'icon-position',
type: 'String',
defaultValue: 'center',
desc: {
'zh-CN': "<p>图标与文本的对齐方式，可选值：'center' | 'top'</p>",
'en-US': "<p>Alignment of icon and text, optional value: 'center' | 'top'</p>"
},
demoId: 'icon-position'
},
{
name: 'true-label',
@ -103,17 +143,18 @@ export default {
defaultValue: '',
desc: {
'zh-CN': '<p>选中时的值</p>',
'en-US': 'display different button'
'en-US': '<p>selected value</p>'
},
demoId: 'true-false-label'
demoId: 'custom-value'
},
{
name: 'indeterminate',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>设置 indeterminate 状态，只负责样式控制,该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '<p>设置 indeterminate 状态，只负责样式控制,该属性默认为 false</p>',
'en-US':
'<p>Setting an indeterminate state, which only controls the style, and this property by default is false.</p>'
},
demoId: 'indeterminate'
},
@ -123,9 +164,10 @@ export default {
defaultValue: '',
desc: {
'zh-CN': '<p>选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）</p>',
'en-US': 'display different button'
'en-US':
'<p>The value of the selected state (only valid for checkbox-group or when the bound object is of type array)</p>'
},
demoId: 'label'
demoId: 'basic-usage'
},
{
name: 'name',
@ -133,19 +175,19 @@ export default {
defaultValue: '',
desc: {
'zh-CN': '<p>原生 name 属性</p>',
'en-US': 'display different button'
'en-US': '<p>native name attribute.</p>'
},
demoId: 'label'
demoId: ''
},
{
name: 'value / v-model',
name: 'v-model / modelValue',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>绑定值</p>',
'en-US': 'display different button'
'en-US': '<p>value</p>'
},
demoId: 'default'
demoId: 'basic-usage'
}
],
events: [
@ -155,7 +197,7 @@ export default {
defaultValue: '',
desc: {
'zh-CN': '<p>当绑定值变化时触发的事件,该事件可获取更新后的值</p>',
'en-US': 'Click'
'en-US': '<p>This event is triggered when the binding value changes</p>'
},
demoId: 'event-change'
}
@ -166,8 +208,8 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>组件默认插槽</p>',
'en-US': 'Click'
'zh-CN': '<p>标签文本内容</p>',
'en-US': '<p>label content</p>'
},
demoId: ''
}

105
examples/sites/demos/mobile/app/container/basic-usage.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div class="demo-container">
<div class="option-row">
<span class="tip">选择版型：</span>
<tiny-radio-group v-model="pattern">
<tiny-radio label="default">默认:default</tiny-radio>
<tiny-radio label="classic">经典:classic</tiny-radio>
</tiny-radio-group>
</div>
<tiny-container :pattern="pattern">
<template #left>
<div>标题</div>
</template>
<template #center>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</template>
<template #right>
<div>状态</div>
</template>
</tiny-container>
<tiny-container :pattern="pattern">
<template #left>
<div>标题标题标题标题标题</div>
</template>
<template #center>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</template>
<template #right>
<div>状态状态状态状态状态</div>
</template>
</tiny-container>
</div>
</template>
<script>
import { Container, Radio, RadioGroup } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyRadio: Radio,
TinyRadioGroup: RadioGroup
},
data() {
return {
pattern: 'default'
}
}
}
</script>
<style scoped>
.option-row {
display: flex;
align-items: center;
}
.option-row > span {
display: inline-block;
flex-shrink: 0;
width: 100px;
font-size: 16px;
font-weight: bold;
}
.option-row .tiny-radio-group {
flex-wrap: wrap;
height: 60px;
}
.demo-container .tiny-container {
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
margin-top: 24px;
}
.demo-container .tiny-container :deep(.tiny-container__header) {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container :deep(.tiny-container__aside) {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container :deep(.tiny-container__main) {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container :deep(.tiny-container__footer) {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

93
examples/sites/demos/mobile/app/container/custom-width.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div class="demo-container">
<div class="option-row">
<span class="tip">选择版型：</span>
<tiny-radio-group v-model="pattern">
<tiny-radio label="default">默认:default</tiny-radio>
<tiny-radio label="classic">经典:classic</tiny-radio>
</tiny-radio-group>
</div>
<tiny-container :pattern="pattern" :left-width="leftWidth" :right-width="rightWidth">
<template #left>
<div>标题标题标题标题标题</div>
</template>
<template #center>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</template>
<template #right>
<div>状态状态状态状态状态</div>
</template>
</tiny-container>
</div>
</template>
<script>
import { Container, Radio, RadioGroup } from '@opentiny/vue'
export default {
components: {
TinyContainer: Container,
TinyRadio: Radio,
TinyRadioGroup: RadioGroup
},
data() {
return {
pattern: 'default',
leftWidth: 80,
rightWidth: 80
}
}
}
</script>
<style scoped>
.option-row {
display: flex;
align-items: center;
}
.option-row > span {
display: inline-block;
flex-shrink: 0;
width: 100px;
font-size: 16px;
font-weight: bold;
}
.option-row .tiny-radio-group {
flex-wrap: wrap;
height: 60px;
}
.demo-container .tiny-container {
height: 300px;
color: #5f6774;
text-align: center;
font-size: 18px;
position: relative;
margin-top: 24px;
}
.demo-container .tiny-container :deep(.tiny-container__header) {
background-color: #ecf8ff;
border: 3px solid #ffffff;
color: #5b90af;
}
.demo-container .tiny-container :deep(.tiny-container__aside) {
background-color: #fff0f0;
border: 3px solid #ffffff;
color: #d27070;
}
.demo-container .tiny-container :deep(.tiny-container__main) {
background-color: #fffdec;
border: 3px solid #ffffff;
color: #b1a859;
}
.demo-container .tiny-container :deep(.tiny-container__footer) {
background-color: #e8ffed;
border: 3px solid #ffffff;
color: #84a18a;
}
</style>

7
examples/sites/demos/mobile/app/container/webdoc/container.cn.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Container 版型
---
# Container 版型
<div> 内置2种常见布局版型，方便快速搭建页面。</div>

7
examples/sites/demos/mobile/app/container/webdoc/container.en.md Normal file
View File

@ -0,0 +1,7 @@
---
title: Container dimension
---
# Container dimension
<div>Container component for layout, which facilitates page layout creation.</div>

80
examples/sites/demos/mobile/app/container/webdoc/container.js Normal file
View File

@ -0,0 +1,80 @@
export default {
column: '2',
owner: '',
demos: [
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '基础用法',
'en-US': 'base'
},
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'custom-width',
'name': { 'zh-CN': '自定义宽度和高度', 'en-US': 'Custom width ' },
'desc': {
'zh-CN': '自定义宽度',
'en-US': 'custom width'
},
'codeFiles': ['custom-width.vue']
}
],
apis: [
{
'name': 'container',
'type': 'component',
'props': [
{
'name': 'pattern',
'type': `'default' | 'classic'`,
'defaultValue': '"default"',
'desc': {
'zh-CN': '版型类型',
'en-US': 'Measurement type'
},
'demoId': 'basic-usaage'
},
{
'name': 'left-width',
'type': 'number | string',
'defaultValue': '60',
'desc': { 'zh-CN': '左侧宽度', 'en-US': 'Left width' },
'demoId': 'custom-width'
},
{
'name': 'right-width',
'type': 'number | string',
'defaultValue': '44',
'desc': { 'zh-CN': '右侧宽度', 'en-US': 'right width' },
'demoId': 'custom-width'
}
],
'events': [],
'slots': [
{
'name': 'left',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '左侧内容插槽', 'en-US': 'Title Slot' },
'demoId': 'basic-usage'
},
{
'name': 'center',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '中部内容插槽', 'en-US': 'Renter Slot' },
'demoId': 'basic-usage'
},
{
'name': 'right',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '右侧内容插槽', 'en-US': 'Right Slot' },
'demoId': 'basic-usage'
}
]
}
]
}

37
examples/sites/demos/mobile/app/input/autofocus.vue
View File

@ -1,37 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="textarea" autosize autofocus placeholder="请输入内容"></tiny-input>
<tiny-input
v-model="input"
type="textarea"
:autosize="{ minRows: 2, maxRows: 3 }"
placeholder="请输入内容"
></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
.input-wrap .tiny-mobile-textarea + .tiny-mobile-textarea {
margin-top: 24px;
}
</style>

41
examples/sites/demos/mobile/app/input/autosize.vue
View File

@ -1,41 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input
v-model="input"
type="textarea"
autosize
disabled
textarea-title="textarea-title"
placeholder="请输入内容"
></tiny-input>
<tiny-input
v-model="input"
type="textarea"
:autosize="{ minRows: 2, maxRows: 3 }"
placeholder="请输入内容"
></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

32
examples/sites/demos/mobile/app/input/basic-usage.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="demo-input">
<tiny-input v-model="input" :placeholder="placeholder"></tiny-input>
<br />
<tiny-input v-model="textareaVal" type="textarea" placeholder="用作文本框"></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '',
textareaVal: '',
placeholder: '请输入内容'
}
}
}
</script>
<style scoped>
.demo-input {
padding: 20px 16px;
height: 100%;
background: #f5f5f5;
}
</style>

40
examples/sites/demos/mobile/app/input/blur-focus.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="input-wrap">
<tiny-button @click="focus">获取焦点</tiny-button>
<tiny-button @click="blur">失去焦点</tiny-button>
<br /><br />
<tiny-input ref="input" v-model="input"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input, Button } from '@opentiny/vue'
export default {
components: {
TinyInput: Input,
TinyButton: Button
},
data() {
return {
input: ''
}
},
methods: {
focus() {
this.$refs.input.focus()
},
blur() {
this.$refs.input.blur()
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

14
examples/sites/demos/mobile/app/input/clearable.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="input-wrap">
<div class="demo-input">
<tiny-input v-model="input" clearable></tiny-input>
</div>
</template>
<script lang="jsx">
<script>
import { Input } from '@opentiny/vue'
export default {
@ -13,16 +13,16 @@ export default {
},
data() {
return {
input: '这是输入框'
input: '可一键清空'
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
<style scoped>
.demo-input {
padding: 20px 16px;
height: 100%;
background: #f4f4f4;
background: #f5f5f5;
}
</style>

28
examples/sites/demos/mobile/app/input/cols-rows.vue
View File

@ -1,28 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="textarea" :cols="5" :rows="1"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '测试 cols 属性'
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

23
examples/sites/demos/mobile/app/input/counter.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="textarea" counter show-word-limit :maxlength="20"></tiny-input>
<div class="demo-input">
<tiny-input v-model="input1" counter :maxlength="20"></tiny-input>
<tiny-input v-model="input2" type="textarea" show-word-limit :maxlength="20"></tiny-input>
</div>
</template>
<script lang="jsx">
<script>
import { Input } from '@opentiny/vue'
export default {
@ -13,16 +15,21 @@ export default {
},
data() {
return {
input: '测试 counter 属性'
input1: 'counter 示例',
input2: 'show-word-limit 示例'
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
<style scoped>
.demo-input {
padding: 20px 16px;
height: 100%;
background: #f4f4f4;
background: #f5f5f5;
}
.demo-input [class^='tiny'] {
margin-bottom: 8px;
}
</style>

31
examples/sites/demos/mobile/app/input/disabled.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="demo-input">
<tiny-input v-model="input" disabled :placeholder="placeholder"></tiny-input>
<br />
<tiny-input v-model="text" type="textarea" disabled></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '',
text: '已输入值',
placeholder: '请输入内容'
}
}
}
</script>
<style scoped>
.demo-input {
padding: 20px;
height: 100%;
}
</style>

45
examples/sites/demos/mobile/app/input/events.vue
View File

@ -1,11 +1,14 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" clearable @change="change" @clear="clear"></tiny-input>
<div class="demo-input-events">
<tiny-input v-model="inputValue" placeholder="input" @input="onInput"></tiny-input>
<tiny-input v-model="inputChange" placeholder="change" @change="onChange"></tiny-input>
<tiny-input v-model="focusBlur" placeholder="focus, blur" @focus="onFocus" @blur="onBlur"></tiny-input>
<tiny-input v-model="clearValue" placeholder="cleared" clearable @clear="onClear"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
<script>
import { Input, Modal } from '@opentiny/vue'
export default {
components: {
@ -13,24 +16,40 @@ export default {
},
data() {
return {
input: '事件测试'
inputValue: '',
inputChange: '',
focusBlur: '',
clearValue: 'clear event'
}
},
methods: {
change(val) {
console.log('当前内容：' + val)
onChange() {
Modal.message('change')
},
clear() {
console.log('clear 事件')
onInput() {
Modal.message('input')
},
onBlur() {
Modal.message('blur')
},
onFocus() {
Modal.message('focus')
},
onClear() {
Modal.message('clear')
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
<style scoped>
.demo-input-events {
height: 100%;
background: #f4f4f4;
padding: 20px 16px;
background: #f5f5f5;
}
.demo-input-events [class^='tiny'] {
margin-bottom: 16px;
}
</style>

45
examples/sites/demos/mobile/app/input/form.vue
View File

@ -1,45 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="form" is-select :select-menu="selectMenu" placeholder="下拉功能"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
selectMenu: [
{
label: '黄金糕'
},
{
label: '双皮奶'
},
{
label: '蚵仔煎'
},
{
label: '龙须面'
},
{
label: '北京烤鸭'
}
],
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

39
examples/sites/demos/mobile/app/input/input-event.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="value" clearable @blur="blur" @focus="focus" @input="input"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
value: '事件测试'
}
},
methods: {
blur() {
console.log('blur 事件')
},
focus() {
console.log('focus 事件')
},
input(value) {
console.log('input' + value)
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

10
examples/sites/demos/mobile/app/input/max-min-length.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="input-wrap">
<div class="demo-input">
<tiny-input v-model="input" counter :maxlength="10" :minlength="5"></tiny-input>
</div>
</template>
<script lang="jsx">
<script>
import { Input } from '@opentiny/vue'
export default {
@ -19,10 +19,10 @@ export default {
}
</script>
<style>
.input-wrap {
<style scoped>
.demo-input {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
background: #f5f5f5;
}
</style>

36
examples/sites/demos/mobile/app/input/method-select.vue
View File

@ -1,36 +0,0 @@
<template>
<div class="input-wrap">
<tiny-button @click="click">选中输入框内容</tiny-button>
<br /><br />
<tiny-input ref="input" v-model="input"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input, Button } from '@opentiny/vue'
export default {
components: {
TinyInput: Input,
TinyButton: Button
},
data() {
return {
input: '我是输入框'
}
},
methods: {
click() {
this.$refs.input.select()
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

53
examples/sites/demos/mobile/app/input/methods.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="demo-input-methods">
<section>
<tiny-button plain @click="focus">focus</tiny-button>
<tiny-button plain @click="blur">blur</tiny-button>
<tiny-input ref="inputRef" v-model="value" placeholder="Please input"></tiny-input>
</section>
<section>
<tiny-button plain @click="select">select</tiny-button>
<tiny-input ref="selectRef" v-model="selectValue" placeholder="Please input"></tiny-input>
</section>
</div>
</template>
<script>
import { Input, Button } from '@opentiny/vue'
export default {
components: {
TinyInput: Input,
TinyButton: Button
},
data() {
return {
value: '',
selectValue: '123456'
}
},
methods: {
select() {
this.$refs.selectRef.select()
},
blur() {
this.$refs.inputRef.blur()
},
focus() {
this.$refs.inputRef.focus()
}
}
}
</script>
<style scoped>
.demo-input-methods {
height: 100%;
padding: 20px 16px;
background: #f5f5f5;
}
.demo-input-methods [class^='tiny'] {
margin: 5px;
}
</style>

62
examples/sites/demos/mobile/app/input/native-attributes.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="demo-input">
<div class="demo-input-item">
<span>autofocus</span>
<tiny-input v-model="autofocusVal" autofocus></tiny-input>
</div>
<div class="demo-input-item">
<span>readonly</span>
<tiny-input v-model="input" readonly></tiny-input>
</div>
<div class="demo-input-item">
<span>autocomplete="on"</span>
<form>
<tiny-input v-model="inputAutocomplete" autocomplete="on" name="email" type="email"></tiny-input>
</form>
</div>
<div class="demo-input-item">
<span>step=2</span>
<tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
</div>
<div class="demo-input-item">
<span>min=2; max=11</span>
<tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
</div>
<div class="demo-input-item">
<span>name</span>
<tiny-input v-model="username" name="username"></tiny-input>
</div>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
autofocusVal: '',
input: 'readonly',
inputStep: 2,
inputMaxMin: 1,
inputAutocomplete: '',
username: ''
}
}
}
</script>
<style scoped>
.demo-input {
padding: 20px 16px;
height: 100%;
background: #f5f5f5;
}
.demo-input .demo-input-item {
margin-bottom: 12px;
}
</style>

35
examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="demo-input-icons">
<tiny-input v-model="value" :prefix-icon="IconSearch" placeholder="前置图标示例"></tiny-input>
<tiny-input v-model="value" :suffix-icon="IconSearch" placeholder="后置图标示例"></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
import { iconSearch } from '@opentiny/vue-icon'
export default {
components: {
TinyInput: Input
},
data() {
return {
value: '',
IconSearch: iconSearch()
}
}
}
</script>
<style scoped>
.demo-input-icons {
height: 100%;
padding: 20px 16px;
background: #f5f5f5;
}
.demo-input-icons .tiny-mobile-input {
margin-bottom: 16px;
}
</style>

39
examples/sites/demos/mobile/app/input/prefix-suffix.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input placeholder="请输入内容" v-model="input">
<template #prefix>
<div style="color: red">Http</div>
</template>
<template #suffix>
<div style="color: red">com</div>
</template>
</tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
.tiny-mobile-input-prefix .tiny-mobile-input__inner {
padding-left: 45px;
padding-right: 28px;
}
</style>

28
examples/sites/demos/mobile/app/input/props-step.vue
View File

@ -1,28 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="number" step="3" placeholder="当前步长为3"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '测试长度'
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

28
examples/sites/demos/mobile/app/input/props.vue
View File

@ -1,28 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" name="name" label="label" readonly></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '测试长度'
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

10
examples/sites/demos/mobile/app/input/show-password.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="input-wrap">
<div class="demo-input">
<tiny-input v-model="input" show-password></tiny-input>
</div>
</template>
@ -19,10 +19,10 @@ export default {
}
</script>
<style>
.input-wrap {
padding-top: 20px;
<style scoped>
.demo-input {
height: 100%;
background: #f4f4f4;
padding: 20px 16px;
background: #f5f5f5;
}
</style>

30
examples/sites/demos/mobile/app/input/slot-content.vue
View File

@ -1,30 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" type="textarea">
<template #content> 自定义头部内容 </template>
</tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

34
examples/sites/demos/mobile/app/input/slots-append-prepend.vue
View File

@ -1,34 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input placeholder="请输入内容" v-model="input">
<template #prepend>Http://</template>
</tiny-input>
<br /><br />
<tiny-input placeholder="请输入内容" v-model="input">
<template #append>.com</template>
</tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: ''
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

65
examples/sites/demos/mobile/app/input/slots.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="demo-input">
<tiny-input placeholder="prepend" v-model="input">
<template #prepend>Http://</template>
</tiny-input>
<tiny-input placeholder="append" v-model="input">
<template #append>.com</template>
</tiny-input>
<tiny-input placeholder="prefix" v-model="input">
<template #prefix>
<tiny-icon-search/>
</template>
</tiny-input>
<tiny-input placeholder="suffix" v-model="input">
<template #suffix>
<tiny-icon-calendar/>
</template>
</tiny-input>
<br />
<tiny-input placeholder="suffix" v-model="input">
<template #title>
<span>标题插槽内容</span>
</template>
<template #tips>
<span class="tips">提示插槽内容</span>
</template>
</tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
import { IconSearch, IconCalendar } from '@opentiny/vue-icon'
export default {
components: {
TinyInput: Input,
TinyIconSearch: IconSearch(),
TinyIconCalendar: IconCalendar(),
},
data() {
return {
input: ''
}
}
}
</script>
<style scoped>
.demo-input {
height: 100%;
padding: 20px 16px;
background: #f5f5f5;
}
.demo-input [class^=tiny-mobile] {
margin-bottom: 8px;
}
.tips {
color: #f23030;
}
</style>

30
examples/sites/demos/mobile/app/input/suffix-icon.vue
View File

@ -1,30 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" placeholder="请输入内容" :suffix-icon="IconDialog"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
import { iconDialog } from '@opentiny/vue-icon'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '',
IconDialog: iconDialog()
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

31
examples/sites/demos/mobile/app/input/textarea-rows-cols.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="demo-input">
<p>rows=3 cols=80</p>
<tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols" ></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
rows: 3,
cols: 30,
}
}
}
</script>
<style scoped>
.demo-input {
height: 100%;
padding: 20px 16px;
background: #f5f5f5;
}
</style>

41
examples/sites/demos/mobile/app/input/textarea-scalable.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="demo-input">
<p>resize</p>
<tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical (default)"></tiny-input>
<tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
<tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both" width="300px"></tiny-input>
<tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
<p>autosize</p>
<tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
<tiny-input type="textarea" v-model="textarea" placeholder="autosize = { minRows: 2, maxRows: 3 }" :autosize="{ minRows: 2, maxRows: 3 }"></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: '',
textarea: ''
}
}
}
</script>
<style scoped>
.demo-input {
height: 100%;
padding: 20px 16px;
background: #f5f5f5;
}
.demo-input .tiny-mobile-textarea {
margin-bottom: 8px;
}
</style>

55
examples/sites/demos/mobile/app/input/type-be-form-tips.vue
View File

@ -1,55 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input
v-model="input"
mobile-tips="让你输入一段文字"
is-select
:select-menu="menus"
placeholder="请输入内容"
type="form"
mobileTips="曾经有一段真挚的感情"
></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: 'hello mobile',
menus: [
{
id: 1,
label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
},
{
id: 2,
label: '我是小树'
},
{
id: 3,
label: '我是小草'
},
{
id: 4,
label: '我是小叶',
warn: true
}
]
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

47
examples/sites/demos/mobile/app/input/type-be-form.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="input-wrap">
<tiny-input v-model="input" placeholder="请输入内容" type="form"></tiny-input>
</div>
</template>
<script lang="jsx">
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
input: 'hello mobile',
menus: [
{
id: 1,
label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
},
{
id: 2,
label: '我是小树'
},
{
id: 3,
label: '我是小草'
},
{
id: 4,
label: '我是小叶',
warn: true
}
]
}
}
}
</script>
<style>
.input-wrap {
padding-top: 20px;
height: 100%;
background: #f4f4f4;
}
</style>

20
examples/sites/demos/mobile/app/input/type-be-form-select.vue → examples/sites/demos/mobile/app/input/type-select.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="input-wrap">
<div class="demo-input">
<tiny-input v-model="input" is-select :select-menu="menus" placeholder="请输入内容" type="form"></tiny-input>
</div>
</template>
<script lang="jsx">
<script>
import { Input } from '@opentiny/vue'
export default {
@ -17,19 +17,19 @@ export default {
menus: [
{
id: 1,
label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
label: '很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。'
},
{
id: 2,
label: '我是小树'
label: '选项2'
},
{
id: 3,
label: '我是小草'
label: '选项3'
},
{
id: 4,
label: '我是小叶',
label: 'warn 为true的选项',
warn: true
}
]
@ -38,10 +38,10 @@ export default {
}
</script>
<style>
.input-wrap {
padding-top: 20px;
<style scoped>
.demo-input {
padding: 20px 16px;
height: 100%;
background: #f4f4f4;
background: #f5f5f5;
}
</style>

60
examples/sites/demos/mobile/app/input/type.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="demo-input">
<tiny-input v-model="text" placeholder="text"></tiny-input>
<tiny-input type="password" v-model="password" placeholder="password"></tiny-input>
<tiny-input type="textarea" v-model="textarea" placeholder="textarea"></tiny-input>
<tiny-input type="email" v-model="email" placeholder="email"></tiny-input>
<tiny-input type="number" v-model="number" placeholder="number"></tiny-input>
<tiny-input type="tel" v-model="tel" placeholder="tel"></tiny-input>
<tiny-input type="url" v-model="url" placeholder="url"></tiny-input>
<tiny-input type="date" v-model="date"></tiny-input>
<tiny-input type="month" v-model="month"></tiny-input>
<tiny-input type="week" v-model="week"></tiny-input>
<tiny-input type="datetime-local" v-model="datetime"></tiny-input>
<tiny-input type="time" v-model="time"></tiny-input>
</div>
</template>
<script>
import { Input } from '@opentiny/vue'
export default {
components: {
TinyInput: Input
},
data() {
return {
text: '',
password: '',
textarea: '',
email: '',
number: '',
tel: '',
url: '',
color: '#000000',
date: '',
month: '',
week: '',
datetime: '',
time: '',
file: '',
range: ''
}
}
}
</script>
<style scoped>
.demo-input {
height: 100%;
padding: 20px 16px;
box-sizing: border-box;
overflow-y: scroll;
background: #f5f5f5;
}
.demo-input .tiny-mobile-input,
.demo-input .tiny-mobile-textarea {
margin-bottom: 8px;
}
</style>

35
examples/sites/demos/mobile/app/input/validate-event.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="input-wrap event-validate-demo1">
<div class="demo-input">
<div class="page__hd">
<tiny-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-form">
<tiny-form-item label="活动名称" prop="name">
@ -10,7 +10,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Input, Form, FormItem } from '@opentiny/vue'
export default {
@ -35,34 +35,9 @@ export default {
}
</script>
<style>
.page__hd {
padding: 40px;
}
.page__title {
font-weight: 400;
font-size: 21px;
text-align: left;
}
.page__desc {
margin-top: 5px;
color: #888;
font-size: 14px;
text-align: left;
}
.page__text {
padding-right: 16px;
padding-left: 16px;
margin-top: 0.77em;
margin-bottom: 0.3em;
color: #666;
font-size: 14px;
}
.input-wrap {
<style scoped>
.demo-input {
height: 100%;
background: #f4f4f4;
}
.event-validate-demo1 .tiny-mobile-input__inner {
margin-left: 85px;
background: #f5f5f5;
}
</style>

653
examples/sites/demos/mobile/app/input/webdoc/input.js
View File

@ -3,265 +3,207 @@ export default {
owner: '',
demos: [
{
demoId: 'autofocus',
demoId: 'basic-usage',
name: {
'zh-CN': '自动获取焦点',
'en-US': 'button type'
'zh-CN': '基本用法',
'en-US': 'basic usage'
},
desc: {
'zh-CN': '<p>自动获取焦点</p>',
'en-US': '<p>button type</p>'
'zh-CN':
'<p>通过 <code>v-model/modelValue</code> 属性绑定输入值，<code>placeholder</code> 属性显示提示文本；使用原生属性 <code>type</code> 指定输入框类型，如取值为 <code>textarea</code> 时用作文本框。</p>',
'en-US':
'<p>Bind the input value through the <code>v-model/modelValue</code> property, and use <code>placeholder</code> to bind placeholder.Specify the input box type with the native <code>type</code> attribute. When the value is set to <code>textarea</code>, it is used as a textarea.</p>'
},
codeFiles: ['autofocus.vue']
codeFiles: ['basic-usage.vue']
},
{
demoId: 'autosize',
name: {
'zh-CN': '自适应内容高度',
'en-US': 'button round'
'demoId': 'clearable',
'name': { 'zh-CN': '一键清空', 'en-US': 'Clearable' },
'desc': {
'zh-CN': '<p>可通过 <code>clearable</code> 属性设置输入框显示清空图标按钮。</p>',
'en-US':
'<p>You can set the <code>clearable</code> attribute to display the clear icon button in the input.</p>'
},
desc: {
'zh-CN': '<p>自适应内容高度</p>',
'en-US': '<p>button round</p>'
},
codeFiles: ['autosize.vue']
'codeFiles': ['clearable.vue']
},
{
demoId: 'blur-focus',
demoId: 'type',
name: {
'zh-CN': '获取/失去焦点',
'en-US': 'events'
'zh-CN': '类型',
'en-US': 'type'
},
desc: {
'zh-CN': '<p>获取/失去焦点</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN':
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>',
'en-US':
'<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>'
},
codeFiles: ['blur-focus.vue']
codeFiles: ['type.vue']
},
{
demoId: 'clearable',
demoId: 'textarea-rows-cols',
name: {
'zh-CN': '可清空',
'en-US': 'events'
'zh-CN': '文本框行数与列数',
'en-US': 'Rows and Columns of Textarea'
},
desc: {
'zh-CN': '<p>可清空</p>'
'zh-CN': '<p>通过原生属性 <code>rows</code> 与 <code>cols</code> 分别指定文本框的行数与列字符数。</p>',
'en-US':
'<p>Specify the number of rows and columns of a text box using the native attributes <code>rows</code> and <code>cols</code> respectively.</p>'
},
codeFiles: ['clearable.vue']
codeFiles: ['textarea-rows-cols.vue']
},
{
demoId: 'cols-rows',
demoId: 'textarea-scalable',
name: {
'zh-CN': '原生属性',
'en-US': 'events'
'zh-CN': '文本框可缩放',
'en-US': 'Scalable Textarea'
},
desc: {
'zh-CN': '<p>宽度和高度</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': `<p>可通过 <code>resize</code> 属性设置文本框的缩放。可选值：<code>none | both | horizontal | vertical</code>。</p><p>可通过 <code>autosize</code> 属性设置文本框自适应内容高度。可传入对象，如 <code>{ minRows: 2, maxRows: 6 }</code>。`,
'en-US': `<p>You can use the <code>resize</code> property to set the zoom of the text field. The value can be <code>none | both | horizontal | vertical</code> . Note: This parameter is valid only when <code>type="textarea"</code> is used. </p>
<p>You can use the <code>autosize</code> attribute to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code> . Note: This parameter is valid only for <code>type="textarea"</code> . </p>`
},
codeFiles: ['cols-rows.vue']
},
{
demoId: 'counter',
name: {
'zh-CN': '计数与输入统计',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>计数与输入统计</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['counter.vue']
},
{
demoId: 'events',
name: {
'zh-CN': '事件',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>事件</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['events.vue']
},
{
demoId: 'form',
name: {
'zh-CN': 'form',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>form</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['form.vue']
},
{
demoId: 'input-event',
name: {
'zh-CN': '事件',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>blur / focus / input 事件</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['input-event.vue']
},
{
demoId: 'max-min-length',
name: {
'zh-CN': '输入长度限制',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>输入长度限制</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['max-min-length.vue']
},
{
demoId: 'method-select',
name: {
'zh-CN': '选中输入框文本',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>选中输入框文本</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['method-select.vue']
},
{
demoId: 'prefix-suffix',
name: {
'zh-CN': '复合型输入框',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>复合型输入框</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['prefix-suffix.vue']
},
{
demoId: 'props-step',
name: {
'zh-CN': '步长',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过<code>step</code>设置步长，需要结合 type="number" 一起使用</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['props-step.vue']
},
{
demoId: 'props',
name: {
'zh-CN': '原生属性',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>是否只读</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['props.vue']
codeFiles: ['textarea-scalable.vue']
},
{
demoId: 'show-password',
name: {
'zh-CN': '密码框',
'en-US': 'events'
'en-US': 'Password Input'
},
desc: {
'zh-CN': '<p>密码框</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN':
'<p>当 <code>type</code> 为 <code>password</code> 时，可通过 <code>show-password</code> 属性设置输入框显示密码显示/隐藏切换图标按钮。</p>',
'en-US':
'<p>When <code>type</code> is set to <code>password</code>, you can set the <code>show-password</code> attribute to display or hide the password switch button in the text box.</p>'
},
codeFiles: ['show-password.vue']
},
{
demoId: 'slot-content',
demoId: 'disabled',
name: {
'zh-CN': '禁用',
'en-US': 'disabled'
},
desc: {
'zh-CN': '<p>通过 <code>code</code> 属性禁用输入框。</p>',
'en-US': '<p>To disabled input through <code>code</code> props.</p>'
},
codeFiles: ['disabled.vue']
},
{
demoId: 'counter',
name: {
'zh-CN': '输入长度限制与计数',
'en-US': 'Input Limitation and Counting'
},
desc: {
'zh-CN':
'<p>通过 <code>maxlength</code> 属性限制输入字符数； <code>counter</code> 属性显示当前输入字符数；<code>show-word-limit</code> 显示当前字符数与输入限制长度（仅限文本框）</p>',
'en-US':
'<p>Limit input character count with the <code>maxlength</code> attribute; display current input character count with the <code>counter</code> attribute; show current character count and input limit length with the <code>show-word-limit</code> attribute(for text boxes only)."</p>'
},
codeFiles: ['counter.vue']
},
{
demoId: 'prefix-suffix-icon',
name: { 'zh-CN': '图标', 'en-US': 'Icon' },
desc: {
'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标</p>',
'en-US':
'<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute </p>'
},
codeFiles: ['prefix-suffix-icon.vue']
},
{
demoId: 'native-attributes',
name: {
'zh-CN': '原生属性',
'en-US': 'Native Attributes'
},
desc: {
'zh-CN': '<p>可设置 <code>autofocus</code>、<code>readonly</code>、<code>name</code> 等原生属性。</p>',
'en-US': '<p>Set native attributes such as autofocus, readonly, name, etc.</p>'
},
codeFiles: ['native-attributes.vue']
},
{
demoId: 'methods',
name: {
'zh-CN': '实例方法',
'en-US': 'Methods'
},
desc: {
'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
},
codeFiles: ['methods.vue']
},
{
demoId: 'events',
name: {
'zh-CN': '事件',
'en-US': 'Events'
},
desc: {
'zh-CN': `
<p>输入框的事件，包括
<code>input</code>(输入值时触发),
<code>blur</code>(失去焦点时触发),
<code>focus</code>(获取焦点时触发),
<code>change</code>(值改变时触发),
<code>clear</code>(清除按钮时触发)
</p>
`,
'en-US': `
<p>Event of the text box, including:
<code>input</code> (triggered when a value is entered)
<code>blur</code> (triggered when the focus is lost)
<code>focus</code> (triggered when the focus is obtained)
<code>change</code> (triggered when the value changes)
<code>clear</code> (triggered when the button is cleared)
</p>
`
},
codeFiles: ['events.vue']
},
{
demoId: 'slots',
name: {
'zh-CN': '插槽',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过<code>content</code>自定义头部内容，只对 type="textarea" 有效</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
'en-US': '<p>Input component provides a rich set of slots.</p>'
},
codeFiles: ['slot-content.vue']
codeFiles: ['slots.vue']
},
{
demoId: 'slots-append-prepend',
demoId: 'type-select',
name: {
'zh-CN': '复合型输入框',
'zh-CN': '下拉列表',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>通过<code>append</code>自定义头部内容，通过 <code>prepend</code>自定义尾部内容，</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN': '<p>通过使用 <code>is-select</code> 与 <code>select-menu</code> 搭配让输入框变为下拉列表。</p>',
'en-US':
'<p>By using <code>is-select</code> with <code>select-menu</code>, the input field can be turned into a dropdown list.</p>'
},
codeFiles: ['slots-append-prepend.vue']
},
{
demoId: 'suffix-icon',
name: {
'zh-CN': '自定义后置图标',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>自定义后置图标</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['suffix-icon.vue']
},
{
demoId: 'type-be-form-select',
name: {
'zh-CN': '类型<code>type</code>为 form 时的下拉用法',
'en-US': 'events'
},
desc: {
'zh-CN': '<p><code>is-select</code>与<code>select-menu</code>搭配让<code>type</code>为form的输入框变为下拉</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['type-be-form-select.vue']
},
{
demoId: 'type-be-form-tips',
name: {
'zh-CN': 'form类型的文字提示',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>类型<code>type<code>为 form 时的输入框下的提示</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['type-be-form-tips.vue']
},
{
demoId: 'type-be-form',
name: {
'zh-CN': 'type为form类型',
'en-US': 'events'
},
desc: {
'zh-CN': '<p>类型<code>type</code>为 form 时的基本用法</p>',
'en-US': '<p>bbutton click</p>'
},
codeFiles: ['type-be-form.vue']
codeFiles: ['type-select.vue']
},
{
demoId: 'validate-event',
name: {
'zh-CN': '表单校正',
'en-US': 'events'
'zh-CN': '表单校验',
'en-US': 'form validation'
},
desc: {
'zh-CN': '<p>通过<code>validate-event</code>属性设置输入时是否触发表单的校验，该属性默认为 true。</p>',
'en-US': '<p>bbutton click</p>'
'zh-CN':
'<p>可通过 <code>validate-event</code> 属性设置输入时触发表单校验。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验</p>',
'en-US':
'<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>'
},
codeFiles: ['validate-event.vue']
}
@ -276,39 +218,40 @@ export default {
type: 'String',
defaultValue: 'off',
desc: {
'zh-CN': '<p>原生属性，自动补全，该属性默认为off</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，自动补全',
'en-US': 'Native autocomplete attribute'
},
demoId: ''
demoId: 'native-attributes'
},
{
name: 'autofocus',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>原生属性，自动获取焦点，该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，自动获取焦点',
'en-US': 'Native attribute. The focus is automatically obtained during page loading.'
},
demoId: 'autofocus'
demoId: 'native-attributes'
},
{
name: 'autosize',
type: 'Boolean | Object',
defaultValue: 'false',
desc: {
'zh-CN':
'<p>自适应内容高度，只对 type="textarea"有效，可传入对象，如，{ minRows: 2, maxRows: 6 }，该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '自适应内容高度，只对 type="textarea"有效。可传入对象，如，{ minRows: 2, maxRows: 6 }',
'en-US':
'Adaptive content height. This parameter is valid only for <code>type="textarea"</code>. Objects can be transferred, for example, { minRows: 2, maxRows: 6 }'
},
demoId: 'autosize'
demoId: 'textarea-scalable'
},
{
name: 'clearable',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>选中时的值</p>',
'en-US': 'display different button'
'zh-CN': '是否显示清除按钮，该属性不适用于 <code>type="textarea"</code>',
'en-US':
'Whether to display the clear button. This attribute is not applicable to <code>type="textarea"</code>'
},
demoId: 'clearable'
},
@ -317,18 +260,20 @@ export default {
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，设置宽度，在 type ="textarea"时有效</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，设置宽度，在 type ="textarea"时有效',
'en-US':
'Native attribute, which is used to set the width. This parameter is valid only when type is "textarea"'
},
demoId: 'cols-rows'
demoId: 'textarea-rows-cols'
},
{
name: 'counter',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示字数统计，只在 type = "text" 或 type = "textarea" 时有效</p>',
'en-US': 'display different button'
'zh-CN': '是否显示字数统计，只在 type = "text" 或 type = "textarea" 时有效',
'en-US':
'Whether to display the word count statistics. This parameter is valid only when type is "text" or type is "textarea"'
},
demoId: 'counter'
},
@ -337,128 +282,148 @@ export default {
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>禁用，该属性默认为false性</p>',
'en-US': 'display different button'
'zh-CN': '是否禁用',
'en-US': 'Disabled'
},
demoId: 'autosize'
},
{
name: 'form',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性</p>',
'en-US': 'display different button'
},
demoId: ''
demoId: 'disabled'
},
{
name: 'is-select',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>type为form时，设置输入框可下拉选择</p>',
'zh-CN': '是否可下拉选择',
'en-US': 'display different button'
},
demoId: 'type-be-form-select'
demoId: 'type-select'
},
{
name: 'label',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框关联的label文字</p>',
'en-US': 'display different button'
'zh-CN': '等价于原生 aria-label 属性',
'en-US': 'equal to aria-label attribute'
},
demoId: 'props'
demoId: ''
},
{
name: 'max',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置最大值',
'en-US': 'Native attribute, set the maximum value'
},
demoId: 'native-attributes'
},
{
name: 'maxlength',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，最大输入长度</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，最大输入长度',
'en-US': 'Native attribute, maximum input length'
},
demoId: 'max-min-length'
demoId: 'counter'
},
{
name: 'min',
type: 'number',
defaultValue: '',
desc: {
'zh-CN': '原生属性，设置最小值',
'en-US': 'Native attribute, which sets the minimum value'
},
demoId: 'native-attributes'
},
{
name: 'minlength',
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，最小输入长度</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，最小输入长度',
'en-US': 'Native attribute, minimum input length'
},
demoId: 'max-min-length'
demoId: 'counter'
},
{
name: 'mobile-tips',
type: 'String',
name: 'tips',
type: 'String | Slot',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，设置最小值</p>',
'en-US': 'display different button'
'zh-CN': '提示信息',
'en-US': 'tips under input'
},
demoId: 'type-be-form-tips'
demoId: 'slots'
},
{
name: 'name',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性</p>',
'en-US': 'display different button'
'zh-CN': '原生 name 属性',
'en-US': 'native name attribute'
},
demoId: 'props'
demoId: 'native-attributes'
},
{
name: 'placeholde',
name: 'placeholder',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框占位文本</p>',
'en-US': 'display different button'
'zh-CN': '输入框占位文本',
'en-US': 'placeholder text'
},
demoId: 'prefix-suffix'
demoId: 'basic-usage'
},
{
name: 'prefix-icon',
type: 'Component',
defaultValue: '',
desc: {
'zh-CN': '输入框头部图标',
'en-US': 'Icon at the head'
},
demoId: 'prefix-suffix-icon'
},
{
name: 'readonly',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>原生属性，是否只读，该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，是否只读',
'en-US': 'Native attribute, read-only'
},
demoId: 'props'
demoId: 'native-attributes'
},
{
name: 'rows',
type: 'Number',
defaultValue: '2',
desc: {
'zh-CN': '<p>输入框行数，只对 type="textarea"有效，该属性默认为2</p>',
'en-US': 'display different button'
'zh-CN': '输入框行数，只对 type="textarea"有效',
'en-US': 'Number of lines in the input box. This parameter is valid only for type="textarea"'
},
demoId: 'cols-rows'
demoId: 'textarea-rows-cols'
},
{
name: 'select-menu',
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '<p>type为form时，设置输入框可下拉选择,设置选择项</p>',
'en-US': 'display different button'
'zh-CN': '下拉选择的选项',
'en-US': 'options of select'
},
demoId: 'type-be-form-select'
demoId: 'type-select'
},
{
name: 'show-password',
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示切换密码图标，该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '是否显示切换密码图标',
'en-US': 'Whether to display the switchover password icon'
},
demoId: 'show-password'
},
@ -467,8 +432,9 @@ export default {
type: 'Boolean',
defaultValue: 'false',
desc: {
'zh-CN': '<p>是否显示输入字数统计，只在 type = ‘text’ 或 type = ‘textarea’ 时有效，该属性默认为false</p>',
'en-US': 'display different button'
'zh-CN': '是否显示输入字数统计，只在 type = ‘text’ 或 type = ‘textarea’ 时有效，该属性默认为false',
'en-US':
'Whether to display the number of input words. This parameter is valid only when type is "text" or type is "textarea"'
},
demoId: 'counter'
},
@ -477,70 +443,71 @@ export default {
type: 'Number',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，设置输入字段的合法数字间隔</p>',
'en-US': 'display different button'
'zh-CN': '原生属性，设置输入字段的合法数字间隔',
'en-US': 'Native attribute, which is used to set the valid digit interval of the input field'
},
demoId: 'props-step'
demoId: 'native-attributes'
},
{
name: 'suffix-icon',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框尾部图标</p>',
'en-US': 'display different button'
'zh-CN': '输入框尾部图标',
'en-US': 'Icon at the right'
},
demoId: 'suffix-icon'
demoId: 'prefix-suffix-icon'
},
{
name: 'textarea-title',
type: 'String',
defaultValue: '标题',
name: 'title',
type: 'String | Slot',
defaultValue: '',
desc: {
'zh-CN': '<p>textarea类型自定义标题，该属性默认为‘标题’</p>',
'en-US': 'display different button'
'zh-CN': '自定义标题',
'en-US': 'custom title'
},
demoId: 'autosize'
demoId: ''
},
{
name: ' type',
name: 'type',
type: 'String',
defaultValue: 'text',
desc: {
'zh-CN': '<p>input 元素的类型,该属性默认为"text"</p>',
'en-US': 'display different button'
'zh-CN': '类型，同原生 input 标签的 type 属性',
'en-US': 'the type of input'
},
demoId: 'autofocus'
demoId: 'type'
},
{
name: 'validate-event',
type: 'Boolean',
defaultValue: 'true',
desc: {
'zh-CN': '<p>输入时是否触发表单的校验，该属性默认为true</p>',
'en-US': 'display different button'
'zh-CN': '输入时是否触发表单的校验',
'en-US': ' Whether form validation is triggered when entering data'
},
demoId: 'validate-event'
},
{
name: 'value / v-model',
name: 'v-model / modelValue',
type: 'String',
defaultValue: '',
desc: {
'zh-CN': '<p>绑定值</p>',
'en-US': 'display different button'
'zh-CN': '绑定值',
'en-US': 'input value'
},
demoId: 'autofocus'
demoId: 'basic-usage'
},
{
name: 'vertical',
type: 'Number',
name: 'width',
type: 'Number | String',
defaultValue: '',
desc: {
'zh-CN': '<p>原生属性，设置最小值</p>',
'en-US': 'display different button'
'zh-CN': '宽度，取值为数字或元素 width 属性有效值，如果是数字则以 px 为单位',
'en-US':
'width, accepts a numerical value or a valid value for the width property, and if it is a number, it is measured in pixels.'
},
demoId: 'autofocus'
demoId: ''
}
],
methods: [
@ -549,30 +516,30 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>使 input 失去焦点</p>',
'en-US': 'display different button'
'zh-CN': '使 input 失去焦点',
'en-US': 'Make the input lose focus.'
},
demoId: 'blur-focus'
demoId: 'methods'
},
{
name: 'focus',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>使 input 获取焦点</p>',
'en-US': 'display different button'
'zh-CN': '使 input 获取焦点',
'en-US': 'Focus the input'
},
demoId: 'blur-focus'
demoId: 'methods'
},
{
name: 'select',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>选中 input 中的文字</p>',
'en-US': 'display different button'
'zh-CN': '选中 input 中的文字',
'en-US': 'Select the text in the input'
},
demoId: 'method-select'
demoId: 'methods'
}
],
events: [
@ -581,8 +548,8 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>在 Input 值改变时触发</p>',
'en-US': 'Click'
'zh-CN': '在 Input 值改变时触发',
'en-US': 'callback when value has changed'
},
demoId: 'events'
},
@ -591,40 +558,40 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>在 在 Input 失去焦点时触发</p>',
'en-US': 'Click'
'zh-CN': '在 Input 失去焦点时触发',
'en-US': 'callback when input lost focus'
},
demoId: 'blur-focus'
demoId: 'events'
},
{
name: 'focus',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>在 Input 获得焦点时触发</p>',
'en-US': 'Click'
'zh-CN': '在 Input 获得焦点时触发',
'en-US': 'callback when input gains focus'
},
demoId: 'blur-focus'
demoId: 'events'
},
{
name: 'clear',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>在点击由 clearable 属性生成的清空按钮时触发</p>',
'en-US': 'Click'
'zh-CN': '在点击由 clearable 属性生成的清空按钮时触发',
'en-US': 'callback when click clear icon'
},
demoId: 'blur-focus'
demoId: 'events'
},
{
name: 'input',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>输入值时触发事件</p>',
'en-US': 'Click'
'zh-CN': '输入值时触发事件',
'en-US': 'callback when user input'
},
demoId: 'input-event'
demoId: 'events'
}
],
slots: [
@ -633,50 +600,52 @@ export default {
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框后置内容，只对 type="text"有效</p>',
'en-US': 'slots-append-prepend'
'zh-CN': '输入框后置内容，只对 type="text"有效',
'en-US': 'append content for input fields only works with type="text"'
},
demoId: ''
demoId: 'slots'
},
{
name: 'prepend',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框前置内容，只对 type="text"有效</p>',
'en-US': 'slots-append-prepend'
'zh-CN': '输入框前置内容，只对 type="text"有效',
'en-US': 'prepend content for input fields only works with type="text"'
},
demoId: ''
demoId: 'slots'
},
{
name: 'prefix',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框头部内容，只对 type="text"有效</p>',
'en-US': 'Click'
'zh-CN': '输入框头部内容，只对 type="text"有效',
'en-US': 'prefix content for input fields only works with type="text"'
},
demoId: 'prefix-suffix'
demoId: 'slots'
},
{
name: 'suffix',
type: '',
defaultValue: '',
desc: {
'zh-CN': '<p>输入框尾部内容，只对 type="text"有效</p>',
'en-US': 'Click'
'zh-CN': '输入框尾部内容，只对 type="text"有效',
'en-US': 'suffix content for input fields only works with type="text"'
},
demoId: 'prefix-suffix'
demoId: 'slots'
},
{
name: 'content',
type: '',
defaultValue: '',
name: 'title',
desc: {
'zh-CN': '<p>输入框头部内容插槽，只对 type="textarea"有效</p>',
'en-US': 'Click'
'zh-CN': '标题插槽',
'en-US': 'title slot'
},
demoId: 'slot-content'
demoId: 'slots'
},
{
name: 'tips',
desc: {
'zh-CN': '提示信息插槽',
'en-US': 'tips slot'
},
demoId: 'slots'
}
]
}

38
examples/sites/demos/mobile/app/mask/basic-usage.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="mobile-mask-demo">
<tiny-button @click="visible = true">点击展示遮罩层</tiny-button>
<p v-if="showMsg">遮罩层click事件已触发！</p>
<tiny-mask v-model:visible="visible" @click="handleClick"></tiny-mask>
</div>
</template>
<script>
import { Mask, Button } from '@opentiny/vue'
export default {
components: {
TinyMask: Mask,
TinyButton: Button
},
data() {
return {
visible: false,
showMsg: false
}
},
methods: {
handleClick() {
this.showMsg = true
}
},
}
</script>
<style scoped>
.mobile-mask-demo {
height: 100%;
background: #f4f4f4;
}
</style>

32
examples/sites/demos/mobile/app/mask/click-no-hide.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="mobile-mask-demo">
<tiny-button @click="visible=true">点击显示遮罩层</tiny-button>
<tiny-mask v-model:visible="visible" :cancel-touch="true">
<tiny-button @click="visible=false">点击此处关闭遮罩层</tiny-button>
</tiny-mask>
</div>
</template>
<script>
import { Mask, Button } from '@opentiny/vue'
export default {
components: {
TinyMask: Mask,
TinyButton: Button
},
data() {
return {
visible: false
}
}
}
</script>
<style scoped>
.mobile-mask-demo {
height: 100%;
background: #f4f4f4;
}
</style>

Some files were not shown because too many files have changed in this diff Show More