Vue3 + Element Plus 常用代码片段

1
<el-form-item label="现场照片" prop="urls">
2
  <el-upload
3
    v-model:file-list="imgFileList1"
4
    :action="action"
5
    :headers="imgToken"
6
    :on-success="handleSuccess1"
7
    list-type="picture-card"
8
    :before-upload="beforeAvatarUpload"
9
    :on-preview="handlePictureCardPreview"
10
    :on-remove="handleRemove1"
11
  >
12
    <el-icon>
13
      <Plus />
14
    </el-icon>
15
  </el-upload>
16
</el-form-item>

1
beforeAvatarUpload(file) {
2
  const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
3
  const imgSize = file.size / 1024 / 1024 < 5;
4
  if (!imgType) {
5
    this.$utils.toast('图片只能是 JPG/PNG 格式!', 'error');
6
  }
7
  if (!imgSize) {
8
    this.$utils.toast('图片大小不能超过 5MB!', 'error');
9
  }
10
  return imgType && imgSize;
11
},
12

13
handlePictureCardPreview(uploadFile) {
14
  this.dialogImageUrl = uploadFile.url;
15
  this.dialogVisible = true;
16
},
17

18
handleRemove1(res) {
19
  let index = this.imgFileListForm.findIndex(e => e === res.url);
20
  this.imgFileListForm.splice(index, 1);
21
},
22

23
handleSuccess1(res) {
24
  if (res.code === 200) {
25
    this.imgFileListForm.push(res.data.link);
26
  }
27
},

1
<template>
2
  <div>
3
    <el-form :model="info" ref="forms">
4
      <el-table ref="tableRef" :data="info.data" border>
5
        <el-table-column align="center" property="name" label="*姓名">
6
          <template #default="row">
7
            <el-form-item :prop="'data.' + row.$index + '.name'" :rules="formRules.name">
8
              <el-input placeholder="请输入姓名" v-model="info.data[row.$index].name" />
9
            </el-form-item>
10
          </template>
11
        </el-table-column>
12
        <el-table-column align="center" property="role" label="角色">
13
          <template #default="row">
14
            <el-form-item :prop="'data.' + row.$index + '.role'" :rules="formRules.role">
15
              <el-input placeholder="请输入角色" v-model="info.data[row.$index].role" />
16
            </el-form-item>
17
          </template>
18
        </el-table-column>
19
      </el-table>
20
    </el-form>
21
    <el-button type="primary" @click="submitForm()">Submit</el-button>
22
  </div>
23
</template>
24

25
<script setup lang="ts">
26
import { ref, reactive } from 'vue'
27
import type { FormInstance } from 'element-plus'
28

29
let info: any = reactive({
30
  data: [
31
    { id: 0, name: '', role: '' },
32
    { id: 1, name: '', role: '' }
33
  ]
34
})
35

36
const formRules = reactive({
37
  name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
38
  role: [{ required: true, message: '请输入角色', trigger: 'change' }]
39
})
40

41
const forms = ref<FormInstance>()
42
const submitForm = async () => {
43
  if (!forms) return
44
  return await forms.value?.validate((valid: any) => {
45
    if (valid) {
46
      console.log('submit!')
47
    } else {
48
      console.log('error submit!')
49
      return false
50
    }
51
  })
52
}
53
</script>

1
<template>
2
  <div>
3
    <video ref="videoPlayer" controls width="640" height="360"></video>
4
  </div>
5
</template>
6

7
<script>
8
import flvjs from 'flv.js';
9

10
export default {
11
  data() {
12
    return {
13
      flvPlayer: null,
14
      videoSource: 'http://example.com/live/stream.flv'
15
    };
16
  },
17
  mounted() {
18
    this.initFlvPlayer();
19
  },
20
  beforeDestroy() {
21
    this.destroyFlvPlayer();
22
  },
23
  methods: {
24
    initFlvPlayer() {
25
      if (flvjs.isSupported()) {
26
        const videoPlayer = this.$refs.videoPlayer;
27
        const flvPlayer = flvjs.createPlayer({
28
          type: 'flv',
29
          url: this.videoSource
30
        });
31
        flvPlayer.attachMediaElement(videoPlayer);
32
        flvPlayer.load();
33
        flvPlayer.play();
34
        this.flvPlayer = flvPlayer;
35
      } else {
36
        console.error('FLV.js is not supported in this browser.');
37
      }
38
    },
39
    destroyFlvPlayer() {
40
      if (this.flvPlayer) {
41
        this.flvPlayer.destroy();
42
      }
43
    }
44
  }
45
};
46
</script>