vscode插件i18n-automatically扫描前后vue的对比图
319 lines
<template>
<template>
<div>
<div>
<!-- 1. 测试普通文本节点 -->
<!-- 1. 测试普通文本节点 -->
<h1>欢迎使用测试组件</h1>
<h1>{{ $t('demoTest-test-before-192990bc4a70a2f54-1') }}</h1>
<!-- 2. 测试属性中的中文 -->
<!-- 2. 测试属性中的中文 -->
<input :placeholder="'请输入姓名'" title="姓名输入框" />
<input
:placeholder="$t('demoTest-test-before-192990bc4a70a2f54-2')"
:title="$t('demoTest-test-before-192990bc4a70a2f54-3')"
/>
<!-- 3. 测试 v-bind 中的中文 -->
<!-- 3. 测试 v-bind 中的中文 -->
<p :title="chineseTitle">这是一个段落</p>
<p :title="chineseTitle">
{{ $t('demoTest-test-before-192990bc4a70a2f54-4') }}
</p>
<!-- 4. 测试 v-if 中的中文 -->
<!-- 4. 测试 v-if 中的中文 -->
<span v-if="showChinese">显示中文</span>
<span v-if="showChinese">{{
$t('demoTest-test-before-192990bc4a70a2f54-5')
}}</span>
<!-- 5. 测试 v-for 中的中文 -->
<!-- 5. 测试 v-for 中的中文 -->
<ul>
<ul>
<li v-for="item in chineseList" :key="item.id">{{ item.name }}</li>
<li v-for="item in chineseList" :key="item.id">{{ item.name }}</li>
</ul>
</ul>
<!-- 6. 测试事件处理器中的中文 -->
<!-- 6. 测试事件处理器中的中文 -->
<button @click="handleClick('点击了按钮')">点击我</button>
<button
@click="handleClick($t('demoTest-test-before-192990bc4a70a2f54-6'))"
>
{{ $t('demoTest-test-before-192990bc4a70a2f54-7') }}
</button>
<!-- 7. 测试插值中的中文 -->
<!-- 7. 测试插值中的中文 -->
<p>{{ chineseMessage }}</p>
<p>{{ chineseMessage }}</p>
<!-- 8. 测试混合了变量的中文字符串 -->
<!-- 8. 测试混合了变量的中文字符串 -->
<p>你好，{{ username }}！今天是 {{ today }}。</p>
<p>
{{ $t('demoTest-test-before-192990bc4a70a2f54-8') }} {{ username }}
{{ $t('demoTest-test-before-192990bc4a70a2f54-9') }} {{ today }} 。
</p>
<!-- 9. 测试包含 HTML 的中文字符串 -->
<!-- 9. 测试包含 HTML 的中文字符串 -->
<div v-html="'<span style=\'color: red;\'>这是红色的文字</span>'"></div>
<div
v-html="
`<span style=\'color: red;\'>${$t('demoTest-test-before-192990bc4a70a2f54-10')}</span>`
"
></div>
<!-- 10. 测试自定义组件和属性中的中文 -->
<!-- 10. 测试自定义组件和属性中的中文 -->
<custom-component :custom-prop="'自定义属性值'" custom-attr="自定义属性">
<custom-component
自定义组件内容
:custom-prop="$t('demoTest-test-before-192990bc4a70a2f54-11')"
</custom-component>
:custom-attr="$t('demoTest-test-before-192990bc4a70a2f54-12')"
>{{ $t('demoTest-test-before-192990bc4a70a2f54-13') }}</custom-component
>
<!-- 11. 测试模板字符串 -->
<!-- 11. 测试模板字符串 -->
<p>{{ `这是一个模板字符串，包含变量：${username}` }}</p>
<p>{{ `${$t('demoTest-test-before-192990bc4a70a2f54-14')}${username}` }}</p>
<!-- 12. 测试带 DOM 节点和中文内容的混合字符串 -->
<!-- 12. 测试带 DOM 节点和中文内容的混合字符串 -->
<div
<div
v-html="`这是一段文字，包含<strong>加粗</strong>和<em>斜体</em>内容`"
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-15')}<strong>${$t('demoTest-test-before-192990bc4a70a2f54-16')}</strong>${$t('demoTest-test-before-192990bc4a70a2f54-17')}<em>${$t('demoTest-test-before-192990bc4a70a2f54-18')}</em>${$t('demoTest-test-before-192990bc4a70a2f54-19')}`
"
></div>
></div>
<!-- 13. 测试属性赋值对象中的 value 包含中文 -->
<!-- 13. 测试属性赋值对象中的 value 包含中文 -->
<custom-component
<custom-component
:options="{
:options="`${$t('demoTest-test-before-192990bc4a70a2f54-14')}${username}`"
label: '选项1',
value: '中文值1',
}"
/>
/>
<!-- 14. 测试更复杂的模板字符串场景 -->
<!-- 14. 测试更复杂的模板字符串场景 -->
<p>
<p>
{{
{{
`今天是${today}，${username}有${todoCount}项待办事项：${todoList.join('、')}`
`${$t('demoTest-test-before-192990bc4a70a2f54-20')}，${today}${username}${$t('demoTest-test-before-192990bc4a70a2f54-21')}${todoCount}${$t('demoTest-test-before-192990bc4a70a2f54-22')}${todoList.join('、')}`
}}
}}
</p>
</p>
<!-- 15. 测试 v-bind 对象语法中的中文 -->
<!-- 15. 测试 v-bind 对象语法中的中文 -->
<div
<div
v-bind="{
v-bind="
title: '这是标题',
`${$t('demoTest-test-before-192990bc4a70a2f54-20')}，${today}${username}${$t('demoTest-test-before-192990bc4a70a2f54-21')}${todoCount}${$t('demoTest-test-before-192990bc4a70a2f54-22')}${todoList.join('、')}`
'data-custom': '自定义数据属性',
"
}"
>
>
绑定多个属性
{{ $t('demoTest-test-before-192990bc4a70a2f54-23') }}
</div>
</div>
<!-- 16. 测试复杂的属性绑定with HTML和模板字符串 -->
<!-- 16. 测试复杂的属性绑定with HTML和模板字符串 -->
<custom-component
<custom-component
:custom-attr="templateLiteral"
:custom-attr="templateLiteral"
:another-attr="dynamicValue"
:another-attr="dynamicValue"
>
><span
<span v-html="`包含 <strong>我是HTML</strong> 的内容`"></span>
v-html="
<span v-html="`嵌套的<em>强调</em>和<span>混合内容</span>`"></span>
`${$t('demoTest-test-before-192990bc4a70a2f54-24')}<strong>${$t('demoTest-test-before-192990bc4a70a2f54-25')}</strong>${$t('demoTest-test-before-192990bc4a70a2f54-26')}`
</custom-component>
"
></span>
<span
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-27')}<em>${$t('demoTest-test-before-192990bc4a70a2f54-28')}</em>${$t('demoTest-test-before-192990bc4a70a2f54-29')}<span>${$t('demoTest-test-before-192990bc4a70a2f54-30')}</span>`
"
></span
></custom-component>
<!-- 17. 测试复杂的文本插值with HTML和模板字符串 -->
<!-- 17. 测试复杂的文本插值with HTML和模板字符串 -->
<p
<p
v-html="
v-html="
`这是一个模<strong>板字符串</strong>，包含变量：${templateLiteral}`
`${$t('demoTest-test-before-192990bc4a70a2f54-31')}<strong>${$t('demoTest-test-before-192990bc4a70a2f54-32')}</strong>${$t('demoTest-test-before-192990bc4a70a2f54-33')}${templateLiteral}`
"
"
></p>
></p>
<!-- 18. 测试不完整的HTML标签in模板字符串 -->
<!-- 18. 测试不完整的HTML标签in模板字符串 -->
<p v-html="`这是一个模<em>板字符串</em> ${templateLiteral}`"></p>
<p
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-34')}<em>${$t('demoTest-test-before-192990bc4a70a2f54-35')}</em> ${templateLiteral}`
"
></p>
<!-- 19. 测试v-html with 模板字符串 and 动态内容 -->
<!-- 19. 测试v-html with 模板字符串 and 动态内容 -->
<div
<div
v-html="
v-html="
`<p>这是 <strong>${dynamicContent}</strong> 和 <em>${computedContent}</em></p>`
`<p>${$t('demoTest-test-before-192990bc4a70a2f54-36')}<strong>${dynamicContent}</strong>${$t('demoTest-test-before-192990bc4a70a2f54-37')}<em>${computedContent}</em></p>`
"
"
></div>
></div>
<!-- 20. 测试复杂的v-for场景 -->
<!-- 20. 测试复杂的v-for场景 -->
<ul>
<ul>
<li v-for="item in complexList" :key="item.id">
<li v-for="item in complexList" :key="item.id">
<span v-html="`${item.name}: <strong>${item.value}</strong>`"></span>
<span v-html="`${item.name}: <strong>${item.value}</strong>`"></span>
<p>{{ `描述: ${item.description}` }}</p>
<p>
{{
`${$t('demoTest-test-before-192990bc4a70a2f54-38')}${item.description}`
}}
</p>
</li>
</li>
</ul>
</ul>
<!-- 21. 测试动态组件with复杂prop -->
<!-- 21. 测试动态组件with复杂prop -->
<component :is="currentComponent" :complex-prop="dynamicComponentContent">
<component :is="currentComponent" :complex-prop="dynamicComponentContent"
<p v-html="`组件内容: <em>${dynamicComponentContent}</em>`"></p>
><p
</component>
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-39')}<em>${dynamicComponentContent}</em>`
"
></p
></component>
<!-- 22. 测试使用computed属性在模板中 -->
<!-- 22. 测试使用computed属性在模板中 -->
<p>{{ computedComplexContent }}</p>
<p>{{ computedComplexContent }}</p>
<!-- 23. 测试混合使用指令和复杂内容 -->
<!-- 23. 测试混合使用指令和复杂内容 -->
<div
<div
v-if="showMixed"
v-if="showMixed"
:title="`混合标题: ${mixedTitle}`"
:title="`${$t('demoTest-test-before-192990bc4a70a2f54-40')}${mixedTitle}`"
:class="{ 'dynamic-class': isDynamic }"
:class="{ 'dynamic-class': isDynamic }"
>
>
<span v-html="`混合内容: <strong>${mixedContent}</strong>`"></span>
<span
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-41')}<strong>${mixedContent}</strong>`
"
></span>
</div>
</div>
<!-- 24. 测试特殊字符和HTML实体的处理 -->
<!-- 24. 测试特殊字符和HTML实体的处理 -->
<p>{{ `特殊字符: < > & " ${specialChar}` }}</p>
<p>
{{ `${$t('demoTest-test-before-192990bc4a70a2f54-42')}${specialChar}` }}
</p>
<!-- 25. 测试嵌套的模板字符串 -->
<!-- 25. 测试嵌套的模板字符串 -->
<p>{{ `外层 ${`内层1 ${`最内层 ${deepNestedContent}`}`} 内层2` }}</p>
<p>
{{
`${$t('demoTest-test-before-192990bc4a70a2f54-43')}${`${$t('demoTest-test-before-192990bc4a70a2f54-45')}${`${$t('demoTest-test-before-192990bc4a70a2f54-46')}${deepNestedContent}`}`}${$t('demoTest-test-before-192990bc4a70a2f54-44')}`
}}
</p>
<!-- 26. 测试在事件绑定中使用包含HTML的字符串 -->
<!-- 26. 测试在事件绑定中使用包含HTML的字符串 -->
<button @click="handleClick(`点击了按钮 ${buttonIndex}`)">
<button
<span v-html="`点击了 <strong>按钮</strong> ${buttonIndex}`"></span>
@click="
handleClick(
`${$t('demoTest-test-before-192990bc4a70a2f54-47')}${buttonIndex}`,
)
"
>
<span
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-48')}<strong>${$t('demoTest-test-before-192990bc4a70a2f54-49')}</strong> ${buttonIndex}`
"
></span>
</button>
</button>
<!-- 27. 测试在slot中使用复杂内容 -->
<!-- 27. 测试在slot中使用复杂内容 -->
<slot-component>
<slot-component
<template #default>
><template #default
<p v-html="`默认slot: <em>${defaultSlotContent}</em>`"></p>
><p
</template>
v-html="
<template #named="{ prop }">
`${$t('demoTest-test-before-192990bc4a70a2f54-50')}<em>${defaultSlotContent}</em>`
<p
"
v-html="`具名slot: <strong>${prop}</strong> 和 ${namedSlotContent}`"
></p
></p>
></template>
</template>
<template #named="{ prop }"
</slot-component>
><p
v-html="
`${$t('demoTest-test-before-192990bc4a70a2f54-51')}<strong>${prop}</strong>${$t('demoTest-test-before-192990bc4a70a2f54-52')}${namedSlotContent}`
"
></p></template
></slot-component>
</div>
</div>
</template>
</template>
<script setup>
<script setup>
import i18n from '@/i18n';
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { ref, computed, onMounted, watch, nextTick } from 'vue';
// 基本响应式数据
// 基本响应式数据
const chineseTitle = ref('这是中文标题');
const chineseTitle = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-56'));
const showChinese = ref(true);
const showChinese = ref(true);
const chineseMessage = ref('这是一条中文消息');
const chineseMessage = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-57'));
const username = ref('访客');
const username = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-58'));
const today = ref(new Date().toLocaleDateString('zh-CN'));
const today = ref(new Date().toLocaleDateString('zh-CN'));
// 复杂数据结构
// 复杂数据结构
const chineseList = ref([
const chineseList = ref([
{ id: 1, name: '张三' },
{ id: 1, name: i18n.t('demoTest-test-before-192990bc4a70a2f54-59') },
{ id: 2, name: '李四' },
{ id: 2, name: i18n.t('demoTest-test-before-192990bc4a70a2f54-60') },
{ id: 3, name: '王五' },
{ id: 3, name: i18n.t('demoTest-test-before-192990bc4a70a2f54-61') },
]);
]);
const complexList = ref([
const complexList = ref([
{ id: 1, name: '项目1', value: '<span>值1</span>', description: '描述 <1>' },
{
{ id: 2, name: '项目2', value: '<em>值2</em>', description: '描述 <2>' },
id: 1,
name: i18n.t('demoTest-test-before-192990bc4a70a2f54-62'),
value: `<span>${i18n.t('demoTest-test-before-192990bc4a70a2f54-63')}</span>`,
description: i18n.t('demoTest-test-before-192990bc4a70a2f54-64'),
},
{
id: 2,
name: i18n.t('demoTest-test-before-192990bc4a70a2f54-65'),
value: `<em>${i18n.t('demoTest-test-before-192990bc4a70a2f54-66')}</em>`,
description: i18n.t('demoTest-test-before-192990bc4a70a2f54-67'),
},
{
{
id: 3,
id: 3,
name: '项目3',
name: i18n.t('demoTest-test-before-192990bc4a70a2f54-68'),
value: '<strong>值3</strong>',
value: `<strong>${i18n.t('demoTest-test-before-192990bc4a70a2f54-69')}</strong>`,
description: '描述 <3>',
description: i18n.t('demoTest-test-before-192990bc4a70a2f54-70'),
},
},
]);
]);
const todoList = ref(['买菜', '洗衣服', '遛狗']);
const todoList = ref([
i18n.t('demoTest-test-before-192990bc4a70a2f54-71'),
i18n.t('demoTest-test-before-192990bc4a70a2f54-72'),
i18n.t('demoTest-test-before-192990bc4a70a2f54-73'),
]);
const todoCount = computed(() => todoList.value.length);
const todoCount = computed(() => todoList.value.length);
// 动态和计算属性
// 动态和计算属性
const dynamicValue = ref('动态值');
const dynamicValue = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-74'));
const dynamicTitle = ref('动态标题');
const dynamicTitle = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-75'));
const dynamicContent = ref('动态内容');
const dynamicContent = ref(i18n.t('demoTest-test-before-192990bc4a70a2f54-76'));
const computedValue = computed(() => '计算的值');
const computedValue = computed(() =>
const computedContent = computed(() => '<u>计算的HTML内容</u>');
i18n.t('demoTest-test-before-192990bc4a70a2f54-77'),
);
const computedContent = computed(
() => `<u>${i18n.t('demoTest-test-before-192990bc4a70a2f54-78')}</u>`,
);
const computedComplexContent = computed(() => {
const computedComplexContent = computed(() => {
return `计算的复杂内容: <strong>${dynamicContent.value}</strong> 和 <em>${computedValue.value}</em>`;
return `${i18n.t('demoTest-test-before-192990bc4a70a2f54-79')}<strong>${dynamicContent.value}</strong>${i18n.t('demoTest-test-before-192990bc4a70a2f54-80')}<em>${computedValue.value}</em>`;
});
});
// 条件和控制变量
// 条件和控制变量
const showComplex = ref(true);
const showComplex = ref(true);
const currentComponent = ref('dynamic-component');
const currentComponent = ref('dynamic-component');
const showMixed = ref(true);
const showMixed = ref(true);
const isDynamic = ref(true);
const isDynamic = ref(true);
// 特殊内容
// 特殊内容
const templateLiteral = ref(`
const templateLiteral = ref(`
<div class="container">
<div class="container">
<h2>产品列表</h2>
<h2>${i18n.t('demoTest-test-before-192990bc4a70a2f54-81')}</h2>
<ul>
<ul>
<li><a href="#" title="查看详情">笔记本电脑</a></li>
<li><a href="#" title="查看详情">${i18n.t('demoTest-test-before-192990bc4a70a2f54-82')}</a></li>
<li><a href="#" title="查看详情">智能手机</a></li>
<li><a href="#" title="查看详情">${i18n.t('demoTest-test-before-192990bc4a70a2f54-83')}</a></li>
<li><a href="#" title="查看详情">平板电脑</a></li>
<li><a href="#" title="查看详情">${i18n.t('demoTest-test-before-192990bc4a70a2f54-84')}</a></li>
</ul>
</ul>
<p>总计: <strong>3</strong> 项</p>
<p>${i18n.t('demoTest-test-before-192990bc4a70a2f54-85')}<strong>3</strong>${i18n.t('demoTest-test-before-192990bc4a70a2f54-86')}</p>
</div>
</div>
`);
`);
const specialChar = ref('©');
const specialChar = ref('©');
const deepNestedContent = ref('深层嵌套');
const deepNestedContent = ref(
i18n.t('demoTest-test-before-192990bc4a70a2f54-87'),
);
const buttonIndex = ref(1);
const buttonIndex = ref(1);
const defaultSlotContent = ref('默认slot内容');
const defaultSlotContent = ref(
const namedSlotContent = ref('具名slot内容');
i18n.t('demoTest-test-before-192990bc4a70a2f54-88'),
);
const namedSlotContent = ref(
i18n.t('demoTest-test-before-192990bc4a70a2f54-89'),
);
// 方法
// 方法
const handleClick = (message) => {
const handleClick = (message) => {
console.log(`处理点击事件：${message}`);
console.log(`处理点击事件：${message}`);
alert('你点击了按钮！');
alert(i18n.t('demoTest-test-before-192990bc4a70a2f54-90'));
};
};
// 生命周期钩子
// 生命周期钩子
onMounted(() => {
onMounted(() => {
console.log('组件已挂载');
console.log('组件已挂载');
fetchData();
fetchData();
});
});
// 监听器
// 监听器
watch(username, (newValue, oldValue) => {
watch(username, (newValue, oldValue) => {
console.log(`用户名从 ${oldValue} 变为 ${newValue}`);
console.log(`用户名从 ${oldValue} 变为 ${newValue}`);
});
});
// 异步方法
// 异步方法
const fetchData = async () => {
const fetchData = async () => {
try {
try {
await nextTick();
await nextTick();
console.log('模拟异步数据获取');
console.log('模拟异步数据获取');
chineseMessage.value = '异步获取的新消息';
chineseMessage.value = i18n.t('demoTest-test-before-192990bc4a70a2f54-91');
} catch (error) {
} catch (error) {
console.error('获取数据失败：', error);
console.error('获取数据失败：', error);
}
}
};
};
// 提供给父组件的方法
// 提供给父组件的方法
const updateUsername = (newName) => {
const updateUsername = (newName) => {
username.value = newName;
username.value = newName;
};
};
// 导出给父组件使用的属性和方法
// 导出给父组件使用的属性和方法
defineExpose({
defineExpose({
updateUsername,
updateUsername,
chineseMessage,
chineseMessage,
});
});
</script>
</script>
<script>
<script>
import i18n from '@/i18n';
export default {
export default {
name: 'TestComponent',
name: 'TestComponent',
inheritAttrs: false,
inheritAttrs: false,
props: {
props: {
externalProp: {
externalProp: {
type: String,
type: String,
default: '默认外部属性',
default: i18n.t('demoTest-test-before-192990bc4a70a2f54-53'),
},
},
},
},
emits: ['custom-event'],
emits: ['custom-event'],
data() {
data() {
return {
return {
localData: '本地数据',
localData: i18n.t('demoTest-test-before-192990bc4a70a2f54-54'),
};
};
},
},
computed: {
computed: {
reversedLocalData() {
reversedLocalData() {
return this.localData.split('').reverse().join('');
return this.localData.split('').reverse().join('');
},
},
},
},
methods: {
methods: {
triggerCustomEvent() {
triggerCustomEvent() {
this.$emit('custom-event', '自定义事件触发');
this.$emit(
'custom-event',
i18n.t('demoTest-test-before-192990bc4a70a2f54-55'),
);
},
},
},
},
// 生命周期钩子
// 生命周期钩子
created() {
created() {
console.log('组件创建');
console.log('组件创建');
},
},
mounted() {
mounted() {
console.log('组件挂载');
console.log('组件挂载');
},
},
// 自定义指令
// 自定义指令
directives: {
directives: {
focus: {
focus: {
mounted(el) {
mounted(el) {
el.focus();
el.focus();
},
},
},
},
},
},
// 插件使用示例
// 插件使用示例
install(app) {
install(app) {
app.component('TestComponent', this);
app.component('TestComponent', this);
},
},
};
};
</script>
</script>
<style scoped>
<style scoped>
/* 测试样式中的中文选择器和内容 */
/* 测试样式中的中文选择器和内容 */
.测试-class {
.测试-class {
content: '这是样式内容';
content: '这是样式内容';
}
}
/* 测试伪类中的中文 */
/* 测试伪类中的中文 */
.test-class:hover::after {
.test-class:hover::after {
content: '鼠标悬停效果';
content: '鼠标悬停效果';
}
}
/* 测试媒体查询中的中文注释 */
/* 测试媒体查询中的中文注释 */
@media (max-width: 600px) {
@media (max-width: 600px) {
/* 小屏幕样式 */
/* 小屏幕样式 */
.测试-class {
.测试-class {
font-size: 14px;
font-size: 14px;
}
}
}
}
</style>
</style>