Commit fec8f91a authored by 郭志伟's avatar 郭志伟

fix: 调整crIcon 显示方式

parent c523d306
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
}, },
data() { data() {
return { return {
color: this.value, color: this.value || '',
} }
}, },
created() { created() {
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div> <div>
<div class="upload"> <div class="upload">
<div class="upload-img" v-if="img"> <div class="upload-img" v-if="img">
<img :src="img"> <img :src="img" v-if="isUrl">
<cr-icon :type="img" class="upload-img-none-icon" v-else />
<!-- <Icon type="image" size="20" class="upload-img-none-icon"></Icon> -->
<div class="upload-img-cover"> <div class="upload-img-cover">
<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
</div> </div>
...@@ -14,7 +16,7 @@ ...@@ -14,7 +16,7 @@
</div> </div>
</div> </div>
</div> </div>
<Input v-model="img"></Input> <Input v-model="img" @input="handleImgUrlChange"></Input>
</div> </div>
</template> </template>
<script> <script>
...@@ -35,12 +37,31 @@ ...@@ -35,12 +37,31 @@
img: this.value img: this.value
} }
}, },
computed: {
containerId() {
return `container_${this.id}`;
},
isUrl() {
return /(https|http):\/\//gi.test(this.img);
}
},
watch: {
value: {
handler(newVal) {
this.img = newVal;
},
immediate: true
}
},
methods: { methods: {
handleRemove () { handleRemove () {
this.img = ''; this.img = '';
this.$emit('input', this.img); this.$emit('input', this.img);
this.$emit('change', this.img); this.$emit('change', this.img);
}, },
handleImgUrlChange() {
this.$emit('input', this.img);
},
uploadQiniu() { uploadQiniu() {
var uploader = Qiniu.uploader({ var uploader = Qiniu.uploader({
runtimes: 'html5', // 上传模式,依次退化 runtimes: 'html5', // 上传模式,依次退化
...@@ -92,19 +113,7 @@ ...@@ -92,19 +113,7 @@
}); });
}, },
}, },
computed: {
containerId() {
return `container_${this.id}`;
}
},
watch: {
value: {
handler(newVal) {
this.img = newVal;
},
immediate: true
}
},
mounted () { mounted () {
this.uploadQiniu(); this.uploadQiniu();
} }
...@@ -132,12 +141,25 @@ ...@@ -132,12 +141,25 @@
position: relative; position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px; margin-right: 4px;
z-index: 1;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&-none-icon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 1;
line-height: 58px;
border: 1px solid #dddee1;
}
&-cover { &-cover {
display: none; display: none;
position: absolute; position: absolute;
...@@ -146,7 +168,7 @@ ...@@ -146,7 +168,7 @@
left: 0; left: 0;
right: 0; right: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 3;
i { i {
margin: 0 2px; margin: 0 2px;
color: #fff; color: #fff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment