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