ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 16:44:21 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: improve demo translating

Browse Source
This commit is contained in:
chenjiahan
2020-12-11 10:07:07 +08:00
parent b3dfb4997f
commit 09858eb1d3
15 changed files with 281 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/site/use-translate.ts Normal file
View File

@@ -0,0 +1,22 @@
import Locale from '../../src/locale';
import { camelize } from '../../src/utils/format/string';
import { createTranslate } from '../../src/utils/create/translate';
let demoUid = 0;
export function useTranslate(i18n: Record<string, any>) {
const demoName = `demo-i18n-${demoUid++}`;
if (i18n) {
const locales = {};
const camelizedName = camelize(demoName);
Object.keys(i18n).forEach((key) => {
locales[key] = { [camelizedName]: i18n[key] };
});
Locale.add(locales);
}
return createTranslate(demoName);
}

3
jest.config.js
View File

@@ -6,4 +6,7 @@ module.exports = {
'!**/test/**',
'!**/lang/**',
],
moduleNameMapper: {
'^@demo(.*)$': '<rootDir>/docs/site$1',
},
};

11
src/action-sheet/demo/index.vue
View File

@@ -53,11 +53,10 @@
<script>
import { computed, reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
option1: '选项一',
option2: '选项二',
@@ -86,10 +85,11 @@ export default {
disabledOption: 'Disabled Option',
showDescription: 'Show Description',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
show: {
basic: false,
@@ -129,6 +129,7 @@ export default {
return {
...toRefs(state),
t,
onSelect,
onCancel,
simpleActions,

8
src/composables/use-translate.ts
View File

@@ -1,8 +0,0 @@
import { getCurrentInstance } from 'vue';
import { noop } from '../utils';
import { createTranslate } from '../utils/create/translate';
export function useTranslate() {
const { name } = getCurrentInstance()!.type;
return name ? createTranslate(name) : noop;
}

11
src/count-down/demo/index.vue
View File

@@ -42,11 +42,10 @@
<script>
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
import { useTranslate } from '../../composables/use-translate';
export default {
i18n: {
const i18n = {
'zh-CN': {
reset: '重置',
pause: '暂停',
@@ -69,10 +68,11 @@ export default {
manualControl: 'Manual Control',
formatWithDay: 'DD Day, HH:mm:ss',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const time = ref(30 * 60 * 60 * 1000);
const countDown = ref(null);
@@ -90,6 +90,7 @@ export default {
};
return {
t,
time,
start,
pause,

11
src/dialog/demo/index.vue
View File

@@ -29,11 +29,10 @@
<script>
import { ref } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Dialog from '..';
export default {
i18n: {
const i18n = {
'zh-CN': {
alert1: '提示弹窗',
alert2: '提示弹窗（无标题）',
@@ -51,10 +50,11 @@ export default {
roundButton: 'Round Button Style',
componentCall: 'Component Call',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const show = ref(false);
const onClickAlert = () => {
@@ -106,6 +106,7 @@ export default {
};
return {
t,
show,
image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
onClickAlert,

2
src/dialog/test/__snapshots__/demo.spec.js.snap
View File

@@ -121,7 +121,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div class="van-button__content">
<span class="van-button__text">
Confirm dialog
Confirm
</span>
</div>
</button>

25
src/image-preview/demo/index.vue
View File

@@ -35,19 +35,11 @@
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import ImagePreview from '..';
import Toast from '../../toast';
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
];
export default {
i18n: {
const i18n = {
'zh-CN': {
closed: '关闭',
showClose: '展示关闭按钮',
@@ -70,10 +62,18 @@ export default {
componentCall: 'Component Call',
index: (index) => `Page: ${index}`,
},
},
};
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg',
'https://img.yzcdn.cn/vant/apple-3.jpg',
'https://img.yzcdn.cn/vant/apple-4.jpg',
];
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
show: false,
index: 0,
@@ -113,6 +113,7 @@ export default {
return {
...toRefs(state),
t,
images,
onClose,
onChange,

11
src/pull-refresh/demo/index.vue
View File

@@ -43,11 +43,10 @@
<script>
import { computed, onMounted, reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
try: '下拉试试',
text: '刷新次数',
@@ -62,10 +61,11 @@ export default {
successTip: 'Success Tip',
customTips: 'Custom Tips',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
count: 0,
loading: false,
@@ -101,6 +101,7 @@ export default {
return {
...toRefs(state),
t,
tips,
onRefresh,
};

10
src/rate/demo/index.vue
View File

@@ -46,11 +46,10 @@
<script>
import { toRefs, reactive } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
halfStar: '半星',
disabled: '禁用状态',
@@ -71,10 +70,11 @@ export default {
changeEvent: 'Change Event',
toastContent: (value) => `current value：${value}`,
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
value1: 3,
value2: 3,

11
src/search/demo/index.vue
View File

@@ -53,11 +53,10 @@
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
label: '地址',
disabled: '禁用搜索框',
@@ -76,10 +75,11 @@ export default {
customButton: 'Custom Action Button',
listenToEvents: 'Listen to Events',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
value1: '',
value2: '',
@@ -99,6 +99,7 @@ export default {
return {
...toRefs(state),
t,
onSearch,
onCancel,
};

11
src/slider/demo/index.vue
View File

@@ -52,11 +52,10 @@
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
text: '当前值：',
title1: '基础用法',
@@ -79,10 +78,11 @@ export default {
customStyle: 'Custom Style',
customButton: 'Custom Button',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
value1: 50,
value2: [20, 60],
@@ -101,6 +101,7 @@ export default {
return {
...toRefs(state),
t,
onChange,
};
},

11
src/swipe/demo/index.vue
View File

@@ -65,11 +65,10 @@
<script>
import { ref } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
export default {
i18n: {
const i18n = {
'zh-CN': {
title2: '懒加载',
title3: '监听 change 事件',
@@ -86,10 +85,11 @@ export default {
title6: 'Custom indicator',
message: 'Current Swipe index:',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const current = ref(0);
const images = [
'https://img.yzcdn.cn/vant/apple-1.jpg',
@@ -107,6 +107,7 @@ export default {
};
return {
t,
images,
current,
onChange1,

11
src/switch/demo/index.vue
View File

@@ -38,11 +38,10 @@
<script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '../../composables/use-translate';
import { useTranslate } from '@demo/use-translate';
import Dialog from '../../dialog';
export default {
i18n: {
const i18n = {
'zh-CN': {
title: '标题',
confirm: '提醒',
@@ -61,10 +60,11 @@ export default {
customColor: 'Custom Color',
asyncControl: 'Async Control',
},
},
};
export default {
setup() {
const t = useTranslate();
const t = useTranslate(i18n);
const state = reactive({
checked: true,
checked2: true,
@@ -85,6 +85,7 @@ export default {
return {
...toRefs(state),
t,
onUpdateValue,
};
},

7
webpack.config.js
View File

@@ -1,3 +1,5 @@
const { join } = require('path');
module.exports = function () {
if (process.env.BUILD_TARGET === 'package') {
return {};
@@ -8,5 +10,10 @@ module.exports = function () {
entry: {
'site-mobile': ['./docs/site/mobile'],
},
resolve: {
alias: {
'@demo': join(__dirname, 'docs', 'site'),
},
},
};
};