1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| <template>
| <div>
| <el-dialog
| v-bind="$attrs"
| title="外部资源引用"
| width="600px"
| :close-on-click-modal="false"
| v-on="$listeners"
| @open="onOpen"
| @close="onClose"
| >
| <el-input
| v-for="(item, index) in resources"
| :key="index"
| v-model="resources[index]"
| class="url-item"
| placeholder="请输入 css 或 js 资源路径"
| prefix-icon="el-icon-link"
| clearable
| >
| <el-button
| slot="append"
| icon="el-icon-delete"
| @click="deleteOne(index)"
| />
| </el-input>
| <el-button-group class="add-item">
| <el-button
| plain
| @click="addOne('https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js')"
| >
| jQuery1.8.3
| </el-button>
| <el-button
| plain
| @click="addOne('https://unpkg.com/http-vue-loader')"
| >
| http-vue-loader
| </el-button>
| <el-button
| icon="el-icon-circle-plus-outline"
| plain
| @click="addOne('')"
| >
| 添加其他
| </el-button>
| </el-button-group>
| <div slot="footer">
| <el-button @click="close">
| 取消
| </el-button>
| <el-button
| type="primary"
| @click="handelConfirm"
| >
| 确定
| </el-button>
| </div>
| </el-dialog>
| </div>
| </template>
| <script>
| export default {
| components: {},
| inheritAttrs: false,
| props: ['originResource'],
| data() {
| return {
| resources: null
| }
| },
| computed: {},
| watch: {},
| created() {},
| mounted() {},
| methods: {
| onOpen() {
| this.resources = this.originResource.length ? JSON.parse(JSON.stringify(this.originResource)) : ['']
| },
| onClose() {
| },
| close() {
| this.$emit('update:visible', false)
| },
| handelConfirm() {
| const results = this.resources.filter(item => !!item) || []
| this.$emit('save', results)
| this.close()
| if (results.length) {
| this.resources = results
| }
| },
| deleteOne(index) {
| this.resources.splice(index, 1)
| },
| addOne(url) {
| if (this.resources.indexOf(url) > -1) {
| this.$message('资源已存在')
| } else {
| this.resources.push(url)
| }
| }
| }
| }
|
| </script>
| <style lang="scss" scoped>
| .add-item{
| margin-top: 8px;
| }
| .url-item{
| margin-bottom: 12px;
| }
| </style>
|
|
