vue-editify 0.1.26 → 0.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,17 +5,21 @@
5
5
  <div @click="current = 'remote'" class="editify-attachment-header-item" :class="{ 'editify-active': current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteAttachment') }}</div>
6
6
  <div class="editify-attachment-header-slider" :class="'editify-' + current" :style="{ backgroundColor: color || '' }"></div>
7
7
  </div>
8
- <!-- 网络图片 -->
8
+ <!-- 远程地址 -->
9
9
  <div class="editify-attachment-remote" v-if="current == 'remote'">
10
- <input v-model.trim="remoteUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
10
+ <input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
11
+ <input v-model.trim="attachmentUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="url" />
11
12
  <div class="editify-attachment-remote-footer" :style="{ color: color || '' }">
12
13
  <span @click="insertRemoteAttachment">{{ $editTrans('insert') }}</span>
13
14
  </div>
14
15
  </div>
15
- <!-- 上传图片 -->
16
+ <!-- 上传地址 -->
16
17
  <div class="editify-attachment-upload" v-else>
17
- <Icon value="upload"></Icon>
18
- <input :multiple="multiple" :accept="acceptValue" @change="selectFile" type="file" />
18
+ <input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
19
+ <div class="editify-attachment-btn" @click="triggerFileInput">
20
+ <Icon value="upload"></Icon>
21
+ <input ref="fileInputRef" :multiple="multiple" :accept="accept" @change="selectFile" type="file" />
22
+ </div>
19
23
  </div>
20
24
  </div>
21
25
  </template>
@@ -36,8 +40,12 @@ const $editTrans = inject<(key: string) => any>('$editTrans')!
36
40
 
37
41
  //当前展示的面板,取值remote和upload
38
42
  const current = ref<'remote' | 'upload'>('upload')
39
- //远程图片链接
40
- const remoteUrl = ref<string>('')
43
+ //附件名称
44
+ const attachmentName = ref<string>('')
45
+ //附件远程地址
46
+ const attachmentUrl = ref<string>('')
47
+ //文件选择框
48
+ const fileInputRef = ref<HTMLInputElement | null>(null)
41
49
 
42
50
  const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
43
51
  return (name: 'remote' | 'upload') => {
@@ -49,47 +57,6 @@ const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
49
57
  return {}
50
58
  }
51
59
  })
52
- const acceptValue = computed<string | undefined>(() => {
53
- if (props.accept === 'rar') {
54
- return 'application/x-rar-compressed'
55
- }
56
- if (props.accept === 'zip') {
57
- return 'application/x-zip-compressed'
58
- }
59
- if (props.accept === 'txt') {
60
- return 'text/plain'
61
- }
62
- if (props.accept === 'image') {
63
- return 'image/*'
64
- }
65
- if (props.accept === 'video') {
66
- return 'video/*'
67
- }
68
- if (props.accept === 'audio') {
69
- return 'aduio/*'
70
- }
71
- if (props.accept === 'html') {
72
- return 'text/html'
73
- }
74
- if (props.accept === 'doc') {
75
- return 'application/msword'
76
- }
77
- if (props.accept === 'xml') {
78
- return 'text/xml'
79
- }
80
- if (props.accept === 'js') {
81
- return 'text/javascript'
82
- }
83
- if (props.accept === 'json') {
84
- return 'application/json'
85
- }
86
- if (props.accept === 'ppt') {
87
- return 'application/vnd.ms-powerpoint'
88
- }
89
- if (props.accept === 'pdf') {
90
- return 'application/pdf'
91
- }
92
- })
93
60
 
94
61
  //获取文件后缀
95
62
  const getSuffix = (file: File) => {
@@ -102,21 +69,24 @@ const getSuffix = (file: File) => {
102
69
  //输入框获取焦点
103
70
  const handleInputFocus = (e: Event) => {
104
71
  if (props.color) {
105
- ;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
72
+ ;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
106
73
  }
107
74
  }
108
75
  //输入框失去焦点
109
76
  const handleInputBlur = (e: Event) => {
110
- ;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
77
+ ;(e.currentTarget as HTMLInputElement).style.borderColor = ''
111
78
  }
112
79
  //插入网络文件
113
80
  const insertRemoteAttachment = () => {
114
- emits('insert', remoteUrl.value)
81
+ emits('insert', attachmentName.value, attachmentUrl.value)
82
+ }
83
+ //触发文件选择框
84
+ const triggerFileInput = () => {
85
+ fileInputRef.value!.click()
115
86
  }
116
87
  //选择文件
117
- const selectFile = async (e: Event) => {
118
- const inputEle = <HTMLInputElement>e.currentTarget
119
- const files = inputEle.files
88
+ const selectFile = async () => {
89
+ const files = fileInputRef.value!.files
120
90
  if (!files || !files.length) {
121
91
  return
122
92
  }
@@ -171,11 +141,11 @@ const selectFile = async (e: Event) => {
171
141
  }
172
142
  }
173
143
  attachments.forEach(url => {
174
- emits('insert', url)
144
+ emits('insert', attachmentName.value, url)
175
145
  })
176
146
  }
177
147
  //清空文件选择框
178
- inputEle.value = ''
148
+ fileInputRef.value!.value = ''
179
149
  }
180
150
 
181
151
  //监听current变更触发change事件
@@ -10,7 +10,7 @@ export const InsertAttachmentProps = {
10
10
  },
11
11
  //可选择的文件类型
12
12
  accept: {
13
- type: String as PropType<'rar' | 'zip' | 'txt' | 'image' | 'video' | 'audio' | 'html' | 'doc' | 'xml' | 'js' | 'json' | 'ppt' | 'pdf' | null>,
13
+ type: String,
14
14
  default: null
15
15
  },
16
16
  //支持的类型数组