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

fix: 调整crIcon 显示方式

parent c523d306
......@@ -11,7 +11,7 @@
},
data() {
return {
color: this.value,
color: this.value || '',
}
},
created() {
......
......@@ -2,7 +2,9 @@
<div>
<div class="upload">
<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">
<Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
</div>
......@@ -14,7 +16,7 @@
</div>
</div>
</div>
<Input v-model="img"></Input>
<Input v-model="img" @input="handleImgUrlChange"></Input>
</div>
</template>
<script>
......@@ -35,12 +37,31 @@
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: {
handleRemove () {
this.img = '';
this.$emit('input', this.img);
this.$emit('change', this.img);
},
handleImgUrlChange() {
this.$emit('input', this.img);
},
uploadQiniu() {
var uploader = Qiniu.uploader({
runtimes: 'html5', // 上传模式,依次退化
......@@ -92,19 +113,7 @@
});
},
},
computed: {
containerId() {
return `container_${this.id}`;
}
},
watch: {
value: {
handler(newVal) {
this.img = newVal;
},
immediate: true
}
},
mounted () {
this.uploadQiniu();
}
......@@ -132,12 +141,25 @@
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
z-index: 1;
img {
width: 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 {
display: none;
position: absolute;
......@@ -146,7 +168,7 @@
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 3;
i {
margin: 0 2px;
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