kui-vue
Version:
A lightweight desktop UI component library suitable for Vue.js 2.
82 lines (78 loc) • 2.25 kB
HTML
<html lang="en" theme-mode="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test i18n</title>
<link rel="stylesheet" type="text/css" href="../dist/k-ui.css" />
<script src="https://unpkg.com/vue@2.x"></script>
<script src="https://unpkg.com/dayjs"></script>
<!-- <script src="https://app.unpkg.com/dayjs@1.11.19/files/locale/zh-cn.js"></script> -->
<script src="https://app.unpkg.com/dayjs@1.11.19/files/locale/de.js"></script>
<!-- <script src="https://unpkg.com/vue-i18n@8.x"></script> -->
<script src="../dist/k-ui.umd.js?t=22"></script>
<script src="../dist/locale/en.js"></script>
<script src="../dist/locale/zh-CN.js"></script>
<script src="../dist/locale/de.js"></script>
<script src="../dist/locale/uk.js"></script>
<style>
body,
html {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
}
</style>
</head>
<body>
<div id="app">
<k-config-provider :locale="locale">
<div>
<k-button @click="show">Click me!</k-button>
<k-date-picker></k-date-picker>
<k-modal v-model="visible" title="Welcome" @ok="hide">
Welcome to use kui
</k-modal>
</div>
</k-config-provider>
</div>
</body>
<script>
Vue.use(kui.default);
new Vue({
el: "#app",
data: {
visible: false,
locale: kui_lang_en,
},
methods: {
show: function () {
this.$message.success("success");
this.visible = true;
},
hide: function () {
//this.visible = false;
this.$message.success("success");
},
},
mounted() {
setTimeout(() => {
console.log("change locale", kui_lang_de);
dayjs.locale("de");
this.locale = kui_lang_de;
}, 2000);
},
});
</script>
</html>