index.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <div class="demo-uploader-container">
  5. <van-uploader
  6. :max-size="102400"
  7. @oversize="logContent('oversize')"
  8. :before-read="beforeRead(1)"
  9. >
  10. <van-icon name="photograph" />
  11. </van-uploader>
  12. </div>
  13. </demo-block>
  14. <demo-block :title="$t('name')">
  15. <div class="demo-uploader-container">
  16. <van-uploader
  17. name="uploader"
  18. :after-read="toastName"
  19. >
  20. <van-icon name="photograph" />
  21. </van-uploader>
  22. </div>
  23. </demo-block>
  24. <demo-block :title="$t('title2')">
  25. <div class="demo-uploader-container">
  26. <van-uploader
  27. accept="image/gif, image/jpeg"
  28. multiple
  29. :max-size="36000"
  30. @oversize="logContent"
  31. >
  32. <van-icon name="photograph" />
  33. </van-uploader>
  34. </div>
  35. </demo-block>
  36. </demo-section>
  37. </template>
  38. <script>
  39. export default {
  40. i18n: {
  41. 'zh-CN': {
  42. name: '标识名称',
  43. title2: '设置 input 属性'
  44. },
  45. 'en-US': {
  46. name: 'Name',
  47. title2: 'Set input attrs'
  48. }
  49. },
  50. methods: {
  51. logContent(file) {
  52. console.log(file);
  53. },
  54. beforeRead(index) {
  55. return file => {
  56. console.log(index, file);
  57. };
  58. },
  59. toastName(file, detail) {
  60. this.$toast(detail.name);
  61. }
  62. }
  63. };
  64. </script>
  65. <style lang="less">
  66. .demo-uploader {
  67. &-container {
  68. padding: 10px 20px;
  69. font-size: 20px;
  70. }
  71. }
  72. </style>