index.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <van-button
  5. :text="$t('showNotify')"
  6. @click="showNotify"
  7. />
  8. </demo-block>
  9. <demo-block :title="$t('customConfig')">
  10. <van-button
  11. :text="$t('showCustomNotify')"
  12. @click="showCustomNotify"
  13. />
  14. </demo-block>
  15. </demo-section>
  16. </template>
  17. <script>
  18. export default {
  19. i18n: {
  20. 'zh-CN': {
  21. content: '通知内容',
  22. customConfig: '自定义配置',
  23. showNotify: '显示消息通知',
  24. showCustomNotify: '显示自定义消息通知'
  25. },
  26. 'en-US': {
  27. content: 'Notify Message',
  28. customConfig: 'Custom Config',
  29. showNotify: 'Show Notify',
  30. showCustomNotify: 'Show Custom Notify'
  31. }
  32. },
  33. methods: {
  34. showNotify() {
  35. this.$notify(this.$t('content'));
  36. },
  37. showCustomNotify() {
  38. this.$notify({
  39. message: this.$t('content'),
  40. duration: 1000,
  41. background: '#1989fa'
  42. });
  43. }
  44. }
  45. };
  46. </script>
  47. <style lang="less">
  48. .demo-notify {
  49. .van-button {
  50. margin-left: 15px;
  51. }
  52. }
  53. </style>